마이페이지 메인 페이지 구현

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

@@ -0,0 +1,3 @@
+.sidebar-modal {
+  height: 100%;
+}

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

@@ -0,0 +1,27 @@
+import Modal from "@/components/commons/Modal";
+import { sidebarState } from "@/recoil/sidebarAtom";
+import { useRecoilState } from "recoil";
+import { useWindowSize } from "usehooks-ts";
+import Sidebar from "./Sidebar";
+
+import classNames from "classnames/bind";
+import styles from "./SidebarModal.module.scss";
+
+const cx = classNames.bind(styles);
+
+const SidebarModal = () => {
+  const [sidebar, setSidebar] = useRecoilState(sidebarState);
+  const { width: windowWidth } = useWindowSize();
+  const isMobile = windowWidth < 1200;
+
+  if (!isMobile) return null;
+
+  return (
+    <Modal isOpen={sidebar} onBackdropClick={() => setSidebar((prev) => !prev)} isSidebar={true}>
+      <aside className={cx("sidebar-modal")}>
+        <Sidebar />
+      </aside>
+    </Modal>
+  );
+};
+export default SidebarModal;

src/layout/MyPageLayout/MyPageLayout.module.scss → src/layout/MyPageSubLayout/MyPageSubLayout.module.scss

@@ -37,10 +37,6 @@
     @include responsive("T") {
       display: none;
     }
-
-    &--mobile {
-      height: 100%;
-    }
   }
 
   &__main {

src/layout/MyPageSubLayout/index.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+
+import Sidebar from "@/components/domains/myPage/layout/Sidebar";
+
+import SidebarModal from "@/components/domains/myPage/layout/SidebarModal";
+import classNames from "classnames/bind";
+import styles from "./MyPageSubLayout.module.scss";
+
+const cx = classNames.bind(styles);
+
+interface MyPageSubLayoutProps {
+  selectedMenu: string;
+}
+
+const MyPageSubLayout = ({ selectedMenu, children }: PropsWithChildren<MyPageSubLayoutProps>) => {
+  return (
+    <div className={cx("my-page-layout")}>
+      <h1 className={cx("my-page-layout__heading")}>
+        MYPAGE <span className={cx("my-page-layout__heading-selectedMenu")}>/ {selectedMenu}</span>
+      </h1>
+      <aside className={cx("my-page-layout__sidebar")}>
+        <Sidebar />
+      </aside>
+      <main className={cx("my-page-layout__main")}>{children}</main>
+
+      <SidebarModal />
+    </div>
+  );
+};
+export default MyPageSubLayout;

src/pages/MyPage/MyPage.module.scss

@@ -1,17 +1,17 @@
 .container {
   @include column-flexbox();
-  gap: 11rem;
+  gap: 8rem;
   padding-top: calc(15rem - 4rem);
   padding-bottom: 20rem;
 
   @include responsive("T") {
-    gap: 8rem;
+    gap: 4.4rem;
     padding-top: calc(8rem - 4rem);
     padding-bottom: 15rem;
   }
 
   @include responsive("M") {
-    gap: 5rem;
+    gap: 3rem;
     padding-top: calc(4rem - 4rem);
     padding-bottom: 10rem;
   }
@@ -25,7 +25,8 @@
   }
 
   .menus {
-    @include flexbox();
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
     gap: 6rem;
 
     @include responsive("T") {
@@ -34,59 +35,105 @@
 
     @include responsive("M") {
       @include column-flexbox();
+      gap: 3rem;
     }
 
     .menu {
-      @include column-flexbox();
-      gap: 4.5rem;
-      border: 0.1rem solid $gray20;
       width: 25rem;
       height: 25rem;
-      padding-top: 1rem;
-      background-color: white;
-      cursor: pointer;
 
       @include responsive("T") {
-        gap: 1.5rem;
         width: 14rem;
         height: 14rem;
       }
 
-      &-img {
-        @include flexbox();
-        width: 8rem;
-        height: 8rem;
+      @include responsive("M") {
+        width: 100%;
+        height: 3rem;
+      }
+
+      &-btn {
+        @include column-flexbox();
+        gap: 4.5rem;
+        width: 100%;
+        height: 100%;
+        border: 0.1rem solid $gray20;
+        padding-top: 1rem;
+        background-color: white;
+        cursor: pointer;
+        transition: all 0.2s linear;
+
+        &:hover {
+          @media (hover: hover) and (pointer: fine) {
+            background-color: $gray10;
+
+            .menu-btn-img {
+              transform: scale(1.4);
+            }
+          }
+        }
 
         @include responsive("T") {
-          width: 5rem;
-          height: 5rem;
+          gap: 1.5rem;
         }
-      }
 
-      &-name {
-        @include text-style(2.4, 500, $black30);
+        @include responsive("M") {
+          flex-direction: row;
+          justify-content: flex-start;
+          padding-top: 0;
+          border: none;
+          &:hover {
+            background-color: transparent;
+          }
+        }
 
-        @include responsive("T") {
-          font-size: 1.6rem;
+        &-img {
+          @include flexbox();
+          width: 8rem;
+          height: 8rem;
+          transition: all 0.2s linear;
+
+          @include responsive("T") {
+            width: 5rem;
+            height: 5rem;
+          }
+
+          @include responsive("M") {
+            width: 3rem;
+            height: 3rem;
+          }
         }
-      }
-    }
 
-    li:nth-child(2) {
-      gap: 3rem;
-      padding-top: 0;
+        &-name {
+          @include text-style(2.4, 500, $black30);
 
-      @include responsive("T") {
-        gap: 0.5rem;
+          @include responsive("T") {
+            font-size: 1.6rem;
+          }
+        }
       }
 
-      .menu-img {
-        width: 11rem;
-        height: 11rem;
+      li:nth-child(2) {
+        gap: 3rem;
+        padding-top: 0;
 
         @include responsive("T") {
-          width: 7rem;
-          height: 7rem;
+          gap: 0.5rem;
+        }
+
+        .menu-img {
+          width: 11rem;
+          height: 11rem;
+
+          @include responsive("T") {
+            width: 7rem;
+            height: 7rem;
+          }
+
+          @include responsive("M") {
+            width: 3rem;
+            height: 3rem;
+          }
         }
       }
     }

src/pages/MyPage/MyPageSub.tsx

@@ -1,4 +1,4 @@
-import MyPageLayout from "@/layout/MyPageLayout";
+import MyPageLayout from "@/layout/MyPageSubLayout";
 import { ReactNode } from "react";
 
 interface MyPageSubProps {

src/pages/MyPage/index.tsx

@@ -1,4 +1,5 @@
 import Image from "@/components/commons/Image";
+import SidebarModal from "@/components/domains/myPage/layout/SidebarModal";
 import { MYPAGE_MENU_LIST } from "@/constants/mypageMenuList";
 import classNames from "classnames/bind";
 import { useNavigate } from "react-router-dom";
@@ -14,20 +15,22 @@ const MyPage = () => {
       <h1 className={cx("title")}>마이페이지</h1>
       <ul className={cx("menus")}>
         {MYPAGE_MENU_LIST.map((item) => (
-          <li key={item.id}>
+          <li key={item.id} className={cx("menu")}>
             <button
-              className={cx("menu")}
+              className={cx("menu-btn")}
               onClick={() => {
                 navigate(item.navigate);
               }}>
-              <div className={cx("menu-img")}>
+              <div className={cx("menu-btn-img")}>
                 <Image imageInfo={item.icon} />
               </div>
-              <span className={cx("menu-name")}>{item.name}</span>
+              <span className={cx("menu-btn-name")}>{item.name}</span>
             </button>
           </li>
         ))}
       </ul>
+
+      <SidebarModal />
     </div>
   );
 };