From fd793016c84408c6e6c519c8aa8c45dcd29a7c4e Mon Sep 17 00:00:00 2001 From: spde3289 Date: Wed, 19 Nov 2025 19:59:01 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20api=EC=9A=94=EC=B2=AD=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ListPage/components/chart/ChartSection.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/ListPage/components/chart/ChartSection.jsx b/src/pages/ListPage/components/chart/ChartSection.jsx index a0c279c..62b5ce7 100644 --- a/src/pages/ListPage/components/chart/ChartSection.jsx +++ b/src/pages/ListPage/components/chart/ChartSection.jsx @@ -1,4 +1,4 @@ -import client from "@/api/client"; +import { getChartList } from "@/api/chartClient"; import HighlightButton from "@/components/common/HighlightButton"; import useModal from "@/hooks/useModal"; import { useEffect, useState } from "react"; @@ -25,9 +25,8 @@ const ChartSection = () => { useEffect(() => { const loadIdols = async () => { try { - const res = await client.get("/idols", { params: { pageSize: 100 } }); - const idols = res.data.list; - + const res = await getChartList({ pageSize: 10, gender: gender }); + const idols = res.idols; const filtered = idols.filter((i) => i.gender === gender); const sorted = filtered From b69d48c71f53d8919890570ae6175b5adb6c5112 Mon Sep 17 00:00:00 2001 From: spde3289 Date: Thu, 20 Nov 2025 15:40:18 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=9D=B4=EB=8B=AC=EC=9D=98=20?= =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81,=20=ED=81=AC=EB=A0=88=EB=94=A7=20=EC=B0=A8=EA=B0=90?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/chart/ChartSection.jsx | 12 ++-- .../ListPage/components/chart/VoteModal.jsx | 56 ++++++------------- 2 files changed, 25 insertions(+), 43 deletions(-) diff --git a/src/pages/ListPage/components/chart/ChartSection.jsx b/src/pages/ListPage/components/chart/ChartSection.jsx index 62b5ce7..3401559 100644 --- a/src/pages/ListPage/components/chart/ChartSection.jsx +++ b/src/pages/ListPage/components/chart/ChartSection.jsx @@ -15,7 +15,7 @@ const ChartSection = () => { const getInitWidth = () => (typeof window !== "undefined" ? window.innerWidth : BREAKPOINT); const [gender, setGender] = useState("female"); - const { isOpen, onOpen, onClose } = useModal(); + const { isOpen, onOpen, onClose, modalContent, setModalContent } = useModal(); const [windowWidth, setWindowWidth] = useState(getInitWidth()); const [visibleCount, setVisibleCount] = useState(getInitWidth() >= BREAKPOINT ? 10 : 5); @@ -40,12 +40,13 @@ const ChartSection = () => { })); setList(sorted); + setModalContent({ list: sorted, gender: gender }); } catch (e) { showBoundary(e); } }; loadIdols(); - }, [gender, showBoundary]); + }, [gender, showBoundary, setModalContent]); useEffect(() => { const onResize = () => setWindowWidth(window.innerWidth); @@ -108,7 +109,10 @@ const ChartSection = () => { { + onOpen(); + setModalContent({ list: list, gender: gender }); + }} $customStyle={css` display: flex; width: 128px; @@ -153,7 +157,7 @@ const ChartSection = () => { - {isOpen && } + {isOpen && } ); }; diff --git a/src/pages/ListPage/components/chart/VoteModal.jsx b/src/pages/ListPage/components/chart/VoteModal.jsx index 9d05196..eb5432d 100644 --- a/src/pages/ListPage/components/chart/VoteModal.jsx +++ b/src/pages/ListPage/components/chart/VoteModal.jsx @@ -1,49 +1,23 @@ import client from "@/api/client"; +import useCreditContext from "@/app/contexts/CreditContext"; import HighlightButton from "@/components/common/HighlightButton"; -import { creditStorage } from "@/storage/credit.storage"; import { media } from "@/styles/media"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { css } from "styled-components"; import CreditLimitModal from "./CreditLimitModal"; import ListItem from "./ListItem"; import * as S from "./VoteModal.style"; -const VoteModal = ({ onClose, initialGender = "female" }) => { - const [gender] = useState(initialGender); - const [list, setList] = useState([]); - const [selectedId, setSelectedId] = useState(null); +const NEED_CREDIT = 1000; +const VoteModal = ({ onClose, modalContent }) => { + const [list, setList] = useState(modalContent.list); + const [selectedId, setSelectedId] = useState(null); + const [_, { isEnoughCredit, subtractCredit }] = useCreditContext(); const [isCreditModalOpen, setIsCreditModalOpen] = useState(false); - - useEffect(() => { - const fetchIdols = async () => { - const res = await client.get("/idols"); - const idols = res.data.list; - - const filtered = idols.filter((i) => i.gender === gender); - - const sorted = filtered - .sort((a, b) => b.totalVotes - a.totalVotes) - .map((i, idx) => ({ - id: i.id, - name: i.name, - img: i.profilePicture, - votes: i.totalVotes, - rank: idx + 1, - })); - - setList(sorted); - }; - - fetchIdols(); - }, [gender]); - const submit = async () => { if (!selectedId) return; - - const currentCredit = creditStorage.get() || 0; - - if (currentCredit < 1000) { + if (!isEnoughCredit(NEED_CREDIT)) { setIsCreditModalOpen(true); return; } @@ -51,9 +25,9 @@ const VoteModal = ({ onClose, initialGender = "female" }) => { const res = await client.post("/votes", { idolId: selectedId }); const updated = res.data.idol; - creditStorage.set(currentCredit - 1000); + subtractCredit(NEED_CREDIT); - const newList = list + const newList = modalContent.list .map((i) => (i.id === updated.id ? { ...i, votes: updated.totalVotes } : i)) .sort((a, b) => b.votes - a.votes) .map((i, idx) => ({ ...i, rank: idx + 1 })); @@ -68,12 +42,16 @@ const VoteModal = ({ onClose, initialGender = "female" }) => { e.stopPropagation()}> - {gender === "female" ? "이달의 여자 아이돌" : "이달의 남자 아이돌"} + + {modalContent.gender === "female" ? "이달의 여자 아이돌" : "이달의 남자 아이돌"} + - {gender === "female" ? "이달의 여자 아이돌" : "이달의 남자 아이돌"} + + {modalContent.gender === "female" ? "이달의 여자 아이돌" : "이달의 남자 아이돌"} + @@ -108,7 +86,7 @@ const VoteModal = ({ onClose, initialGender = "female" }) => { 투표하기 - 투표하는 데 1000 크레딧이 소모됩니다. + 투표하는 데 {NEED_CREDIT} 크레딧이 소모됩니다. From 20f61f5e18fd1cd0b6331c4e35ec0b4b49d95d4d Mon Sep 17 00:00:00 2001 From: spde3289 Date: Thu, 20 Nov 2025 15:52:55 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=ED=88=AC=ED=91=9C=EC=8B=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8B=AC=EC=9D=98=20=EC=B0=A8=ED=8A=B8=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B0=B1=EC=8B=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ListPage/components/chart/ChartSection.jsx | 14 ++++++++++---- .../ListPage/components/chart/VoteModal.jsx | 18 +++++------------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/pages/ListPage/components/chart/ChartSection.jsx b/src/pages/ListPage/components/chart/ChartSection.jsx index 3401559..b950fb7 100644 --- a/src/pages/ListPage/components/chart/ChartSection.jsx +++ b/src/pages/ListPage/components/chart/ChartSection.jsx @@ -16,7 +16,7 @@ const ChartSection = () => { const [gender, setGender] = useState("female"); const { isOpen, onOpen, onClose, modalContent, setModalContent } = useModal(); - + const [trigger, setTrigger] = useState(false); const [windowWidth, setWindowWidth] = useState(getInitWidth()); const [visibleCount, setVisibleCount] = useState(getInitWidth() >= BREAKPOINT ? 10 : 5); @@ -25,7 +25,7 @@ const ChartSection = () => { useEffect(() => { const loadIdols = async () => { try { - const res = await getChartList({ pageSize: 10, gender: gender }); + const res = await getChartList({ pageSize: 100, gender: gender }); const idols = res.idols; const filtered = idols.filter((i) => i.gender === gender); @@ -46,7 +46,7 @@ const ChartSection = () => { } }; loadIdols(); - }, [gender, showBoundary, setModalContent]); + }, [gender, showBoundary, setModalContent, trigger]); useEffect(() => { const onResize = () => setWindowWidth(window.innerWidth); @@ -76,6 +76,10 @@ const ChartSection = () => { setVisibleCount((v) => Math.min(v + 5, data.length)); }; + const handleTrigger = () => { + setTrigger((pre) => !pre); + }; + let gridContent; if (isSingleCol) { gridContent = ( @@ -157,7 +161,9 @@ const ChartSection = () => { - {isOpen && } + {isOpen && ( + + )} ); }; diff --git a/src/pages/ListPage/components/chart/VoteModal.jsx b/src/pages/ListPage/components/chart/VoteModal.jsx index eb5432d..437f07b 100644 --- a/src/pages/ListPage/components/chart/VoteModal.jsx +++ b/src/pages/ListPage/components/chart/VoteModal.jsx @@ -10,11 +10,11 @@ import * as S from "./VoteModal.style"; const NEED_CREDIT = 1000; -const VoteModal = ({ onClose, modalContent }) => { - const [list, setList] = useState(modalContent.list); +const VoteModal = ({ onClose, modalContent, handleTrigger }) => { const [selectedId, setSelectedId] = useState(null); const [_, { isEnoughCredit, subtractCredit }] = useCreditContext(); const [isCreditModalOpen, setIsCreditModalOpen] = useState(false); + const submit = async () => { if (!selectedId) return; if (!isEnoughCredit(NEED_CREDIT)) { @@ -22,17 +22,9 @@ const VoteModal = ({ onClose, modalContent }) => { return; } - const res = await client.post("/votes", { idolId: selectedId }); - const updated = res.data.idol; - + await client.post("/votes", { idolId: selectedId }); subtractCredit(NEED_CREDIT); - - const newList = modalContent.list - .map((i) => (i.id === updated.id ? { ...i, votes: updated.totalVotes } : i)) - .sort((a, b) => b.votes - a.votes) - .map((i, idx) => ({ ...i, rank: idx + 1 })); - - setList(newList); + handleTrigger(); setSelectedId(null); }; @@ -56,7 +48,7 @@ const VoteModal = ({ onClose, modalContent }) => { - {list.map((c) => ( + {modalContent.list.map((c) => ( Date: Thu, 20 Nov 2025 16:13:25 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=ED=88=AC=ED=91=9C=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=B0=BD=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/chart/VoteModal.style.js | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/ListPage/components/chart/VoteModal.style.js b/src/pages/ListPage/components/chart/VoteModal.style.js index 1642772..ead7007 100644 --- a/src/pages/ListPage/components/chart/VoteModal.style.js +++ b/src/pages/ListPage/components/chart/VoteModal.style.js @@ -28,7 +28,7 @@ export const Modal = styled.div` max-width: none; border-radius: 0; padding: 16px; - background: var(--color-bg-base); + background: ${hexToRgba(COLOR_VAR_MAP["--color-bg-base"])}; @media (${media.tablet}) { position: static; @@ -115,19 +115,17 @@ export const CloseBtn = styled.button` export const List = styled.div` height: 100%; - @media (${media.tablet}) { - flex: 1; - min-height: 0; - overflow-y: auto; + overflow-y: scroll; - /* 스크롤바 숨김(필요 시 제거 가능) */ - scrollbar-width: none; - -ms-overflow-style: none; + /* 스크롤바 숨김(필요 시 제거 가능) */ + scrollbar-width: none; + -ms-overflow-style: none; - &:-webkit-scrollbar { - display: none; - } + &:-webkit-scrollbar { + display: none; } + + padding-bottom: 140px; `; export const Vote = styled.div` @@ -137,7 +135,7 @@ export const Vote = styled.div` bottom: 0; z-index: 10; height: 106px; - background: transparent; + background: ${hexToRgba(COLOR_VAR_MAP["--color-bg-base"])}; width: 100%; @media (${media.tablet}) { From e029a302a83ce9d4240b56ba13869f523a413f51 Mon Sep 17 00:00:00 2001 From: spde3289 Date: Thu, 20 Nov 2025 16:14:48 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=ED=88=AC=ED=91=9C=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=B0=BD=20=ED=85=8C=EB=B8=94=EB=A6=BF=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ListPage/components/chart/VoteModal.style.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/ListPage/components/chart/VoteModal.style.js b/src/pages/ListPage/components/chart/VoteModal.style.js index ead7007..0ec7751 100644 --- a/src/pages/ListPage/components/chart/VoteModal.style.js +++ b/src/pages/ListPage/components/chart/VoteModal.style.js @@ -126,6 +126,10 @@ export const List = styled.div` } padding-bottom: 140px; + + @media (${media.tablet}) { + padding-bottom: 0; + } `; export const Vote = styled.div`