From 3a7b64da6a2b4681586692c0543fcb93cbdfb5eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Thu, 19 Dec 2024 16:42:04 +0900 Subject: [PATCH 01/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A9=94=EB=89=B4=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20constants=20=ED=8C=8C=EC=9D=BC=EC=97=90=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/mypage_menu_delete.svg | 4 ++++ src/assets/images/mypage_menu_review.svg | 5 +++++ src/assets/images/mypage_menu_userInfo.svg | 4 ++++ src/constants/images.ts | 25 +++++++++++++++++----- src/constants/mypageMenuList.ts | 7 ++++-- src/constants/pagePath.ts | 7 ++++-- 6 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 src/assets/images/mypage_menu_delete.svg create mode 100644 src/assets/images/mypage_menu_review.svg create mode 100644 src/assets/images/mypage_menu_userInfo.svg diff --git a/src/assets/images/mypage_menu_delete.svg b/src/assets/images/mypage_menu_delete.svg new file mode 100644 index 0000000..f22d436 --- /dev/null +++ b/src/assets/images/mypage_menu_delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/mypage_menu_review.svg b/src/assets/images/mypage_menu_review.svg new file mode 100644 index 0000000..e6fd198 --- /dev/null +++ b/src/assets/images/mypage_menu_review.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/mypage_menu_userInfo.svg b/src/assets/images/mypage_menu_userInfo.svg new file mode 100644 index 0000000..03a4434 --- /dev/null +++ b/src/assets/images/mypage_menu_userInfo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/constants/images.ts b/src/constants/images.ts index 65d177b..2c87c90 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -17,10 +17,10 @@ import BlueFavoriteIcon from "@/assets/images/blue_favorite.svg"; import BlueKaKaoIcon from "@/assets/images/blue_kakao.svg"; import BlueLinkIcon from "@/assets/images/blue_link.svg"; import blueStar from "@/assets/images/blue_star.svg"; -import cancel from "@/assets/images/cancel.svg"; import calendarIcon from "@/assets/images/calendar.svg"; import calendarGreyIcon from "@/assets/images/calendar_grey.svg"; import calendarWhiteIcon from "@/assets/images/calendar_white.svg"; +import cancel from "@/assets/images/cancel.svg"; import check from "@/assets/images/check.svg"; import ChildIcon from "@/assets/images/child.svg"; import ColumnLine from "@/assets/images/column_line.svg"; @@ -64,9 +64,12 @@ import Four from "@/assets/images/main/4.svg"; import memberIcon from "@/assets/images/member.svg"; import memberWhiteIcon from "@/assets/images/member_white.svg"; import modalClose from "@/assets/images/modal_close.svg"; +import mypageMenuDelete from "@/assets/images/mypage_menu_delete.svg"; import mypageMenuHeart from "@/assets/images/mypage_menu_heart.svg"; import mypageMenuLevel from "@/assets/images/mypage_menu_level.svg"; +import mypageMenuReview from "@/assets/images/mypage_menu_review.svg"; import mypageMenuTravel from "@/assets/images/mypage_menu_travel.svg"; +import mypageMenuUserInfo from "@/assets/images/mypage_menu_userInfo.svg"; import PartyIcon from "@/assets/images/party.svg"; import markerInMap from "@/assets/images/pin_on_map.png"; import plus from "@/assets/images/plus.svg"; @@ -433,16 +436,28 @@ export const IMAGES = { src: apiDataLogo, alt: "한국관광공사 로고", }, - mypageMenuHeart: { - src: mypageMenuHeart, - alt: "마이페이지 찜 아이콘", + mypageMenuUserInfo: { + src: mypageMenuUserInfo, + alt: "마이페이지 회원 정보 변경 아이콘", }, mypageMenuLevel: { src: mypageMenuLevel, - alt: "마이페이지 나의 등급 아이콘", + alt: "마이페이지 내 등급/뱃지 아이콘", }, mypageMenuTravel: { src: mypageMenuTravel, alt: "마이페이지 내가 만든 여행 아이콘", }, + mypageMenuHeart: { + src: mypageMenuHeart, + alt: "마이페이지 찜 아이콘", + }, + mypageMenuReview: { + src: mypageMenuReview, + alt: "마이페이지 내가 쓴 리뷰 아이콘", + }, + mypageMenuDelete: { + src: mypageMenuDelete, + alt: "마이페이지 회원 탈퇴 아이콘", + }, }; diff --git a/src/constants/mypageMenuList.ts b/src/constants/mypageMenuList.ts index 0582a36..6118fb7 100644 --- a/src/constants/mypageMenuList.ts +++ b/src/constants/mypageMenuList.ts @@ -2,7 +2,10 @@ import { IMAGES } from "./images"; import { PAGE_PATH } from "./pagePath"; export const MYPAGE_MENU_LIST = [ - { id: 1, icon: IMAGES.mypageMenuHeart, name: "찜", navigate: PAGE_PATH.myPageLikes }, - { id: 2, icon: IMAGES.mypageMenuLevel, name: "나의 등급", navigate: PAGE_PATH.myPageRank }, + { id: 1, icon: IMAGES.mypageMenuUserInfo, name: "회원 정보 변경", navigate: PAGE_PATH.myPageUserInfo }, + { id: 2, icon: IMAGES.mypageMenuLevel, name: "내 등급/뱃지", navigate: PAGE_PATH.myPageRank }, { id: 3, icon: IMAGES.mypageMenuTravel, name: "내가 만든 여행", navigate: PAGE_PATH.myPageTrips }, + { id: 4, icon: IMAGES.mypageMenuHeart, name: "찜", navigate: PAGE_PATH.myPageLikes }, + { id: 5, icon: IMAGES.mypageMenuReview, name: "내가 쓴 리뷰", navigate: PAGE_PATH.myPageReview }, + { id: 6, icon: IMAGES.mypageMenuDelete, name: "회원 탈퇴", navigate: PAGE_PATH.myPageDelete }, ]; diff --git a/src/constants/pagePath.ts b/src/constants/pagePath.ts index 27b800d..8749575 100644 --- a/src/constants/pagePath.ts +++ b/src/constants/pagePath.ts @@ -10,9 +10,12 @@ export const PAGE_PATH = { courseEdit: "/course/:id/edit", // 코스 수정하기 destinationEdit: "/destination/:id/edit", // 여행지 수정하기 myPage: "/mypage", // 마이페이지 - myPageLikes: "/mypage/likes", // 마이페이지 찜 - myPageRank: "/mypage/rank", // 마이페이지 나의 등급 + myPageUserInfo: "/mypage/userInfo", // 마이페이지 회원 정보 변경 + myPageRank: "/mypage/rank", // 마이페이지 나의 등급/뱃지 myPageTrips: "/mypage/trips", // 마이페이지 내가 만든 여행 + myPageLikes: "/mypage/likes", // 마이페이지 찜 + myPageReview: "/mypage/review", // 마이페이지 내가 쓴 리뷰 + myPageDelete: "/mypage/delete", // 마이페이지 회원 탈퇴 authKakao: "/auth/kakao/callback", }; From 202294f1b265da0517dee66d477c12f80375ab3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:38:11 +0900 Subject: [PATCH 02/12] =?UTF-8?q?Fix:=20=EC=A3=BC=EC=84=9D=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=ED=95=B4=EB=86=A8=EB=8D=98=20mypage=20=EC=A7=84?= =?UTF-8?q?=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=EA=B4=80=EB=A0=A8=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A3=BC=EC=84=9D=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/MobileNavigationBar/index.tsx | 9 ++++++--- src/components/commons/NavigationBar/RightButtons.tsx | 6 +++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/commons/MobileNavigationBar/index.tsx b/src/components/commons/MobileNavigationBar/index.tsx index 0cbc074..d5574bc 100644 --- a/src/components/commons/MobileNavigationBar/index.tsx +++ b/src/components/commons/MobileNavigationBar/index.tsx @@ -9,7 +9,7 @@ const cx = classNames.bind(styles); const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => { const navigate = useNavigate(); - const { signIn } = PAGE_PATH; + const { signIn, myPage } = PAGE_PATH; return (
@@ -17,8 +17,11 @@ const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => {
- {/* {isAuth ? : } */} - {!isAuth && } + {isAuth ? ( + + ) : ( + + )}
); diff --git a/src/components/commons/NavigationBar/RightButtons.tsx b/src/components/commons/NavigationBar/RightButtons.tsx index 4303de0..0d767a5 100644 --- a/src/components/commons/NavigationBar/RightButtons.tsx +++ b/src/components/commons/NavigationBar/RightButtons.tsx @@ -13,7 +13,7 @@ const cx = classNames.bind(styles); const RightButtons = ({ isAuth }: { isAuth: boolean | null }) => { const navigate = useNavigate(); const { logout, isModalOpen, setIsModalOpen } = useLogoutMutation(); - const { signIn, signUp } = PAGE_PATH; + const { signIn, signUp, myPage } = PAGE_PATH; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { @@ -28,9 +28,9 @@ const RightButtons = ({ isAuth }: { isAuth: boolean | null }) => { <> {isAuth ? (
- {/* */} + From 002c20d5bcc2f68779ae319487b22176bb046b4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:41:23 +0900 Subject: [PATCH 03/12] =?UTF-8?q?Fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyPage/MyPageLikes.tsx | 8 -------- src/pages/MyPage/MyPageRank.tsx | 8 -------- src/pages/MyPage/MyPageTrips.tsx | 8 -------- 3 files changed, 24 deletions(-) delete mode 100644 src/pages/MyPage/MyPageLikes.tsx delete mode 100644 src/pages/MyPage/MyPageRank.tsx delete mode 100644 src/pages/MyPage/MyPageTrips.tsx diff --git a/src/pages/MyPage/MyPageLikes.tsx b/src/pages/MyPage/MyPageLikes.tsx deleted file mode 100644 index b6e9eaa..0000000 --- a/src/pages/MyPage/MyPageLikes.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const MyPageLikes = () => { - return ( - <> -

MyPageLikes Component

- - ); -}; -export default MyPageLikes; diff --git a/src/pages/MyPage/MyPageRank.tsx b/src/pages/MyPage/MyPageRank.tsx deleted file mode 100644 index 99cc358..0000000 --- a/src/pages/MyPage/MyPageRank.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const MyPageRank = () => { - return ( - <> -

MyPageRank Component

- - ); -}; -export default MyPageRank; diff --git a/src/pages/MyPage/MyPageTrips.tsx b/src/pages/MyPage/MyPageTrips.tsx deleted file mode 100644 index d67efa8..0000000 --- a/src/pages/MyPage/MyPageTrips.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const MyPageTrips = () => { - return ( - <> -

MyPageTrips Component

- - ); -}; -export default MyPageTrips; From 2ddf4d102eb3c06c3297b4590269638bb8568152 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:45:37 +0900 Subject: [PATCH 04/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPageLayout/MyPageLayout.module.scss | 47 +++++++++++++++++++ src/layout/MyPageLayout/index.tsx | 28 +++++++++++ src/pages/MyPage/MyPageSub.tsx | 16 +++++++ src/pages/PageRouter.tsx | 14 ++---- 4 files changed, 96 insertions(+), 9 deletions(-) create mode 100644 src/layout/MyPageLayout/MyPageLayout.module.scss create mode 100644 src/layout/MyPageLayout/index.tsx create mode 100644 src/pages/MyPage/MyPageSub.tsx diff --git a/src/layout/MyPageLayout/MyPageLayout.module.scss b/src/layout/MyPageLayout/MyPageLayout.module.scss new file mode 100644 index 0000000..c96ca66 --- /dev/null +++ b/src/layout/MyPageLayout/MyPageLayout.module.scss @@ -0,0 +1,47 @@ +.my-page-layout { + display: grid; + grid-template-columns: 21.5rem auto; + grid-template-areas: + "heading heading" + "sidebar main"; + gap: 2.5rem 12.5rem; + + @include responsive("T") { + grid-template-columns: 15.5rem auto; + gap: 1.8rem 5.7rem; + } + + &__heading { + @include text-style(3, 600, $black30); + grid-area: heading; + padding-left: 1.5rem; + + @include responsive("T") { + font-size: 2.2rem; + padding-left: 1rem; + } + + &-selectedMenu { + @include text-style(2.5, 500, $black30); + + @include responsive("T") { + font-size: 1.8rem; + } + } + } + + &__sidebar { + grid-area: sidebar; + display: flex; + flex-direction: column; + gap: 1.4rem; + + @include responsive("T") { + gap: 1rem; + } + } + + &__main { + grid-area: main; + } +} diff --git a/src/layout/MyPageLayout/index.tsx b/src/layout/MyPageLayout/index.tsx new file mode 100644 index 0000000..b0fa02b --- /dev/null +++ b/src/layout/MyPageLayout/index.tsx @@ -0,0 +1,28 @@ +import { PropsWithChildren } from "react"; + +import NavBar from "@/components/domains/myPage/layout/NavBar"; +import UserInfo from "@/components/domains/myPage/layout/UserInfo"; +import classNames from "classnames/bind"; +import styles from "./MyPageLayout.module.scss"; + +const cx = classNames.bind(styles); + +interface MyPageLayoutProps { + selectedMenu: string; +} + +const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren) => { + return ( +
+

+ MYPAGE / {selectedMenu} +

+ +
{children}
+
+ ); +}; +export default MyPageLayout; diff --git a/src/pages/MyPage/MyPageSub.tsx b/src/pages/MyPage/MyPageSub.tsx new file mode 100644 index 0000000..f21924c --- /dev/null +++ b/src/pages/MyPage/MyPageSub.tsx @@ -0,0 +1,16 @@ +import MyPageLayout from "@/layout/MyPageLayout"; +import { ReactNode } from "react"; + +interface MyPageSubProps { + selectedMenu: string; + content: ReactNode; +} + +const MyPageSub = ({ selectedMenu, content }: MyPageSubProps) => { + return ( + <> + {content} + + ); +}; +export default MyPageSub; diff --git a/src/pages/PageRouter.tsx b/src/pages/PageRouter.tsx index 3806d28..cf693f6 100644 --- a/src/pages/PageRouter.tsx +++ b/src/pages/PageRouter.tsx @@ -1,4 +1,5 @@ import AuthListener from "@/components/commons/AuthListener"; +import { MYPAGE_MENU_LIST } from "@/constants/mypageMenuList"; import { PAGE_PATH } from "@/constants/pagePath"; import { lazy } from "react"; import { Route, Routes } from "react-router-dom"; @@ -15,9 +16,7 @@ const CourseEditPage = lazy(() => import("./CourseEditPage")); const DestinationRegisterPage = lazy(() => import("./DestinationRegisterPage")); const DestinationEditPage = lazy(() => import("./DestinationEditPage")); const MyPage = lazy(() => import("./MyPage")); -const MyPageLikes = lazy(() => import("./MyPage/MyPageLikes")); -const MyPageRank = lazy(() => import("./MyPage/MyPageRank")); -const MyPageTrips = lazy(() => import("./MyPage/MyPageTrips")); +const MyPageSub = lazy(() => import("./MyPage/MyPageSub")); const { search, @@ -30,9 +29,6 @@ const { destinationRegister, destinationEdit, myPage, - myPageLikes, - myPageRank, - myPageTrips, authKakao, } = PAGE_PATH; @@ -51,9 +47,9 @@ function PageRouter() { } /> } /> } /> - } /> - } /> - } /> + {MYPAGE_MENU_LIST.map(({ id, name, navigate, content: ContentComponent }) => ( + } />} /> + ))} } /> From e52d3534c2862b238f585f15b60cefc2bf30eb5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:47:17 +0900 Subject: [PATCH 05/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=EC=9D=84=20=EC=A0=9C=EC=99=B8=ED=95=9C=20con?= =?UTF-8?q?tent=20=EC=98=81=EC=97=AD=EC=9D=B4=20=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domains/myPage/contents/Delete/index.tsx | 8 ++++++++ src/components/domains/myPage/contents/Level/index.tsx | 8 ++++++++ src/components/domains/myPage/contents/Likes/index.tsx | 8 ++++++++ src/components/domains/myPage/contents/Reviews/index.tsx | 8 ++++++++ src/components/domains/myPage/contents/Trips/index.tsx | 8 ++++++++ .../domains/myPage/contents/UpdateUserInfo/index.tsx | 8 ++++++++ 6 files changed, 48 insertions(+) create mode 100644 src/components/domains/myPage/contents/Delete/index.tsx create mode 100644 src/components/domains/myPage/contents/Level/index.tsx create mode 100644 src/components/domains/myPage/contents/Likes/index.tsx create mode 100644 src/components/domains/myPage/contents/Reviews/index.tsx create mode 100644 src/components/domains/myPage/contents/Trips/index.tsx create mode 100644 src/components/domains/myPage/contents/UpdateUserInfo/index.tsx diff --git a/src/components/domains/myPage/contents/Delete/index.tsx b/src/components/domains/myPage/contents/Delete/index.tsx new file mode 100644 index 0000000..9cca9b1 --- /dev/null +++ b/src/components/domains/myPage/contents/Delete/index.tsx @@ -0,0 +1,8 @@ +const Delete = () => { + return ( + <> +

Delete Component

+ + ); +}; +export default Delete; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx new file mode 100644 index 0000000..9aefa77 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -0,0 +1,8 @@ +const Level = () => { + return ( + <> +

Level Component

+ + ); +}; +export default Level; diff --git a/src/components/domains/myPage/contents/Likes/index.tsx b/src/components/domains/myPage/contents/Likes/index.tsx new file mode 100644 index 0000000..c55a9d0 --- /dev/null +++ b/src/components/domains/myPage/contents/Likes/index.tsx @@ -0,0 +1,8 @@ +const Likes = () => { + return ( + <> +

Likes Component

+ + ); +}; +export default Likes; diff --git a/src/components/domains/myPage/contents/Reviews/index.tsx b/src/components/domains/myPage/contents/Reviews/index.tsx new file mode 100644 index 0000000..b3fcdaf --- /dev/null +++ b/src/components/domains/myPage/contents/Reviews/index.tsx @@ -0,0 +1,8 @@ +const Reviews = () => { + return ( + <> +

Reviews Component

+ + ); +}; +export default Reviews; diff --git a/src/components/domains/myPage/contents/Trips/index.tsx b/src/components/domains/myPage/contents/Trips/index.tsx new file mode 100644 index 0000000..3112f99 --- /dev/null +++ b/src/components/domains/myPage/contents/Trips/index.tsx @@ -0,0 +1,8 @@ +const Trips = () => { + return ( + <> +

Trips Component

+ + ); +}; +export default Trips; diff --git a/src/components/domains/myPage/contents/UpdateUserInfo/index.tsx b/src/components/domains/myPage/contents/UpdateUserInfo/index.tsx new file mode 100644 index 0000000..9dfca7f --- /dev/null +++ b/src/components/domains/myPage/contents/UpdateUserInfo/index.tsx @@ -0,0 +1,8 @@ +const UpdateUserInfo = () => { + return ( + <> +

UpdateUserInfo Component

+ + ); +}; +export default UpdateUserInfo; From 77bf019cef9f6d0c475ee117231ef71732f1d6ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:49:25 +0900 Subject: [PATCH 06/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A9=94=EB=89=B4=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=8B=A4=EC=9A=B4=20=20=EB=B0=8F?= =?UTF-8?q?=20=EA=B0=9D=EC=B2=B4=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/images.ts | 6 +++--- src/constants/mypageMenuList.ts | 24 ++++++++++++++++++------ 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/constants/images.ts b/src/constants/images.ts index 2c87c90..55dab30 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -69,7 +69,7 @@ import mypageMenuHeart from "@/assets/images/mypage_menu_heart.svg"; import mypageMenuLevel from "@/assets/images/mypage_menu_level.svg"; import mypageMenuReview from "@/assets/images/mypage_menu_review.svg"; import mypageMenuTravel from "@/assets/images/mypage_menu_travel.svg"; -import mypageMenuUserInfo from "@/assets/images/mypage_menu_userInfo.svg"; +import mypageMenuUpdateUserInfo from "@/assets/images/mypage_menu_userInfo.svg"; import PartyIcon from "@/assets/images/party.svg"; import markerInMap from "@/assets/images/pin_on_map.png"; import plus from "@/assets/images/plus.svg"; @@ -436,8 +436,8 @@ export const IMAGES = { src: apiDataLogo, alt: "한국관광공사 로고", }, - mypageMenuUserInfo: { - src: mypageMenuUserInfo, + mypageMenuUpdateUserInfo: { + src: mypageMenuUpdateUserInfo, alt: "마이페이지 회원 정보 변경 아이콘", }, mypageMenuLevel: { diff --git a/src/constants/mypageMenuList.ts b/src/constants/mypageMenuList.ts index 6118fb7..12f7dd0 100644 --- a/src/constants/mypageMenuList.ts +++ b/src/constants/mypageMenuList.ts @@ -1,11 +1,23 @@ +import Delete from "@/components/domains/myPage/contents/Delete"; +import Level from "@/components/domains/myPage/contents/Level"; +import Likes from "@/components/domains/myPage/contents/Likes"; +import Reviews from "@/components/domains/myPage/contents/Reviews"; +import Trips from "@/components/domains/myPage/contents/Trips"; +import UpdateUserInfo from "@/components/domains/myPage/contents/UpdateUserInfo"; import { IMAGES } from "./images"; import { PAGE_PATH } from "./pagePath"; export const MYPAGE_MENU_LIST = [ - { id: 1, icon: IMAGES.mypageMenuUserInfo, name: "회원 정보 변경", navigate: PAGE_PATH.myPageUserInfo }, - { id: 2, icon: IMAGES.mypageMenuLevel, name: "내 등급/뱃지", navigate: PAGE_PATH.myPageRank }, - { id: 3, icon: IMAGES.mypageMenuTravel, name: "내가 만든 여행", navigate: PAGE_PATH.myPageTrips }, - { id: 4, icon: IMAGES.mypageMenuHeart, name: "찜", navigate: PAGE_PATH.myPageLikes }, - { id: 5, icon: IMAGES.mypageMenuReview, name: "내가 쓴 리뷰", navigate: PAGE_PATH.myPageReview }, - { id: 6, icon: IMAGES.mypageMenuDelete, name: "회원 탈퇴", navigate: PAGE_PATH.myPageDelete }, + { + id: 1, + icon: IMAGES.mypageMenuUpdateUserInfo, + name: "회원 정보 변경", + navigate: PAGE_PATH.myPageUpdateUserInfo, + content: UpdateUserInfo, + }, + { id: 2, icon: IMAGES.mypageMenuLevel, name: "내 등급/뱃지", navigate: PAGE_PATH.myPageRank, content: Level }, + { id: 3, icon: IMAGES.mypageMenuTravel, name: "내가 만든 여행", navigate: PAGE_PATH.myPageTrips, content: Trips }, + { id: 4, icon: IMAGES.mypageMenuHeart, name: "찜", navigate: PAGE_PATH.myPageLikes, content: Likes }, + { id: 5, icon: IMAGES.mypageMenuReview, name: "내가 쓴 리뷰", navigate: PAGE_PATH.myPageReview, content: Reviews }, + { id: 6, icon: IMAGES.mypageMenuDelete, name: "회원 탈퇴", navigate: PAGE_PATH.myPageDelete, content: Delete }, ]; From 2f68fb92f7d2db0d4b6106a8c16cb666b1f62f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:50:24 +0900 Subject: [PATCH 07/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?= =?UTF-8?q?=EC=9D=98=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20UI=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/myPage/layout/NavBar.module.scss | 30 ++++++++ .../domains/myPage/layout/NavBar.tsx | 32 ++++++++ .../myPage/layout/UserInfo.module.scss | 76 +++++++++++++++++++ .../domains/myPage/layout/UserInfo.tsx | 47 ++++++++++++ 4 files changed, 185 insertions(+) create mode 100644 src/components/domains/myPage/layout/NavBar.module.scss create mode 100644 src/components/domains/myPage/layout/NavBar.tsx create mode 100644 src/components/domains/myPage/layout/UserInfo.module.scss create mode 100644 src/components/domains/myPage/layout/UserInfo.tsx diff --git a/src/components/domains/myPage/layout/NavBar.module.scss b/src/components/domains/myPage/layout/NavBar.module.scss new file mode 100644 index 0000000..cbc948f --- /dev/null +++ b/src/components/domains/myPage/layout/NavBar.module.scss @@ -0,0 +1,30 @@ +.nav { + padding: 3.6rem 2.3rem 4rem; + border: solid 0.1rem $gray20; + border-radius: 1rem; + + @include responsive("T") { + padding: 2.6rem 1.7rem 2.8rem; + } + + &__list { + @include column-flexbox(center, start); + gap: 2.4rem; + + @include responsive("T") { + gap: 1.7rem; + } + + &-item { + @include text-style(2, 400, $black30); + + @include responsive("T") { + font-size: 1.5rem; + } + + & &--active { + font-weight: 700; + } + } + } +} diff --git a/src/components/domains/myPage/layout/NavBar.tsx b/src/components/domains/myPage/layout/NavBar.tsx new file mode 100644 index 0000000..b323fa7 --- /dev/null +++ b/src/components/domains/myPage/layout/NavBar.tsx @@ -0,0 +1,32 @@ +import { MYPAGE_MENU_LIST } from "@/constants/mypageMenuList"; +import { NavLink } from "react-router-dom"; + +import classNames from "classnames/bind"; +import styles from "./NavBar.module.scss"; + +const cx = classNames.bind(styles); + +const NavBar = () => { + return ( +
+
    + {MYPAGE_MENU_LIST.map(({ id, name, navigate }) => { + return ( +
  • + + cx({ + "nav__list-item--active": isActive, + }) + }> + {name} + +
    • + ); + })} +
+
+ ); +}; +export default NavBar; diff --git a/src/components/domains/myPage/layout/UserInfo.module.scss b/src/components/domains/myPage/layout/UserInfo.module.scss new file mode 100644 index 0000000..cfaa888 --- /dev/null +++ b/src/components/domains/myPage/layout/UserInfo.module.scss @@ -0,0 +1,76 @@ +.user-info { + display: grid; + grid-template-columns: auto 1fr; + grid-template-areas: + "nickname nickname" + "profileImg role" + "point point"; + gap: 1rem 0.7rem; + border: solid 0.1rem $gray20; + border-radius: 1rem; + padding: 2.6rem 2.2rem; + + @include responsive("T") { + gap: 1rem 0.5rem; + padding: 1.9rem 1.6rem; + } + + &__nickname { + @include text-style(2.5, 700, $black30); + grid-area: nickname; + + @include responsive("T") { + font-size: 1.8rem; + } + + &-suffix { + @include text-style(2, 500, $black30); + + @include responsive("T") { + font-size: 1.5rem; + } + } + } + + &__profileImg { + grid-area: profileImg; + background-color: $gray20; + border-radius: 50%; + width: 4rem; + height: 4rem; + padding: 0.5rem; + + @include responsive("T") { + width: 3rem; + height: 3rem; + } + } + + &__role { + @include text-style(1.4, 500, $black30); + align-self: center; + + @include responsive("T") { + font-size: 1.1rem; + } + } + + &__point { + @include text-style(1.8, 700, $black30); + grid-area: point; + padding-top: 2.9rem; + + @include responsive("T") { + font-size: 1.6rem; + padding-top: 1.5rem; + } + + &-suffix { + @include text-style(1.6, 500, $black30); + + @include responsive("T") { + font-size: 1.4rem; + } + } + } +} diff --git a/src/components/domains/myPage/layout/UserInfo.tsx b/src/components/domains/myPage/layout/UserInfo.tsx new file mode 100644 index 0000000..cf5f8a1 --- /dev/null +++ b/src/components/domains/myPage/layout/UserInfo.tsx @@ -0,0 +1,47 @@ +import Image from "@/components/commons/Image"; +import { IMAGES } from "@/constants/images"; +import { authState } from "@/recoil/authAtom"; +import { useRecoilState } from "recoil"; + +import classNames from "classnames/bind"; +import styles from "./UserInfo.module.scss"; + +const cx = classNames.bind(styles); + +const UserInfo = () => { + const [auth] = useRecoilState(authState); + const tempPoint = 1000; + + if (!auth) { + return ( +
+

사용자 정보를 불러올 수 없습니다.

+ +
+ ); + } + + const { nickname, profileImgUrl, role } = auth; // fix: 백엔드에 point 값 요청하기 + + return ( +
+
+ {nickname} + 님 +
+
+ {profileImgUrl ? ( + + ) : ( + + )} +
+
{role}
+
+ {tempPoint} + point +
+
+ ); +}; +export default UserInfo; From 3aa92903136841f62b656a695f1a0e1404394d2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 13:51:13 +0900 Subject: [PATCH 08/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=91=EA=B7=BC=20=EC=8B=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=EA=B4=80=EB=A0=A8=20use?= =?UTF-8?q?Auth=20=ED=9B=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/pagePath.ts | 3 ++- src/hooks/useAuth.ts | 4 ++-- src/utils/pageHelpers.ts | 3 ++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/constants/pagePath.ts b/src/constants/pagePath.ts index 8749575..64e7dcc 100644 --- a/src/constants/pagePath.ts +++ b/src/constants/pagePath.ts @@ -10,7 +10,7 @@ export const PAGE_PATH = { courseEdit: "/course/:id/edit", // 코스 수정하기 destinationEdit: "/destination/:id/edit", // 여행지 수정하기 myPage: "/mypage", // 마이페이지 - myPageUserInfo: "/mypage/userInfo", // 마이페이지 회원 정보 변경 + myPageUpdateUserInfo: "/mypage/userInfo", // 마이페이지 회원 정보 변경 myPageRank: "/mypage/rank", // 마이페이지 나의 등급/뱃지 myPageTrips: "/mypage/trips", // 마이페이지 내가 만든 여행 myPageLikes: "/mypage/likes", // 마이페이지 찜 @@ -24,3 +24,4 @@ const { signIn, signUp, courseRegister, destinationRegister } = PAGE_PATH; export const authPages = [signIn, signUp]; export const registerPages = [courseRegister, destinationRegister]; export const dynamicPages = [/\/course\/[^/]+\/edit/, /\/destination\/[^/]+\/edit/]; +export const myPages = /^\/mypage/; diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 74c6921..2ba2500 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -2,7 +2,7 @@ import { getBasicInfo } from "@/api/my"; import { PAGE_PATH } from "@/constants/pagePath"; import { authState } from "@/recoil/authAtom"; import { getAccessToken } from "@/utils/manageTokenInfo"; -import { isRegisterPage, isSignPage } from "@/utils/pageHelpers"; +import { isMyPage, isRegisterPage, isSignPage } from "@/utils/pageHelpers"; import { useQuery } from "@tanstack/react-query"; import { useEffect } from "react"; import { useLocation, useNavigate } from "react-router-dom"; @@ -35,7 +35,7 @@ const useAuth = () => { if (accessToken && isSignPage(location.pathname)) { navigate("/"); - } else if (!accessToken && isRegisterPage(location.pathname)) { + } else if (!accessToken && (isRegisterPage(location.pathname) || isMyPage(location.pathname))) { navigate(PAGE_PATH.signIn, { replace: true }); } }, [accessToken, isSuccess, userInfo, location.pathname, navigate, setAuth]); diff --git a/src/utils/pageHelpers.ts b/src/utils/pageHelpers.ts index dfa91c1..a1bca87 100644 --- a/src/utils/pageHelpers.ts +++ b/src/utils/pageHelpers.ts @@ -1,5 +1,6 @@ -import { authPages, dynamicPages, registerPages } from "@/constants/pagePath"; +import { authPages, dynamicPages, myPages, registerPages } from "@/constants/pagePath"; export const isSignPage = (path: string) => authPages.includes(path); export const isRegisterPage = (path: string) => registerPages.includes(path) || dynamicPages.some((regex) => regex.test(path)); +export const isMyPage = (path: string) => myPages.test(path); From e5bc3cb2aa9898e2a7abcf21ff69d3a8aa1e309f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 21:01:14 +0900 Subject: [PATCH 09/12] =?UTF-8?q?Fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EA=B8=B0=EA=B8=B0=EC=97=90=EC=84=9C=20=EB=84=A4=EB=B9=84?= =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20=EB=B0=94=EC=9D=98=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/gray_back.svg | 3 +++ src/assets/images/gray_hamburger.svg | 5 +++++ .../MobileNavigationBar.module.scss | 11 ++++------ .../commons/MobileNavigationBar/index.tsx | 20 +++++++++++++------ src/constants/images.ts | 10 ++++++++++ src/hooks/useAuth.ts | 8 ++++---- 6 files changed, 40 insertions(+), 17 deletions(-) create mode 100644 src/assets/images/gray_back.svg create mode 100644 src/assets/images/gray_hamburger.svg diff --git a/src/assets/images/gray_back.svg b/src/assets/images/gray_back.svg new file mode 100644 index 0000000..e4119eb --- /dev/null +++ b/src/assets/images/gray_back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/gray_hamburger.svg b/src/assets/images/gray_hamburger.svg new file mode 100644 index 0000000..0ac7818 --- /dev/null +++ b/src/assets/images/gray_hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/commons/MobileNavigationBar/MobileNavigationBar.module.scss b/src/components/commons/MobileNavigationBar/MobileNavigationBar.module.scss index 2c62793..efccce2 100644 --- a/src/components/commons/MobileNavigationBar/MobileNavigationBar.module.scss +++ b/src/components/commons/MobileNavigationBar/MobileNavigationBar.module.scss @@ -6,11 +6,12 @@ padding-left: 3rem; padding-right: 3rem; - &-logo { - width: 4rem; + &__back { + width: 3rem; + cursor: pointer; } - &-btn { + &__btn { @include text-style(1.5, 700, $black30); button { cursor: pointer; @@ -20,9 +21,5 @@ @include responsive("M") { padding-left: 2rem; padding-right: 2rem; - - &-logo { - width: 3rem; - } } } diff --git a/src/components/commons/MobileNavigationBar/index.tsx b/src/components/commons/MobileNavigationBar/index.tsx index d5574bc..b7a4107 100644 --- a/src/components/commons/MobileNavigationBar/index.tsx +++ b/src/components/commons/MobileNavigationBar/index.tsx @@ -1,7 +1,8 @@ import { IMAGES } from "@/constants/images"; import { PAGE_PATH } from "@/constants/pagePath"; +import { isMyPage } from "@/utils/pageHelpers"; import classNames from "classnames/bind"; -import { Link, useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import Image from "../Image"; import styles from "./MobileNavigationBar.module.scss"; @@ -9,16 +10,23 @@ const cx = classNames.bind(styles); const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => { const navigate = useNavigate(); + const { pathname } = useLocation(); const { signIn, myPage } = PAGE_PATH; return (
- - - -
+ +
{isAuth ? ( - + isMyPage(pathname) ? ( + + ) : ( + + ) ) : ( )} diff --git a/src/constants/images.ts b/src/constants/images.ts index 55dab30..95e234c 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -36,10 +36,12 @@ import destinationPin from "@/assets/images/destinationPin.svg"; import destinationPinStress from "@/assets/images/destinationPin_stress.svg"; import PetIcon from "@/assets/images/dog.svg"; import Down_arrow from "@/assets/images/down_arrow.svg"; +import grayBackIcon from "@/assets/images/gray_back.svg"; import GrayBookmarkIcon from "@/assets/images/gray_bookmark.svg"; import grayBus from "@/assets/images/gray_bus.svg"; import grayCar from "@/assets/images/gray_car.svg"; import GrayFavoriteIcon from "@/assets/images/gray_favorite.svg"; +import grayHamburgerIcon from "@/assets/images/gray_hamburger.svg"; import GrayKaKaoIcon from "@/assets/images/gray_kakao.svg"; import GrayLinkIcon from "@/assets/images/gray_link.svg"; import grayLocation from "@/assets/images/gray_location.svg"; @@ -460,4 +462,12 @@ export const IMAGES = { src: mypageMenuDelete, alt: "마이페이지 회원 탈퇴 아이콘", }, + grayHamburgerIcon: { + src: grayHamburgerIcon, + alt: "햄버거 메뉴 아이콘", + }, + grayBackIcon: { + src: grayBackIcon, + alt: "뒤로가기 아이콘", + }, }; diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 2ba2500..5ec5d1f 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -10,7 +10,7 @@ import { useRecoilState } from "recoil"; const useAuth = () => { const [auth, setAuth] = useRecoilState(authState); - const location = useLocation(); + const { pathname } = useLocation(); const navigate = useNavigate(); const accessToken = getAccessToken(); @@ -33,12 +33,12 @@ const useAuth = () => { setAuth(userInfo); } - if (accessToken && isSignPage(location.pathname)) { + if (accessToken && isSignPage(pathname)) { navigate("/"); - } else if (!accessToken && (isRegisterPage(location.pathname) || isMyPage(location.pathname))) { + } else if (!accessToken && (isRegisterPage(pathname) || isMyPage(pathname))) { navigate(PAGE_PATH.signIn, { replace: true }); } - }, [accessToken, isSuccess, userInfo, location.pathname, navigate, setAuth]); + }, [accessToken, isSuccess, userInfo, pathname, navigate, setAuth]); return { auth, isLoading }; }; From 34338948d24f80d4557a2ff493a1b0d9b091e59a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 21:08:04 +0900 Subject: [PATCH 10/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EC=A1=B0=EC=9E=91=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20sidebarAtom=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/MobileNavigationBar/index.tsx | 5 ++++- src/recoil/sidebarAtom.ts | 6 ++++++ 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 src/recoil/sidebarAtom.ts diff --git a/src/components/commons/MobileNavigationBar/index.tsx b/src/components/commons/MobileNavigationBar/index.tsx index b7a4107..57f087d 100644 --- a/src/components/commons/MobileNavigationBar/index.tsx +++ b/src/components/commons/MobileNavigationBar/index.tsx @@ -1,8 +1,10 @@ import { IMAGES } from "@/constants/images"; import { PAGE_PATH } from "@/constants/pagePath"; +import { sidebarState } from "@/recoil/sidebarAtom"; import { isMyPage } from "@/utils/pageHelpers"; import classNames from "classnames/bind"; import { useLocation, useNavigate } from "react-router-dom"; +import { useSetRecoilState } from "recoil"; import Image from "../Image"; import styles from "./MobileNavigationBar.module.scss"; @@ -12,6 +14,7 @@ const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => { const navigate = useNavigate(); const { pathname } = useLocation(); const { signIn, myPage } = PAGE_PATH; + const setSidebarState = useSetRecoilState(sidebarState); return (
@@ -21,7 +24,7 @@ const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => {
{isAuth ? ( isMyPage(pathname) ? ( - ) : ( diff --git a/src/recoil/sidebarAtom.ts b/src/recoil/sidebarAtom.ts new file mode 100644 index 0000000..28c049a --- /dev/null +++ b/src/recoil/sidebarAtom.ts @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const sidebarState = atom({ + key: "sidebarState", + default: false, +}); From 3ca2595dcf00a7d5999b7c8157435e080ebce5f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 21 Dec 2024 22:31:49 +0900 Subject: [PATCH 11/12] =?UTF-8?q?Fix:=20=EA=B8=B0=EC=A1=B4=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Modal/Modal.module.scss | 7 ++++++- src/components/commons/Modal/index.tsx | 4 +++- .../domains/myPage/layout/NavBar.module.scss | 1 + .../domains/myPage/layout/UserInfo.module.scss | 1 + .../MyPageLayout/MyPageLayout.module.scss | 17 ++++++++++++----- src/layout/MyPageLayout/index.tsx | 12 ++++++++++++ 6 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/components/commons/Modal/Modal.module.scss b/src/components/commons/Modal/Modal.module.scss index 58fb281..80098d9 100644 --- a/src/components/commons/Modal/Modal.module.scss +++ b/src/components/commons/Modal/Modal.module.scss @@ -1,4 +1,5 @@ .container { + @include flexbox(); position: fixed; left: 0; top: 0; @@ -8,10 +9,14 @@ outline: none; z-index: $modal; animation: fadeIn 0.2s; - @include flexbox(); + &.backdrop { background-color: rgba(0, 0, 0, 0.4); } + + &.sidebar { + @include flexbox(end, start); + } } @keyframes fadeIn { diff --git a/src/components/commons/Modal/index.tsx b/src/components/commons/Modal/index.tsx index ad34a12..464f59d 100644 --- a/src/components/commons/Modal/index.tsx +++ b/src/components/commons/Modal/index.tsx @@ -10,6 +10,7 @@ type ModalProps = { isOpen?: boolean; disableScrollLock?: boolean; hideBackdrop?: boolean; + isSidebar?: boolean; onBackdropClick?: MouseEventHandler; onKeyDown?: KeyboardEventHandler; onConfirmClick?: MouseEventHandler; @@ -19,6 +20,7 @@ const Modal = ({ children, isOpen = false, hideBackdrop = false, + isSidebar = false, onBackdropClick, onKeyDown, onConfirmClick, @@ -76,7 +78,7 @@ const Modal = ({ return (
diff --git a/src/components/domains/myPage/layout/NavBar.module.scss b/src/components/domains/myPage/layout/NavBar.module.scss index cbc948f..b433f76 100644 --- a/src/components/domains/myPage/layout/NavBar.module.scss +++ b/src/components/domains/myPage/layout/NavBar.module.scss @@ -1,4 +1,5 @@ .nav { + background-color: white; padding: 3.6rem 2.3rem 4rem; border: solid 0.1rem $gray20; border-radius: 1rem; diff --git a/src/components/domains/myPage/layout/UserInfo.module.scss b/src/components/domains/myPage/layout/UserInfo.module.scss index cfaa888..6ab1be2 100644 --- a/src/components/domains/myPage/layout/UserInfo.module.scss +++ b/src/components/domains/myPage/layout/UserInfo.module.scss @@ -1,4 +1,5 @@ .user-info { + background-color: white; display: grid; grid-template-columns: auto 1fr; grid-template-areas: diff --git a/src/layout/MyPageLayout/MyPageLayout.module.scss b/src/layout/MyPageLayout/MyPageLayout.module.scss index c96ca66..b4a0000 100644 --- a/src/layout/MyPageLayout/MyPageLayout.module.scss +++ b/src/layout/MyPageLayout/MyPageLayout.module.scss @@ -7,8 +7,9 @@ gap: 2.5rem 12.5rem; @include responsive("T") { - grid-template-columns: 15.5rem auto; - gap: 1.8rem 5.7rem; + display: block; + // grid-template-columns: 15.5rem auto; + // gap: 1.8rem 5.7rem; } &__heading { @@ -17,8 +18,9 @@ padding-left: 1.5rem; @include responsive("T") { - font-size: 2.2rem; - padding-left: 1rem; + display: none; + // font-size: 2.2rem; + // padding-left: 1rem; } &-selectedMenu { @@ -37,7 +39,12 @@ gap: 1.4rem; @include responsive("T") { - gap: 1rem; + display: none; + // gap: 1rem; + } + + &.mobile-view { + display: flex; } } diff --git a/src/layout/MyPageLayout/index.tsx b/src/layout/MyPageLayout/index.tsx index b0fa02b..2e3452b 100644 --- a/src/layout/MyPageLayout/index.tsx +++ b/src/layout/MyPageLayout/index.tsx @@ -1,8 +1,11 @@ import { PropsWithChildren } from "react"; +import Modal from "@/components/commons/Modal"; import NavBar from "@/components/domains/myPage/layout/NavBar"; import UserInfo from "@/components/domains/myPage/layout/UserInfo"; +import { sidebarState } from "@/recoil/sidebarAtom"; import classNames from "classnames/bind"; +import { useRecoilState } from "recoil"; import styles from "./MyPageLayout.module.scss"; const cx = classNames.bind(styles); @@ -12,6 +15,8 @@ interface MyPageLayoutProps { } const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren) => { + const [sidebar, setSidebar] = useRecoilState(sidebarState); + return (

@@ -22,6 +27,13 @@ const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren
{children}
+ + setSidebar((prev) => !prev)} isSidebar={true}> + +

); }; From 847889e6e19a3ac3c538701778fdaac591e49d1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Fri, 27 Dec 2024 08:37:12 +0900 Subject: [PATCH 12/12] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domains/myPage/layout/NavBar.module.scss | 1 + .../domains/myPage/layout/NavBar.tsx | 14 ++++++- .../domains/myPage/layout/Sidebar.module.scss | 40 +++++++++++++++++++ .../domains/myPage/layout/Sidebar.tsx | 29 ++++++++++++++ .../myPage/layout/UserInfo.module.scss | 1 + .../MyPageLayout/MyPageLayout.module.scss | 9 +---- src/layout/MyPageLayout/index.tsx | 25 +++++++----- 7 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 src/components/domains/myPage/layout/Sidebar.module.scss create mode 100644 src/components/domains/myPage/layout/Sidebar.tsx diff --git a/src/components/domains/myPage/layout/NavBar.module.scss b/src/components/domains/myPage/layout/NavBar.module.scss index b433f76..d7976cb 100644 --- a/src/components/domains/myPage/layout/NavBar.module.scss +++ b/src/components/domains/myPage/layout/NavBar.module.scss @@ -6,6 +6,7 @@ @include responsive("T") { padding: 2.6rem 1.7rem 2.8rem; + border: none; } &__list { diff --git a/src/components/domains/myPage/layout/NavBar.tsx b/src/components/domains/myPage/layout/NavBar.tsx index b323fa7..4d72048 100644 --- a/src/components/domains/myPage/layout/NavBar.tsx +++ b/src/components/domains/myPage/layout/NavBar.tsx @@ -1,12 +1,19 @@ import { MYPAGE_MENU_LIST } from "@/constants/mypageMenuList"; import { NavLink } from "react-router-dom"; +import { sidebarState } from "@/recoil/sidebarAtom"; import classNames from "classnames/bind"; +import { useSetRecoilState } from "recoil"; +import { useWindowSize } from "usehooks-ts"; import styles from "./NavBar.module.scss"; const cx = classNames.bind(styles); const NavBar = () => { + const setSidebar = useSetRecoilState(sidebarState); + const { width: windowWidth } = useWindowSize(); + const isMobile = windowWidth < 1200; + return (
    @@ -19,7 +26,12 @@ const NavBar = () => { cx({ "nav__list-item--active": isActive, }) - }> + } + onClick={() => { + if (isMobile) { + setSidebar((prev) => !prev); + } + }}> {name} diff --git a/src/components/domains/myPage/layout/Sidebar.module.scss b/src/components/domains/myPage/layout/Sidebar.module.scss new file mode 100644 index 0000000..50c46d5 --- /dev/null +++ b/src/components/domains/myPage/layout/Sidebar.module.scss @@ -0,0 +1,40 @@ +.sidebar { + @include responsive("T") { + width: 21rem; + height: 100%; + background-color: white; + } + + @include responsive("M") { + width: 16rem; + } + + &__top-bar { + display: none; + + @include responsive("T") { + @include flexbox(end, center); + height: 8rem; + padding-right: 3rem; + } + + @include responsive("M") { + height: 6rem; + padding-right: 2rem; + } + + &--close-btn { + @include responsive("T") { + width: 2.4rem; + height: 2.4rem; + display: block; + cursor: pointer; + } + } + } + + &__menu { + @include column-flexbox(center, stretch); + gap: 1.4rem; + } +} diff --git a/src/components/domains/myPage/layout/Sidebar.tsx b/src/components/domains/myPage/layout/Sidebar.tsx new file mode 100644 index 0000000..b90ff08 --- /dev/null +++ b/src/components/domains/myPage/layout/Sidebar.tsx @@ -0,0 +1,29 @@ +import Image from "@/components/commons/Image"; +import { IMAGES } from "@/constants/images"; +import { sidebarState } from "@/recoil/sidebarAtom"; +import { useSetRecoilState } from "recoil"; +import NavBar from "./NavBar"; +import UserInfo from "./UserInfo"; + +import classNames from "classnames/bind"; +import styles from "./Sidebar.module.scss"; + +const cx = classNames.bind(styles); + +export default function Sidebar() { + const setSidebar = useSetRecoilState(sidebarState); + + return ( +
    +
    + +
    +
    + + +
    +
    + ); +} diff --git a/src/components/domains/myPage/layout/UserInfo.module.scss b/src/components/domains/myPage/layout/UserInfo.module.scss index 6ab1be2..c0954c7 100644 --- a/src/components/domains/myPage/layout/UserInfo.module.scss +++ b/src/components/domains/myPage/layout/UserInfo.module.scss @@ -14,6 +14,7 @@ @include responsive("T") { gap: 1rem 0.5rem; padding: 1.9rem 1.6rem; + border: none; } &__nickname { diff --git a/src/layout/MyPageLayout/MyPageLayout.module.scss b/src/layout/MyPageLayout/MyPageLayout.module.scss index b4a0000..f62e92c 100644 --- a/src/layout/MyPageLayout/MyPageLayout.module.scss +++ b/src/layout/MyPageLayout/MyPageLayout.module.scss @@ -8,8 +8,6 @@ @include responsive("T") { display: block; - // grid-template-columns: 15.5rem auto; - // gap: 1.8rem 5.7rem; } &__heading { @@ -19,8 +17,6 @@ @include responsive("T") { display: none; - // font-size: 2.2rem; - // padding-left: 1rem; } &-selectedMenu { @@ -40,11 +36,10 @@ @include responsive("T") { display: none; - // gap: 1rem; } - &.mobile-view { - display: flex; + &--mobile { + height: 100%; } } diff --git a/src/layout/MyPageLayout/index.tsx b/src/layout/MyPageLayout/index.tsx index 2e3452b..d9019cd 100644 --- a/src/layout/MyPageLayout/index.tsx +++ b/src/layout/MyPageLayout/index.tsx @@ -1,11 +1,12 @@ import { PropsWithChildren } from "react"; import Modal from "@/components/commons/Modal"; -import NavBar from "@/components/domains/myPage/layout/NavBar"; -import UserInfo from "@/components/domains/myPage/layout/UserInfo"; +import Sidebar from "@/components/domains/myPage/layout/Sidebar"; import { sidebarState } from "@/recoil/sidebarAtom"; -import classNames from "classnames/bind"; import { useRecoilState } from "recoil"; + +import classNames from "classnames/bind"; +import { useWindowSize } from "usehooks-ts"; import styles from "./MyPageLayout.module.scss"; const cx = classNames.bind(styles); @@ -16,6 +17,8 @@ interface MyPageLayoutProps { const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren) => { const [sidebar, setSidebar] = useRecoilState(sidebarState); + const { width: windowWidth } = useWindowSize(); + const isMobile = windowWidth < 1200; return (
    @@ -23,17 +26,17 @@ const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren/ {selectedMenu}
    {children}
    - setSidebar((prev) => !prev)} isSidebar={true}> - - + {isMobile && ( + setSidebar((prev) => !prev)} isSidebar={true}> + + + )}
    ); };