diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx
index b8baba8..f1e731f 100644
--- a/src/components/Chart.jsx
+++ b/src/components/Chart.jsx
@@ -1,7 +1,4 @@
-import { useContext } from 'react';
-
 import chartIcon from '../assets/imgs/ic_chart.svg';
-import CreditContext from '../contexts/CreditAmount';
 import useChartLoader from '../hooks/useChartLoader';
 import useMediaQuery from '../hooks/useMediaQuery';
 import useToggle from '../hooks/useToggle';
@@ -9,12 +6,13 @@ import Button from './Button';
 import ChartList from './ChartList';
 import ChartMoreButton from './ChartMoreButton';
 import ChoiceGender from './ChoiceGender';
+import NoCreditModal from './NoCreditModal';
 import VoteModal from './VoteModal';
 
 function Chart() {
-  const { creditAmount, setCreditAmount } = useContext(CreditContext);
   const matches = useMediaQuery('(min-width: 1280px)');
-  const { toggle, handleToggle } = useToggle();
+  const [voteToggle, handleVoteToggle] = useToggle();
+  const [noCreditToggle, handleNoCreditToggle] = useToggle();
   const { chartList, hasMore, updateChartOption, setChartList, chartOption } =
     useChartLoader({
       gender: 'female',
@@ -28,7 +26,7 @@ function Chart() {
         <h3 className="1 grow text-base font-bold text-whitePrimary tablet:text-xl desktop:text-2xl">
           이달의 차트
         </h3>
-        <Button type="smallSquare" onClick={handleToggle}>
+        <Button type="smallSquare" onClick={handleVoteToggle}>
           <div className="flex items-center justify-center gap-1">
             <img alt="chartIcon" src={chartIcon} />
             <p> 차트 투표하기</p>
@@ -56,13 +54,13 @@ function Chart() {
       )}
       <VoteModal
         gender={chartOption.gender}
-        toggle={toggle}
-        handleToggle={handleToggle}
+        toggle={voteToggle}
+        handleVoteToggle={handleVoteToggle}
+        handleNoCreditToggle={handleNoCreditToggle}
         setChartList={setChartList}
         chartList={chartList}
-        creditAmount={creditAmount}
-        setCreditAmount={setCreditAmount}
       />
+      <NoCreditModal open={noCreditToggle} onClose={handleNoCreditToggle} />
     </div>
   );
 }
diff --git a/src/components/MyCredit.jsx b/src/components/MyCredit.jsx
index 260e82f..3ded635 100644
--- a/src/components/MyCredit.jsx
+++ b/src/components/MyCredit.jsx
@@ -7,7 +7,7 @@ import formattedNumber from '../utils/formattedNumber';
 import ChargeCreditModal from './ChargeCreditModal';
 
 function MyCredit() {
-  const { toggle, handleToggle } = useToggle();
+  const [toggle, handleToggle] = useToggle();
   const { creditAmount } = useContext(CreditContext);
 
   return (
diff --git a/src/components/SponsorCard.jsx b/src/components/SponsorCard.jsx
index bdb0300..1af7848 100644
--- a/src/components/SponsorCard.jsx
+++ b/src/components/SponsorCard.jsx
@@ -9,7 +9,7 @@ import DonateModal from './DonateModal';
 import ProgressBar from './ProgressBar';
 
 function SponsorCard({ donation }) {
-  const { toggle, handleToggle } = useToggle();
+  const [toggle, handleToggle] = useToggle();
   const [receivedDonations, setReceivedDonations] = useState(
     donation.receivedDonations,
   );
diff --git a/src/components/VoteModal.jsx b/src/components/VoteModal.jsx
index 07fdd7b..c383810 100644
--- a/src/components/VoteModal.jsx
+++ b/src/components/VoteModal.jsx
@@ -21,12 +21,12 @@ const getVoteResponsibleStyle = (isFullModal) => {
 function VoteModal({
   gender = 'female',
   toggle,
-  handleToggle,
+  handleVoteToggle,
+  handleNoCreditToggle,
   setChartList,
   chartList,
-  creditAmount,
-  setCreditAmount,
 }) {
+  const { creditAmount, setCreditAmount } = useContext(CreditContext);
   const [voteList, setVoteList] = useState([]);
   const { setCreditAmount: setmyCredit } = useContext(CreditContext);
   const [selectedIdol, setSelectedIdol] = useState();
@@ -49,8 +49,9 @@ function VoteModal({
   };
 
   const handleVoteIdol = async () => {
+    handleVoteToggle();
     if (creditAmount < 1000) {
-      throw new Error('Credit amount is less than required 1000 credits.');
+      handleNoCreditToggle();
     }
 
     const receivedVotes = await postVotes(selectedIdol);
@@ -67,11 +68,10 @@ function VoteModal({
       return newCreditAmount;
     });
     setSelectedIdol('');
-    handleToggle();
   };
 
   useEffect(() => {
-    setVoteOption((prev) => ({ ...prev, gender: `${gender}` }));
+    setVoteOption((prev) => ({ ...prev, gender }));
   }, [gender]);
 
   useEffect(() => {
@@ -88,7 +88,7 @@ function VoteModal({
   return (
     <Modal
       open={toggle}
-      onClose={handleToggle}
+      onClose={handleVoteToggle}
       type="wide"
       title={voteTitle}
       isFullModal={isFullModal}
diff --git a/src/hooks/useToggle.js b/src/hooks/useToggle.js
index 3756ad6..2ae3b1c 100644
--- a/src/hooks/useToggle.js
+++ b/src/hooks/useToggle.js
@@ -9,7 +9,7 @@ const useToggle = (initialToggle) => {
     setToggle((prevToggle) => !prevToggle);
   };
 
-  return { toggle, handleToggle };
+  return [toggle, handleToggle];
 };
 
 export default useToggle;