From 3ae90a97514bdd711373cb78fb95e30c2bdc498e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 28 Dec 2024 13:53:27 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20pc,=20=ED=83=9C=EB=B8=94=EB=A6=BF=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=20=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyPage/MyPage.module.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss index 173fbbe..5cc42ad 100644 --- a/src/pages/MyPage/MyPage.module.scss +++ b/src/pages/MyPage/MyPage.module.scss @@ -1,11 +1,11 @@ .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; } @@ -25,7 +25,8 @@ } .menus { - @include flexbox(); + display: grid; + grid-template-columns: repeat(3, 1fr); gap: 6rem; @include responsive("T") { From 29f962c1224666c3528f727c54c2966190dea2e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 28 Dec 2024 14:34:19 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Fix:=20MyPageLayout=20=EC=97=90=EC=84=9C=20?= =?UTF-8?q?MyPageSubLayout=EC=9C=BC=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=AA=85=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20/mypage?= =?UTF-8?q?=EC=97=90=EC=84=9C=EB=8F=84=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EB=AA=A8=EB=8B=AC=20=ED=91=9C=EC=B6=9C=20=EB=90=98?= =?UTF-8?q?=EB=8F=84=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 --- .../myPage/layout/SidebarModal.module.scss | 3 ++ .../domains/myPage/layout/SidebarModal.tsx | 27 ++++++++++++ src/layout/MyPageLayout/index.tsx | 43 ------------------- .../MyPageSubLayout.module.scss} | 4 -- src/layout/MyPageSubLayout/index.tsx | 30 +++++++++++++ src/pages/MyPage/MyPageSub.tsx | 2 +- src/pages/MyPage/index.tsx | 3 ++ 7 files changed, 64 insertions(+), 48 deletions(-) create mode 100644 src/components/domains/myPage/layout/SidebarModal.module.scss create mode 100644 src/components/domains/myPage/layout/SidebarModal.tsx delete mode 100644 src/layout/MyPageLayout/index.tsx rename src/layout/{MyPageLayout/MyPageLayout.module.scss => MyPageSubLayout/MyPageSubLayout.module.scss} (94%) create mode 100644 src/layout/MyPageSubLayout/index.tsx diff --git a/src/components/domains/myPage/layout/SidebarModal.module.scss b/src/components/domains/myPage/layout/SidebarModal.module.scss new file mode 100644 index 0000000..7877e48 --- /dev/null +++ b/src/components/domains/myPage/layout/SidebarModal.module.scss @@ -0,0 +1,3 @@ +.sidebar-modal { + height: 100%; +} diff --git a/src/components/domains/myPage/layout/SidebarModal.tsx b/src/components/domains/myPage/layout/SidebarModal.tsx new file mode 100644 index 0000000..72f9f55 --- /dev/null +++ b/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 ( + setSidebar((prev) => !prev)} isSidebar={true}> + + + ); +}; +export default SidebarModal; diff --git a/src/layout/MyPageLayout/index.tsx b/src/layout/MyPageLayout/index.tsx deleted file mode 100644 index d9019cd..0000000 --- a/src/layout/MyPageLayout/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { PropsWithChildren } from "react"; - -import Modal from "@/components/commons/Modal"; -import Sidebar from "@/components/domains/myPage/layout/Sidebar"; -import { sidebarState } from "@/recoil/sidebarAtom"; -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); - -interface MyPageLayoutProps { - selectedMenu: string; -} - -const MyPageLayout = ({ selectedMenu, children }: PropsWithChildren) => { - const [sidebar, setSidebar] = useRecoilState(sidebarState); - const { width: windowWidth } = useWindowSize(); - const isMobile = windowWidth < 1200; - - return ( -
-

- MYPAGE / {selectedMenu} -

- -
{children}
- - {isMobile && ( - setSidebar((prev) => !prev)} isSidebar={true}> - - - )} -
- ); -}; -export default MyPageLayout; diff --git a/src/layout/MyPageLayout/MyPageLayout.module.scss b/src/layout/MyPageSubLayout/MyPageSubLayout.module.scss similarity index 94% rename from src/layout/MyPageLayout/MyPageLayout.module.scss rename to src/layout/MyPageSubLayout/MyPageSubLayout.module.scss index f62e92c..d73f3b1 100644 --- a/src/layout/MyPageLayout/MyPageLayout.module.scss +++ b/src/layout/MyPageSubLayout/MyPageSubLayout.module.scss @@ -37,10 +37,6 @@ @include responsive("T") { display: none; } - - &--mobile { - height: 100%; - } } &__main { diff --git a/src/layout/MyPageSubLayout/index.tsx b/src/layout/MyPageSubLayout/index.tsx new file mode 100644 index 0000000..231aac4 --- /dev/null +++ b/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) => { + return ( +
+

+ MYPAGE / {selectedMenu} +

+ +
{children}
+ + +
+ ); +}; +export default MyPageSubLayout; diff --git a/src/pages/MyPage/MyPageSub.tsx b/src/pages/MyPage/MyPageSub.tsx index f21924c..03f4016 100644 --- a/src/pages/MyPage/MyPageSub.tsx +++ b/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 { diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 584e196..5fd9490 100644 --- a/src/pages/MyPage/index.tsx +++ b/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"; @@ -28,6 +29,8 @@ const MyPage = () => { ))} + + ); }; From 9f28cc3681967f186fbbd9474bebabe37460c196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 28 Dec 2024 14:43:35 +0900 Subject: [PATCH 3/4] =?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=EC=9D=B8=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=97=90=20=ED=98=B8=EB=B2=84=20=ED=9A=A8=EA=B3=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/pages/MyPage/MyPage.module.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss index 5cc42ad..fcef620 100644 --- a/src/pages/MyPage/MyPage.module.scss +++ b/src/pages/MyPage/MyPage.module.scss @@ -46,6 +46,15 @@ padding-top: 1rem; background-color: white; cursor: pointer; + transition: all 0.2s linear; + + &:hover { + background-color: $gray10; + + .menu-img { + transform: scale(1.4); + } + } @include responsive("T") { gap: 1.5rem; @@ -57,6 +66,7 @@ @include flexbox(); width: 8rem; height: 8rem; + transition: all 0.2s linear; @include responsive("T") { width: 5rem; From 3b17906765bd8b9d7f9ac32c53479c772c84a8e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sat, 28 Dec 2024 15:42:25 +0900 Subject: [PATCH 4/4] =?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=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20UI?= =?UTF-8?q?=20=EC=9E=AC=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=8F=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyPage/MyPage.module.scss | 116 ++++++++++++++++++---------- src/pages/MyPage/index.tsx | 8 +- 2 files changed, 80 insertions(+), 44 deletions(-) diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss index fcef620..eb1e7d9 100644 --- a/src/pages/MyPage/MyPage.module.scss +++ b/src/pages/MyPage/MyPage.module.scss @@ -11,7 +11,7 @@ } @include responsive("M") { - gap: 5rem; + gap: 3rem; padding-top: calc(4rem - 4rem); padding-bottom: 10rem; } @@ -35,69 +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; - transition: all 0.2s linear; - - &:hover { - background-color: $gray10; - - .menu-img { - transform: scale(1.4); - } - } @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; + } } } } diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 5fd9490..addf3e6 100644 --- a/src/pages/MyPage/index.tsx +++ b/src/pages/MyPage/index.tsx @@ -15,16 +15,16 @@ const MyPage = () => {

마이페이지

    {MYPAGE_MENU_LIST.map((item) => ( -
  • +
    • ))}