Feat: 마이페이지 레이아웃 구현

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;
-    }
   }
 }

src/components/commons/MobileNavigationBar/index.tsx

@@ -1,24 +1,38 @@
 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 { Link, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useSetRecoilState } from "recoil";
 import Image from "../Image";
 import styles from "./MobileNavigationBar.module.scss";
 
 const cx = classNames.bind(styles);
 
 const MobileNavigationBar = ({ isAuth }: { isAuth: boolean | null }) => {
   const navigate = useNavigate();
-  const { signIn } = PAGE_PATH;
+  const { pathname } = useLocation();
+  const { signIn, myPage } = PAGE_PATH;
+  const setSidebarState = useSetRecoilState(sidebarState);
 
   return (
     <div className={cx("nav")}>
-      <Link className={cx("nav-logo")} to={PAGE_PATH.home}>
-        <Image imageInfo={IMAGES.courseMakerLogoMobile} />
-      </Link>
-      <div className={cx("nav-btn")}>
-        {/* {isAuth ? <button>마이페이지</button> : <button onClick={() => navigate(signIn)}>로그인</button>} */}
-        {!isAuth && <button onClick={() => navigate(signIn)}>로그인</button>}
+      <button className={cx("nav__back")} onClick={() => navigate(-1)}>
+        <Image imageInfo={IMAGES.grayBackIcon} />
+      </button>
+      <div className={cx("nav__btn")}>
+        {isAuth ? (
+          isMyPage(pathname) ? (
+            <button onClick={() => setSidebarState((prev) => !prev)}>
+              <Image imageInfo={IMAGES.grayHamburgerIcon} />
+            </button>
+          ) : (
+            <button onClick={() => navigate(myPage)}>마이페이지</button>
+          )
+        ) : (
+          <button onClick={() => navigate(signIn)}>로그인</button>
+        )}
       </div>
     </div>
   );

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 {

src/components/commons/Modal/index.tsx

@@ -10,6 +10,7 @@ type ModalProps = {
   isOpen?: boolean;
   disableScrollLock?: boolean;
   hideBackdrop?: boolean;
+  isSidebar?: boolean;
   onBackdropClick?: MouseEventHandler<HTMLDivElement>;
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
   onConfirmClick?: MouseEventHandler<HTMLButtonElement>;
@@ -19,6 +20,7 @@ const Modal = ({
   children,
   isOpen = false,
   hideBackdrop = false,
+  isSidebar = false,
   onBackdropClick,
   onKeyDown,
   onConfirmClick,
@@ -76,7 +78,7 @@ const Modal = ({
   return (
     <Portal>
       <div
-        className={cx("container", { backdrop: !hideBackdrop })}
+        className={cx("container", { backdrop: !hideBackdrop }, { sidebar: isSidebar })}
         onClick={handleBackdropClick}
         onKeyDown={handleKeyDown}
         tabIndex={0}>

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<HTMLDivElement>) => {
     if (e.key === "Escape") {
@@ -28,9 +28,9 @@ const RightButtons = ({ isAuth }: { isAuth: boolean | null }) => {
     <>
       {isAuth ? (
         <div className={cx("container")}>
-          {/* <Button color="blue" variant="primary" size="small" onClick={() => navigate(myPage)}>
+          <Button color="blue" variant="primary" size="small" onClick={() => navigate(myPage)}>
             마이페이지
-          </Button> */}
+          </Button>
           <Button color="blue" variant="secondary" size="small" onClick={() => logout()}>
             로그아웃
           </Button>

src/components/domains/myPage/contents/Delete/index.tsx

@@ -0,0 +1,8 @@
+const Delete = () => {
+  return (
+    <>
+      <h1>Delete Component</h1>
+    </>
+  );
+};
+export default Delete;

src/components/domains/myPage/contents/Level/index.tsx

@@ -0,0 +1,8 @@
+const Level = () => {
+  return (
+    <>
+      <h1>Level Component</h1>
+    </>
+  );
+};
+export default Level;

src/components/domains/myPage/contents/Likes/index.tsx

@@ -0,0 +1,8 @@
+const Likes = () => {
+  return (
+    <>
+      <h1>Likes Component</h1>
+    </>
+  );
+};
+export default Likes;

src/components/domains/myPage/contents/Reviews/index.tsx

@@ -0,0 +1,8 @@
+const Reviews = () => {
+  return (
+    <>
+      <h1>Reviews Component</h1>
+    </>
+  );
+};
+export default Reviews;

src/components/domains/myPage/contents/Trips/index.tsx

@@ -0,0 +1,8 @@
+const Trips = () => {
+  return (
+    <>
+      <h1>Trips Component</h1>
+    </>
+  );
+};
+export default Trips;

src/components/domains/myPage/contents/UpdateUserInfo/index.tsx

@@ -0,0 +1,8 @@
+const UpdateUserInfo = () => {
+  return (
+    <>
+      <h1>UpdateUserInfo Component</h1>
+    </>
+  );
+};
+export default UpdateUserInfo;

src/components/domains/myPage/layout/NavBar.module.scss

@@ -0,0 +1,32 @@
+.nav {
+  background-color: white;
+  padding: 3.6rem 2.3rem 4rem;
+  border: solid 0.1rem $gray20;
+  border-radius: 1rem;
+
+  @include responsive("T") {
+    padding: 2.6rem 1.7rem 2.8rem;
+    border: none;
+  }
+
+  &__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;
+      }
+    }
+  }
+}

src/components/domains/myPage/layout/NavBar.tsx

@@ -0,0 +1,44 @@
+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 (
+    <section className={cx("nav")}>
+      <ul className={cx("nav__list")}>
+        {MYPAGE_MENU_LIST.map(({ id, name, navigate }) => {
+          return (
+            <li key={id} className={cx("nav__list-item")}>
+              <NavLink
+                to={navigate}
+                className={({ isActive }) =>
+                  cx({
+                    "nav__list-item--active": isActive,
+                  })
+                }
+                onClick={() => {
+                  if (isMobile) {
+                    setSidebar((prev) => !prev);
+                  }
+                }}>
+                {name}
+              </NavLink>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+export default NavBar;

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;
+  }
+}

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 (
+    <div className={cx("sidebar")}>
+      <div className={cx("sidebar__top-bar")}>
+        <button className={cx("sidebar__top-bar--close-btn")} onClick={() => setSidebar((prev) => !prev)}>
+          <Image imageInfo={IMAGES.modalClose} />
+        </button>
+      </div>
+      <div className={cx("sidebar__menu")}>
+        <UserInfo />
+        <NavBar />
+      </div>
+    </div>
+  );
+}