✨ feat: 크레딧 부족한 상태로 투표하기 누르면 NoCreditModal뜨게 변경 (#50)

* 📝 docs: apis폴더및 하위파일 생성

* ✨ feat: utils/createQueryParams.js 쿼리 자동 생성 유틸 추가

* ✨ feat: get idols, donations, chart api 구현

* ✅ test: App.jsx에 getIdols 이미지 렌더링 실험

* 📝 docs: Chart 컴포넌트 생성 App.jsx 시작 준비

* ♻️ refactor: getIdolsApi, getDonationsApi 리스트까지 받아오는거에서 데이터까지만 받아오게 변경

* ✨ feat: chart.jsx 구조만형성

* 🐛 fix: map 잘 렌더링되게

* ♻️ refactor: 쿼리 생성함수 코드 간결하게 바꿈

* ♻️ refactor: getIdols, getCharts useState객체를 파라미터로 전달해서 검색조건을 설정하는 구조로 바바꿨습니다.

* ✨ feat: useMediaQuery 커스텀훅 추가

* ✨ feat: 투표하기 기능을 제외한 모든 chart기능 구현

* ✨ feat: postVotes 구현

* 🧪 test

* ✨ feat: 쓸모없는 아이콘 제거, 투표시스템 편리하게 바꿈, css 예쁘게 수정

* ✨ feat: voteModal 모바일 반응형 css 완벽구현

* ✨ feat: Dialog.jsx

* 🔥remove: dialog chart브랜치 완성 후 이어서 하도록 하겠습니다.

* 🔥 remove: 불필요한 주석 제거

* ✅ test: mobile로 접속해서 테스트

* ✨ feat: 로컬스토리지 구현 차트 투표하기 클릭시 voteModal 소환

* 📝 Docs: 잘못 merge된 postvote.js 삭제

* ✨ feat: chart구현

* ♻️ refactor: chart 1차 리팩토링(ChartList 컴포넌트 분리)

* ♻️ refactor: chart컴포넌트 커스텀훅으로 분리

* 🔀 Merge branch 'main' of https://github.com/BestSprinters/i-Konnect into feat/chart

* ♻️ refactor: 최종점검

* 🐛 fix: 크레딧 부족할 때 투표시, 모달창 안꺼지게 하고 선택된 아이돌 그대로 유지

* ♻️ refactor: 프롭 받는 방식 변화

* 🐛 fix: 선택된 성별에 따라 투표창뜨게함

* 🐛 fix: 크레딧 충전시 바로 투표할 수 있게 변경

* Merge branch 'main' of https://github.com/BestSprinters/i-Konnect into feat/chart

* ✨ feat: 크레딧없이 투표하면 NoCreditModal 띄움

* 📦 chore: merge로인해 중복된 코드 수정

src/components/Chart.jsx

@@ -1,20 +1,18 @@
-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';
 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>
   );
 }

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 (

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,
   );

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}

src/hooks/useToggle.js

@@ -9,7 +9,7 @@ const useToggle = (initialToggle) => {
     setToggle((prevToggle) => !prevToggle);
   };
 
-  return { toggle, handleToggle };
+  return [toggle, handleToggle];
 };
 
 export default useToggle;