From e96651b0a60639784b84e1262925f48d73ea076a Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sat, 26 Apr 2025 23:36:33 +0900 Subject: [PATCH 001/117] =?UTF-8?q?=F0=9F=92=84Style:=20loadingSpinner=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9D=B4=EB=8F=99?= 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 | 13 ------------- .../loadingSpinner/loadingSpinner.styles.js | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 src/components/loadingStatus/loadingSpinner/loadingSpinner.styles.js diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index dc7d04d9..6e1977aa 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -131,16 +131,3 @@ export const moreButton = css` opacity: 0.6; } `; - -export const spinner = css` - display: flex; - justify-content: center; - align-items: center; - padding: 4rem; - - img { - width: 15rem; - height: 15rem; - object-fit: contain; - } -`; diff --git a/src/components/loadingStatus/loadingSpinner/loadingSpinner.styles.js b/src/components/loadingStatus/loadingSpinner/loadingSpinner.styles.js new file mode 100644 index 00000000..5b395cfa --- /dev/null +++ b/src/components/loadingStatus/loadingSpinner/loadingSpinner.styles.js @@ -0,0 +1,14 @@ +import { css } from '@emotion/react'; + +export const spinner = css` + display: flex; + justify-content: center; + align-items: center; + padding: 4rem; + + img { + width: 15rem; + height: 15rem; + object-fit: contain; + } +`; From fb12f55409f1b7adbd07371d1385498de12b2c18 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sat, 26 Apr 2025 23:37:10 +0900 Subject: [PATCH 002/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EB=A1=9C?= =?UTF-8?q?=EB=94=A9=20=EC=8A=A4=ED=94=BC=EB=84=88=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= 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 : 리팩토링 (동작 변경 없이 코드 개선) --- .../loadingSpinner/LoadingSpinner.jsx | 14 ++++++++++++++ .../loadingStatus/loadingSpinner/index.js | 1 + 2 files changed, 15 insertions(+) create mode 100644 src/components/loadingStatus/loadingSpinner/LoadingSpinner.jsx create mode 100644 src/components/loadingStatus/loadingSpinner/index.js diff --git a/src/components/loadingStatus/loadingSpinner/LoadingSpinner.jsx b/src/components/loadingStatus/loadingSpinner/LoadingSpinner.jsx new file mode 100644 index 00000000..32cf5b6c --- /dev/null +++ b/src/components/loadingStatus/loadingSpinner/LoadingSpinner.jsx @@ -0,0 +1,14 @@ +import loadingSpinner from '@/assets/images/loading-spinner.gif'; +import * as S from './loadingSpinner.styles'; + +const LoadingSpinner = ({ isLoading }) => { + if (!isLoading) return null; + + return ( +
+ 로딩 스피너 +
+ ); +}; + +export default LoadingSpinner; diff --git a/src/components/loadingStatus/loadingSpinner/index.js b/src/components/loadingStatus/loadingSpinner/index.js new file mode 100644 index 00000000..f4e655db --- /dev/null +++ b/src/components/loadingStatus/loadingSpinner/index.js @@ -0,0 +1 @@ +export { default as LoadingSpinner } from './LoadingSpinner'; From a957405f0cb7b4530530f4f62ecc4db074c2c5ee Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sat, 26 Apr 2025 23:37:39 +0900 Subject: [PATCH 003/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=EB=90=9C=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4?= =?UTF-8?q?=ED=94=BC=EB=84=88=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?= 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 | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index e07b9e9d..11317e6b 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -1,6 +1,6 @@ import chartImg from '@/assets/images/chart.png'; -import loadingSpinner from '@/assets/images/loading-spinner.gif'; import { CustomButton } from '@/components/customButton'; +import { LoadingSpinner } from '@/components/loadingStatus/loadingSpinner'; import { ENDPOINTS } from '@/constants/api'; import { requestGet } from '@/utils/api'; import { useEffect, useState } from 'react'; @@ -173,11 +173,7 @@ const Chart = ({ setModalType }) => { ))} - {isFemaleLoading && ( -
- 로딩 스피너 -
- )} + {hasMoreFemales && ( @@ -87,6 +87,3 @@ const CustomButton = ({ }; export default CustomButton; - -// 팀의 컨벤션이 공식 HTML/DOM 이벤트 핸들러 prop 이름(onClick 등)을 그대로 쓰지 않고, onButtonClick 같은 식으로 혼란 방지 -// onClick={onClick} -> onClick={onButtonClick} 같은걸로 수정 제안 diff --git a/src/components/error/ApiErrorBoundary.jsx b/src/components/error/ApiErrorBoundary.jsx index 94c51606..515136a0 100644 --- a/src/components/error/ApiErrorBoundary.jsx +++ b/src/components/error/ApiErrorBoundary.jsx @@ -42,7 +42,7 @@ const ApiErrorBoundary = () => { window.location.reload()} // 컨벤션에 따라 onButtonClick 등으로 바뀌면 수정 예정 + onButtonClick={() => window.location.reload()} // 컨벤션에 따라 onButtonClick 등으로 바뀌면 수정 예정 > 다시 시도 diff --git a/src/components/error/RenderErrorBoundary.jsx b/src/components/error/RenderErrorBoundary.jsx index ac18e842..763840cb 100644 --- a/src/components/error/RenderErrorBoundary.jsx +++ b/src/components/error/RenderErrorBoundary.jsx @@ -48,7 +48,7 @@ class RenderErrorBoundary extends Component { window.location.reload()} // 컨벤션에 따라 onButtonClick 등으로 바뀌면 수정 예정 + onButtonClick={() => window.location.reload()} // 컨벤션에 따라 onButtonClick 등으로 바뀌면 수정 예정 > 다시 시도 diff --git a/src/components/modals/creditChargeModal/CreditChargeModal.jsx b/src/components/modals/creditChargeModal/CreditChargeModal.jsx index 9bfdbb7d..51911615 100644 --- a/src/components/modals/creditChargeModal/CreditChargeModal.jsx +++ b/src/components/modals/creditChargeModal/CreditChargeModal.jsx @@ -50,7 +50,7 @@ const CreditChargeModal = ({ credit, updateCredit, onClose }) => { e.key === 'Enter' && handleCharge()} style={S.buttonStyle} > diff --git a/src/components/modals/creditLackModal/CreditLackModal.jsx b/src/components/modals/creditLackModal/CreditLackModal.jsx index 0f20abcc..5730cfdd 100644 --- a/src/components/modals/creditLackModal/CreditLackModal.jsx +++ b/src/components/modals/creditLackModal/CreditLackModal.jsx @@ -12,7 +12,7 @@ const CreditLackModal = ({ setModalType }) => {

setModalType('creditCharge')} + onButtonClick={() => setModalType('creditCharge')} onKeyDown={(e) => e.key === 'Enter' && setModalType('creditCharge')} style={S.buttonStyle} > diff --git a/src/components/modals/donationModal/DonationModal.jsx b/src/components/modals/donationModal/DonationModal.jsx index bc8608e4..19c12715 100644 --- a/src/components/modals/donationModal/DonationModal.jsx +++ b/src/components/modals/donationModal/DonationModal.jsx @@ -81,7 +81,7 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => { e.key === 'Enter' && onClose()} disabled={!inputRef.current?.value || isDonating || hasNoMoney} style={{ marginTop: '1.2rem' }} diff --git a/src/components/modals/voteModal/VoteModal.jsx b/src/components/modals/voteModal/VoteModal.jsx index 8e06b241..db3121cd 100644 --- a/src/components/modals/voteModal/VoteModal.jsx +++ b/src/components/modals/voteModal/VoteModal.jsx @@ -95,7 +95,7 @@ const VoteModal = ({ gender, updateCredit, setModalType }) => { : console.log('idols state가 없습니다')} + onButtonClick={() => checkedItem ? voteForIdol(checkedItem) : triggerAlert('투표할 아이돌을 선택해주세요') } onKeyDown={(e) => { diff --git a/src/pages/error/serverError/ServerErrorPage.jsx b/src/pages/error/serverError/ServerErrorPage.jsx index e0867b82..7ffd1907 100644 --- a/src/pages/error/serverError/ServerErrorPage.jsx +++ b/src/pages/error/serverError/ServerErrorPage.jsx @@ -22,7 +22,7 @@ const ServerErrorPage = () => { variant="error" isRound="true" style={S.errorButtonStyle} - onClick={() => window.location.reload()} //여기도 onButtonClick으로 바뀌면 변경 + onButtonClick={() => window.location.reload()} //여기도 onButtonClick으로 바뀌면 변경 > 다시 시도 diff --git a/src/pages/my/MyPage.jsx b/src/pages/my/MyPage.jsx index 10327d91..b58f6e76 100644 --- a/src/pages/my/MyPage.jsx +++ b/src/pages/my/MyPage.jsx @@ -152,7 +152,12 @@ const MyPage = () => { />
- + addIcon 추가하기 From c9aa37486e3b91ff8e0803eeec483b5e42ccab1b Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 03:05:08 +0900 Subject: [PATCH 006/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=20=EC=83=81=ED=95=98=20=EC=97=AC=EB=B0=B1=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 | 2 +- src/components/chart/chart.styles.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index e07b9e9d..b1cc1417 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -127,7 +127,7 @@ const Chart = ({ setModalType }) => { }; return ( -
+
이달의 차트
setModalType('vote')}> diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index 642eff73..244433b8 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -1,6 +1,10 @@ import media from '@/styles/responsive'; import { css } from '@emotion/react'; +export const chartWrapper = css` + margin: 7rem 0 5rem; +`; + export const chartSectionHeader = css` display: flex; justify-content: space-between; From 7c3cc4db445192d4de386dfef9d42796ae803961 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 03:06:07 +0900 Subject: [PATCH 007/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EA=B5=AC=ED=98=84=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= 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/pages/list/ListPage.jsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/list/ListPage.jsx b/src/pages/list/ListPage.jsx index 4ad26770..22d8587e 100644 --- a/src/pages/list/ListPage.jsx +++ b/src/pages/list/ListPage.jsx @@ -5,13 +5,7 @@ import { ListModal } from '@/components/list'; import { css } from '@emotion/react'; import { useEffect, useState } from 'react'; import { useLoaderData } from 'react-router-dom'; - -export const wrapper = css` - padding: 20px; - background-color: var(--black-full); - color: var(--white-full); - font-family: Pretendard, sans-serif; -`; +import * as S from './listPage.styles'; const ListPage = () => { const [modalType, setModalType] = useState(null); // 모달 타입 상태 관리 @@ -35,7 +29,7 @@ const ListPage = () => { }; return ( -
+
{/* Charge에 credit 전달 */} Date: Sun, 27 Apr 2025 03:09:17 +0900 Subject: [PATCH 008/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A2=8C=EC=9A=B0=20=EC=97=AC?= =?UTF-8?q?=EB=B0=B1=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A1=B0=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B3=A0=EC=A0=95=20=EB=84=88=EB=B9=84=20=EC=A7=80?= =?UTF-8?q?=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/pages/list/listPage.styles.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/pages/list/listPage.styles.js diff --git a/src/pages/list/listPage.styles.js b/src/pages/list/listPage.styles.js new file mode 100644 index 00000000..81da6886 --- /dev/null +++ b/src/pages/list/listPage.styles.js @@ -0,0 +1,12 @@ +import media from '@/styles/responsive'; +import { css } from '@emotion/react'; + +export const wrapper = css` + max-width: 120rem; + margin: 0 auto; + + @media (width <= 1280px) { + margin-right: 4rem; + margin-left: 4rem; + } +`; From 75a61676739aacac72edf70fc534cee7687c372c Mon Sep 17 00:00:00 2001 From: Jo Insung Date: Sun, 27 Apr 2025 03:15:31 +0900 Subject: [PATCH 009/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20pro?= =?UTF-8?q?ps=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/customButton/CustomButton.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/customButton/CustomButton.jsx b/src/components/customButton/CustomButton.jsx index edbeef01..95c21ff8 100644 --- a/src/components/customButton/CustomButton.jsx +++ b/src/components/customButton/CustomButton.jsx @@ -50,6 +50,7 @@ const CustomButton = ({ disabled = false, style, onButtonClick, + onKeyDown, children, }) => { const sizeMap = { @@ -80,6 +81,7 @@ const CustomButton = ({ css={[buttonStyle, style && css(style)]} disabled={disabled} onClick={onButtonClick} + onKeyDown={onKeyDown} > {children} From f82c173980fcd005d941407050b05e9a4d754cdb Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 03:43:28 +0900 Subject: [PATCH 010/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20import=20=EC=82=AD=EC=A0=9C?= 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/pages/list/listPage.styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/list/listPage.styles.js b/src/pages/list/listPage.styles.js index 81da6886..d72000cf 100644 --- a/src/pages/list/listPage.styles.js +++ b/src/pages/list/listPage.styles.js @@ -1,4 +1,3 @@ -import media from '@/styles/responsive'; import { css } from '@emotion/react'; export const wrapper = css` From 45e381615b2786a116d0b2daf8a4bb09c0be3817 Mon Sep 17 00:00:00 2001 From: Jo Insung Date: Sun, 27 Apr 2025 03:49:22 +0900 Subject: [PATCH 011/117] =?UTF-8?q?=F0=9F=90=9BFix:=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=9C=EB=A0=A5=20=EC=9D=B4?= =?UTF-8?q?=ED=9B=84=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94=20=EB=90=98=EB=8A=94=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= 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/donationModal/DonationModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/donationModal/DonationModal.jsx b/src/components/modals/donationModal/DonationModal.jsx index bc8608e4..9e149212 100644 --- a/src/components/modals/donationModal/DonationModal.jsx +++ b/src/components/modals/donationModal/DonationModal.jsx @@ -83,7 +83,7 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => { e.key === 'Enter' && onClose()} - disabled={!inputRef.current?.value || isDonating || hasNoMoney} + disabled={!inputRef.current?.value || isDonating} style={{ marginTop: '1.2rem' }} > 후원하기 From 8481c6771250191629230528b5662069acea8fbd Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 05:10:16 +0900 Subject: [PATCH 012/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=AC=B4=EB=B6=84?= =?UTF-8?q?=EB=B3=84=ED=95=9C=20=EA=B3=84=EC=B8=B5=ED=98=95=20css=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20css=20=EC=9E=91=EC=84=B1?= 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 | 4 +-- src/components/chart/chart.styles.js | 44 +++++++++++++++++----------- 2 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index b1cc1417..0c15ac50 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -127,10 +127,10 @@ const Chart = ({ setModalType }) => { }; return ( -
+
이달의 차트
- setModalType('vote')}> + setModalType('vote')} style={S.customButton}>
차트 차트 투표하기 diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index 244433b8..31463143 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -1,18 +1,26 @@ import media from '@/styles/responsive'; import { css } from '@emotion/react'; -export const chartWrapper = css` - margin: 7rem 0 5rem; -`; - export const chartSectionHeader = css` display: flex; justify-content: space-between; align-items: center; font-size: 1.5rem; - button { - width: 8rem; + div { + ${media({ + fontSize: ['1.5rem', '1.5rem', '1.8rem', '2rem'], + marginBottom: ['1.5rem', '1.5rem', '0', '0'], + })} + font-weight: 700; + } +`; + +export const customButton = css` + ${media({ + fontSize: ['1.5rem', '1.5rem', '1.8rem', '2rem'], + width: ['9rem', '9rem', '9rem', '9rem'], + })} height: 2rem; border: none; border-radius: 0.3rem; @@ -29,7 +37,6 @@ export const chartSectionHeader = css` justify-content: center; align-items: center; gap: 0.4rem; - font-size: 0.75rem; img { width: 1.4rem; @@ -37,17 +44,19 @@ export const chartSectionHeader = css` } span { + font-size: 1rem; font-weight: 900; } } -} `; export const tabButtonWrapper = css` display: flex; justify-content: center; align-items: center; - margin-top: 2rem; + ${media({ + marginTop: ['1rem', '2rem', '3rem', '4rem'], + })} `; export const idolListButton = css` @@ -55,14 +64,16 @@ export const idolListButton = css` justify-content: center; align-items: center; width: 100%; - height: 4rem; margin: 0 auto; border: none; border-radius: 3.2px; - font-size: 1rem; text-align: center; color: var(--white); background-color: var(--black-deep); + ${media({ + fontSize: ['1.2rem', '1.3rem', '1.5rem', '1.7rem'], + height: ['3rem', '4rem', '4.5rem', '5rem'], + })} `; export const activeButton = css` @@ -72,20 +83,19 @@ export const activeButton = css` export const idolList = css` display: grid; - gap: 1.2rem; - grid-template-columns: 1fr 1fr; margin-top: 1rem; - padding-bottom: 0.5rem; - ${media({ + fontSize: ['1.1rem', '1.3rem', '1.5rem', '1.7rem'], + gap: ['0.5rem', '0.7rem', '1.2rem', '1.7rem'], gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr'], })} li { display: flex; justify-content: space-between; - margin-bottom: 0.5rem; - padding-bottom: 1rem; + ${media({ + padding: ['0.3rem 0 0.7rem', '0.5rem 0 0.7rem', '0.8rem 0 1.7rem', '1rem 0 2rem'], + })} text-align: center; border-bottom: 1px solid var(--black); list-style: none; From b841673247d82bace237e9064e639c6cdc3738b0 Mon Sep 17 00:00:00 2001 From: Jo Insung Date: Sun, 27 Apr 2025 06:00:23 +0900 Subject: [PATCH 013/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20Alert=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B0=98=EC=98=81=20-=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=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 : 리팩토링 (동작 변경 없이 코드 개선) --- .../modals/donationModal/DonationModal.jsx | 34 ++++++++++++++++--- .../donationModal/donationModal.styles.js | 10 +++--- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/src/components/modals/donationModal/DonationModal.jsx b/src/components/modals/donationModal/DonationModal.jsx index 9e149212..8bae1e1c 100644 --- a/src/components/modals/donationModal/DonationModal.jsx +++ b/src/components/modals/donationModal/DonationModal.jsx @@ -1,4 +1,5 @@ import creditImg from '@/assets/images/credit.png'; +import { Alert } from '@/components/alert'; import { CustomButton } from '@/components/customButton'; import { ENDPOINTS } from '@/constants/api'; import { requestPut } from '@/utils/api'; @@ -9,17 +10,33 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => { const [donateAmount, setDonateAmount] = useState(''); const [hasNoMoney, setHasNoMoney] = useState(false); const [isDonating, setIsDonating] = useState(false); + const [isInvalidNumber, setIsInvalidNumber] = useState(false); + const [showAlert, setShowAlert] = useState(false); + const [alertContent, setAlertContent] = useState(''); + const [alertType, setAlertType] = useState('warning'); const inputRef = useRef(null); const prevCredit = credit; + const triggerAlert = (message, type = 'warning') => { + setAlertContent(message); + setAlertType(type); + setShowAlert(true); + setTimeout(() => { + setShowAlert(false); + }, 2000); + }; + const handleChangeAmount = (e) => { const amount = e.target.value; if (amount.startsWith('0') || Number.isNaN(Number(amount))) { + setHasNoMoney(false); + setIsInvalidNumber(true); return; } if (prevCredit < Number(amount)) { + setIsInvalidNumber(false); setHasNoMoney(true); return; } @@ -46,11 +63,13 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => { localStorage.setItem('selectedCredit', total); updateCredit(total); - alert(`후원 성공 기존 : ${prevCredit} 현재 : ${total}`); - onClose(); + triggerAlert('후원에 성공했습니다', 'success'); + setTimeout(() => { + onClose(); + }, 700); } catch (e) { console.error('후원 처리 중 오류 발생', e); - alert('후원 처리 중 오류가 발생했습니다. 다시 시도해주세요.'); + triggerAlert('후원에 실패했습니다', 'warning'); } finally { setIsDonating(false); } @@ -68,7 +87,7 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => {

{data.title}

-
+
크레딧 { onKeyDown={handleKeyDown} ref={inputRef} /> - {hasNoMoney &&

갖고 있는 크레딧보다 더 많이 후원할 수 없어요

} + {isInvalidNumber ? ( +

1 이상의 숫자만 입력할 수 있어요

+ ) : hasNoMoney ? ( +

갖고 있는 크레딧보다 더 많이 후원할 수 없어요

+ ) : null}
{ > 후원하기 + {showAlert && }
); }; diff --git a/src/components/modals/donationModal/donationModal.styles.js b/src/components/modals/donationModal/donationModal.styles.js index 7b320db7..13373dab 100644 --- a/src/components/modals/donationModal/donationModal.styles.js +++ b/src/components/modals/donationModal/donationModal.styles.js @@ -107,7 +107,7 @@ export const titleContent = css` } `; -export const inputContent = (hasNomoney) => css` +export const inputContent = (hasNomoney, isInvalidNumber) => css` position: relative; width: 29.5rem; height: 5.8rem; @@ -116,7 +116,7 @@ export const inputContent = (hasNomoney) => css` width: 100%; height: 100%; padding: 1.6rem 4rem 1.6rem 1.6rem; - border: 1px solid ${hasNomoney ? 'var(--error-red)' : 'var(--white-full)'}; + border: 1px solid ${hasNomoney || isInvalidNumber ? 'var(--error-red)' : 'var(--white-full)'}; border-radius: 8px; font-size: 2rem; font-weight: 700; @@ -130,10 +130,10 @@ export const inputContent = (hasNomoney) => css` } ${ - hasNomoney && + (hasNomoney || isInvalidNumber) && css` - animation: ${shakeTitle} 0.3s ease-in-out; - ` + animation: ${shakeTitle} 0.3s ease-in-out; + ` } } From e3454967af9e886dbd1bc5b17c998dc1f638131a Mon Sep 17 00:00:00 2001 From: Jo Insung Date: Sun, 27 Apr 2025 06:01:18 +0900 Subject: [PATCH 014/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20Alert=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20-?= =?UTF-8?q?=20isSmall=20props=20=EC=B6=94=EA=B0=80=20-=20=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= 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/alert/Alert.jsx | 4 ++-- src/components/alert/alert.styles.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/alert/Alert.jsx b/src/components/alert/Alert.jsx index 5ad07465..ce1ad956 100644 --- a/src/components/alert/Alert.jsx +++ b/src/components/alert/Alert.jsx @@ -2,11 +2,11 @@ import successIcon from '@/assets/icons/success-icon.png'; import warningIcon from '@/assets/icons/warning-icon.png'; import * as S from './alert.styles'; -const Alert = ({ content = 'toast content', type = 'warning' }) => { +const Alert = ({ content = 'toast content', type = 'warning', isSmall = false }) => { const iconSrc = type === 'success' ? successIcon : warningIcon; return ( -
+
{`${type}-icon`}

{content}

diff --git a/src/components/alert/alert.styles.js b/src/components/alert/alert.styles.js index 7c4a0dc4..9567d44a 100644 --- a/src/components/alert/alert.styles.js +++ b/src/components/alert/alert.styles.js @@ -18,7 +18,7 @@ const bounceIn = keyframes` } `; -export const alertWrapper = css` +export const alertWrapper = (isSmall) => css` display: flex; position: fixed; z-index: 1111; @@ -30,7 +30,9 @@ export const alertWrapper = css` color: var(--brown-dark); background-color: var(--pink-soft); ${media({ - top: ['10rem', '10rem', '10rem', '2rem', '2rem'], + top: isSmall + ? ['7rem', '7rem', '10rem', '10rem', '10rem'] + : ['10rem', '10rem', '10rem', '2rem', '2rem'], })} animation: ${bounceIn} 0.5s ease forwards; `; From d3ffdaf1604e8700d0ccc8636e5bba0e83fb6332 Mon Sep 17 00:00:00 2001 From: Jo Insung Date: Sun, 27 Apr 2025 07:03:28 +0900 Subject: [PATCH 015/117] =?UTF-8?q?=F0=9F=90=9BFix:=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=9D=B4=20=EA=B3=84=EC=86=8D=20?= =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=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/modals/donationModal/DonationModal.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/modals/donationModal/DonationModal.jsx b/src/components/modals/donationModal/DonationModal.jsx index 8bae1e1c..6b5471f9 100644 --- a/src/components/modals/donationModal/DonationModal.jsx +++ b/src/components/modals/donationModal/DonationModal.jsx @@ -42,6 +42,7 @@ const DonationModal = ({ data, credit, updateCredit, onClose }) => { } setHasNoMoney(false); + setIsInvalidNumber(false); setDonateAmount(amount); }; From 6b04587bdd9ca22001b94143e974618dfa0d9688 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 07:59:20 +0900 Subject: [PATCH 016/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20=EC=83=89?= =?UTF-8?q?=EC=83=81=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/styles/Global.styles.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/Global.styles.jsx b/src/styles/Global.styles.jsx index fa6b652d..51c214a4 100644 --- a/src/styles/Global.styles.jsx +++ b/src/styles/Global.styles.jsx @@ -23,6 +23,7 @@ const resetStyle = css` --orange: #F96D69; --orange-deep: #F86F65; --orange-alpha-50: #F96E6880; + --orange-pink: #FF94B5; --pink: #FE5493; --pink-bright: #ED56C2; --pink-purple: #EA2FB6; From e5c7c85b0819bde075446fc8b4e11db0eb813fc3 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 07:59:45 +0900 Subject: [PATCH 017/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?= =?UTF-8?q?=ED=85=8C=EB=A7=88=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 : 리팩토링 (동작 변경 없이 코드 개선) --- src/pages/list/ListPage.jsx | 1 + src/pages/list/listPage.styles.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/pages/list/ListPage.jsx b/src/pages/list/ListPage.jsx index 22d8587e..7fe97a78 100644 --- a/src/pages/list/ListPage.jsx +++ b/src/pages/list/ListPage.jsx @@ -30,6 +30,7 @@ const ListPage = () => { return (
+
{/* Charge에 credit 전달 */} Date: Sun, 27 Apr 2025 08:00:25 +0900 Subject: [PATCH 018/117] =?UTF-8?q?=F0=9F=92=84Style:=20=ED=88=AC=ED=91=9C?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20css=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=EB=B2=84=ED=8A=BC=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 : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/customButton/CustomButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/customButton/CustomButton.jsx b/src/components/customButton/CustomButton.jsx index c0e764f8..2203e99d 100644 --- a/src/components/customButton/CustomButton.jsx +++ b/src/components/customButton/CustomButton.jsx @@ -62,7 +62,7 @@ const CustomButton = ({ mobileHeight: '3.1rem', fontSize: '1.3rem', }, - vote: { width: '12.8rem', height: '3.2rem', fontSize: '1.3rem' }, + vote: { width: '12rem', height: '3.2rem', fontSize: '2rem' }, landing: { width: '47.7rem', height: '4.8rem', mobileWidth: '23rem', fontSize: '1.4rem' }, error: { height: '4.2rem', From 5b6a7bb96f8b8a5c5747a34eb6aeb88cde8a0bd8 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 08:00:48 +0900 Subject: [PATCH 019/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=B0=A8=ED=8A=B8=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=91=EC=84=B1?= 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 | 129 ++++++++++++++++----------- 1 file changed, 79 insertions(+), 50 deletions(-) diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index 31463143..31518c08 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -1,52 +1,66 @@ import media from '@/styles/responsive'; -import { css } from '@emotion/react'; +import { css, keyframes } from '@emotion/react'; + +export const chartWrapper = css` + margin-bottom: 10rem; +`; export const chartSectionHeader = css` display: flex; justify-content: space-between; align-items: center; - font-size: 1.5rem; div { + font-weight: 700; ${media({ fontSize: ['1.5rem', '1.5rem', '1.8rem', '2rem'], - marginBottom: ['1.5rem', '1.5rem', '0', '0'], })} - font-weight: 700; } `; -export const customButton = css` - ${media({ - fontSize: ['1.5rem', '1.5rem', '1.8rem', '2rem'], - width: ['9rem', '9rem', '9rem', '9rem'], - })} - height: 2rem; - border: none; - border-radius: 0.3rem; - font-size: 0.8rem; - font-weight: 900; - background-color: var(--orange); - - &:hover { - background-color: var(--pink); - } +export const voteButtonFlow = keyframes` + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +`; - div { - display: flex; - justify-content: center; - align-items: center; - gap: 0.4rem; +export const voteButton = css` + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0.4rem; + background: linear-gradient(45deg, var(--orange-deep) 0%, var(--orange-pink) 51%, var(--pink) 100%); + background-position: left center; /* 기본 시작 위치 */ + background-size: 400%; /* 배경 크기 확장 */ + transition: all 0.1s ease; + animation: ${voteButtonFlow} 2s ease infinite; /* 애니메이션 흐름 */ - img { - width: 1.4rem; - height: 1.4rem; - } + img { + width: 2rem; + height: 2.4rem; + margin-bottom: 0.2rem; + } - span { - font-size: 1rem; - font-weight: 900; - } + span { + font-size: 1.4rem; + font-weight: 700; + } + + &:hover { + background-position: right center; /* hover 시 배경 이동 */ + transform: translateY(1px); + opacity: 0.9; + } + + &:active { + transform: scale(0.95); } `; @@ -54,6 +68,7 @@ export const tabButtonWrapper = css` display: flex; justify-content: center; align-items: center; + ${media({ marginTop: ['1rem', '2rem', '3rem', '4rem'], })} @@ -67,9 +82,12 @@ export const idolListButton = css` margin: 0 auto; border: none; border-radius: 3.2px; + border-bottom: 1px solid var(--white-alpha-20); text-align: center; color: var(--white); - background-color: var(--black-deep); + background-color: transparent; + transition: background-color 0.7s ease, color 2s ease; /* 추가: 부드럽게 변환 */ + ${media({ fontSize: ['1.2rem', '1.3rem', '1.5rem', '1.7rem'], height: ['3rem', '4rem', '4.5rem', '5rem'], @@ -77,15 +95,15 @@ export const idolListButton = css` `; export const activeButton = css` - background-color: var(--black); + background-color: var(--white-alpha-10); border-bottom: 1px solid var(--white); `; export const idolList = css` display: grid; - margin-top: 1rem; ${media({ - fontSize: ['1.1rem', '1.3rem', '1.5rem', '1.7rem'], + marginTop: ['1rem', '1.2rem', '1.7rem', '1.7rem'], + fontSize: ['1.1rem', '1.2rem', '1.4rem', '1.6rem'], gap: ['0.5rem', '0.7rem', '1.2rem', '1.7rem'], gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr'], })} @@ -93,12 +111,12 @@ export const idolList = css` li { display: flex; justify-content: space-between; - ${media({ - padding: ['0.3rem 0 0.7rem', '0.5rem 0 0.7rem', '0.8rem 0 1.7rem', '1rem 0 2rem'], - })} text-align: center; border-bottom: 1px solid var(--black); list-style: none; + ${media({ + paddingBottom: ['0.7rem', '0.7rem', '1.5rem', '1.7rem'], + })} span { display: flex; @@ -107,19 +125,23 @@ export const idolList = css` } img { - width: 4rem; - height: 4rem; - margin-right: .5rem; border: 2px solid var(--black); border-radius: 50%; box-shadow: 0 0 2px 1.6px var(--orange); box-shadow: 0 0 0 0.1rem var(--orange); object-fit: cover; + + ${media({ + width: ['4rem', '4rem', '5rem', '5rem'], + height: ['4rem', '4rem', '5rem', '5rem'], + marginInline: ['0.1rem', '0.2rem', '0.5rem', '0.5rem'], + })} } } `; export const rankStyle = css` + margin: 0 0.5rem; color: var(--orange); `; @@ -127,17 +149,21 @@ export const moreButton = css` display: flex; justify-content: center; align-items: center; - width: 15rem; - height: 2.5rem; - margin: 2rem auto; + margin-inline: auto; + margin-block: 3rem; border: 1px solid var(--white); border-radius: 3.2px; - font-size: 1.2rem; color: var(--white-full); - background-color: var(--black); + background-color: var(--white-alpha-05); + + ${media({ + fontSize: ['1.1rem', '1.2rem', '1.4rem', '1.6rem'], + width: ['10rem', '15rem', '20rem', '25rem'], + height: ['2rem', '2.7rem', '3.2rem', '3.5rem'], + })} &:hover { - background-color: var(--black-full); + background-color: var(--white-alpha-10); } &:disabled { @@ -153,8 +179,11 @@ export const spinner = css` padding: 4rem; img { - width: 15rem; - height: 15rem; object-fit: contain; + + ${media({ + width: ['12rem', '15rem', '20rem', '25rem'], + height: ['12rem', '15rem', '20rem', '25rem'], + })} } `; From 5b2ae8733852a40359b27944d8a09d326d1169de Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 08:01:56 +0900 Subject: [PATCH 020/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=20=EC=95=84=EB=9E=98=20footer=EC=99=80=20=EC=97=AC=EB=B0=B1?= =?UTF-8?q?=EC=9D=84=20=EB=91=90=EA=B8=B0=20=EC=9C=84=ED=95=9C=20css=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=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 | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index 0c15ac50..65310291 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -127,14 +127,12 @@ const Chart = ({ setModalType }) => { }; return ( -
+
이달의 차트
- setModalType('vote')} style={S.customButton}> -
- 차트 - 차트 투표하기 -
+ setModalType('vote')} style={S.voteButton}> + 차트 + 차트 투표하기
From e024404f0cc47ac49f12354db52c62f4efd45b2b Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 09:20:22 +0900 Subject: [PATCH 021/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=B0=98=EB=B3=B5?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EC=88=98=ED=99=94=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=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.styles.js | 34 ++++++++++++---------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/components/chart/chart.styles.js b/src/components/chart/chart.styles.js index 31518c08..f0649cc6 100644 --- a/src/components/chart/chart.styles.js +++ b/src/components/chart/chart.styles.js @@ -1,6 +1,12 @@ import media from '@/styles/responsive'; import { css, keyframes } from '@emotion/react'; +export const flexCenter = css` + display: flex; + justify-content: center; + align-items: center; +`; + export const chartWrapper = css` margin-bottom: 10rem; `; @@ -31,20 +37,16 @@ export const voteButtonFlow = keyframes` `; export const voteButton = css` - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + ${flexCenter}; gap: 0.4rem; - background: linear-gradient(45deg, var(--orange-deep) 0%, var(--orange-pink) 51%, var(--pink) 100%); + background: linear-gradient(45deg, var(--blue-dark) 0%, var(--blue-medium) 51%, var(--blue-dark) 100%); background-position: left center; /* 기본 시작 위치 */ background-size: 400%; /* 배경 크기 확장 */ transition: all 0.1s ease; - animation: ${voteButtonFlow} 2s ease infinite; /* 애니메이션 흐름 */ img { width: 2rem; - height: 2.4rem; + height: 2.3rem; margin-bottom: 0.2rem; } @@ -55,6 +57,7 @@ export const voteButton = css` &:hover { background-position: right center; /* hover 시 배경 이동 */ + animation: ${voteButtonFlow} 6s ease infinite; /* 애니메이션 흐름 */ transform: translateY(1px); opacity: 0.9; } @@ -65,9 +68,7 @@ export const voteButton = css` `; export const tabButtonWrapper = css` - display: flex; - justify-content: center; - align-items: center; + ${flexCenter}; ${media({ marginTop: ['1rem', '2rem', '3rem', '4rem'], @@ -75,9 +76,7 @@ export const tabButtonWrapper = css` `; export const idolListButton = css` - display: flex; - justify-content: center; - align-items: center; + ${flexCenter}; width: 100%; margin: 0 auto; border: none; @@ -127,7 +126,6 @@ export const idolList = css` img { border: 2px solid var(--black); border-radius: 50%; - box-shadow: 0 0 2px 1.6px var(--orange); box-shadow: 0 0 0 0.1rem var(--orange); object-fit: cover; @@ -146,9 +144,7 @@ export const rankStyle = css` `; export const moreButton = css` - display: flex; - justify-content: center; - align-items: center; + ${flexCenter}; margin-inline: auto; margin-block: 3rem; border: 1px solid var(--white); @@ -173,9 +169,7 @@ export const moreButton = css` `; export const spinner = css` - display: flex; - justify-content: center; - align-items: center; + ${flexCenter}; padding: 4rem; img { From 3ce2ad41b660bcc193bcbe2157d07d45220ea3db Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 09:20:53 +0900 Subject: [PATCH 022/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=83=89=EC=83=81=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/styles/Global.styles.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/Global.styles.jsx b/src/styles/Global.styles.jsx index 51c214a4..4c43a8eb 100644 --- a/src/styles/Global.styles.jsx +++ b/src/styles/Global.styles.jsx @@ -30,6 +30,7 @@ const resetStyle = css` --pink-soft: #FFF0F0; --pink-rose-alpha-50: #FE578F80; --blue-sky: #1C9EFB; + --blue-medium: #62B9F7; --blue-dark: #3D2FA9; --blue-navy: #272F3D; --purple: #8D42FB; From 83ff9c5386051f69521bc14bed3c274866cf5f42 Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 09:25:23 +0900 Subject: [PATCH 023/117] =?UTF-8?q?=F0=9F=92=84Style:=20=ED=81=AC=EB=A0=88?= =?UTF-8?q?=EB=94=A7=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD?= 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/charge/Charge.jsx | 6 +++--- .../modals/creditChargeModal/CreditChargeModal.jsx | 2 +- .../modals/creditChargeModal/creditChargeModal.styles.js | 4 ++++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/charge/Charge.jsx b/src/components/charge/Charge.jsx index 832babc4..74d23122 100644 --- a/src/components/charge/Charge.jsx +++ b/src/components/charge/Charge.jsx @@ -1,12 +1,12 @@ -import creditImg from '@/assets/images/credit.png'; +import creditImg from '@/assets/images/star.png'; import { addCommas } from '@/utils/format'; import * as S from './charge.styles'; const Charge = ({ setModalType, credit }) => { return (
-
-
내 크레딧
+
+
내 크레딧
크레딧 {addCommas(credit)} {/* ListPage에서 전달받은 credit 표시 */} diff --git a/src/components/modals/creditChargeModal/CreditChargeModal.jsx b/src/components/modals/creditChargeModal/CreditChargeModal.jsx index 9bfdbb7d..b161c95f 100644 --- a/src/components/modals/creditChargeModal/CreditChargeModal.jsx +++ b/src/components/modals/creditChargeModal/CreditChargeModal.jsx @@ -1,5 +1,5 @@ import creditWhiteImg from '@/assets/images/credit-white.png'; -import creditImg from '@/assets/images/credit.png'; +import creditImg from '@/assets/images/star.png'; import { CustomButton } from '@/components/customButton'; import { RadioButton } from '@/components/radioButton'; import { prices } from '@/data/mockData'; diff --git a/src/components/modals/creditChargeModal/creditChargeModal.styles.js b/src/components/modals/creditChargeModal/creditChargeModal.styles.js index bb84f66a..65dd6600 100644 --- a/src/components/modals/creditChargeModal/creditChargeModal.styles.js +++ b/src/components/modals/creditChargeModal/creditChargeModal.styles.js @@ -51,6 +51,10 @@ export const buttonStyle = css` border-color: var(--orange); color: var(--gray); } + + img { + width: 2rem; + } `; export const radioButtonContent = css` From c5e52be8c7868cd829a2ea4afdb1f2a267bfb4ae Mon Sep 17 00:00:00 2001 From: yujin Jeon <101913688+yuj2n@users.noreply.github.com> Date: Sun, 27 Apr 2025 09:26:54 +0900 Subject: [PATCH 024/117] =?UTF-8?q?=F0=9F=92=84Style:=20=ED=81=AC=EB=A0=88?= =?UTF-8?q?=EB=94=A7=20=EC=B6=A9=EC=A0=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=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/charge/charge.styles.js | 60 ++++++++++++++++++++------ 1 file changed, 47 insertions(+), 13 deletions(-) diff --git a/src/components/charge/charge.styles.js b/src/components/charge/charge.styles.js index 72a3efdc..45e04cd2 100644 --- a/src/components/charge/charge.styles.js +++ b/src/components/charge/charge.styles.js @@ -1,45 +1,79 @@ -import { css } from '@emotion/react'; +import { css, keyframes } from '@emotion/react'; + +export const voteButtonFlow = keyframes` + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +`; export const creditWrapper = css` display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; - padding: 2.5rem 4rem; + padding: 4rem 6rem; border: 1px solid var(--white); border-radius: 0.5rem; font-weight: 700; + button { - width: 5rem; - height: 3rem; + width: 8rem; + height: 4rem; border: none; border-radius: 0.5rem; - font-size: 0.8rem; + font-size: 1.4rem; font-weight: 700; - color: var(--orange); - background-color: var(--black); + letter-spacing: 0.1rem; + color: var(--white); + background: linear-gradient(45deg, var(--pink) 0%, var(--orange-pink) 51%, var(--pink) 100%); + background-color: var(--white-alpha-10); + background-position: left center; /* 기본 시작 위치 */ + background-size: 400%; /* 배경 크기 확장 */ + transition: all 0.1s ease; + animation: ${voteButtonFlow} 3s ease infinite; /* 애니메이션 흐름 */ + + &:hover { + animation-play-state: paused; + } } `; +export const creditContent = css` + display: flex; + flex-direction: column; + gap: 0.2rem; +`; + +export const myCredit = css` + font-size: 1.6rem; + color: var(--white-alpha-60); +`; + export const credit = css` display: flex; + justify-content: center; align-items: center; - gap: 0.5rem; + gap: 0.3rem; margin-top: 0.5rem; border-radius: .5rem; - font-size: .9rem; font-weight: 500; img { - width: 1.5rem; - height: 1.5rem; + width: 2.5rem; + height: 2.5rem; margin-top: 0.2rem; } span { - font-size: 1rem; + margin-top: 0.3rem; + font-size: 2rem; font-weight: 700; - color: var(--orange); } `; From 09f5d4497e6b0a7bcc7a62fd0bf608325feaa6d8 Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 15:35:50 +0900 Subject: [PATCH 025/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20errorBoun?= =?UTF-8?q?dary=ED=8F=B4=EB=8D=94=20=EC=83=9D=EC=84=B1?= 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/error/index.js | 3 --- src/components/test/TestRenderError.jsx | 2 +- .../apiErrorBoundary}/ApiErrorBoundary.jsx | 2 +- src/errorBoundary/apiErrorBoundary/index.js | 1 + .../globalErrorBoundary}/GlobalErrorBoundary.jsx | 0 src/errorBoundary/globalErrorBoundary/index.js | 1 + src/errorBoundary/index.js | 3 +++ .../renderErrorBoundary}/RenderErrorBoundary.jsx | 2 +- src/errorBoundary/renderErrorBoundary/index.js | 1 + .../error => errorBoundary/styles}/errorBoundary.styles.js | 0 src/errorBoundary/styles/index.js | 1 + src/pages/error/index.js | 4 ++-- src/pages/error/notFound/index.js | 2 +- src/pages/error/serverError/index.js | 2 +- src/routes/router.jsx | 2 +- 15 files changed, 15 insertions(+), 11 deletions(-) delete mode 100644 src/components/error/index.js rename src/{components/error => errorBoundary/apiErrorBoundary}/ApiErrorBoundary.jsx (97%) create mode 100644 src/errorBoundary/apiErrorBoundary/index.js rename src/{components/error => errorBoundary/globalErrorBoundary}/GlobalErrorBoundary.jsx (100%) create mode 100644 src/errorBoundary/globalErrorBoundary/index.js create mode 100644 src/errorBoundary/index.js rename src/{components/error => errorBoundary/renderErrorBoundary}/RenderErrorBoundary.jsx (97%) create mode 100644 src/errorBoundary/renderErrorBoundary/index.js rename src/{components/error => errorBoundary/styles}/errorBoundary.styles.js (100%) create mode 100644 src/errorBoundary/styles/index.js diff --git a/src/components/error/index.js b/src/components/error/index.js deleted file mode 100644 index 87b2e0c8..00000000 --- a/src/components/error/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as GlobalErrorBoundary } from './GlobalErrorBoundary'; -export { default as ApiErrorBoundary } from './ApiErrorBoundary'; -export { default as RenderErrorBoundary } from './RenderErrorBoundary'; diff --git a/src/components/test/TestRenderError.jsx b/src/components/test/TestRenderError.jsx index ad84fcd1..4687b7bb 100644 --- a/src/components/test/TestRenderError.jsx +++ b/src/components/test/TestRenderError.jsx @@ -1,4 +1,4 @@ -import { RenderErrorBoundary } from '@/components/error'; +import { RenderErrorBoundary } from '@/errorBoundary'; import BrokenComponent from './BrokenComponent'; const TestRenderError = () => { diff --git a/src/components/error/ApiErrorBoundary.jsx b/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx similarity index 97% rename from src/components/error/ApiErrorBoundary.jsx rename to src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx index 94c51606..a59664c7 100644 --- a/src/components/error/ApiErrorBoundary.jsx +++ b/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx @@ -1,8 +1,8 @@ import { CustomButton } from '@/components/customButton'; import { UI_ERRORS } from '@/constants/errors'; import { STATUS_CODES } from '@/constants/statusCodes'; +import * as S from '@/errorBoundary/styles'; import { useRouteError } from 'react-router-dom'; -import * as S from './errorBoundary.styles'; /** * ApiErrorBoundary diff --git a/src/errorBoundary/apiErrorBoundary/index.js b/src/errorBoundary/apiErrorBoundary/index.js new file mode 100644 index 00000000..a17219f2 --- /dev/null +++ b/src/errorBoundary/apiErrorBoundary/index.js @@ -0,0 +1 @@ +export { default } from './ApiErrorBoundary'; diff --git a/src/components/error/GlobalErrorBoundary.jsx b/src/errorBoundary/globalErrorBoundary/GlobalErrorBoundary.jsx similarity index 100% rename from src/components/error/GlobalErrorBoundary.jsx rename to src/errorBoundary/globalErrorBoundary/GlobalErrorBoundary.jsx diff --git a/src/errorBoundary/globalErrorBoundary/index.js b/src/errorBoundary/globalErrorBoundary/index.js new file mode 100644 index 00000000..6aaeb2f4 --- /dev/null +++ b/src/errorBoundary/globalErrorBoundary/index.js @@ -0,0 +1 @@ +export { default } from './GlobalErrorBoundary'; diff --git a/src/errorBoundary/index.js b/src/errorBoundary/index.js new file mode 100644 index 00000000..a69eda56 --- /dev/null +++ b/src/errorBoundary/index.js @@ -0,0 +1,3 @@ +export { default as GlobalErrorBoundary } from './globalErrorBoundary'; +export { default as ApiErrorBoundary } from './apiErrorBoundary'; +export { default as RenderErrorBoundary } from './renderErrorBoundary'; diff --git a/src/components/error/RenderErrorBoundary.jsx b/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx similarity index 97% rename from src/components/error/RenderErrorBoundary.jsx rename to src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx index ac18e842..e20a14c1 100644 --- a/src/components/error/RenderErrorBoundary.jsx +++ b/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx @@ -1,7 +1,7 @@ import { CustomButton } from '@/components/customButton'; import { UI_ERRORS } from '@/constants/errors'; +import * as S from '@/errorBoundary/styles'; import { Component } from 'react'; -import * as S from './errorBoundary.styles'; /** * RenderErrorBoundary diff --git a/src/errorBoundary/renderErrorBoundary/index.js b/src/errorBoundary/renderErrorBoundary/index.js new file mode 100644 index 00000000..904f4b41 --- /dev/null +++ b/src/errorBoundary/renderErrorBoundary/index.js @@ -0,0 +1 @@ +export { default } from './RenderErrorBoundary'; diff --git a/src/components/error/errorBoundary.styles.js b/src/errorBoundary/styles/errorBoundary.styles.js similarity index 100% rename from src/components/error/errorBoundary.styles.js rename to src/errorBoundary/styles/errorBoundary.styles.js diff --git a/src/errorBoundary/styles/index.js b/src/errorBoundary/styles/index.js new file mode 100644 index 00000000..9f872145 --- /dev/null +++ b/src/errorBoundary/styles/index.js @@ -0,0 +1 @@ +export * from './errorBoundary.styles'; diff --git a/src/pages/error/index.js b/src/pages/error/index.js index ecc58dd4..cc3110a7 100644 --- a/src/pages/error/index.js +++ b/src/pages/error/index.js @@ -1,2 +1,2 @@ -export * from './notFound/'; -export * from './serverError/'; +export { default as NotFoundPage } from './notFound'; +export { default as ServerErrorPage } from './serverError'; diff --git a/src/pages/error/notFound/index.js b/src/pages/error/notFound/index.js index 1a4918ac..35f02dc1 100644 --- a/src/pages/error/notFound/index.js +++ b/src/pages/error/notFound/index.js @@ -1 +1 @@ -export { default as NotFoundPage } from './NotFoundPage'; +export { default } from './NotFoundPage'; diff --git a/src/pages/error/serverError/index.js b/src/pages/error/serverError/index.js index 087280cc..65ac1200 100644 --- a/src/pages/error/serverError/index.js +++ b/src/pages/error/serverError/index.js @@ -1 +1 @@ -export { default as ServerErrorPage } from './ServerErrorPage'; +export { default } from './ServerErrorPage'; diff --git a/src/routes/router.jsx b/src/routes/router.jsx index 79818d43..177d0bf0 100644 --- a/src/routes/router.jsx +++ b/src/routes/router.jsx @@ -1,7 +1,7 @@ -import { ApiErrorBoundary, GlobalErrorBoundary, RenderErrorBoundary } from '@/components/error'; import { ENDPOINTS } from '@/constants/api'; import { THROWN_ERRORS } from '@/constants/errors'; import { STATUS_CODES } from '@/constants/statusCodes'; +import { ApiErrorBoundary, GlobalErrorBoundary, RenderErrorBoundary } from '@/errorBoundary'; import { requestGet } from '@/utils/api'; import { createBrowserRouter } from 'react-router-dom'; From f0d50610664b330a74cb24c75fabcacceaa5e3bd Mon Sep 17 00:00:00 2001 From: sonsujin Date: Sun, 27 Apr 2025 15:47:17 +0900 Subject: [PATCH 026/117] =?UTF-8?q?=E2=9C=A8Feat:=20Avatar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= 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/avatar/avatar.styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar/avatar.styles.js b/src/components/avatar/avatar.styles.js index c562b165..f5067661 100644 --- a/src/components/avatar/avatar.styles.js +++ b/src/components/avatar/avatar.styles.js @@ -43,6 +43,6 @@ export const image = (size) => css` aspect-ratio: 1/1; border: 4px solid var(--black); border-radius: 50%; - box-shadow: 0 0 0 1px var(--orange); + box-shadow: 0 0 0 2px var(--orange); object-fit: cover; `; From 13fe1d4ef289247087ac1ba3d000ca55f3aebd69 Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 16:12:51 +0900 Subject: [PATCH 027/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC,=20=EB=B2=84=ED=8A=BC=20=ED=8F=B4=EB=8D=94=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= 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 : 리팩토링 (동작 변경 없이 코드 개선) # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/components/avatarButton/index.js | 1 - .../{ => button}/avatarButton/AvatarButton.jsx | 0 .../{ => button}/avatarButton/avatarButton.styles.js | 0 src/components/button/avatarButton/index.js | 1 + .../{ => button}/customButton/CustomButton.jsx | 0 .../{ => button}/customButton/customButton.styles.js | 0 src/components/button/customButton/index.js | 1 + src/components/button/index.js | 3 +++ .../{ => button}/radioButton/RadioButton.jsx | 0 src/components/button/radioButton/index.js | 1 + .../{ => button}/radioButton/radioButton.styles.js | 0 src/components/card/Card.jsx | 2 +- src/components/chart/Chart.jsx | 2 +- src/components/customButton/index.js | 1 - src/components/list/ListModal.jsx | 12 +++++++----- src/components/modal/index.js | 1 - .../{modal => modals/commonModal}/Modal.jsx | 0 src/components/modals/commonModal/index.js | 1 + .../{modal => modals/commonModal}/modal.styles.js | 0 .../modals/creditChargeModal/CreditChargeModal.jsx | 3 +-- src/components/modals/creditChargeModal/index.js | 2 +- .../modals/creditLackModal/CreditLackModal.jsx | 2 +- src/components/modals/creditLackModal/index.js | 2 +- .../modals/donationModal/DonationModal.jsx | 2 +- src/components/modals/donationModal/index.js | 2 +- src/components/modals/index.js | 5 +++++ src/components/modals/voteModal/VoteModal.jsx | 3 +-- src/components/modals/voteModal/index.js | 2 +- src/components/radioButton/index.js | 1 - .../apiErrorBoundary/ApiErrorBoundary.jsx | 2 +- .../renderErrorBoundary/RenderErrorBoundary.jsx | 2 +- src/pages/error/notFound/NotFoundPage.jsx | 2 +- src/pages/error/serverError/ServerErrorPage.jsx | 2 +- src/pages/landing/LandingPage.jsx | 2 +- src/pages/my/MyPage.jsx | 3 +-- 35 files changed, 35 insertions(+), 28 deletions(-) delete mode 100644 src/components/avatarButton/index.js rename src/components/{ => button}/avatarButton/AvatarButton.jsx (100%) rename src/components/{ => button}/avatarButton/avatarButton.styles.js (100%) create mode 100644 src/components/button/avatarButton/index.js rename src/components/{ => button}/customButton/CustomButton.jsx (100%) rename src/components/{ => button}/customButton/customButton.styles.js (100%) create mode 100644 src/components/button/customButton/index.js create mode 100644 src/components/button/index.js rename src/components/{ => button}/radioButton/RadioButton.jsx (100%) create mode 100644 src/components/button/radioButton/index.js rename src/components/{ => button}/radioButton/radioButton.styles.js (100%) delete mode 100644 src/components/customButton/index.js delete mode 100644 src/components/modal/index.js rename src/components/{modal => modals/commonModal}/Modal.jsx (100%) create mode 100644 src/components/modals/commonModal/index.js rename src/components/{modal => modals/commonModal}/modal.styles.js (100%) create mode 100644 src/components/modals/index.js delete mode 100644 src/components/radioButton/index.js diff --git a/src/components/avatarButton/index.js b/src/components/avatarButton/index.js deleted file mode 100644 index a6a7431b..00000000 --- a/src/components/avatarButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as AvatarButton } from './AvatarButton'; diff --git a/src/components/avatarButton/AvatarButton.jsx b/src/components/button/avatarButton/AvatarButton.jsx similarity index 100% rename from src/components/avatarButton/AvatarButton.jsx rename to src/components/button/avatarButton/AvatarButton.jsx diff --git a/src/components/avatarButton/avatarButton.styles.js b/src/components/button/avatarButton/avatarButton.styles.js similarity index 100% rename from src/components/avatarButton/avatarButton.styles.js rename to src/components/button/avatarButton/avatarButton.styles.js diff --git a/src/components/button/avatarButton/index.js b/src/components/button/avatarButton/index.js new file mode 100644 index 00000000..eb93ae0a --- /dev/null +++ b/src/components/button/avatarButton/index.js @@ -0,0 +1 @@ +export { default } from './AvatarButton'; diff --git a/src/components/customButton/CustomButton.jsx b/src/components/button/customButton/CustomButton.jsx similarity index 100% rename from src/components/customButton/CustomButton.jsx rename to src/components/button/customButton/CustomButton.jsx diff --git a/src/components/customButton/customButton.styles.js b/src/components/button/customButton/customButton.styles.js similarity index 100% rename from src/components/customButton/customButton.styles.js rename to src/components/button/customButton/customButton.styles.js diff --git a/src/components/button/customButton/index.js b/src/components/button/customButton/index.js new file mode 100644 index 00000000..6a354fce --- /dev/null +++ b/src/components/button/customButton/index.js @@ -0,0 +1 @@ +export { default } from './CustomButton'; diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 00000000..2c110a3c --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1,3 @@ +export { default as AvatarButton } from './avatarButton'; +export { default as CustomButton } from './customButton'; +export { default as RadioButton } from './radioButton'; diff --git a/src/components/radioButton/RadioButton.jsx b/src/components/button/radioButton/RadioButton.jsx similarity index 100% rename from src/components/radioButton/RadioButton.jsx rename to src/components/button/radioButton/RadioButton.jsx diff --git a/src/components/button/radioButton/index.js b/src/components/button/radioButton/index.js new file mode 100644 index 00000000..b97ac7c5 --- /dev/null +++ b/src/components/button/radioButton/index.js @@ -0,0 +1 @@ +export { default } from './RadioButton'; diff --git a/src/components/radioButton/radioButton.styles.js b/src/components/button/radioButton/radioButton.styles.js similarity index 100% rename from src/components/radioButton/radioButton.styles.js rename to src/components/button/radioButton/radioButton.styles.js diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx index 19721d80..7e1584de 100644 --- a/src/components/card/Card.jsx +++ b/src/components/card/Card.jsx @@ -1,5 +1,5 @@ import creditImg from '@/assets/images/credit.png'; -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { addCommas, getDaysRemaining, getDonationPercentage } from '@/utils/format'; import { useEffect, useState } from 'react'; import * as S from './card.styles'; diff --git a/src/components/chart/Chart.jsx b/src/components/chart/Chart.jsx index e07b9e9d..2886e7c5 100644 --- a/src/components/chart/Chart.jsx +++ b/src/components/chart/Chart.jsx @@ -1,6 +1,6 @@ import chartImg from '@/assets/images/chart.png'; import loadingSpinner from '@/assets/images/loading-spinner.gif'; -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { ENDPOINTS } from '@/constants/api'; import { requestGet } from '@/utils/api'; import { useEffect, useState } from 'react'; diff --git a/src/components/customButton/index.js b/src/components/customButton/index.js deleted file mode 100644 index b556db69..00000000 --- a/src/components/customButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as CustomButton } from './CustomButton'; diff --git a/src/components/list/ListModal.jsx b/src/components/list/ListModal.jsx index 118bae62..2b65576a 100644 --- a/src/components/list/ListModal.jsx +++ b/src/components/list/ListModal.jsx @@ -1,8 +1,10 @@ -import { Modal } from '@/components/modal'; -import { CreditChargeModal } from '@/components/modals/creditChargeModal'; -import { CreditLackModal } from '@/components/modals/creditLackModal'; -import { DonationModal } from '@/components/modals/donationModal'; -import { VoteModal } from '@/components/modals/voteModal'; +import { + CreditChargeModal, + CreditLackModal, + DonationModal, + Modal, + VoteModal, +} from '@/components/modals'; const ListModal = ({ modalType, setModalType, credit, updateCredit, gender, donations }) => { const onCloseModal = () => setModalType(null); diff --git a/src/components/modal/index.js b/src/components/modal/index.js deleted file mode 100644 index c6b35681..00000000 --- a/src/components/modal/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Modal } from './Modal'; diff --git a/src/components/modal/Modal.jsx b/src/components/modals/commonModal/Modal.jsx similarity index 100% rename from src/components/modal/Modal.jsx rename to src/components/modals/commonModal/Modal.jsx diff --git a/src/components/modals/commonModal/index.js b/src/components/modals/commonModal/index.js new file mode 100644 index 00000000..0690fecf --- /dev/null +++ b/src/components/modals/commonModal/index.js @@ -0,0 +1 @@ +export { default } from './Modal'; diff --git a/src/components/modal/modal.styles.js b/src/components/modals/commonModal/modal.styles.js similarity index 100% rename from src/components/modal/modal.styles.js rename to src/components/modals/commonModal/modal.styles.js diff --git a/src/components/modals/creditChargeModal/CreditChargeModal.jsx b/src/components/modals/creditChargeModal/CreditChargeModal.jsx index 9bfdbb7d..777d187c 100644 --- a/src/components/modals/creditChargeModal/CreditChargeModal.jsx +++ b/src/components/modals/creditChargeModal/CreditChargeModal.jsx @@ -1,7 +1,6 @@ import creditWhiteImg from '@/assets/images/credit-white.png'; import creditImg from '@/assets/images/credit.png'; -import { CustomButton } from '@/components/customButton'; -import { RadioButton } from '@/components/radioButton'; +import { CustomButton, RadioButton } from '@/components/button'; import { prices } from '@/data/mockData'; import { useState } from 'react'; import * as S from './creditChargeModal.styles'; diff --git a/src/components/modals/creditChargeModal/index.js b/src/components/modals/creditChargeModal/index.js index 1875584a..6fec9397 100644 --- a/src/components/modals/creditChargeModal/index.js +++ b/src/components/modals/creditChargeModal/index.js @@ -1 +1 @@ -export { default as CreditChargeModal } from './creditChargeModal'; +export { default } from './creditChargeModal'; diff --git a/src/components/modals/creditLackModal/CreditLackModal.jsx b/src/components/modals/creditLackModal/CreditLackModal.jsx index 0f20abcc..b388cfe7 100644 --- a/src/components/modals/creditLackModal/CreditLackModal.jsx +++ b/src/components/modals/creditLackModal/CreditLackModal.jsx @@ -1,5 +1,5 @@ import creditImg from '@/assets/images/credit.png'; -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import * as S from './creditLackModal.styles'; const CreditLackModal = ({ setModalType }) => { diff --git a/src/components/modals/creditLackModal/index.js b/src/components/modals/creditLackModal/index.js index 6f624255..ad429177 100644 --- a/src/components/modals/creditLackModal/index.js +++ b/src/components/modals/creditLackModal/index.js @@ -1 +1 @@ -export { default as CreditLackModal } from './CreditLackModal'; +export { default } from './CreditLackModal'; diff --git a/src/components/modals/donationModal/DonationModal.jsx b/src/components/modals/donationModal/DonationModal.jsx index bc8608e4..fdd1c8e9 100644 --- a/src/components/modals/donationModal/DonationModal.jsx +++ b/src/components/modals/donationModal/DonationModal.jsx @@ -1,5 +1,5 @@ import creditImg from '@/assets/images/credit.png'; -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { ENDPOINTS } from '@/constants/api'; import { requestPut } from '@/utils/api'; import { useRef, useState } from 'react'; diff --git a/src/components/modals/donationModal/index.js b/src/components/modals/donationModal/index.js index d9a9eb6e..832667ff 100644 --- a/src/components/modals/donationModal/index.js +++ b/src/components/modals/donationModal/index.js @@ -1 +1 @@ -export { default as DonationModal } from './DonationModal'; +export { default } from './DonationModal'; diff --git a/src/components/modals/index.js b/src/components/modals/index.js new file mode 100644 index 00000000..05b3cfef --- /dev/null +++ b/src/components/modals/index.js @@ -0,0 +1,5 @@ +export { default as Modal } from './commonModal'; +export { default as VoteModal } from './voteModal'; +export { default as DonationModal } from './donationModal'; +export { default as CreditChargeModal } from './creditChargeModal'; +export { default as CreditLackModal } from './creditLackModal'; diff --git a/src/components/modals/voteModal/VoteModal.jsx b/src/components/modals/voteModal/VoteModal.jsx index 8e06b241..ea2d8660 100644 --- a/src/components/modals/voteModal/VoteModal.jsx +++ b/src/components/modals/voteModal/VoteModal.jsx @@ -1,7 +1,6 @@ import { Alert } from '@/components/alert'; import { Avatar } from '@/components/avatar'; -import { CustomButton } from '@/components/customButton'; -import { RadioButton } from '@/components/radioButton'; +import { CustomButton, RadioButton } from '@/components/button'; import { ENDPOINTS } from '@/constants/api'; import { requestGet, requestPost } from '@/utils/api'; import { addCommas } from '@/utils/format'; diff --git a/src/components/modals/voteModal/index.js b/src/components/modals/voteModal/index.js index d1bbfec6..aa8b4390 100644 --- a/src/components/modals/voteModal/index.js +++ b/src/components/modals/voteModal/index.js @@ -1 +1 @@ -export { default as VoteModal } from './VoteModal'; +export { default } from './VoteModal'; diff --git a/src/components/radioButton/index.js b/src/components/radioButton/index.js deleted file mode 100644 index 7bc51af3..00000000 --- a/src/components/radioButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as RadioButton } from './RadioButton'; diff --git a/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx b/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx index a59664c7..a14e221a 100644 --- a/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx +++ b/src/errorBoundary/apiErrorBoundary/ApiErrorBoundary.jsx @@ -1,4 +1,4 @@ -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { UI_ERRORS } from '@/constants/errors'; import { STATUS_CODES } from '@/constants/statusCodes'; import * as S from '@/errorBoundary/styles'; diff --git a/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx b/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx index e20a14c1..68cf7bd4 100644 --- a/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx +++ b/src/errorBoundary/renderErrorBoundary/RenderErrorBoundary.jsx @@ -1,4 +1,4 @@ -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { UI_ERRORS } from '@/constants/errors'; import * as S from '@/errorBoundary/styles'; import { Component } from 'react'; diff --git a/src/pages/error/notFound/NotFoundPage.jsx b/src/pages/error/notFound/NotFoundPage.jsx index 2cd5e25a..4fb7ba04 100644 --- a/src/pages/error/notFound/NotFoundPage.jsx +++ b/src/pages/error/notFound/NotFoundPage.jsx @@ -1,5 +1,5 @@ import logoImg from '@/assets/images/logo.png'; -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { UI_ERRORS } from '@/constants/errors'; import { STATUS_CODES } from '@/constants/statusCodes'; import * as S from '@/pages/error/styles'; diff --git a/src/pages/error/serverError/ServerErrorPage.jsx b/src/pages/error/serverError/ServerErrorPage.jsx index e0867b82..e08c350f 100644 --- a/src/pages/error/serverError/ServerErrorPage.jsx +++ b/src/pages/error/serverError/ServerErrorPage.jsx @@ -1,4 +1,4 @@ -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { UI_ERRORS } from '@/constants/errors'; import { STATUS_CODES } from '@/constants/statusCodes'; import * as S from '@/pages/error/styles'; diff --git a/src/pages/landing/LandingPage.jsx b/src/pages/landing/LandingPage.jsx index 844ca8b1..efc05b83 100644 --- a/src/pages/landing/LandingPage.jsx +++ b/src/pages/landing/LandingPage.jsx @@ -1,4 +1,4 @@ -import { CustomButton } from '@/components/customButton'; +import { CustomButton } from '@/components/button'; import { motion } from 'motion/react'; import { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; diff --git a/src/pages/my/MyPage.jsx b/src/pages/my/MyPage.jsx index 10327d91..f4294f04 100644 --- a/src/pages/my/MyPage.jsx +++ b/src/pages/my/MyPage.jsx @@ -2,8 +2,7 @@ import nextIcon from '@/assets/icons/next-icon.png'; import addIcon from '@/assets/icons/plus-icon.png'; import prevIcon from '@/assets/icons/prev-icon.png'; import { Avatar } from '@/components/avatar'; -import { AvatarButton } from '@/components/avatarButton'; -import { CustomButton } from '@/components/customButton'; +import { AvatarButton, CustomButton } from '@/components/button'; import { useEffect, useState } from 'react'; import { useLoaderData } from 'react-router-dom'; import * as S from './myPage.styles'; From 23c1b36e057b802d1e10d1a3e4b6f966c38b3b1b Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 16:26:33 +0900 Subject: [PATCH 028/117] =?UTF-8?q?=F0=9F=92=84Style:=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20display=20=EB=B3=80=EA=B2=BD?= 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/pages/error/notFound/NotFoundPage.jsx | 14 ++++++++------ .../error/serverError/ServerErrorPage.jsx | 18 ++++++++++-------- src/pages/error/styles/errorButton.styles.js | 11 +++++++++-- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/pages/error/notFound/NotFoundPage.jsx b/src/pages/error/notFound/NotFoundPage.jsx index 4fb7ba04..53679c7c 100644 --- a/src/pages/error/notFound/NotFoundPage.jsx +++ b/src/pages/error/notFound/NotFoundPage.jsx @@ -19,12 +19,14 @@ const NotFoundPage = () => {

{status}

{statusText}

{uiMessage}

- - - StarSync 로고 - StarSync 홈 - - +
+ + + StarSync 로고 + StarSync 홈 + + +
); diff --git a/src/pages/error/serverError/ServerErrorPage.jsx b/src/pages/error/serverError/ServerErrorPage.jsx index e08c350f..eb1cd5f8 100644 --- a/src/pages/error/serverError/ServerErrorPage.jsx +++ b/src/pages/error/serverError/ServerErrorPage.jsx @@ -18,14 +18,16 @@ const ServerErrorPage = () => {

{status}

{statusText}

{uiMessage}

- window.location.reload()} //여기도 onButtonClick으로 바뀌면 변경 - > - 다시 시도 - +
+ window.location.reload()} //여기도 onButtonClick으로 바뀌면 변경 + > + 다시 시도 + +
); diff --git a/src/pages/error/styles/errorButton.styles.js b/src/pages/error/styles/errorButton.styles.js index 1eb01acf..314f633f 100644 --- a/src/pages/error/styles/errorButton.styles.js +++ b/src/pages/error/styles/errorButton.styles.js @@ -1,7 +1,15 @@ import { css } from '@emotion/react'; +export const buttonWrapper = css` + display: flex; + justify-content: center; + align-items: center; +`; + export const errorButtonStyle = css` - display: inline-block; + display: flex; + justify-content: center; + align-items: center; width: 16rem; padding: 1.2rem 2.4rem; border: 2px solid var(--white-alpha-30); @@ -32,5 +40,4 @@ export const logoIconStyle = css` width: 2rem; height: 2rem; margin-right: 0.8rem; - vertical-align: middle; `; From be0ea15f78c4aedcfbd9034a299bf4b15c4c48a9 Mon Sep 17 00:00:00 2001 From: sonsujin Date: Sun, 27 Apr 2025 16:42:36 +0900 Subject: [PATCH 029/117] =?UTF-8?q?=F0=9F=90=9BFix:=20=EB=AA=A8=EB=93=A0?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EB=8F=8C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=EC=97=90=EC=84=9C=20=EB=84=98?= =?UTF-8?q?=EC=B9=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= 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/pages/my/myPage.styles.js | 52 +++++++++++++++++------------------ 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/src/pages/my/myPage.styles.js b/src/pages/my/myPage.styles.js index 64a938b8..58f924df 100644 --- a/src/pages/my/myPage.styles.js +++ b/src/pages/my/myPage.styles.js @@ -5,12 +5,8 @@ export const myPageWrapper = css` margin: auto; ${media({ width: ['calc(100% - 4.8rem)', 'calc(100% - 4.8rem)', 'calc(100% - 4.8rem)', 'calc(100% - 72rem)', 'calc(100% - 72rem)'] })} - h2:nth-of-type(3) { - ${media({ margin: ['3.2rem 0 1.6rem', '3.2rem 0 1.6rem', '3.2rem 0 5.7rem', '4rem 0 3.2rem', '4rem 0 3.2rem'] })} - margin: 3.2rem 0 5.7rem; - } -`; +`; export const scrollStyle = css` overflow-y: auto; padding-right: 12px; @@ -32,7 +28,6 @@ export const scrollStyle = css` background-color: rgb(255 255 255 / 70%); } `; - export const horizonList = css` display: flex; overflow-x: scroll; @@ -42,35 +37,32 @@ export const horizonList = css` padding: 0 2.4rem 3.2rem; border-bottom: 1px solid var(--white-alpha-10); `; - export const allProfileSize = css` - margin: 0 2.4rem; - ${media({ height: ['15.1rem', '15.1rem', '18.3rem', '18.3rem', '18.3rem'] })} - ${media({ width: ['9.8rem', '9.8rem', '12.8rem', '12.8rem', '12.8rem'] })} + width: 100%; + min-width: 9.8rem; + max-width: 12.8rem; + margin: 0 2.4rem; + aspect-ratio: 1 / 1; `; - export const idolName = css` margin: 0.8rem 0 0.2rem; font-size: 1.6rem; font-weight: 700; text-align: center; color: var(--white); -`; - + `; export const groupName = css` margin: 0.2rem; font-size: 1.4rem; font-weight: 400; text-align: center; color: #FFF9; -`; - + `; export const title = css` margin: 1.4rem; ${media({ fontSize: ['1.6rem', '1.6rem', '2rem', '2.4rem', '2.4rem'] })} font-weight: 700; `; - export const idolListWrapper = css` display: flex; justify-content: center; @@ -79,15 +71,23 @@ export const idolListWrapper = css` width: 100%; margin: 4rem 0 0; `; - export const idolList = css` display: grid; - min-width: fit-content; - - ${media({ gap: ['1.7rem', '1.7rem', '2.4rem', '2.4rem', '2.4rem'] })} - ${media({ gridTemplateColumns: ['repeat(3, 9.8rem)', 'repeat(3, 9.8rem)', 'repeat(4, 12.8rem)', 'repeat(8, 12.8rem)', 'repeat(8, 12.8rem)'] })} - ${media({ gridTemplaterRows: ['1fr 1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr'] })}; justify-items: center; + justify-content: center; + width: 100%; + ${media({ + gap: ['1.7rem', '1.7rem', '2.4rem', '2.4rem', '2.4rem'], + gridTemplateColumns: [ + 'repeat(auto-fill, minmax(9.8rem, 1fr))', + 'repeat(3, minmax(9.8rem, 1fr))', + 'repeat(auto-fill, minmax(12.8rem, 1fr))', + 'repeat(auto-fill, minmax(12.8rem, 1fr))', + 'repeat(8, minmax(12.8rem, 1fr))', + ], + gridTemplateRows: ['1fr 1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr'], + })} + `; export const customButtonWrapper = css` @@ -95,19 +95,18 @@ export const customButtonWrapper = css` justify-content: center; margin: 2.4rem 6.4rem 3.4rem; `; - export const customButtonStyle = css` width: 25.5rem; height: 4.8rem; `; - export const buttonIcon = css` width: 2.4rem; `; // 이전, 다음 버튼 컴포넌트 export const arrowButton = css` - z-index: 1111; + position: relative; + z-index: 1; min-width: 2.9rem; height: 13.5rem; background-color: #1B1B1BCC; @@ -119,9 +118,8 @@ export const arrowButton = css` export const prev = css` top: 40%; - left: 32rem; + left: 0; `; - export const next = css` top: 40%; right: 0; From 0d920c3e2fa5fca5f93cac4ae37aaf6574874262 Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 17:02:20 +0900 Subject: [PATCH 030/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20import=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EC=A0=95=EB=A6=AC?= 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/alert/Alert.jsx | 1 + .../button/avatarButton/AvatarButton.jsx | 1 + .../button/customButton/CustomButton.jsx | 1 - src/data/mockData.js | 64 +++++++++---------- 4 files changed, 34 insertions(+), 33 deletions(-) diff --git a/src/components/alert/Alert.jsx b/src/components/alert/Alert.jsx index 5ad07465..2147b1b1 100644 --- a/src/components/alert/Alert.jsx +++ b/src/components/alert/Alert.jsx @@ -1,5 +1,6 @@ import successIcon from '@/assets/icons/success-icon.png'; import warningIcon from '@/assets/icons/warning-icon.png'; +import React from 'react'; import * as S from './alert.styles'; const Alert = ({ content = 'toast content', type = 'warning' }) => { diff --git a/src/components/button/avatarButton/AvatarButton.jsx b/src/components/button/avatarButton/AvatarButton.jsx index 25dc65f5..3d859151 100644 --- a/src/components/button/avatarButton/AvatarButton.jsx +++ b/src/components/button/avatarButton/AvatarButton.jsx @@ -1,5 +1,6 @@ import exitIcon from '@/assets/icons/exit-icon-black.png'; import { Avatar } from '@/components/avatar'; +import React from 'react'; import * as S from './avatarButton.styles'; const AvatarButton = ({ imgUrl, boxSize, removeIdol }) => { diff --git a/src/components/button/customButton/CustomButton.jsx b/src/components/button/customButton/CustomButton.jsx index c0e764f8..fe8ace91 100644 --- a/src/components/button/customButton/CustomButton.jsx +++ b/src/components/button/customButton/CustomButton.jsx @@ -1,4 +1,3 @@ -/** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import getButtonStyle from './customButton.styles'; diff --git a/src/data/mockData.js b/src/data/mockData.js index d7fb9b75..586fa9c5 100644 --- a/src/data/mockData.js +++ b/src/data/mockData.js @@ -1,5 +1,5 @@ -import credit from '@/assets/images/credit.png'; -import stupid from '@/assets/images/stupid.png'; +import creditImg from '@/assets/images/credit.png'; +import stupidImg from '@/assets/images/stupid.png'; //mockData export const mockData = [ @@ -8,7 +8,7 @@ export const mockData = [ name: '윈터', gender: 'female', group: '에스파', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 100, teamId: 32, rank: 1, @@ -18,7 +18,7 @@ export const mockData = [ name: '하니', gender: 'female', group: '뉴진스', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 100, teamId: 43, rank: 2, @@ -28,7 +28,7 @@ export const mockData = [ name: '카리나', gender: 'female', group: '에스파', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 80, teamId: 32, rank: 3, @@ -38,7 +38,7 @@ export const mockData = [ name: '안유진', gender: 'female', group: '아이브', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 100500, teamId: 12, rank: 4, @@ -48,7 +48,7 @@ export const mockData = [ name: '설윤', gender: 'female', group: '엔믹스', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 20100, teamId: 25, rank: 5, @@ -58,7 +58,7 @@ export const mockData = [ name: '닝닝', gender: 'female', group: '에스파', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 10000, teamId: 32, rank: 6, @@ -68,7 +68,7 @@ export const mockData = [ name: '레이', gender: 'female', group: '아이브', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 12345, teamId: 12, rank: 7, @@ -78,7 +78,7 @@ export const mockData = [ name: '제니', gender: 'female', group: '블랙핑크', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 25546, teamId: 3, rank: 8, @@ -88,7 +88,7 @@ export const mockData = [ name: '아현', gender: 'female', group: '베이비몬스터', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 10002, teamId: 6, rank: 9, @@ -98,7 +98,7 @@ export const mockData = [ name: '민니', gender: 'female', group: '여자아이들', - profilePicture: credit, + profilePicture: creditImg, totalVotes: 20, teamId: 9, rank: 10, @@ -108,7 +108,7 @@ export const mockData = [ name: '명재현', gender: 'male', group: '보이넥스트도어', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 111111, teamId: 84, rank: 1, @@ -118,7 +118,7 @@ export const mockData = [ name: '차은우', gender: 'male', group: '아스트로', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 123456, teamId: 71, rank: 2, @@ -128,7 +128,7 @@ export const mockData = [ name: '태산', gender: 'male', group: '보이넥스트도어', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 2222, teamId: 84, rank: 3, @@ -138,7 +138,7 @@ export const mockData = [ name: '원빈', gender: 'male', group: '라이즈', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 77777, teamId: 58, rank: 4, @@ -148,7 +148,7 @@ export const mockData = [ name: '뷔', gender: 'male', group: '방탄소년단', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 323232, teamId: 95, rank: 5, @@ -158,7 +158,7 @@ export const mockData = [ name: '지드래곤', gender: 'male', group: '빅뱅', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 8765, teamId: 63, rank: 6, @@ -168,7 +168,7 @@ export const mockData = [ name: '황민현', gender: 'male', group: '뉴이스트', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 123, teamId: 75, rank: 7, @@ -178,7 +178,7 @@ export const mockData = [ name: '박지훈', gender: 'male', group: '워너원', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 2578, teamId: 91, rank: 8, @@ -188,7 +188,7 @@ export const mockData = [ name: '원필', gender: 'male', group: '데이식스', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 45678, teamId: 88, rank: 9, @@ -198,7 +198,7 @@ export const mockData = [ name: '육성재', gender: 'male', group: '비투비', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 2222, teamId: 100, rank: 10, @@ -227,7 +227,7 @@ export const donations = [ name: '장원영', gender: 'female', group: '아이브', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 4, }, }, @@ -246,7 +246,7 @@ export const donations = [ name: '조유리', gender: 'female', group: '아이즈원', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 20, }, }, @@ -265,7 +265,7 @@ export const donations = [ name: '강미나', gender: 'female', group: '구구단', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 15, }, }, @@ -284,7 +284,7 @@ export const donations = [ name: '서현', gender: 'female', group: '소녀시대', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 30, }, }, @@ -303,7 +303,7 @@ export const donations = [ name: '백예린', gender: 'female', group: '개인 활동', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 50, }, }, @@ -322,7 +322,7 @@ export const donations = [ name: '정은지', gender: 'female', group: '에이핑크', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 10, }, }, @@ -341,7 +341,7 @@ export const donations = [ name: '지민', gender: 'female', group: '방탄소년단', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 100, }, }, @@ -360,7 +360,7 @@ export const donations = [ name: '아이린', gender: 'female', group: '레드벨벳', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 120, }, }, @@ -379,7 +379,7 @@ export const donations = [ name: '권은비', gender: 'female', group: '아이즈원', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 25, }, }, @@ -398,7 +398,7 @@ export const donations = [ name: '하늘', gender: 'female', group: '여자친구', - profilePicture: stupid, + profilePicture: stupidImg, totalVotes: 35, }, }, From ed609b45792bd9206e1932ffd89a2aea05e40771 Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 17:45:33 +0900 Subject: [PATCH 031/117] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20kebab?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= 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 : 리팩토링 (동작 변경 없이 코드 개선) # 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선) --- src/assets/images/{logo_bg.png => logo-bg.png} | Bin .../images/{logo_star_bg.png => logo-star-bg.png} | Bin src/assets/images/{logo_star.png => logo-star.png} | Bin .../{logo_text_temp.png => logo-text-temp.png} | Bin .../{star_aurora_bg.png => star-aurora-bg.png} | Bin .../images/{star_aurora.png => star-aurora.png} | Bin src/assets/images/{star_bg.png => star-bg.png} | Bin src/components/header/Header.jsx | 2 +- .../loadingStatus/splashScreen/SplashScreen.jsx | 2 +- src/components/modals/creditChargeModal/index.js | 2 +- 10 files changed, 3 insertions(+), 3 deletions(-) rename src/assets/images/{logo_bg.png => logo-bg.png} (100%) rename src/assets/images/{logo_star_bg.png => logo-star-bg.png} (100%) rename src/assets/images/{logo_star.png => logo-star.png} (100%) rename src/assets/images/{logo_text_temp.png => logo-text-temp.png} (100%) rename src/assets/images/{star_aurora_bg.png => star-aurora-bg.png} (100%) rename src/assets/images/{star_aurora.png => star-aurora.png} (100%) rename src/assets/images/{star_bg.png => star-bg.png} (100%) diff --git a/src/assets/images/logo_bg.png b/src/assets/images/logo-bg.png similarity index 100% rename from src/assets/images/logo_bg.png rename to src/assets/images/logo-bg.png diff --git a/src/assets/images/logo_star_bg.png b/src/assets/images/logo-star-bg.png similarity index 100% rename from src/assets/images/logo_star_bg.png rename to src/assets/images/logo-star-bg.png diff --git a/src/assets/images/logo_star.png b/src/assets/images/logo-star.png similarity index 100% rename from src/assets/images/logo_star.png rename to src/assets/images/logo-star.png diff --git a/src/assets/images/logo_text_temp.png b/src/assets/images/logo-text-temp.png similarity index 100% rename from src/assets/images/logo_text_temp.png rename to src/assets/images/logo-text-temp.png diff --git a/src/assets/images/star_aurora_bg.png b/src/assets/images/star-aurora-bg.png similarity index 100% rename from src/assets/images/star_aurora_bg.png rename to src/assets/images/star-aurora-bg.png diff --git a/src/assets/images/star_aurora.png b/src/assets/images/star-aurora.png similarity index 100% rename from src/assets/images/star_aurora.png rename to src/assets/images/star-aurora.png diff --git a/src/assets/images/star_bg.png b/src/assets/images/star-bg.png similarity index 100% rename from src/assets/images/star_bg.png rename to src/assets/images/star-bg.png diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 3c682dca..3d2371a2 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -1,5 +1,5 @@ +import textLogoImg from '@/assets/images/logo-text-temp.png'; import logoImg from '@/assets/images/logo.png'; -import textLogoImg from '@/assets/images/logo_text_temp.png'; import profileImg from '@/assets/images/stupid.png'; import { Link } from 'react-router-dom'; import * as S from './header.styles'; diff --git a/src/components/loadingStatus/splashScreen/SplashScreen.jsx b/src/components/loadingStatus/splashScreen/SplashScreen.jsx index 37372552..2c6b9fe3 100644 --- a/src/components/loadingStatus/splashScreen/SplashScreen.jsx +++ b/src/components/loadingStatus/splashScreen/SplashScreen.jsx @@ -1,5 +1,5 @@ +import rollingStarImg from '@/assets/images/logo-star.png'; import logoImg from '@/assets/images/logo.png'; -import rollingStarImg from '@/assets/images/logo_star.png'; import * as S from './splashScreen.styles'; function SplashScreen() { diff --git a/src/components/modals/creditChargeModal/index.js b/src/components/modals/creditChargeModal/index.js index 6fec9397..8bfcaed5 100644 --- a/src/components/modals/creditChargeModal/index.js +++ b/src/components/modals/creditChargeModal/index.js @@ -1 +1 @@ -export { default } from './creditChargeModal'; +export { default } from './CreditChargeModal'; From f1a7ce05e65c58729295f617b2a3ebf5ae1f2163 Mon Sep 17 00:00:00 2001 From: Sienna Date: Sun, 27 Apr 2025 19:26:05 +0900 Subject: [PATCH 032/117] =?UTF-8?q?=F0=9F=90=9BFix:=20=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EA=B7=B8=20=ED=96=88=EC=9D=84=20=EB=95=8C=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20=EA=BA=BC=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=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/Root.jsx | 6 +++++- src/components/modal/Modal.jsx | 27 ++++++++++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/Root.jsx b/src/Root.jsx index b2bd0358..3d26cfa6 100644 --- a/src/Root.jsx +++ b/src/Root.jsx @@ -15,7 +15,11 @@ function Root() { <> {isLoading && } {!isLanding &&
} -
+
{!isLanding &&