From 1f36e4542a41b117487ce4806b6c4cd30316bca4 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sun, 27 Aug 2023 22:14:11 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat(Navbar):=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 14 ++++++++-- .../navbar/components/NavbarMenuItem.tsx | 26 +++++++++++++++++ .../navbar/components/icons/IconHome.tsx | 27 ++++++++++++++++++ .../navbar/components/icons/IconMypage.tsx | 27 ++++++++++++++++++ .../components/icons/IconOrganization.tsx | 27 ++++++++++++++++++ .../components/icons/IconRestaurant.tsx | 27 ++++++++++++++++++ .../navbar/constants/navbarMenuList.tsx | 28 +++++++++++++++++++ src/components/navbar/types/TNavbarMenu.ts | 7 +++++ src/constant/layoutMargin.ts | 2 +- src/constant/navbarHeight.ts | 2 +- 10 files changed, 182 insertions(+), 5 deletions(-) create mode 100644 src/components/navbar/components/NavbarMenuItem.tsx create mode 100644 src/components/navbar/components/icons/IconHome.tsx create mode 100644 src/components/navbar/components/icons/IconMypage.tsx create mode 100644 src/components/navbar/components/icons/IconOrganization.tsx create mode 100644 src/components/navbar/components/icons/IconRestaurant.tsx create mode 100644 src/components/navbar/constants/navbarMenuList.tsx create mode 100644 src/components/navbar/types/TNavbarMenu.ts diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index ebf03ff..bff3a70 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,11 +1,19 @@ import styled from "@emotion/styled"; +import NavbarMenuItem from "components/navbar/components/NavbarMenuItem"; +import { NAVBAR_MENU_LIST } from "components/navbar/constants/navbarMenuList"; import { LAYOUT_MARGIN } from "constant/layoutMargin"; import { NAVBAR_HEIGHT } from "constant/navbarHeight"; -interface Props {} +const Navbar = () => { + return ( + + {NAVBAR_MENU_LIST.map((navbarMenu) => { + const { label, icon, path } = navbarMenu; -const Navbar = ({}: Props) => { - return Navbar; + return ; + })} + + ); }; export default Navbar; diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx new file mode 100644 index 0000000..8450cb0 --- /dev/null +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -0,0 +1,26 @@ +import styled from "@emotion/styled"; +import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; + +const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { + return ( + + {icon} +

{label}

+ + ); +}; + +export default NavbarMenuItem; + +const EmotionWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100px; + padding: 10px auto; + + .menu-item-name { + color: ${({ theme }) => theme.color.gray200}; + } +`; diff --git a/src/components/navbar/components/icons/IconHome.tsx b/src/components/navbar/components/icons/IconHome.tsx new file mode 100644 index 0000000..467916f --- /dev/null +++ b/src/components/navbar/components/icons/IconHome.tsx @@ -0,0 +1,27 @@ +import styled from "@emotion/styled"; + +const IconHome = () => { + return ( + + + + + + ); +}; + +export default IconHome; + +const EmotionWrapper = styled.div``; diff --git a/src/components/navbar/components/icons/IconMypage.tsx b/src/components/navbar/components/icons/IconMypage.tsx new file mode 100644 index 0000000..955250d --- /dev/null +++ b/src/components/navbar/components/icons/IconMypage.tsx @@ -0,0 +1,27 @@ +import styled from "@emotion/styled"; + +const IconMypage = () => { + return ( + + + + + + ); +}; + +export default IconMypage; + +const EmotionWrapper = styled.div``; diff --git a/src/components/navbar/components/icons/IconOrganization.tsx b/src/components/navbar/components/icons/IconOrganization.tsx new file mode 100644 index 0000000..80c2aef --- /dev/null +++ b/src/components/navbar/components/icons/IconOrganization.tsx @@ -0,0 +1,27 @@ +import styled from "@emotion/styled"; + +const IconOrganization = () => { + return ( + + + + + + ); +}; + +export default IconOrganization; + +const EmotionWrapper = styled.div``; diff --git a/src/components/navbar/components/icons/IconRestaurant.tsx b/src/components/navbar/components/icons/IconRestaurant.tsx new file mode 100644 index 0000000..a85f410 --- /dev/null +++ b/src/components/navbar/components/icons/IconRestaurant.tsx @@ -0,0 +1,27 @@ +import styled from "@emotion/styled"; + +const IconRestaurant = () => { + return ( + + + + + + ); +}; + +export default IconRestaurant; + +const EmotionWrapper = styled.div``; diff --git a/src/components/navbar/constants/navbarMenuList.tsx b/src/components/navbar/constants/navbarMenuList.tsx new file mode 100644 index 0000000..0bfe4b0 --- /dev/null +++ b/src/components/navbar/constants/navbarMenuList.tsx @@ -0,0 +1,28 @@ +import IconHome from "components/navbar/components/icons/IconHome"; +import IconMypage from "components/navbar/components/icons/IconMypage"; +import IconOrganization from "components/navbar/components/icons/IconOrganization"; +import IconRestaurant from "components/navbar/components/icons/IconRestaurant"; +import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; + +export const NAVBAR_MENU_LIST: TNavbarMenu[] = [ + { + label: "홈", + icon: , + path: "/", + }, + { + label: "맛집", + icon: , + path: "/restaurants", + }, + { + label: "단체", + icon: , + path: "/organizations", + }, + { + label: "마이", + icon: , + path: "/mypage", + }, +]; diff --git a/src/components/navbar/types/TNavbarMenu.ts b/src/components/navbar/types/TNavbarMenu.ts new file mode 100644 index 0000000..90b8550 --- /dev/null +++ b/src/components/navbar/types/TNavbarMenu.ts @@ -0,0 +1,7 @@ +import { ReactNode } from "react"; + +export type TNavbarMenu = { + path: string; + label: string; + icon: ReactNode; +}; diff --git a/src/constant/layoutMargin.ts b/src/constant/layoutMargin.ts index cccd1ae..b665535 100644 --- a/src/constant/layoutMargin.ts +++ b/src/constant/layoutMargin.ts @@ -1 +1 @@ -export const LAYOUT_MARGIN = "0 40px"; +export const LAYOUT_MARGIN = "0 20px"; diff --git a/src/constant/navbarHeight.ts b/src/constant/navbarHeight.ts index 83bc07a..b97cedb 100644 --- a/src/constant/navbarHeight.ts +++ b/src/constant/navbarHeight.ts @@ -1 +1 @@ -export const NAVBAR_HEIGHT = 60; +export const NAVBAR_HEIGHT = 80; From 992ad02f66d3c18c5759e19e41b87d17a80fd493 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sun, 27 Aug 2023 22:42:34 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat(Navbar):=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EC=8B=A4=EC=A0=9C=20=EB=A7=81=ED=81=AC=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navbar/components/NavbarMenuItem.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index 8450cb0..0ae1938 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -1,9 +1,14 @@ import styled from "@emotion/styled"; import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; +import Link from "next/link"; +import { useRouter } from "next/router"; const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { + const { pathname } = useRouter(); + const active = pathname === path; + return ( - + {icon}

{label}

 @@ -12,15 +17,30 @@ const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { export default NavbarMenuItem; -const EmotionWrapper = styled.div` +const EmotionWrapper = styled(Link)<{ active: boolean }>` display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; + height: 60px; padding: 10px auto; + text-decoration: none; // TODO: globalStyles 에서 resetAnchorStyle 머지 후 제거 + color: ${({ theme, active }) => (active ? theme.color.gray700 : theme.color.gray200)}; + stroke: ${({ theme, active }) => (active ? theme.color.gray700 : theme.color.gray200)}; + + &:hover { + color: ${({ theme }) => theme.color.gray500}; + stroke: ${({ theme }) => theme.color.gray500}; + } + + transition: + color 0.2s ease-in-out, + stroke 0.2s ease-in-out; - .menu-item-name { - color: ${({ theme }) => theme.color.gray200}; + svg { + path { + stroke: inherit; + } } `; From 297bd5ce9f0e48558b12595947c28169f1931234 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sat, 16 Sep 2023 15:26:25 +0900 Subject: [PATCH 3/9] =?UTF-8?q?fix(Navbar):=20=ED=8A=B9=EC=A0=95=20?= =?UTF-8?q?=ED=95=98=EC=9C=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=EB=8F=84=20navbar=20=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=EC=9D=B4=20active=20=ED=95=98=EA=B2=8C=20=EB=90=A0=20=EC=88=98?= =?UTF-8?q?=20=EC=9E=88=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/components/NavbarMenuItem.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index 0ae1938..709cb07 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -5,7 +5,14 @@ import { useRouter } from "next/router"; const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { const { pathname } = useRouter(); - const active = pathname === path; + + // 메인페이지는 항상 "/" 로 시작하기에 필요한 예외처리 + // 더 좋은 로직이 있다면 교체 바람. + const isMainPage = pathname === "/"; + const isMainPageActive = isMainPage && path === "/"; + const isOtherPagesActive = path !== "/" && pathname.startsWith(path); + + const active = isMainPage ? isMainPageActive : isOtherPagesActive; return ( From 6b363f6a821d3aaa88f827d37dc4e2daa5adfe7d Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sat, 16 Sep 2023 15:51:33 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat(Navbar):=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=EC=97=90=EC=84=9C=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=ED=95=A0=20=EB=95=8C=EB=A7=88=EB=8B=A4=20?= =?UTF-8?q?=EC=9B=80=EC=A7=81=EC=9D=B4=EB=8A=94=20=EC=83=81=EB=8B=A8?= =?UTF-8?q?=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 42 +++++++++++++++---- .../navbar/components/NavbarMenuItem.tsx | 20 +++++++-- .../components/NavbarSliderIndicator.tsx | 25 +++++++++++ .../navbar/constants/navbarMenuList.tsx | 4 ++ src/components/navbar/types/TNavbarMenu.ts | 1 + 5 files changed, 79 insertions(+), 13 deletions(-) create mode 100644 src/components/navbar/components/NavbarSliderIndicator.tsx diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index bff3a70..c931817 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,17 +1,38 @@ import styled from "@emotion/styled"; import NavbarMenuItem from "components/navbar/components/NavbarMenuItem"; +import NavbarSliderIndicator from "components/navbar/components/NavbarSliderIndicator"; import { NAVBAR_MENU_LIST } from "components/navbar/constants/navbarMenuList"; +import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; import { LAYOUT_MARGIN } from "constant/layoutMargin"; import { NAVBAR_HEIGHT } from "constant/navbarHeight"; +import { useState } from "react"; const Navbar = () => { + const [activeMenuIndex, setActiveMenuIndex] = useState(0); + + const handleClickNavbarMenuItem = (menuIndex: TNavbarMenu["menuIndex"]) => { + setActiveMenuIndex(menuIndex); + }; + return ( - {NAVBAR_MENU_LIST.map((navbarMenu) => { - const { label, icon, path } = navbarMenu; + ); }; @@ -22,13 +43,16 @@ const EmotionWrapper = styled.div` position: fixed; bottom: 0; left: 0; - - display: flex; - justify-content: center; - align-items: center; - background-color: ${({ theme }) => theme.color.gray100}; width: 100%; + background-color: ${({ theme }) => theme.color.gray100}; height: ${NAVBAR_HEIGHT}px; padding: ${LAYOUT_MARGIN}; padding-bottom: 20px; // iOS 하단바 대응 + display: flex; + justify-content: center; + + nav { + position: relative; + display: flex; + } `; diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index 709cb07..4309473 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -1,9 +1,15 @@ -import styled from "@emotion/styled"; -import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; import Link from "next/link"; +import styled from "@emotion/styled"; import { useRouter } from "next/router"; +import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; + +type NavbarMenuItemComponentProps = { + onClick: (menuIndex: TNavbarMenu["menuIndex"]) => void; +}; + +type Props = NavbarMenuItemComponentProps & TNavbarMenu; -const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { +const NavbarMenuItem = ({ path, label, icon, menuIndex, onClick }: Props) => { const { pathname } = useRouter(); // 메인페이지는 항상 "/" 로 시작하기에 필요한 예외처리 @@ -15,7 +21,13 @@ const NavbarMenuItem = ({ path, label, icon }: TNavbarMenu) => { const active = isMainPage ? isMainPageActive : isOtherPagesActive; return ( - + { + onClick(menuIndex); + }} + > {icon}

{label}

 diff --git a/src/components/navbar/components/NavbarSliderIndicator.tsx b/src/components/navbar/components/NavbarSliderIndicator.tsx new file mode 100644 index 0000000..341fca0 --- /dev/null +++ b/src/components/navbar/components/NavbarSliderIndicator.tsx @@ -0,0 +1,25 @@ +import styled from "@emotion/styled"; + +interface Props { + activeMenuIndex: number; +} + +const NavbarSliderIndicator = ({ activeMenuIndex }: Props) => { + return ; +}; + +export default NavbarSliderIndicator; + +const EmotionWrapper = styled.div` + position: absolute; + + top: 0; + left: ${({ activeMenuIndex }) => activeMenuIndex * 100}px; + + transition: left 0.2s ease-in-out; + + width: 100px; + height: 4px; + background-color: ${({ theme }) => theme.color.primary500}; + border-radius: 0 0 6px 6px; +`; diff --git a/src/components/navbar/constants/navbarMenuList.tsx b/src/components/navbar/constants/navbarMenuList.tsx index 0bfe4b0..9072d10 100644 --- a/src/components/navbar/constants/navbarMenuList.tsx +++ b/src/components/navbar/constants/navbarMenuList.tsx @@ -6,21 +6,25 @@ import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; export const NAVBAR_MENU_LIST: TNavbarMenu[] = [ { + menuIndex: 0, label: "홈", icon: , path: "/", }, { + menuIndex: 1, label: "맛집", icon: , path: "/restaurants", }, { + menuIndex: 2, label: "단체", icon: , path: "/organizations", }, { + menuIndex: 3, label: "마이", icon: , path: "/mypage", diff --git a/src/components/navbar/types/TNavbarMenu.ts b/src/components/navbar/types/TNavbarMenu.ts index 90b8550..28f5121 100644 --- a/src/components/navbar/types/TNavbarMenu.ts +++ b/src/components/navbar/types/TNavbarMenu.ts @@ -1,6 +1,7 @@ import { ReactNode } from "react"; export type TNavbarMenu = { + menuIndex: number; path: string; label: string; icon: ReactNode; From f07cab3d7c85f33d7146f964e6db2bcce13e66e8 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sat, 16 Sep 2023 15:54:16 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix(Navbar):=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=B0=94=2070px=20=EB=A1=9C=20=ED=95=98?= =?UTF-8?q?=ED=96=A5=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 2 +- src/constant/navbarHeight.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index c931817..207972b 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -47,7 +47,7 @@ const EmotionWrapper = styled.div` background-color: ${({ theme }) => theme.color.gray100}; height: ${NAVBAR_HEIGHT}px; padding: ${LAYOUT_MARGIN}; - padding-bottom: 20px; // iOS 하단바 대응 + padding-bottom: 0px; // iOS 하단바 대응 display: flex; justify-content: center; diff --git a/src/constant/navbarHeight.ts b/src/constant/navbarHeight.ts index b97cedb..005162b 100644 --- a/src/constant/navbarHeight.ts +++ b/src/constant/navbarHeight.ts @@ -1 +1 @@ -export const NAVBAR_HEIGHT = 80; +export const NAVBAR_HEIGHT = 70; From d39a11406958476368a7e25bfa5e28c019345fe2 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Sat, 16 Sep 2023 16:06:17 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix(Navbar):=20=EC=83=81=EB=8B=A8=EC=97=90?= =?UTF-8?q?=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94=20=EC=9D=B8=EB=94=94?= =?UTF-8?q?=EC=BC=80=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=8C=80?= =?UTF-8?q?=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/components/NavbarMenuItem.tsx | 6 +++++- .../navbar/components/NavbarSliderIndicator.tsx | 12 ++++++++---- src/styles/theme.ts | 2 ++ src/types/emotion.d.ts | 2 ++ 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index 4309473..e4730b9 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -41,13 +41,17 @@ const EmotionWrapper = styled(Link)<{ active: boolean }>` flex-direction: column; align-items: center; justify-content: center; - width: 100px; + width: 80px; height: 60px; padding: 10px auto; text-decoration: none; // TODO: globalStyles 에서 resetAnchorStyle 머지 후 제거 color: ${({ theme, active }) => (active ? theme.color.gray700 : theme.color.gray200)}; stroke: ${({ theme, active }) => (active ? theme.color.gray700 : theme.color.gray200)}; + ${({ theme }) => theme.device.fold} { + width: 60px; + } + &:hover { color: ${({ theme }) => theme.color.gray500}; stroke: ${({ theme }) => theme.color.gray500}; diff --git a/src/components/navbar/components/NavbarSliderIndicator.tsx b/src/components/navbar/components/NavbarSliderIndicator.tsx index 341fca0..187f9dc 100644 --- a/src/components/navbar/components/NavbarSliderIndicator.tsx +++ b/src/components/navbar/components/NavbarSliderIndicator.tsx @@ -13,12 +13,16 @@ export default NavbarSliderIndicator; const EmotionWrapper = styled.div` position: absolute; - top: 0; - left: ${({ activeMenuIndex }) => activeMenuIndex * 100}px; - transition: left 0.2s ease-in-out; - width: 100px; + top: 0; + width: 80px; + left: ${({ activeMenuIndex }) => activeMenuIndex * 80}px; + + ${({ theme }) => theme.device.fold} { + width: 60px; + left: ${({ activeMenuIndex }) => activeMenuIndex * 60}px; + } height: 4px; background-color: ${({ theme }) => theme.color.primary500}; border-radius: 0 0 6px 6px; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 1f50a29..c92c323 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,11 +1,13 @@ import { DeviceMediaTheme, DeviceTheme, Theme } from "@emotion/react"; const size: DeviceTheme = { + fold: 350, // 갤럭시 폴드 최하 280px ~ 350px 소형 스마트폰 대응 mobile: 768 + 80, }; // 미디어 쿼리의 중복 코드를 줄이기위해 정의된 변수입니다 const device: DeviceMediaTheme = { + fold: `@media only screen and (max-width: ${size.fold}px)`, mobile: `@media only screen and (max-width: ${size.mobile}px)`, pc: `@media only screen and (min-width: ${size.mobile}px)`, }; diff --git a/src/types/emotion.d.ts b/src/types/emotion.d.ts index 0137c69..27e26bc 100644 --- a/src/types/emotion.d.ts +++ b/src/types/emotion.d.ts @@ -2,9 +2,11 @@ import "@emotion/react"; declare module "@emotion/react" { export interface DeviceTheme { + fold: number; mobile: number; } export interface DeviceMediaTheme { + fold: string; mobile: string; pc: string; } From 0247fedc6adf692fb73248cbffa8dec9da6f0111 Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Tue, 19 Sep 2023 21:15:51 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refactor(Navbar):=20active=20=EB=B9=84?= =?UTF-8?q?=EA=B5=90=20=EB=A1=9C=EC=A7=81=20=EB=AA=A8=EB=93=88=ED=95=A8?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navbar/components/NavbarMenuItem.tsx | 12 +++++------ .../navbar/functions/isNavbarMenuActive.ts | 21 +++++++++++++++++++ 2 files changed, 26 insertions(+), 7 deletions(-) create mode 100644 src/components/navbar/functions/isNavbarMenuActive.ts diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index e4730b9..41adf58 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; +import { isNavbarMenuActive } from "components/navbar/functions/isNavbarMenuActive"; type NavbarMenuItemComponentProps = { onClick: (menuIndex: TNavbarMenu["menuIndex"]) => void; @@ -12,13 +13,10 @@ type Props = NavbarMenuItemComponentProps & TNavbarMenu; const NavbarMenuItem = ({ path, label, icon, menuIndex, onClick }: Props) => { const { pathname } = useRouter(); - // 메인페이지는 항상 "/" 로 시작하기에 필요한 예외처리 - // 더 좋은 로직이 있다면 교체 바람. - const isMainPage = pathname === "/"; - const isMainPageActive = isMainPage && path === "/"; - const isOtherPagesActive = path !== "/" && pathname.startsWith(path); - - const active = isMainPage ? isMainPageActive : isOtherPagesActive; + const active = isNavbarMenuActive({ + currentPathname: pathname, + navbarPathname: path, + }); return ( { + // 현재 보여지고 있는 페이지의 pathname 과 navbar 의 각 메뉴의 pathname 이 일치하면 true 를 반환합니다. + + // 메인페이지는 항상 "/" 로 시작하기에 필요한 예외처리 + // 더 좋은 로직이 있다면 교체 바람. + const isMainPage = currentPathname === "/"; + const isMainPageActive = isMainPage && navbarPathname === "/"; + const isOtherPagesActive = navbarPathname !== "/" && currentPathname.startsWith(navbarPathname); + + const active = isMainPage ? isMainPageActive : isOtherPagesActive; + + return active; +}; From dd25c87b84f78c4b6f39a392a634d76bd4464b1b Mon Sep 17 00:00:00 2001 From: jaychang99 Date: Tue, 19 Sep 2023 21:16:23 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat(Navbar):=20next/link=20=EB=A5=BC=20?= =?UTF-8?q?=ED=86=B5=ED=95=9C=20pathname=20=EB=B3=80=ED=99=94=EC=97=90?= =?UTF-8?q?=EB=8F=84=20Navbar=20=EB=B0=98=EC=9D=91=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/components/NavbarMenuItem.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/navbar/components/NavbarMenuItem.tsx b/src/components/navbar/components/NavbarMenuItem.tsx index 41adf58..9ad8866 100644 --- a/src/components/navbar/components/NavbarMenuItem.tsx +++ b/src/components/navbar/components/NavbarMenuItem.tsx @@ -3,6 +3,7 @@ import styled from "@emotion/styled"; import { useRouter } from "next/router"; import { TNavbarMenu } from "components/navbar/types/TNavbarMenu"; import { isNavbarMenuActive } from "components/navbar/functions/isNavbarMenuActive"; +import { useEffect } from "react"; type NavbarMenuItemComponentProps = { onClick: (menuIndex: TNavbarMenu["menuIndex"]) => void; @@ -18,6 +19,10 @@ const NavbarMenuItem = ({ path, label, icon, menuIndex, onClick }: Props) => { navbarPathname: path, }); + useEffect(() => { + if (active) onClick(menuIndex); + }, [active, onClick, menuIndex, pathname]); + return ( Date: Tue, 19 Sep 2023 21:19:25 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix(Navbar):=20=EC=B4=88=EA=B8=B0=ED=99=94?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EC=9D=80=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EC=9D=98=20slider=20=EC=9D=80=20=EB=B3=B4=EC=97=AC=EC=A3=BC?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=A1=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/navbar/Navbar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 207972b..351629e 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -8,7 +8,8 @@ import { NAVBAR_HEIGHT } from "constant/navbarHeight"; import { useState } from "react"; const Navbar = () => { - const [activeMenuIndex, setActiveMenuIndex] = useState(0); + const [activeMenuIndex, setActiveMenuIndex] = useState(-1); + const hasNavbarMenuInitialized = activeMenuIndex > -1; // 직접 메인 페이지 이외 접근 시 슬라이더가 홈에 왔다가 가는 것을 방지 const handleClickNavbarMenuItem = (menuIndex: TNavbarMenu["menuIndex"]) => { setActiveMenuIndex(menuIndex); @@ -17,7 +18,7 @@ const Navbar = () => { return (