From 5f07a1ab1bde2678e0b0eea79d8579783ace8818 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Mon, 28 Apr 2025 22:36:41 +0900 Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8Feat:=20=ED=81=AC=EB=A0=88?= =?UTF-8?q?=EB=94=A7=20=EC=B6=A9=EC=A0=84=ED=95=98=EA=B8=B0=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=B0=BD=EC=9D=98=20=ED=81=AC=EB=A0=88=EB=94=A7=20?= =?UTF-8?q?=EC=BD=A4=EB=A7=88=20=EB=8B=A8=EC=9C=84=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20css=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- .../modals/creditChargeModal/CreditChargeModal.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/modals/creditChargeModal/CreditChargeModal.jsx b/src/components/modals/creditChargeModal/CreditChargeModal.jsx index 442c01a0..6a3a2920 100644 --- a/src/components/modals/creditChargeModal/CreditChargeModal.jsx +++ b/src/components/modals/creditChargeModal/CreditChargeModal.jsx @@ -1,8 +1,10 @@ import starTwoImg from '@/assets/images/2-star.png'; import starThreeImg from '@/assets/images/3-star.png'; +import logoImg from '@/assets/images/logo.png'; import starImg from '@/assets/images/star.png'; import { CustomButton, RadioButton } from '@/components/button'; import { Prices } from '@/constants/creditPrice'; +import { addCommas } from '@/utils/format'; import { useState } from 'react'; import * as S from './creditChargeModal.styles'; @@ -37,7 +39,10 @@ const CreditChargeModal = ({ credit, updateCredit, onClose }) => { return (
-

크레딧 충전하기

+ + 크레딧 +

크레딧 충전하기

+
{Prices.map((price) => { const imgSrc = imageMap[price.id] || starImg; @@ -50,8 +55,8 @@ const CreditChargeModal = ({ credit, updateCredit, onClose }) => { handleSelect={() => handleRadioSelect(price.value)} >
- 크레딧 - {price.value} + 크레딧 + {addCommas(Number(price.value))}
); From 2771d0c027675d624dc0de5af72b0c146ab5de5f Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Mon, 28 Apr 2025 22:45:27 +0900 Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B6=A9=EC=A0=84?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- .../creditChargeModal.styles.js | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/components/modals/creditChargeModal/creditChargeModal.styles.js b/src/components/modals/creditChargeModal/creditChargeModal.styles.js index db9cceba..0f5a64ad 100644 --- a/src/components/modals/creditChargeModal/creditChargeModal.styles.js +++ b/src/components/modals/creditChargeModal/creditChargeModal.styles.js @@ -1,4 +1,3 @@ -import media from '@/styles/responsive'; import { css, keyframes } from '@emotion/react'; export const voteButtonFlow = keyframes` @@ -16,17 +15,25 @@ export const voteButtonFlow = keyframes` export const modalContent = css` display: flex; flex-direction: column; - justify-content: center; - align-items: baseline; - - ${media({ - margin: ['2.4rem 1.6rem', '2.4rem 1.6rem', '3rem 3rem', '3rem 3rem', '3rem 3rem'], - gap: ['1rem', '1rem', '2rem', '2rem', '2rem'], - })} + gap: 1rem; + width: 32.7rem; + height: 37.2rem; + padding: 2.4rem 1.6rem; +`; + +export const modalTitle = css` + display: flex; + align-items: center; + margin-bottom: 0.5rem; + + img { + width: 2.2rem; + height: 2.2rem; + margin-right: 0.5rem; + } h2 { - margin-block: 0.2rem 1rem; - font-size: 1.8rem; + font-size: 1.8rem; } `; @@ -43,10 +50,8 @@ export const radioButtons = css` `; export const buttonStyle = css` - ${media({ - width: ['28rem', '29rem', '29rem', '32rem', '32rem'], - height: ['7rem', '7rem', '7rem', '8rem', '8rem'], - })} + width: 29rem; + height: 6.8rem; border: 1px solid var(--white); border-radius: 8px; transition: border-color 0.3s ease; @@ -58,11 +63,14 @@ export const buttonStyle = css` &:has(input[type="radio"]:checked) { border-color: var(--orange); color: var(--gray); + transform: scale(1.015); } - - img { - width: 2.4rem; - } +`; + +export const creditImg = (id) => css` + margin-inline: ${id === 1 ? '0.8rem' : id === 2 ? '0.2rem' : '0.1rem'}; + width: ${id === 1 ? '2.5rem' : id === 2 ? '3.7rem' : '4rem'}; + height: ${id === 1 ? '2.45rem' : id === 2 ? '2.6rem' : '3rem'}; `; export const customButton = css` @@ -73,11 +81,6 @@ export const customButton = css` transition: all 0.1s ease; animation: ${voteButtonFlow} 3s ease infinite; /* 애니메이션 흐름 */ - ${media({ - width: ['28.7rem', '29.8rem', '29.8rem', '32.8rem', '32.8rem'], - height: ['3.8rem', '4rem', '4rem', '5rem', '5rem'], - })} - p { font-weight: 700; } @@ -103,7 +106,6 @@ export const radioButtonContent = css` padding: 0.5rem; span { - margin: 0.2rem 0 0 0.3rem; font-size: 2rem; font-weight: 700; } From 0bcd9b9c01bd32f7fa2b92cc11e4b4b378176407 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:12:55 +0900 Subject: [PATCH 03/11] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EB=8D=94?= =?UTF-8?q?=20=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EA=B3=B5=EC=9A=A9=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/button/index.js | 1 + .../loadMoreButton}/LoadMoreButton.jsx | 2 +- src/components/button/loadMoreButton/index.js | 1 + .../loadMoreButton/loadMoreButton.styles.js | 52 +++++++++++++++++++ 4 files changed, 55 insertions(+), 1 deletion(-) rename src/components/{chart => button/loadMoreButton}/LoadMoreButton.jsx (96%) create mode 100644 src/components/button/loadMoreButton/index.js create mode 100644 src/components/button/loadMoreButton/loadMoreButton.styles.js diff --git a/src/components/button/index.js b/src/components/button/index.js index 4d0a97b8..70bfbf9c 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -2,3 +2,4 @@ export { default as AvatarButton } from './avatarButton'; export { default as CustomButton } from './customButton'; export { default as RadioButton } from './radioButton'; export { default as ArrowButton } from './arrowButton'; +export { default as LoadMoreButton } from './loadMoreButton'; diff --git a/src/components/chart/LoadMoreButton.jsx b/src/components/button/loadMoreButton/LoadMoreButton.jsx similarity index 96% rename from src/components/chart/LoadMoreButton.jsx rename to src/components/button/loadMoreButton/LoadMoreButton.jsx index cf8c7925..757b0816 100644 --- a/src/components/chart/LoadMoreButton.jsx +++ b/src/components/button/loadMoreButton/LoadMoreButton.jsx @@ -1,4 +1,4 @@ -import * as S from './chart.styles'; +import * as S from './loadmorebutton.styles'; /** * '더 보기' 버튼 컴포넌트. 더 많은 데이터를 로드할 수 있을 때 버튼을 표시하고, 로딩 중에는 비활성화 상태로 표시합니다. diff --git a/src/components/button/loadMoreButton/index.js b/src/components/button/loadMoreButton/index.js new file mode 100644 index 00000000..67ed6f08 --- /dev/null +++ b/src/components/button/loadMoreButton/index.js @@ -0,0 +1 @@ +export { default } from './LoadMoreButton'; diff --git a/src/components/button/loadMoreButton/loadMoreButton.styles.js b/src/components/button/loadMoreButton/loadMoreButton.styles.js new file mode 100644 index 00000000..24364a25 --- /dev/null +++ b/src/components/button/loadMoreButton/loadMoreButton.styles.js @@ -0,0 +1,52 @@ +import { css, keyframes } from '@emotion/react'; +import media from '@/styles/responsive'; + +export const voteButtonFlow = keyframes` + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +`; + +export const flexCenter = css` + display: flex; + justify-content: center; + align-items: center; +`; + +export const moreButton = css` + ${flexCenter}; + margin-inline: auto; + margin-block: 3rem; + border-radius: 8px; + background: linear-gradient(45deg, var(--black) 0%, var(--white-alpha-20) 51%, var(--white-alpha-10) 100%); + background-position: left center; /* 기본 시작 위치 */ + background-size: 400%; /* 배경 크기 확장 */ + transition: all 0.1s ease; + + ${media({ + fontSize: ['1.1rem', '1.2rem', '1.4rem', '1.6rem'], + width: ['10rem', '15rem', '20rem', '25rem'], + height: ['2.3rem', '2.7rem', '3.5rem', '4rem'], + })} + + &:hover { + background-position: right center; /* hover 시 배경 이동 */ + animation: ${voteButtonFlow} 4s ease infinite; /* 애니메이션 흐름 */ + opacity: 0.9; + } + + &:active { + transform: scale(0.97); + } + + &:disabled { + cursor: not-allowed; + opacity: 0.6; + } +`; From 4fbedbeae257e2c35a66753155d5853e66eb1b8b Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:15:09 +0900 Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=EC=97=90=20=ED=88=AC=ED=91=9C=20=EC=88=98=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=83=81=ED=83=9C=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/list/ListModal.jsx | 17 +++++++++++++++-- src/pages/list/ListPage.jsx | 6 ++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/list/ListModal.jsx b/src/components/list/ListModal.jsx index 2b65576a..3b40aad7 100644 --- a/src/components/list/ListModal.jsx +++ b/src/components/list/ListModal.jsx @@ -6,7 +6,15 @@ import { VoteModal, } from '@/components/modals'; -const ListModal = ({ modalType, setModalType, credit, updateCredit, gender, donations }) => { +const ListModal = ({ + modalType, + setModalType, + credit, + updateCredit, + setVoteSuccessTrigger, + gender, + donations, +}) => { const onCloseModal = () => setModalType(null); const renderModalContent = () => { @@ -33,7 +41,12 @@ const ListModal = ({ modalType, setModalType, credit, updateCredit, gender, dona ); case 'vote': return ( - + ); default: return null; diff --git a/src/pages/list/ListPage.jsx b/src/pages/list/ListPage.jsx index e781d561..7f0bed09 100644 --- a/src/pages/list/ListPage.jsx +++ b/src/pages/list/ListPage.jsx @@ -9,9 +9,10 @@ import * as S from './listPage.styles'; const ListPage = () => { const [modalType, setModalType] = useState(null); // 모달 타입 상태 관리 const [credit, setCredit] = useState(0); // 크레딧 상태 관리 - const { idols, donations } = useLoaderData(); // 여기서 데이터 받음 const [selectedTab, setSelectedTab] = useState('females'); const [selectedIndex, setSelectedIndex] = useState(null); // 후원의 인덱스를 받아옴 + const [voteSuccessTrigger, setVoteSuccessTrigger] = useState(false); + const { idols, donations } = useLoaderData(); // 여기서 데이터 받음 useEffect(() => { const storedCredit = localStorage.getItem('selectedCredit'); @@ -36,13 +37,14 @@ const ListPage = () => { setModalType={setModalType} selectedTab={selectedTab} setSelectedTab={setSelectedTab} - updateCredit={updateCredit} + voteSuccessTrigger={voteSuccessTrigger} /> From e10f1c2471e65044e08efb7bf97b6f22e9903bff Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:16:00 +0900 Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=92=84Style:=20=ED=88=AC=ED=91=9C?= =?UTF-8?q?=20=EC=84=B1=EA=B3=B5=20=EC=8B=9C=20=EC=84=B1=EA=B3=B5=ED=8A=B8?= =?UTF-8?q?=EB=A6=AC=EA=B1=B0=20=EC=83=81=ED=83=9C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=B0=A8=ED=8A=B8=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EC=9C=A0=EB=8F=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/modals/voteModal/VoteModal.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/modals/voteModal/VoteModal.jsx b/src/components/modals/voteModal/VoteModal.jsx index c071b153..6fd399ad 100644 --- a/src/components/modals/voteModal/VoteModal.jsx +++ b/src/components/modals/voteModal/VoteModal.jsx @@ -7,7 +7,7 @@ import { showAlert } from '@/utils/alert'; import { requestPost } from '@/utils/api'; import { addCommas } from '@/utils/format'; import * as S from './voteModal.styles'; -const VoteModal = ({ gender, updateCredit, setModalType }) => { +const VoteModal = ({ gender, updateCredit, setVoteSuccessTrigger, setModalType }) => { const [idols, setIdols] = useState([]); const [checkedItem, setCheckedItem] = useState(); @@ -28,6 +28,7 @@ const VoteModal = ({ gender, updateCredit, setModalType }) => { if (response) { localStorage.setItem('selectedCredit', Number(getCredit) - 1000); updateCredit(Number(getCredit) - 1000); + setVoteSuccessTrigger((prev) => !prev); // 차트에 투표 수 반영하는 상태변수 showAlert('투표에 성공했습니다', 'success'); } else { showAlert('투표에 실패했습니다', 'warning'); From de6a67a2fb54abeb8ae9beafef637f56113fb1f4 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:16:33 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B6=A9=EC=A0=84?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=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 # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- .../creditChargeModal/creditChargeModal.styles.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/modals/creditChargeModal/creditChargeModal.styles.js b/src/components/modals/creditChargeModal/creditChargeModal.styles.js index a51d3224..e58c704d 100644 --- a/src/components/modals/creditChargeModal/creditChargeModal.styles.js +++ b/src/components/modals/creditChargeModal/creditChargeModal.styles.js @@ -1,5 +1,4 @@ import { css, keyframes } from '@emotion/react'; -import media from '@/styles/responsive'; export const voteButtonFlow = keyframes` 0% { @@ -16,25 +15,26 @@ export const voteButtonFlow = keyframes` export const modalContent = css` display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; width: 32.7rem; - height: 37.2rem; + height: 38rem; padding: 2.4rem 1.6rem; `; export const modalTitle = css` display: flex; align-items: center; - margin-bottom: 0.5rem; + margin-bottom: 0.7rem; img { - width: 2.2rem; - height: 2.2rem; + width: 2.5rem; + height: 2.5rem; margin-right: 0.5rem; + margin-bottom: 0.1rem; } h2 { - font-size: 1.8rem; + font-size: 2rem; } `; From e408221fa6d31fec0ad9a0f516bdf31bf3a6ddd0 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:20:17 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=EC=97=90=EC=84=9C=20border=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=ED=9A=8C=EC=83=89=EC=9C=BC=EB=A1=9C=20=EB=B3=B4=EC=97=AC=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20active=20=ED=9A=A8=EA=B3=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/chart/chart.styles.js | 38 ++++------------------------ 1 file changed, 5 insertions(+), 33 deletions(-) diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index f060c792..0a404fcc 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -140,7 +140,7 @@ export const idolList = css` } img { - border: 2px solid var(--black); + border: 2px solid var(--black-deep); border-radius: 50%; box-shadow: 0 0 0 0.1rem var(--orange); object-fit: cover; @@ -151,6 +151,10 @@ export const idolList = css` marginInline: ['0.1rem', '0.2rem', '0.5rem', '0.5rem'], })} } + + &:active { + transform: scale(1.015); + } } `; @@ -177,35 +181,3 @@ export const nameStyle = css` font-weight: 700; color: var(--white); `; - -export const moreButton = css` - ${flexCenter}; - margin-inline: auto; - margin-block: 3rem; - border-radius: 8px; - background: linear-gradient(45deg, var(--black) 0%, var(--white-alpha-20) 51%, var(--white-alpha-10) 100%); - background-position: left center; /* 기본 시작 위치 */ - background-size: 400%; /* 배경 크기 확장 */ - transition: all 0.1s ease; - - ${media({ - fontSize: ['1.1rem', '1.2rem', '1.4rem', '1.6rem'], - width: ['10rem', '15rem', '20rem', '25rem'], - height: ['2.3rem', '2.7rem', '3.5rem', '4rem'], - })} - - &:hover { - background-position: right center; /* hover 시 배경 이동 */ - animation: ${voteButtonFlow} 4s ease infinite; /* 애니메이션 흐름 */ - opacity: 0.9; - } - - &:active { - transform: scale(0.97); - } - - &:disabled { - cursor: not-allowed; - opacity: 0.6; - } -`; From 504711ecbe5da1387f041558994e339466232c44 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:25:00 +0900 Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=EC=97=90=20=ED=88=AC=ED=91=9C=20=EC=88=98=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EB=94=94=ED=8E=9C=EB=8D=98?= =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/chart/Chart.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index b7675cea..9008de9c 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -4,10 +4,10 @@ import { LoadingSpinner } from '@/components/loadingStatus'; import chartImg from '@/assets/images/chart.png'; import { fetchData } from './fetchData'; import { useScreenSize } from './useScreenSize'; -import LoadMoreButton from './LoadMoreButton'; +import { LoadMoreButton } from '@/components/button'; import * as S from './chart.styles'; -const Chart = ({ setModalType, selectedTab, setSelectedTab, updateCredit }) => { +const Chart = ({ setModalType, selectedTab, setSelectedTab, voteSuccessTrigger }) => { const [chartData, setChartData] = useState([]); const [cursor, setCursor] = useState(0); const [hasMore, setHasMore] = useState(true); @@ -52,7 +52,7 @@ const Chart = ({ setModalType, selectedTab, setSelectedTab, updateCredit }) => { return () => { controller.abort(); }; - }, [selectedTab, screenSize, updateCredit]); + }, [selectedTab, screenSize, voteSuccessTrigger]); const loadMore = () => { fetchData( From d30a0294ac610efaf2a7e0421fce5af8c2ce571b Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:40:37 +0900 Subject: [PATCH 09/11] =?UTF-8?q?=E2=9C=A8Feat:=20=ED=81=AC=EB=A0=88?= =?UTF-8?q?=EB=94=A7=20=EC=B6=A9=EC=A0=84=20=EC=84=B1=EA=B3=B5=20=EC=8B=A4?= =?UTF-8?q?=ED=8C=A8=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EA=B2=BD=EA=B3=A0?= =?UTF-8?q?=EC=B0=BD=20=EA=B8=B0=EB=8A=A5=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- .../modals/creditChargeModal/CreditChargeModal.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/modals/creditChargeModal/CreditChargeModal.jsx b/src/components/modals/creditChargeModal/CreditChargeModal.jsx index 7bc353c2..7ffe9baa 100644 --- a/src/components/modals/creditChargeModal/CreditChargeModal.jsx +++ b/src/components/modals/creditChargeModal/CreditChargeModal.jsx @@ -1,11 +1,12 @@ import { useState } from 'react'; import { CustomButton, RadioButton } from '@/components/button'; import { Prices } from '@/constants/creditPrice'; +import { addCommas } from '@/utils/format'; +import { showAlert } from '@/utils/alert'; import starTwoImg from '@/assets/images/2-star.png'; import starThreeImg from '@/assets/images/3-star.png'; import logoImg from '@/assets/images/logo.png'; import starImg from '@/assets/images/star.png'; -import { addCommas } from '@/utils/format'; import * as S from './creditChargeModal.styles'; const imageMap = { @@ -23,7 +24,7 @@ const CreditChargeModal = ({ credit, updateCredit, onClose }) => { const handleCharge = () => { if (!selectedValue) { - alert('충전할 크레딧을 선택해주세요!'); + showAlert('충전할 크레딧을 선택해주세요!', 'warning'); return; } @@ -31,8 +32,7 @@ const CreditChargeModal = ({ credit, updateCredit, onClose }) => { const newTotal = prev + Number(selectedValue); localStorage.setItem('selectedCredit', newTotal); updateCredit(newTotal); // 업데이트된 credit을 ListPage에 전달 - alert(`크레딧 ${selectedValue} 충전 완료! 총 보유: ${newTotal}`); - + showAlert(`${selectedValue} 크레딧 충전 완료!`, 'success'); // 모달 닫기 로직 onClose(); }; From 42dab527145ced4e9b3279e0572e4e27737942e8 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:56:26 +0900 Subject: [PATCH 10/11] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20screenSize?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EA=B3=B5=EC=9A=A9=ED=99=94=20=EB=B0=8F=20=EA=B7=B8=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/chart/Chart.jsx | 2 +- src/utils/responsive/index.js | 1 + src/{components/chart => utils/responsive}/useScreenSize.js | 4 +++- 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 src/utils/responsive/index.js rename src/{components/chart => utils/responsive}/useScreenSize.js (94%) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index 9008de9c..ba76cd56 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -3,7 +3,7 @@ import { CustomButton } from '@/components/button'; import { LoadingSpinner } from '@/components/loadingStatus'; import chartImg from '@/assets/images/chart.png'; import { fetchData } from './fetchData'; -import { useScreenSize } from './useScreenSize'; +import { useScreenSize } from '@/utils/responsive'; import { LoadMoreButton } from '@/components/button'; import * as S from './chart.styles'; diff --git a/src/utils/responsive/index.js b/src/utils/responsive/index.js new file mode 100644 index 00000000..715995df --- /dev/null +++ b/src/utils/responsive/index.js @@ -0,0 +1 @@ +export { default as useScreenSize } from './useScreenSize'; diff --git a/src/components/chart/useScreenSize.js b/src/utils/responsive/useScreenSize.js similarity index 94% rename from src/components/chart/useScreenSize.js rename to src/utils/responsive/useScreenSize.js index eb134d61..1a5e8913 100644 --- a/src/components/chart/useScreenSize.js +++ b/src/utils/responsive/useScreenSize.js @@ -18,7 +18,7 @@ const getScreenSize = () => { * const screenSize = useScreenSize(); * console.log(screenSize); // 'mobile', 'tablet', 또는 'desktop' */ -export const useScreenSize = () => { +const useScreenSize = () => { const [screenSize, setScreenSize] = useState(getScreenSize()); useEffect(() => { @@ -36,3 +36,5 @@ export const useScreenSize = () => { return screenSize; }; + +export default useScreenSize; From c9eb58ba7af599b40dab0c1691f99fc471de508d Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:56:53 +0900 Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=8D=94=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B2=BD=EB=A1=9C=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 # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/button/loadMoreButton/LoadMoreButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/loadMoreButton/LoadMoreButton.jsx b/src/components/button/loadMoreButton/LoadMoreButton.jsx index 757b0816..b0aa13d7 100644 --- a/src/components/button/loadMoreButton/LoadMoreButton.jsx +++ b/src/components/button/loadMoreButton/LoadMoreButton.jsx @@ -1,4 +1,4 @@ -import * as S from './loadmorebutton.styles'; +import * as S from './loadMoreButton.styles'; /** * '더 보기' 버튼 컴포넌트. 더 많은 데이터를 로드할 수 있을 때 버튼을 표시하고, 로딩 중에는 비활성화 상태로 표시합니다.