From 183ce324f09a512cf2e9059f81dcb86751299dc0 Mon Sep 17 00:00:00 2001 From: chaeney Date: Thu, 10 Oct 2024 20:38:25 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C=20clas?= =?UTF-8?q?s=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/chevron-left.svg | 2 +- public/icons/chevron-right.svg | 3 - public/icons/icon-x.svg | 4 +- public/icons/index.ts | 2 - public/icons/visivility-off.svg | 2 +- public/icons/visivility-on.svg | 2 +- public/images/login-img.svg | 170 ++++----- src/app/(auth)/layout.tsx | 6 +- .../(auth)/signin/_component/SignInForm.tsx | 2 +- .../(auth)/signup/_component/SignUpForm.tsx | 4 +- .../[id]/_component/GatheringDetail.tsx | 4 +- .../[id]/_component/GatheringReviews.tsx | 4 +- .../_component/ClientSideGatherings.tsx | 2 +- .../_component/GatheringCardList.tsx | 6 +- .../(main)/gatherings/_component/Header.tsx | 4 +- src/app/(main)/gatherings/page.tsx | 2 +- src/app/(main)/mypage/_component/Tab.tsx | 5 +- src/app/(main)/mypage/created/page.tsx | 2 +- src/app/(main)/mypage/layout.tsx | 6 +- src/app/(main)/mypage/mockData/mockData.ts | 328 ------------------ src/app/(main)/mypage/review/page.tsx | 2 +- .../reviews/_components/ClientSideReviews.tsx | 6 +- .../(main)/reviews/_components/Hearder.tsx | 6 +- .../_components/ReviewScore/AverageRating.tsx | 9 +- .../_components/ReviewScore/ReviewScore.tsx | 2 +- .../_components/ReviewScore/ScoreBar.tsx | 8 +- src/app/(main)/reviews/page.tsx | 2 +- src/app/(main)/saved/_component/Header.tsx | 6 +- src/app/(main)/saved/page.tsx | 8 +- .../BottomFloatingBar/BottomFloatingBar.tsx | 2 +- src/app/components/BoxSelect/BoxSelect.tsx | 6 +- src/app/components/Button/Button.tsx | 2 +- src/app/components/Card/Card.tsx | 13 +- src/app/components/CardList/CardList.tsx | 12 +- src/app/components/Chip/Chip.tsx | 7 +- src/app/components/Chip/InfoChip.tsx | 4 +- src/app/components/Chip/StateChip.tsx | 15 +- src/app/components/Chip/TimeChip.tsx | 5 +- src/app/components/DropDown/DropDown.tsx | 8 +- src/app/components/Filter/Filter.tsx | 15 +- src/app/components/Filter/FilterDate.tsx | 12 +- src/app/components/Gnb/Gnb.tsx | 35 +- src/app/components/Gnb/ToggleTheme.tsx | 33 ++ .../InfiniteScroll/InfiniteScroll.tsx | 4 +- .../InformationCard/InformationCard.tsx | 13 +- src/app/components/Input/Input.tsx | 5 +- src/app/components/Modal/CalendarModal.tsx | 22 +- .../components/Modal/MakeGatheringModal.tsx | 4 +- .../MakeGatheringModal/CalendarSelect.tsx | 2 +- .../MakeGatheringModal/ImageUploader.tsx | 8 +- .../MakeGatheringModal/PlaceDropdown.tsx | 10 +- src/app/components/Modal/ModalHeader.tsx | 4 +- src/app/components/Modal/ProfileEditModal.tsx | 2 +- src/app/components/Pagination/Pagination.tsx | 10 +- src/app/components/Popup/Popup.tsx | 6 +- .../components/ProgressBar/ProgressBar.tsx | 16 +- src/app/components/Review/Review.tsx | 18 +- src/app/components/Tab/Tab.tsx | 6 +- .../components/UserProfileLayout/UserInfo.tsx | 4 +- .../UserProfileLayout/UserProfileLayout.tsx | 4 +- src/app/layout.tsx | 2 +- src/styles/style.css | 38 ++ 62 files changed, 365 insertions(+), 591 deletions(-) delete mode 100644 public/icons/chevron-right.svg delete mode 100644 src/app/(main)/mypage/mockData/mockData.ts create mode 100644 src/app/components/Gnb/ToggleTheme.tsx diff --git a/public/icons/chevron-left.svg b/public/icons/chevron-left.svg index 9b963de5..d08d28e4 100644 --- a/public/icons/chevron-left.svg +++ b/public/icons/chevron-left.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/chevron-right.svg b/public/icons/chevron-right.svg deleted file mode 100644 index 2996994d..00000000 --- a/public/icons/chevron-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/icons/icon-x.svg b/public/icons/icon-x.svg index c77b6c3c..852febee 100644 --- a/public/icons/icon-x.svg +++ b/public/icons/icon-x.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/index.ts b/public/icons/index.ts index bcd3ee16..15f34abd 100644 --- a/public/icons/index.ts +++ b/public/icons/index.ts @@ -7,7 +7,6 @@ import IconCheckBoxDefault from './checkbox-default.svg'; import IconCheckBoxActive from './checkbox-active.svg'; import IconCheckCircle from './check-circle.svg'; import IconChevronLeft from './chevron-left.svg'; -import IconChevronRight from './chevron-right.svg'; import IconDallaemfit from './dallaemfit.svg'; import IconHeart from './heart.svg'; import IconX from './icon-x.svg'; @@ -31,7 +30,6 @@ export { IconCheckBoxActive, IconCheckCircle, IconChevronLeft, - IconChevronRight, IconDallaemfit, IconHeart, IconX, diff --git a/public/icons/visivility-off.svg b/public/icons/visivility-off.svg index a82f47b1..3bf0e6df 100644 --- a/public/icons/visivility-off.svg +++ b/public/icons/visivility-off.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/visivility-on.svg b/public/icons/visivility-on.svg index 5a7288fe..d090072a 100644 --- a/public/icons/visivility-on.svg +++ b/public/icons/visivility-on.svg @@ -1,3 +1,3 @@ - + diff --git a/public/images/login-img.svg b/public/images/login-img.svg index 5df9be52..88a6c748 100644 --- a/public/images/login-img.svg +++ b/public/images/login-img.svg @@ -1,86 +1,86 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx index fa726a2d..20244ee0 100644 --- a/src/app/(auth)/layout.tsx +++ b/src/app/(auth)/layout.tsx @@ -8,7 +8,7 @@ const Layout = ({ children: ReactNode; }>) => { return ( -
+
{/* 이미지 영역 */}
@@ -19,11 +19,11 @@ const Layout = ({ 바쁜 일상 속 잠깐의 휴식,
이제는 같이 달램과 함께 해보세요

- +
{/* form 영역 */} -
+
{children}
diff --git a/src/app/(auth)/signin/_component/SignInForm.tsx b/src/app/(auth)/signin/_component/SignInForm.tsx index d3a4baa8..d3d2f1c6 100644 --- a/src/app/(auth)/signin/_component/SignInForm.tsx +++ b/src/app/(auth)/signin/_component/SignInForm.tsx @@ -53,7 +53,7 @@ const SignInForm = () => { }; return (
diff --git a/src/app/(auth)/signup/_component/SignUpForm.tsx b/src/app/(auth)/signup/_component/SignUpForm.tsx index 8c7eedc0..e891c401 100644 --- a/src/app/(auth)/signup/_component/SignUpForm.tsx +++ b/src/app/(auth)/signup/_component/SignUpForm.tsx @@ -63,7 +63,7 @@ const SignUpForm = () => { return (
@@ -98,7 +98,7 @@ const SignUpForm = () => { type='password' /> {!errors.password && ( -
+
※ 비밀번호는 영문과 숫자가 포함된 8자 이상이 되도록 해 주세요.
)} diff --git a/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx b/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx index e9a26c4b..413c9264 100644 --- a/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx +++ b/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx @@ -34,8 +34,8 @@ const GatheringDetail = ({ return ( <> -
-
+
+
{/* 사진, Information Card */}
diff --git a/src/app/(main)/gatherings/[id]/_component/GatheringReviews.tsx b/src/app/(main)/gatherings/[id]/_component/GatheringReviews.tsx index d634a01c..60e61182 100644 --- a/src/app/(main)/gatherings/[id]/_component/GatheringReviews.tsx +++ b/src/app/(main)/gatherings/[id]/_component/GatheringReviews.tsx @@ -24,14 +24,14 @@ const GatheringReviews = ({ ); return ( -
+
이용자들은 이 프로그램을 이렇게 느꼈어요!
{reviews.length === 0 ? (
-

+

아직 리뷰가 없어요.

diff --git a/src/app/(main)/gatherings/_component/ClientSideGatherings.tsx b/src/app/(main)/gatherings/_component/ClientSideGatherings.tsx index f4b8c373..8f7c731f 100644 --- a/src/app/(main)/gatherings/_component/ClientSideGatherings.tsx +++ b/src/app/(main)/gatherings/_component/ClientSideGatherings.tsx @@ -69,7 +69,7 @@ const ClientSideGatherings = ({ return ( <> -
+
diff --git a/src/app/(main)/gatherings/_component/GatheringCardList.tsx b/src/app/(main)/gatherings/_component/GatheringCardList.tsx index cc37fc18..1fd62514 100644 --- a/src/app/(main)/gatherings/_component/GatheringCardList.tsx +++ b/src/app/(main)/gatherings/_component/GatheringCardList.tsx @@ -39,14 +39,14 @@ const GatheringCardList = ({ gatherings }: GatheringCardListProps) => {
{/* Top gradient */}
{/* Bottom gradient */}
@@ -54,7 +54,7 @@ const GatheringCardList = ({ gatherings }: GatheringCardListProps) => { {/* 모임이 없는 경우 */} {gatherings.length === 0 ? (
-

+

아직 모임이 없어요.
지금 바로 모임을 만들어보세요. diff --git a/src/app/(main)/gatherings/_component/Header.tsx b/src/app/(main)/gatherings/_component/Header.tsx index e6dd2844..3da5c5b6 100644 --- a/src/app/(main)/gatherings/_component/Header.tsx +++ b/src/app/(main)/gatherings/_component/Header.tsx @@ -7,7 +7,9 @@ const Header = () => {

-
함께 할 사람이 없나요?
+
+ 함께 할 사람이 없나요? +
지금 모임에 참여해보세요
diff --git a/src/app/(main)/gatherings/page.tsx b/src/app/(main)/gatherings/page.tsx index bcaadc91..1a6c8135 100644 --- a/src/app/(main)/gatherings/page.tsx +++ b/src/app/(main)/gatherings/page.tsx @@ -13,7 +13,7 @@ const GatheringsPage = async () => { return (
-
+
diff --git a/src/app/(main)/mypage/_component/Tab.tsx b/src/app/(main)/mypage/_component/Tab.tsx index 16f63334..548469ee 100644 --- a/src/app/(main)/mypage/_component/Tab.tsx +++ b/src/app/(main)/mypage/_component/Tab.tsx @@ -21,10 +21,11 @@ const tabList = [ const Tab = () => { const pathname = usePathname(); - const activeClass = 'border-b-2 border-var-gray-900 pb-4 text-var-gray-900'; + const activeClass = + 'border-b-2 border-var-gray-900 pb-4 text-var-gray-900 dark:text-white dark:border-neutral-50'; return ( -
    +
      {tabList.map((item, index) => (
    • {item.name} diff --git a/src/app/(main)/mypage/created/page.tsx b/src/app/(main)/mypage/created/page.tsx index a434bceb..783c185f 100644 --- a/src/app/(main)/mypage/created/page.tsx +++ b/src/app/(main)/mypage/created/page.tsx @@ -25,7 +25,7 @@ const CreatedPage = async () => { initialGatheringList={gatherings} /> ) : ( -
      +
      아직 만든 모임이 없어요
      )} diff --git a/src/app/(main)/mypage/layout.tsx b/src/app/(main)/mypage/layout.tsx index b5baeeca..622f9c57 100644 --- a/src/app/(main)/mypage/layout.tsx +++ b/src/app/(main)/mypage/layout.tsx @@ -10,13 +10,13 @@ const Layout = async ({ }>) => { const userData = await getUserData(); return ( -
      +
      {/* head */}
      -

      마이페이지

      +

      마이페이지

      -
      +
      {children}
      diff --git a/src/app/(main)/mypage/mockData/mockData.ts b/src/app/(main)/mypage/mockData/mockData.ts deleted file mode 100644 index ed1e0573..00000000 --- a/src/app/(main)/mypage/mockData/mockData.ts +++ /dev/null @@ -1,328 +0,0 @@ -import { myGatheringData } from '@/types/data.type'; - -const mockData: myGatheringData[] = [ - { - teamId: 1, - id: 1, - type: 'DALLAEMFIT', - name: '테스트1', - dateTime: '2024-10-19T04:49:06.936Z', - registrationEnd: '2024-09-19T04:49:06.936Z', - location: '서울', - participantCount: 12, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 0, - canceledAt: '', - joinedAt: '2024-09-19T04:49:06.936Z', - isCompleted: false, // 이용 완료가 아니므로 예약 취소 버튼이 나옴 - isReviewed: false, // 리뷰를 작성하지 않았으므로 리뷰 버튼이 나옴 - }, - { - teamId: 2, - id: 2, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 3, - id: 3, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-10-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - canceledAt: '2024-09-13T00:00:00', - joinedAt: '2024-09-15T00:00:00', - isCompleted: false, - isReviewed: false, - }, - { - teamId: 4, - id: 4, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-12-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 2, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: false, - isReviewed: false, - }, - { - teamId: 5, - id: 5, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 6, - id: 6, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 7, - id: 7, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 8, - id: 8, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 9, - id: 9, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 10, - id: 10, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 11, - id: 11, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 12, - id: 12, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 13, - id: 13, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 14, - id: 14, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 15, - id: 15, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 16, - id: 16, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 17, - id: 17, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 18, - id: 18, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 19, - id: 19, - type: '스터디', - name: '달램핏 오피스 스트레칭', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, - { - teamId: 20, - id: 20, - type: '스터디', - name: '달램핏 오피스 스트레칭123', - dateTime: '2024-09-15T00:00:00', - registrationEnd: '2024-09-15T00:00:00', - location: '서울', - participantCount: 10, - capacity: 20, - image: '/images/mock-image.png', - createdBy: 1, - joinedAt: '2024-09-15T00:00:00', - isCompleted: true, - isReviewed: false, - }, -]; - -export default mockData; diff --git a/src/app/(main)/mypage/review/page.tsx b/src/app/(main)/mypage/review/page.tsx index 8cd75d7c..b9667eec 100644 --- a/src/app/(main)/mypage/review/page.tsx +++ b/src/app/(main)/mypage/review/page.tsx @@ -136,7 +136,7 @@ export default Page; const EmptyPage = () => { return (
      -

      +

      아직 작성한 리뷰가 없어요

      diff --git a/src/app/(main)/reviews/_components/ClientSideReviews.tsx b/src/app/(main)/reviews/_components/ClientSideReviews.tsx index 00d7da7f..b578c83f 100644 --- a/src/app/(main)/reviews/_components/ClientSideReviews.tsx +++ b/src/app/(main)/reviews/_components/ClientSideReviews.tsx @@ -52,13 +52,13 @@ const ClientSideReviews = ({ onChipClick={handleChipClick} /> -
      +
      {/* 별점칸 */}
      ) : ( -
      +
      아직 리뷰가 없어요
      )} diff --git a/src/app/(main)/reviews/_components/Hearder.tsx b/src/app/(main)/reviews/_components/Hearder.tsx index 8e5ba8c5..bbb0b4c1 100644 --- a/src/app/(main)/reviews/_components/Hearder.tsx +++ b/src/app/(main)/reviews/_components/Hearder.tsx @@ -5,10 +5,8 @@ const Header = () => {
      -

      - 모든 리뷰 -

      -

      +

      모든 리뷰

      +

      같이달램을 이용한 분들은 이렇게 느꼈어요 🙌

      diff --git a/src/app/(main)/reviews/_components/ReviewScore/AverageRating.tsx b/src/app/(main)/reviews/_components/ReviewScore/AverageRating.tsx index 22b9cdbc..7a1104fd 100644 --- a/src/app/(main)/reviews/_components/ReviewScore/AverageRating.tsx +++ b/src/app/(main)/reviews/_components/ReviewScore/AverageRating.tsx @@ -25,10 +25,13 @@ const AverageRating = ({ rating }: AverageRatingProps) => { return (
      -

      - {averageScore}/ 5 +

      + + {averageScore} + + / 5

      -
      +
      {Array(5) .fill(null) .map((_, index) => ( diff --git a/src/app/(main)/reviews/_components/ReviewScore/ReviewScore.tsx b/src/app/(main)/reviews/_components/ReviewScore/ReviewScore.tsx index cd5c78e0..7533afe3 100644 --- a/src/app/(main)/reviews/_components/ReviewScore/ReviewScore.tsx +++ b/src/app/(main)/reviews/_components/ReviewScore/ReviewScore.tsx @@ -7,7 +7,7 @@ interface ReviewScoreProps { } const ReviewScore = ({ score }: ReviewScoreProps) => { return ( -
      +
      diff --git a/src/app/(main)/reviews/_components/ReviewScore/ScoreBar.tsx b/src/app/(main)/reviews/_components/ReviewScore/ScoreBar.tsx index 718106fb..b5d852b6 100644 --- a/src/app/(main)/reviews/_components/ReviewScore/ScoreBar.tsx +++ b/src/app/(main)/reviews/_components/ReviewScore/ScoreBar.tsx @@ -5,15 +5,15 @@ interface ScoreBarProps { } const ScoreBar = ({ rating, barWidth, count }: ScoreBarProps) => { return ( -
      +
      {rating}점 -
      +
      - {count} + {count}
      ); }; diff --git a/src/app/(main)/reviews/page.tsx b/src/app/(main)/reviews/page.tsx index 54227cfa..77b0efaa 100644 --- a/src/app/(main)/reviews/page.tsx +++ b/src/app/(main)/reviews/page.tsx @@ -8,7 +8,7 @@ const ReviewsPage = async () => { const reviewScore = await getReviewScore({ type: 'DALLAEMFIT' }); return ( -
      +
      {
      -

      - 찜한 모임 -

      -

      +

      찜한 모임

      +

      마감되기 전에 지금 바로 참여해보세요 👀

      diff --git a/src/app/(main)/saved/page.tsx b/src/app/(main)/saved/page.tsx index 8b79e9b5..c1ed85d0 100644 --- a/src/app/(main)/saved/page.tsx +++ b/src/app/(main)/saved/page.tsx @@ -24,13 +24,13 @@ const SavedPage = () => { } = useSavedGatherings(savedGatherings); return ( -
      +
      -
      +
      { {gatheringListData.length > 0 ? ( ) : ( -
      - 아직 아직 찜한 모임이 없어요. +
      + 아직 찜한 모임이 없어요.
      )}
      diff --git a/src/app/components/BottomFloatingBar/BottomFloatingBar.tsx b/src/app/components/BottomFloatingBar/BottomFloatingBar.tsx index 2da60cef..cf2670d5 100644 --- a/src/app/components/BottomFloatingBar/BottomFloatingBar.tsx +++ b/src/app/components/BottomFloatingBar/BottomFloatingBar.tsx @@ -26,7 +26,7 @@ const BottomFloatingBar = ({ const isHost = createdBy === user?.id; //주최자인지 검사 return ( -
      +
      diff --git a/src/app/components/BoxSelect/BoxSelect.tsx b/src/app/components/BoxSelect/BoxSelect.tsx index e231a13d..57d3e444 100644 --- a/src/app/components/BoxSelect/BoxSelect.tsx +++ b/src/app/components/BoxSelect/BoxSelect.tsx @@ -16,8 +16,10 @@ interface BoxSelectProps { } const stateClasses = { - default: 'bg-var-gray-50 text-var-black', - active: 'bg-var-gray-900 text-var-white', + default: + 'bg-var-gray-50 text-var-black dark:bg-transparent dark:border dark:border-neutral-600 dark:text-neutral-400', + active: + 'bg-var-gray-900 text-var-white dark:bg-neutral-200 dark:text-neutral-950 dark:border dark:border-neutral-200', }; const BoxSelect = ({ diff --git a/src/app/components/Button/Button.tsx b/src/app/components/Button/Button.tsx index 51ee9b20..038a1975 100644 --- a/src/app/components/Button/Button.tsx +++ b/src/app/components/Button/Button.tsx @@ -18,7 +18,7 @@ const Button = ({ const variantClasses = { default: 'bg-var-orange-600 text-var-white hover:bg-var-orange-700', white: - 'bg-var-white text-var-orange-600 ring-1 ring-var-orange-600 hover:bg-var-orange-700 hover:text-var-white', + 'bg-var-white text-var-orange-600 ring-1 ring-var-orange-600 hover:bg-var-orange-700 hover:text-var-white dark:bg-transparent', gray: 'bg-var-gray-400 text-var-white ring-1 ring-var-gray-400 cursor-not-allowed', grayOutline: 'bg-var-white text-var-gray-400 ring-1 ring-var-gray-400 cursor-not-allowed', diff --git a/src/app/components/Card/Card.tsx b/src/app/components/Card/Card.tsx index d7f75610..a186ff8d 100644 --- a/src/app/components/Card/Card.tsx +++ b/src/app/components/Card/Card.tsx @@ -29,7 +29,7 @@ const Card = ({ children, }: PropsWithChildren): JSX.Element => { return ( -
      +
      {/* 이미지 */}
      @@ -68,6 +68,9 @@ const CardChips = (): JSX.Element => { return (
      + + +
      ); } @@ -132,12 +135,14 @@ const CardInfo = (): JSX.Element => { return ( <> -
      +

      {name}

      | -

      {location}

      +

      + {location} +

      -
      +

      {formatDate(dateTime)}

      ·

      {formatTime(dateTime)}

      diff --git a/src/app/components/CardList/CardList.tsx b/src/app/components/CardList/CardList.tsx index 17f9acee..cca64782 100644 --- a/src/app/components/CardList/CardList.tsx +++ b/src/app/components/CardList/CardList.tsx @@ -51,7 +51,7 @@ const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => { }; return ( -
      +
      {/* 이미지 */}
      {
      -
      +

      {data.name}

      - | -

      + | +

      {data.location}

      @@ -85,12 +85,12 @@ const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => {
      {isSavedActive ? ( ) : ( )} diff --git a/src/app/components/Chip/Chip.tsx b/src/app/components/Chip/Chip.tsx index f746f413..79522d1f 100644 --- a/src/app/components/Chip/Chip.tsx +++ b/src/app/components/Chip/Chip.tsx @@ -5,15 +5,16 @@ interface ChipProps { } const stateClasses = { - default: 'bg-var-gray-200 text-var-bg-gray-900 dark:text-var-gray-900', - active: 'bg-var-gray-900 text-white dark:border', + default: + 'bg-var-gray-200 text-var-bg-gray-900 dark:bg-neutral-500 dark:text-neutral-900', + active: 'bg-var-gray-900 text-white dark:bg-neutral-50 dark:text-neutral-900', }; const Chip = ({ state = 'default', children, onClick }: ChipProps) => { return ( {children} diff --git a/src/app/components/Chip/InfoChip.tsx b/src/app/components/Chip/InfoChip.tsx index e0d76ddb..8e1ab013 100644 --- a/src/app/components/Chip/InfoChip.tsx +++ b/src/app/components/Chip/InfoChip.tsx @@ -4,14 +4,14 @@ interface InfoChipProps { } const typeClasses = { - date: 'text-white', + date: 'text-white dark:text-neutral-900', time: 'text-var-orange-600', }; const InfoChip = ({ type = 'date', children }: InfoChipProps) => { return ( {children} diff --git a/src/app/components/Chip/StateChip.tsx b/src/app/components/Chip/StateChip.tsx index d822f614..cac7e769 100644 --- a/src/app/components/Chip/StateChip.tsx +++ b/src/app/components/Chip/StateChip.tsx @@ -5,10 +5,13 @@ interface StateChipProps { } const stateClasses = { - scheduled: 'bg-var-orange-100 text-var-orange-600', - done: 'bg-var-gray-200 text-var-gray-500', - confirmed: 'bg-white text-var-orange-500 border border-var-orange-100', - pending: 'bg-white text-var-gray-500 border border-var-gray-200', + scheduled: + 'bg-var-orange-100 text-var-orange-600 dark:bg-neutral-300 dark:text-var-orange-600 dark:font-semibold', + done: 'bg-var-gray-200 text-var-gray-500 dark:bg-neutral-900 dark:text-neutral-100 dark:border dark:border-neutral-600', + confirmed: + 'bg-white text-var-orange-500 border border-var-orange-100 dark:bg-var-orange-600 dark:text-white dark:border dark:border-var-orange-600 dark:font-semibold', + pending: + 'bg-white text-var-gray-500 border border-var-gray-200 dark:bg-neutral-600 dark:text-neutral-200 dark:border dark:border-neutral-600', }; const stateContents = { @@ -23,7 +26,9 @@ const StateChip = ({ state }: StateChipProps) => { - {state === 'confirmed' ? : null} + {state === 'confirmed' ? ( + + ) : null} {stateContents[state]} ); diff --git a/src/app/components/Chip/TimeChip.tsx b/src/app/components/Chip/TimeChip.tsx index 5039ebf4..b2164a72 100644 --- a/src/app/components/Chip/TimeChip.tsx +++ b/src/app/components/Chip/TimeChip.tsx @@ -6,8 +6,9 @@ interface TimeChipProps { const stateClasses = { default: - 'bg-var-gray-50 border border-var-gray-200 text-var-gray-900 cursor-pointer', - active: 'bg-var-gray-900 border border-transparent text-white cursor-pointer', + 'bg-var-gray-50 border border-var-gray-200 text-var-gray-900 cursor-pointer dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-100', + active: + 'bg-var-gray-900 border border-transparent text-white cursor-pointer dark:bg-neutral-50 dark:text-var-orange-600 font-semibold', disabled: 'bg-var-gray-200 border border-transparent text-var-gray-400 cursor-default', }; diff --git a/src/app/components/DropDown/DropDown.tsx b/src/app/components/DropDown/DropDown.tsx index f1afc627..4c16351e 100644 --- a/src/app/components/DropDown/DropDown.tsx +++ b/src/app/components/DropDown/DropDown.tsx @@ -20,16 +20,18 @@ const DropDown = ({ return (
        {options.map((option, index) => (
      • handleSelect(option)} > - {option} + + {option} +
        • ))}
      diff --git a/src/app/components/Filter/Filter.tsx b/src/app/components/Filter/Filter.tsx index b59cfeb2..d92c5c26 100644 --- a/src/app/components/Filter/Filter.tsx +++ b/src/app/components/Filter/Filter.tsx @@ -19,6 +19,7 @@ interface FilterChildProps { currentState: 'default' | 'active'; toggleDropDown: () => void; text: string; + iconClass?: string; } // 하위 컴포넌트 - FilterList @@ -26,6 +27,7 @@ const FilterList = ({ currentState, toggleDropDown, text, + iconClass, }: FilterChildProps) => (
      {text} - +
      ); @@ -48,15 +52,17 @@ const FilterSort = ({ onClick={toggleDropDown} data-testid='filter-component' > - + {text}
      ); // state 별 클래스명 const stateClasses = { - default: 'border border-var-gray-100 bg-var-gray-50 text-var-gray-800', - active: 'text-var-gray-50 bg-var-gray-900 dark:border', + default: + 'border border-var-gray-100 bg-var-gray-50 text-var-gray-800 dark:bg-neutral-900 dark:border-neutral-500 dark:text-neutral-100', + active: + 'text-var-gray-50 bg-var-gray-900 dark:border dark:bg-var-gray-100 dark:border-var-gray-100 dark:text-var-gray-800', }; // Filter Wrapper 컴포넌트 @@ -115,6 +121,7 @@ const Filter = ({ currentState={currentState} toggleDropDown={toggleDropDown} text={selectedOption || children} + iconClass={isOpen ? 'rotate-180' : ''} /> ) : ( {selectedDate ? formatDate(selectedDate.toString()) : children} - +
      {isOpen && (
      { - const { setTheme, resolvedTheme } = useTheme(); - const pathname = usePathname(); const { savedGatherings } = useSavedGatheringList(); @@ -48,12 +42,6 @@ const Gnb = ({ user, token }: GnbProps) => { setSavedCount(savedGatherings.length); }, [savedGatherings]); - useEffect(() => { - if (resolvedTheme === undefined) { - setTheme('system'); - } - }, [resolvedTheme, setTheme]); - return (
      @@ -80,18 +68,7 @@ const Gnb = ({ user, token }: GnbProps) => {
    - + {user && }
    diff --git a/src/app/components/Gnb/ToggleTheme.tsx b/src/app/components/Gnb/ToggleTheme.tsx new file mode 100644 index 00000000..945299bc --- /dev/null +++ b/src/app/components/Gnb/ToggleTheme.tsx @@ -0,0 +1,33 @@ +import { useEffect } from 'react'; +import { useTheme } from 'next-themes'; +import { MdSunny } from 'react-icons/md'; +import { FaMoon } from 'react-icons/fa6'; + +const ToggleTheme = () => { + const { setTheme, resolvedTheme } = useTheme(); + + useEffect(() => { + if (resolvedTheme === undefined) { + setTheme('system'); + } + }, [resolvedTheme, setTheme]); + + return ( + + ); +}; + +export default ToggleTheme; diff --git a/src/app/components/InfiniteScroll/InfiniteScroll.tsx b/src/app/components/InfiniteScroll/InfiniteScroll.tsx index 85d39e32..e0168c18 100644 --- a/src/app/components/InfiniteScroll/InfiniteScroll.tsx +++ b/src/app/components/InfiniteScroll/InfiniteScroll.tsx @@ -51,7 +51,7 @@ const InfiniteScroll = ({ // 데이터가 없거나 비어있을 때 emptyText를 표시 if (!data || data.pages.length === 0) { return ( -
    +
    {emptyText}
    ); @@ -59,7 +59,7 @@ const InfiniteScroll = ({ if (isError) return ( -
    +
    모임을 불러오지 못했습니다.
    ); diff --git a/src/app/components/InformationCard/InformationCard.tsx b/src/app/components/InformationCard/InformationCard.tsx index 94106fad..44fe073d 100644 --- a/src/app/components/InformationCard/InformationCard.tsx +++ b/src/app/components/InformationCard/InformationCard.tsx @@ -87,7 +87,7 @@ const InformationCard = ({ onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > -
    +
    +{participantCount - maxVisible}
    @@ -116,14 +116,17 @@ const InformationCard = ({ }; return ( -
    +
    {title}
    -
    +
    {address}
    @@ -131,7 +134,7 @@ const InformationCard = ({ {/* 찜 */} {isSaved ? ( ) : ( @@ -183,7 +186,7 @@ const InformationCard = ({ hasText={false} /> -
    +
    최소인원 {MIN_PARTICIPANTS}명
    최대인원 {maxParticipants}명 diff --git a/src/app/components/Input/Input.tsx b/src/app/components/Input/Input.tsx index 82718bad..e3b18992 100644 --- a/src/app/components/Input/Input.tsx +++ b/src/app/components/Input/Input.tsx @@ -3,8 +3,9 @@ import { forwardRef, InputHTMLAttributes } from 'react'; export const InputStyles = { - base: 'w-full bg-var-gray-50 text-16 items-center gap-4 rounded-lg px-16 py-8 focus:ring-2', - hover: 'hover:ring-2 hover:ring-var-orange-300', + base: 'w-full bg-var-gray-50 text-16 items-center gap-4 rounded-lg px-16 py-8 focus:ring-2 dark:bg-neutral-900', + hover: + 'hover:ring-2 hover:ring-var-orange-300 dark:hover:ring-var-orange-800', focus: 'focus:ring-var-orange-600', error: 'ring-var-red ring-2', // form 사용시 에러메시지용 레이아웃 }; diff --git a/src/app/components/Modal/CalendarModal.tsx b/src/app/components/Modal/CalendarModal.tsx index 36babc39..40031aa5 100644 --- a/src/app/components/Modal/CalendarModal.tsx +++ b/src/app/components/Modal/CalendarModal.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import Button from '../Button/Button'; import Calendar from '../Calendar/Calendar'; +import { IconX } from '@/public/icons'; interface CalendarModalProps { initialSelectedData: Date | null; @@ -21,7 +22,14 @@ const CalendarModal = ({ const changeEndDays = CalendarProps?.changeEndDays ?? undefined; return ( -
    +
    + {/* TODO : 모달 닫기 props 로 받아서 추가 */} + {/* 캘린더 */}
    diff --git a/src/app/components/Modal/MakeGatheringModal.tsx b/src/app/components/Modal/MakeGatheringModal.tsx index b3b58e29..0ae1ca81 100644 --- a/src/app/components/Modal/MakeGatheringModal.tsx +++ b/src/app/components/Modal/MakeGatheringModal.tsx @@ -97,9 +97,9 @@ const MakeGatheringModal = ({ onClose }: MakeGatheringModalProps) => { -
    +
    {/* 헤더 */} diff --git a/src/app/components/Modal/MakeGatheringModal/CalendarSelect.tsx b/src/app/components/Modal/MakeGatheringModal/CalendarSelect.tsx index 736765a0..3c41f722 100644 --- a/src/app/components/Modal/MakeGatheringModal/CalendarSelect.tsx +++ b/src/app/components/Modal/MakeGatheringModal/CalendarSelect.tsx @@ -11,7 +11,7 @@ const CalendarSelect = ({ dateTime, setDateTime }: CalendarSelectProps) => { return (

    날짜

    -
    +
    { onChange={handleChange} />
    -
    +
    {fileName ?? ( -

    이미지를 첨부해 주세요 (1MB 이하)

    +

    + 이미지를 첨부해 주세요 (1MB 이하) +

    )}
    diff --git a/src/app/components/Modal/MakeGatheringModal/PlaceDropdown.tsx b/src/app/components/Modal/MakeGatheringModal/PlaceDropdown.tsx index 035dfb28..0fb09905 100644 --- a/src/app/components/Modal/MakeGatheringModal/PlaceDropdown.tsx +++ b/src/app/components/Modal/MakeGatheringModal/PlaceDropdown.tsx @@ -14,8 +14,10 @@ interface PlaceDropdownProps { } const stateClasses = { - default: 'border border-var-gray-100 bg-var-gray-50 text-var-gray-400', - active: 'text-var-gray-800 bg-var-gray-50', + default: + 'border border-var-gray-100 bg-var-gray-50 text-var-gray-400 dark:bg-neutral-900 dark:border-none dark:text-neutral-100', + active: + 'text-var-gray-800 bg-var-gray-50 dark:border dark:bg-var-gray-100 dark:border-var-gray-100 dark:text-var-gray-800', }; const PlaceDropdown = ({ @@ -72,7 +74,9 @@ const PlaceDropdown = ({ onClick={toggleDropDown} > {selectedOption || children} - +
    diff --git a/src/app/components/Modal/ModalHeader.tsx b/src/app/components/Modal/ModalHeader.tsx index 66de93fc..44e628c3 100644 --- a/src/app/components/Modal/ModalHeader.tsx +++ b/src/app/components/Modal/ModalHeader.tsx @@ -10,9 +10,9 @@ interface ModalHeaderProps { const ModalHeader = ({ title, onClose }: ModalHeaderProps) => { return (
    -

    {title}

    +

    {title}

    ); diff --git a/src/app/components/Modal/ProfileEditModal.tsx b/src/app/components/Modal/ProfileEditModal.tsx index 751289c7..5aa1b075 100644 --- a/src/app/components/Modal/ProfileEditModal.tsx +++ b/src/app/components/Modal/ProfileEditModal.tsx @@ -36,7 +36,7 @@ const ProfileEditModal = ({ return ( -
    +
    {/* 헤더 */} diff --git a/src/app/components/Pagination/Pagination.tsx b/src/app/components/Pagination/Pagination.tsx index a7731c0a..02419ef1 100644 --- a/src/app/components/Pagination/Pagination.tsx +++ b/src/app/components/Pagination/Pagination.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useEffect } from 'react'; -import { IconChevronLeft, IconChevronRight } from '@/public/icons'; +import { IconChevronLeft } from '@/public/icons'; const MAX_PAGES_TO_SHOW_TABLET = 4; // 태블릿에서 표시할 최대 페이지 수 const MAX_PAGES_TO_SHOW_DESKTOP = 6; // 데스크톱에서 표시할 최대 페이지 수 @@ -95,7 +95,7 @@ const Pagination = ({ onClick={() => handlePageClick(currentPage - 1)} disabled={currentPage === 1} > - + {/* 페이지 버튼 */} @@ -106,8 +106,8 @@ const Pagination = ({ data-testid={`page-button-${item}`} className={`rounded-lg border p-[10px] ${ currentPage === item - ? 'text-16 font-semibold text-var-black' - : 'text-16 font-normal text-var-gray-200' + ? 'text-16 font-semibold text-var-black dark:text-white' + : 'text-16 font-normal text-var-gray-200 dark:text-neutral-500' }`} onClick={() => handlePageClick(item)} > @@ -131,7 +131,7 @@ const Pagination = ({ onClick={() => handlePageClick(currentPage + 1)} disabled={currentPage === totalPages} > - +
    ); diff --git a/src/app/components/Popup/Popup.tsx b/src/app/components/Popup/Popup.tsx index f0750c70..8c5f4d08 100644 --- a/src/app/components/Popup/Popup.tsx +++ b/src/app/components/Popup/Popup.tsx @@ -31,16 +31,16 @@ const Popup = ({
    {/* 어두운 배경 추가 */}
    {/* 닫기 버튼 */}
    {/* 팝업 내용 */} -

    +

    {type === 'exit' ? ( <> 정말 나가시겠어요?
    작성된 내용이 모두 삭제됩니다. diff --git a/src/app/components/ProgressBar/ProgressBar.tsx b/src/app/components/ProgressBar/ProgressBar.tsx index fd85b863..e1fa830d 100644 --- a/src/app/components/ProgressBar/ProgressBar.tsx +++ b/src/app/components/ProgressBar/ProgressBar.tsx @@ -51,7 +51,7 @@ const ProgressBar = ({ {/* 참가 인원 렌더링 선택 */} {hasParticipantNumber && (

    @@ -61,19 +61,21 @@ const ProgressBar = ({ {/* 개설확정 렌더링 선택 */} {hasOpeningConfirmed && isOpeningConfirmed && !isClosedGathering && (
    - + 개설확정
    )}
    {/* progress bar */} -
    +
    Closed
    ) : (
    join now diff --git a/src/app/components/Review/Review.tsx b/src/app/components/Review/Review.tsx index f7e587a2..bedfaccd 100644 --- a/src/app/components/Review/Review.tsx +++ b/src/app/components/Review/Review.tsx @@ -25,7 +25,7 @@ const Review = ({ date, }: ReviewProps) => { return ( -
    +
    {image_source ? (
    ))}
    -
    +
    {description}
    {place && location && ( -
    +
    {place} 이용 · {location}
    )} -
    +
    -
    {user_name}
    +
    + {user_name} +
    -
    +
    {date.split('T')[0]}
    diff --git a/src/app/components/Tab/Tab.tsx b/src/app/components/Tab/Tab.tsx index 6cef41e2..bdf3a048 100644 --- a/src/app/components/Tab/Tab.tsx +++ b/src/app/components/Tab/Tab.tsx @@ -9,12 +9,12 @@ interface TabProps { const Tab = ({ type, isActive, onClick }: TabProps) => { const styles = isActive - ? 'text-var-gray-900 first-of-type:before:right-0 last-of-type:before:left-0 dark:text-var-white' - : 'text-var-gray-400 first-of-type:before:-right-full last-of-type:before:-left-full'; + ? 'text-var-gray-900 first-of-type:before:right-0 last-of-type:before:left-0 dark:text-neutral-50' + : 'text-var-gray-400 first-of-type:before:-right-full last-of-type:before:-left-full dark:text-neutral-500'; return (
    {type === 'WORKATION' ? ( diff --git a/src/app/components/UserProfileLayout/UserInfo.tsx b/src/app/components/UserProfileLayout/UserInfo.tsx index dcff521d..6eee5ae2 100644 --- a/src/app/components/UserProfileLayout/UserInfo.tsx +++ b/src/app/components/UserProfileLayout/UserInfo.tsx @@ -7,10 +7,10 @@ const UserInfo = ({ user }: UserInfoProps) => { return ( <> {/* 이름 */} -
    +
    {user?.name}
    -
    +
    {/* 회사명 */}
    company. diff --git a/src/app/components/UserProfileLayout/UserProfileLayout.tsx b/src/app/components/UserProfileLayout/UserProfileLayout.tsx index d56d233d..e8f0a1ae 100644 --- a/src/app/components/UserProfileLayout/UserProfileLayout.tsx +++ b/src/app/components/UserProfileLayout/UserProfileLayout.tsx @@ -57,9 +57,9 @@ const UserProfileLayout = ({ user }: MyGatheringListProps) => { }; return ( -
    +
    -
    +
    {/* 프로필 이미지 */}
    {user?.image ? ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c006e4ef..4fe31d02 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -30,7 +30,7 @@ export default async function RootLayout({ const token = await getCookie('token'); return ( - + diff --git a/src/styles/style.css b/src/styles/style.css index 3bdfba85..cb0f1f55 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -67,3 +67,41 @@ .react-datepicker__day--keyboard-selected { @apply !bg-var-white !text-var-orange-600; } + +/* Dark mode */ +html.dark .react-datepicker__month-container { + @apply !bg-neutral-800; +} + +html.dark .react-datepicker__header { + @apply !bg-neutral-800; +} + +html.dark .react-datepicker__current-month, +html.dark .react-datepicker-time__header, +html.dark .react-datepicker-year-header { + @apply !text-neutral-100; +} + +html.dark .react-datepicker__day-name, +html.dark .react-datepicker__day, +html.dark .react-datepicker__time-name { + @apply !text-white; +} + +html.dark .react-datepicker__day--disabled, +html.dark .react-datepicker__day--outside-month { + @apply !text-neutral-500; +} + +html.dark .react-datepicker__day--selected { + @apply !bg-var-orange-600 !text-var-white; +} + +html.dark .react-datepicker__day:hover { + @apply !bg-neutral-600 !text-neutral-50; +} + +html.dark .react-datepicker__day--keyboard-selected { + @apply !bg-neutral-800 !text-var-orange-600; +} From 2e5eb65a77fa6c9dfed6b1b4ab7d09ef5b1f17d5 Mon Sep 17 00:00:00 2001 From: chaeney Date: Thu, 10 Oct 2024 20:53:30 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[KAN-105]=20fix=20:=20theme=20provider=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 11 ++++------- src/app/providers.tsx | 17 ++++++++++------- src/app/theme-provider.tsx | 11 +++++++++++ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4fe31d02..79da0c09 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -10,7 +10,6 @@ import { toastOptions } from '@/constants/toast.config'; import { Toaster } from 'react-hot-toast'; import { getCookie } from '@/actions/auth/cookie/cookie'; -import { ThemeProvider } from './theme-provider'; export const metadata: Metadata = { title: 'Soothe With Me', @@ -32,12 +31,10 @@ export default async function RootLayout({ - - -
    {children}
    - - -     + +
    {children}
    + +     diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 1bb18303..9d2cdccf 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -4,6 +4,7 @@ import { SavedGatheringProvider } from '@/context/SavedGatheringContext'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactNode } from 'react'; import { UserProvider } from './(auth)/context/UserContext'; +import { ThemeProvider } from './theme-provider'; // QueryClient 인스턴스를 생성하는 함수 function makeQueryClient() { @@ -40,12 +41,14 @@ export default function Providers({ children }: { children: ReactNode }) { // QueryClientProvider로 자식 컴포넌트들을 감싸서 QueryClient를 제공 return ( - - - - {children} - - - + + + + + {children} + + + + ); } diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx index 530befd6..e52ca118 100644 --- a/src/app/theme-provider.tsx +++ b/src/app/theme-provider.tsx @@ -3,7 +3,18 @@ import * as React from 'react'; import { ThemeProvider as NextThemesProvider } from 'next-themes'; import { type ThemeProviderProps } from 'next-themes/dist/types'; +import { useEffect, useState } from 'react'; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + }, []); + + if (!isClient) { + return null; + } + return {children}; } From 4428318eb66b06d13d13c818fbecfe4661f0c9a9 Mon Sep 17 00:00:00 2001 From: chaeney Date: Thu, 10 Oct 2024 20:53:48 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[KAN-105]=20feat=20:=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/Filter/FilterDate.tsx | 1 + src/app/components/Modal/CalendarModal.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/Filter/FilterDate.tsx b/src/app/components/Filter/FilterDate.tsx index 696c7ea3..047559b7 100644 --- a/src/app/components/Filter/FilterDate.tsx +++ b/src/app/components/Filter/FilterDate.tsx @@ -82,6 +82,7 @@ const FilterDate = ({ initialSelectedData={selectedDate} handleClickButtons={handleClickButtons} CalendarProps={{ changeEndDays: 0 }} + handleCloseModal={() => setIsOpen(false)} />
    )} diff --git a/src/app/components/Modal/CalendarModal.tsx b/src/app/components/Modal/CalendarModal.tsx index 40031aa5..6c4c9d96 100644 --- a/src/app/components/Modal/CalendarModal.tsx +++ b/src/app/components/Modal/CalendarModal.tsx @@ -9,12 +9,14 @@ interface CalendarModalProps { initialSelectedData: Date | null; handleClickButtons: (date?: Date) => void; CalendarProps?: { changeStartDays?: number; changeEndDays?: number }; + handleCloseModal: () => void; } const CalendarModal = ({ initialSelectedData, handleClickButtons, CalendarProps, + handleCloseModal, }: CalendarModalProps) => { const [dateTime, setDateTime] = useState(initialSelectedData); @@ -23,10 +25,10 @@ const CalendarModal = ({ return (
    - {/* TODO : 모달 닫기 props 로 받아서 추가 */} @@ -51,7 +53,7 @@ const CalendarModal = ({ setDateTime(null); handleClickButtons(); } else { - // 모달 닫기를 props로 받아서 처리 + handleCloseModal(); } }} /> From 10962fa5cc3663088cc65b78154189cc111b2cf2 Mon Sep 17 00:00:00 2001 From: chaeney Date: Thu, 10 Oct 2024 23:40:35 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[KAN-105]=20feat=20:=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20class=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/Card/Card.tsx | 3 --- src/app/components/Gnb/UserStatus.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/components/Card/Card.tsx b/src/app/components/Card/Card.tsx index a186ff8d..9615b68d 100644 --- a/src/app/components/Card/Card.tsx +++ b/src/app/components/Card/Card.tsx @@ -68,9 +68,6 @@ const CardChips = (): JSX.Element => { return (
    - - -
    ); } diff --git a/src/app/components/Gnb/UserStatus.tsx b/src/app/components/Gnb/UserStatus.tsx index 32b5dd05..0fc7c01a 100644 --- a/src/app/components/Gnb/UserStatus.tsx +++ b/src/app/components/Gnb/UserStatus.tsx @@ -75,7 +75,7 @@ const UserStatus = ({ user, token }: UserStatusProps) => { {isOpen && (
      setIsOpen(false)} - className='absolute right-0 mt-8 max-h-240 w-120 overflow-y-auto rounded-xl bg-var-gray-50 lg:left-0' + className='absolute right-0 mt-8 max-h-240 w-120 overflow-y-auto rounded-xl bg-var-gray-50 lg:left-0 dark:bg-neutral-200' >
    • From 66ea9bdf6d8d0f4160b3548f0147544c6278811f Mon Sep 17 00:00:00 2001 From: chaeney Date: Fri, 11 Oct 2024 10:27:01 +0900 Subject: [PATCH 5/7] =?UTF-8?q?[KAN-105]=20feat=20:=20=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/Modal/ReviewModal.tsx | 2 +- src/app/components/Modal/ReviewModal/CommentReview.tsx | 2 +- src/app/components/Modal/ReviewModal/HeartReview.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/Modal/ReviewModal.tsx b/src/app/components/Modal/ReviewModal.tsx index 37f6a46a..0672e1b6 100644 --- a/src/app/components/Modal/ReviewModal.tsx +++ b/src/app/components/Modal/ReviewModal.tsx @@ -43,7 +43,7 @@ const ReviewModal = ({ gatheringId, onClose }: ReviewModalProps) => {
      ) => e.stopPropagation()} - className='flex max-h-408 w-344 flex-col gap-24 rounded-xl bg-var-white p-24 md:w-520' + className='flex max-h-408 w-344 flex-col gap-24 rounded-xl bg-var-white p-24 md:w-520 dark:border dark:border-neutral-600 dark:bg-neutral-800' > {/* 헤더 */} diff --git a/src/app/components/Modal/ReviewModal/CommentReview.tsx b/src/app/components/Modal/ReviewModal/CommentReview.tsx index 489cfd23..c89a9542 100644 --- a/src/app/components/Modal/ReviewModal/CommentReview.tsx +++ b/src/app/components/Modal/ReviewModal/CommentReview.tsx @@ -13,7 +13,7 @@ const CommentReview = ({ comment, onChange }: CommentReviewProps) => {
      diff --git a/src/app/components/Modal/ReviewModal/HeartReview.tsx b/src/app/components/Modal/ReviewModal/HeartReview.tsx index e64492b9..d769a1c9 100644 --- a/src/app/components/Modal/ReviewModal/HeartReview.tsx +++ b/src/app/components/Modal/ReviewModal/HeartReview.tsx @@ -14,7 +14,7 @@ const HeartReview = ({ score, setScore }: HeartReviewProps) => { {i + 1 <= score ? ( ) : ( - + )} , ); From e9abccfb28c9ffd2e5e107b7536e0284b4768da0 Mon Sep 17 00:00:00 2001 From: chaeney Date: Fri, 11 Oct 2024 10:27:19 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[KAN-105]=20refactor=20:=20=EC=BA=98?= =?UTF-8?q?=EB=A6=B0=EB=8D=94=20=EB=AA=A8=EB=8B=AC=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/Filter/FilterDate.tsx | 2 +- src/app/components/Modal/CalendarModal.tsx | 18 +++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/app/components/Filter/FilterDate.tsx b/src/app/components/Filter/FilterDate.tsx index 047559b7..17bcc0ac 100644 --- a/src/app/components/Filter/FilterDate.tsx +++ b/src/app/components/Filter/FilterDate.tsx @@ -82,7 +82,7 @@ const FilterDate = ({ initialSelectedData={selectedDate} handleClickButtons={handleClickButtons} CalendarProps={{ changeEndDays: 0 }} - handleCloseModal={() => setIsOpen(false)} + onCloseModal={() => setIsOpen(false)} />
    )} diff --git a/src/app/components/Modal/CalendarModal.tsx b/src/app/components/Modal/CalendarModal.tsx index 6c4c9d96..b5e13c8a 100644 --- a/src/app/components/Modal/CalendarModal.tsx +++ b/src/app/components/Modal/CalendarModal.tsx @@ -9,14 +9,14 @@ interface CalendarModalProps { initialSelectedData: Date | null; handleClickButtons: (date?: Date) => void; CalendarProps?: { changeStartDays?: number; changeEndDays?: number }; - handleCloseModal: () => void; + onCloseModal: () => void; } const CalendarModal = ({ initialSelectedData, handleClickButtons, CalendarProps, - handleCloseModal, + onCloseModal, }: CalendarModalProps) => { const [dateTime, setDateTime] = useState(initialSelectedData); @@ -28,7 +28,7 @@ const CalendarModal = ({ @@ -46,15 +46,11 @@ const CalendarModal = ({
    From 156ef8dd7a39c28b87cb55a0918c3ca45f68e5ce Mon Sep 17 00:00:00 2001 From: chaeney Date: Fri, 11 Oct 2024 11:12:39 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[KAN-105]=20refactor=20:=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Pagination/Pagination.test.tsx | 46 ++++++++++++++----- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/src/app/components/Pagination/Pagination.test.tsx b/src/app/components/Pagination/Pagination.test.tsx index 8d8f3b32..fe8e5366 100644 --- a/src/app/components/Pagination/Pagination.test.tsx +++ b/src/app/components/Pagination/Pagination.test.tsx @@ -5,14 +5,29 @@ import '@testing-library/jest-dom'; // icon mocking jest.mock('@/public/icons', () => ({ - IconChevronLeft: ({ onClick }: { onClick?: () => void }) => ( -
    - ), - IconChevronRight: ({ onClick }: { onClick?: () => void }) => ( -
    + IconChevronLeft: ({ + onClick, + className, + }: { + onClick?: () => void; + className?: string; + }) => ( +
    ), })); +// 이전 페이지 버튼과 다음 페이지 버튼을 가져오는 유틸 함수 +const getIconButton = () => { + const icons = screen.getAllByTestId('IconChevronLeft'); + const prevButton = icons[0]; + const nextButton = icons[1]; + return { icons, prevButton, nextButton }; +}; + describe('Pagination Component', () => { // 렌더링 시 이전 페이지 버튼과 다음 페이지 버튼이 표시되는지 확인 it('should display the previous and next page buttons when rendered', () => { @@ -20,8 +35,15 @@ describe('Pagination Component', () => { {}} />, ); - expect(screen.getByTestId('IconChevronLeft')).toBeInTheDocument(); - expect(screen.getByTestId('IconChevronRight')).toBeInTheDocument(); + const { icons, prevButton, nextButton } = getIconButton(); + + expect(icons).toHaveLength(2); + + // 이전 페이지 버튼은 rotate-180 클래스를 갖지 않음 + expect(prevButton).not.toHaveClass('rotate-180'); + + // 다음 페이지 버튼은 rotate-180 클래스를 가져야 함 + expect(nextButton).toHaveClass('rotate-180'); }); // 현재 페이지가 1일 때 이전 페이지 버튼이 비활성화되는지 확인 @@ -30,7 +52,8 @@ describe('Pagination Component', () => { {}} />, ); - const prevButton = screen.getByTestId('IconChevronLeft').parentElement; + const { prevButton: prev } = getIconButton(); + const prevButton = prev.parentElement; expect(prevButton).toBeDisabled(); }); @@ -41,7 +64,8 @@ describe('Pagination Component', () => { {}} />, ); - const nextButton = screen.getByTestId('IconChevronRight').parentElement; + const { nextButton: next } = getIconButton(); + const nextButton = next.parentElement; expect(nextButton).toBeDisabled(); }); @@ -64,7 +88,7 @@ describe('Pagination Component', () => { , ); - const prevButton = screen.getByTestId('IconChevronLeft'); + const { prevButton } = getIconButton(); fireEvent.click(prevButton); expect(onPageChange).toHaveBeenCalledWith(2); @@ -77,7 +101,7 @@ describe('Pagination Component', () => { , ); - const nextButton = screen.getByTestId('IconChevronRight'); + const { nextButton } = getIconButton(); fireEvent.click(nextButton); expect(onPageChange).toHaveBeenCalledWith(4);