Merge pull request #144 from yoonc01/feat/#111/MonthlyChartVote-List

feat: #111/차트 투표하기 버튼 이벤트 구현

Author: doctor-taco

src/apis/monthlyChartApi.js

@@ -18,9 +18,14 @@ export async function getLists(gender, cursor = 0, pageSize) {
   }
 }
 
-export async function postVotes() {
+export async function postVotes(idolId) {
   try {
-    const res = await instance.post('/votes');
+    const loadData = { idolId };
+    const res = await instance.post('/votes', loadData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
     return res.data;
   } catch (error) {
     console.error(error);

src/components/Modal.jsx

@@ -1,25 +1,37 @@
 import closeButton from '@/assets/icons/closeButton.svg';
 import leftTopGradient from '@/assets/images/leftTopGradient.png';
 import exitArrow from '@/assets/icons/exitArrow.svg';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 function Modal({ title, onClose, children }) {
+  const [isMobile, setIsMobile] = useState(false);
+
   useEffect(() => {
     document.body.style.overflow = 'hidden'; // 모달창 열려 있으면 뒤의 배경 스크롤 막기
     return () => {
       document.body.style.overflow = 'auto'; // 모달 닫힐 때 스크롤 허용
     };
   }, []);
 
-  if (title.includes('아이돌') && window.innerWidth <= 375) {
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (title.includes('아이돌') && isMobile) {
     return (
-      <div className="fixed top-0 left-0 size-full bg-midnightBlack">
+      <div className="fixed flex flex-col top-0 left-0 size-full bg-midnightBlack">
         <img
           src={leftTopGradient}
           alt="leftTopGradient"
           className="absolute w-[200px] h-[272px] opacity-70 z-10 pointer-events-none"
         />
-        <div className="fixed top-2 left-0 w-full h-screen font-pretendard mx-[24px]">
+        <div className="fixed top-2 left-0 w-full h-screen font-pretendard px-[24px]">
           <div className="w-full h-[44px] flex justify-start items-center">
             <img
               src={exitArrow}
@@ -40,7 +52,7 @@ function Modal({ title, onClose, children }) {
   }
 
   return (
-    <div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-black/80 font-pretendard">
+    <div className="fixed top-0 left-0 w-[100%] h-[100%] flex justify-center items-center bg-midnightBlack/80 font-pretendard">
       <div className="relative bg-deepCharcoal p-[20px] rounded-[8px] py-[24px] px-[16px]">
         <img
           src={closeButton}

src/components/modalContent/MonthlyChartVoteList.jsx

@@ -1,8 +1,29 @@
+import { useEffect, useState } from 'react';
 import MonthlyChartItem from '@/pages/listPage/monthlyChart/MonthlyChartItem';
 
-const MonthlyChartVoteList = ({ idols, selectedIdol, setSelectedIdol }) => {
+const MonthlyChartVoteList = ({
+  idols,
+  selectedIdol,
+  setSelectedIdol,
+  children,
+}) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
-    <div className="flex flex-col mt-[24px] mb-[40px]">
+    <div
+      style={{ height: isMobile ? 'calc(100vh - 156px)' : '693px' }}
+      className={`flex flex-col overflow-y-scroll scrollbar-hidden w-full mt-[24px] ${isMobile ? 'mb-[40px]' : 'mb-[400px]'}`}
+    >
       {idols.map((idol, idx) => (
         <div key={idol.id} onClick={() => setSelectedIdol(idol.id)}>
           <MonthlyChartItem idol={idol} rank={idx + 1} layout="vote">
@@ -19,6 +40,7 @@ const MonthlyChartVoteList = ({ idols, selectedIdol, setSelectedIdol }) => {
           <div className="w-full h-[1px] bg-white bg-opacity-10 my-[4px]"></div>
         </div>
       ))}
+      {children}
     </div>
   );
 };

src/components/modalContent/MonthlyChartVoteModal.jsx

@@ -1,13 +1,16 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import MonthlyChartVoteList from '@/components/modalContent/MonthlyChartVoteList';
-import { getLists } from '@/apis/monthlyChartApi';
+import { getLists, postVotes } from '@/apis/monthlyChartApi';
 import PrimaryButton from '@/components/PrimaryButton';
+import { spendCredits } from '../../utils/creditStorage';
 
-const MonthlyChartVoteModal = ({ gender }) => {
+const MonthlyChartVoteModal = ({ gender, onClickVoteCredit, closeModal }) => {
   const [cursor, setCursor] = useState(0);
   const [idolData, setIdolData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [selectedIdol, setSelectedIdol] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const observerRef = useRef();
 
   const loadIdolData = async () => {
     setLoading(true);
@@ -26,11 +29,21 @@ const MonthlyChartVoteModal = ({ gender }) => {
     }
   };
 
-  const loadMoreData = () => {
-    if (cursor === null) {
-      alert('불러올 데이터가 없습니다.');
+  const handleVoteClick = async () => {
+    const result = spendCredits(1000);
+    if (result === 'NOT-ENOUGH') {
+      alert('앗! 투표하기 위한 크레딧이 부족해요');
     } else {
-      loadIdolData();
+      try {
+        const voteResult = await postVotes(selectedIdol);
+        alert('투표 완료!');
+
+        if (onClickVoteCredit) onClickVoteCredit();
+        closeModal();
+      } catch (error) {
+        console.error(error);
+        alert('투표에 실패했습니다. 다시 시도해 주세요.');
+      }
     }
   };
 
@@ -40,22 +53,58 @@ const MonthlyChartVoteModal = ({ gender }) => {
     loadIdolData();
   }, [gender]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (cursor === null) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) loadIdolData();
+      },
+      { threshold: 0.2 }
+    );
+    if (observerRef.current) observer.observe(observerRef.current);
+    return () => observer.disconnect();
+  }, [cursor]);
+
   return (
-    <div className="w-[calc(100%-48px)] h-[693px] tablet:w-[525px] tablet:h-[693px] pc:w-[525px] pc:h-[693px] overflow-y-auto">
+    <div
+      className={`relative overflow-hidden ${isMobile ? 'w-[calc(100%-24px)] h-full' : 'w-[525px] h-[693px]'}`}
+    >
       {loading ? (
         <div className="text-center text-white">로딩 중입니다...</div>
       ) : (
         <MonthlyChartVoteList
           idols={idolData}
           selectedIdol={selectedIdol}
           setSelectedIdol={setSelectedIdol}
-        />
+        >
+          <div
+            className="w-full h-[40px]"
+            ref={cursor !== null ? observerRef : null}
+          ></div>
+        </MonthlyChartVoteList>
       )}
-      <div className="fixed bottom-0 w-[calc(100%-48px)] h-[106px] text-white leading-[26px] bg-midnightBlack/80 tablet:w-[525px] pc:w-[525px] tablet:bg-transparent pc:bg-transparent">
-        <PrimaryButton className="w-full h-[42px] font-bold text-[14px] font-pretendard">
+      <div
+        style={{ width: isMobile ? 'calc(100vw - 68px)' : '525px' }}
+        className={`absolute text-white leading-[26px] ${isMobile ? 'bottom-[64px] h-[112px] bg-midnightBlack' : 'bottom-0 h-[72px] bg-deepCharcoal'}`}
+      >
+        <PrimaryButton
+          onClickFunc={handleVoteClick}
+          className="w-full h-[42px] font-bold text-[14px] font-pretendard"
+        >
           투표하기
         </PrimaryButton>
-        <p className="font-medium text-[12px] text-center">
+        <p className="font-medium text-[12px] text-center mt-[8px] tablet:mt-[12px] pc:mt-[12px]">
           투표하는 데<span className=" text-coralRed"> 1000 크레딧</span>이
           소모됩니다.
         </p>

src/index.css

@@ -6,3 +6,14 @@ html,
 body {
   @apply bg-midnightBlack;
 }
+
+@layer utilities {
+  .scrollbar-hidden {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+  }
+}

src/pages/listPage/ListPage.jsx

@@ -111,7 +111,9 @@ function ListPage() {
           {modalStep === 'donationSuccess' && (
             <DonationSuccess onConfirm={closeModal} />
           )}
-          {modalStep === 'vote' && <MonthlyChartVoteModal gender={gender} />}
+          {modalStep === 'vote' && (
+            <MonthlyChartVoteModal closeModal={closeModal} gender={gender} />
+          )}
         </Modal>
       )}
     </div>

src/utils/creditStorage.js

@@ -33,5 +33,6 @@ export const spendCredits = (amount) => {
 
     const newCredits = Math.max(currentCredits - amount, 0);
     localStorage.setItem('credits', newCredits);
+    return 'SUCCESS';
   }
 };