diff --git a/src/components/common/Icon/assets/Auto.tsx b/src/components/common/Icon/assets/Auto.tsx index a857651d..8846d3d2 100644 --- a/src/components/common/Icon/assets/Auto.tsx +++ b/src/components/common/Icon/assets/Auto.tsx @@ -1,8 +1,8 @@ import { SVGProps } from 'react'; const Auto = ({ - width = 20, - height = 20, + width, + height, color, ...props }: SVGProps & { color?: string; className?: string }) => { @@ -15,36 +15,13 @@ const Auto = ({ xmlns='http://www.w3.org/2000/svg' {...props} > - - - - - - - + ); }; diff --git a/src/components/common/Icon/assets/Calendar.tsx b/src/components/common/Icon/assets/Calendar.tsx index 4720ffbe..dacc56e8 100644 --- a/src/components/common/Icon/assets/Calendar.tsx +++ b/src/components/common/Icon/assets/Calendar.tsx @@ -16,72 +16,7 @@ const Calendar = ({ {...props} > - - - - - - - - - ) => { - - - - - - + ); }; diff --git a/src/components/common/Icon/assets/Dashboard.tsx b/src/components/common/Icon/assets/Dashboard.tsx index 102b7513..b0d0598f 100644 --- a/src/components/common/Icon/assets/Dashboard.tsx +++ b/src/components/common/Icon/assets/Dashboard.tsx @@ -1,8 +1,8 @@ import { SVGProps } from 'react'; const Dashboard = ({ - width = 20, - height = 20, + width, + height, color, ...props }: SVGProps) => { @@ -10,13 +10,34 @@ const Dashboard = ({ + + + ) => { + return ( + + + + ); +}; + +export default NavSearch; diff --git a/src/components/common/Icon/assets/index.ts b/src/components/common/Icon/assets/index.ts index 801e2946..8b7c4ce6 100644 --- a/src/components/common/Icon/assets/index.ts +++ b/src/components/common/Icon/assets/index.ts @@ -1,17 +1,22 @@ import ArrowDown from '@/components/common/Icon/assets/ArrowDown'; import ArrowNext from '@/components/common/Icon/assets/ArrowNext'; +import ArrowNextBlock from '@/components/common/Icon/assets/ArrowNextBlock'; import ArrowPrev from '@/components/common/Icon/assets/ArrowPrev'; +import ArrowPrevBlock from '@/components/common/Icon/assets/ArrowPrevBlock'; import Arrowup from '@/components/common/Icon/assets/ArrowUp'; import Auto from '@/components/common/Icon/assets/Auto'; import Calendar from '@/components/common/Icon/assets/Calendar'; import Chart from '@/components/common/Icon/assets/Chart'; +import CheckCircle from '@/components/common/Icon/assets/CheckCircle'; import Danger from '@/components/common/Icon/assets/Danger'; import Dashboard from '@/components/common/Icon/assets/Dashboard'; import Edit from '@/components/common/Icon/assets/Edit'; import Group from '@/components/common/Icon/assets/Group'; import Hide from '@/components/common/Icon/assets/Hide'; import Normal from '@/components/common/Icon/assets/Info'; +import InfoCircle from '@/components/common/Icon/assets/InfoCircle'; import Logout from '@/components/common/Icon/assets/Logout'; +import NavSearch from '@/components/common/Icon/assets/NavSearch'; import Plus from '@/components/common/Icon/assets/Plus'; import Profile from '@/components/common/Icon/assets/Profile'; import Search from '@/components/common/Icon/assets/Search'; @@ -19,13 +24,9 @@ import Show from '@/components/common/Icon/assets/Show'; import Time from '@/components/common/Icon/assets/Time'; import TrendDown from '@/components/common/Icon/assets/TrendDown'; import TrendUp from '@/components/common/Icon/assets/TrendUp'; +import WarnCircle from '@/components/common/Icon/assets/WarnCircle'; import Xmark from '@/components/common/Icon/assets/Xmark'; import { colors } from '@/styles/colors'; -import ArrowNextBlock from './ArrowNextBlock'; -import ArrowPrevBlock from './ArrowPrevBlock'; -import CheckCircle from './CheckCircle'; -import InfoCircle from './InfoCircle'; -import WarnCircle from './WarnCircle'; type IconMapEntry = { type: 'fill' | 'stroke'; @@ -112,6 +113,10 @@ export const iconMap: Record = { type: 'stroke', file: WarnCircle, }, + navSearch: { + type: 'stroke', + file: NavSearch, + }, }; const COLOR_CLASSNAMES: ColorClassNames = { @@ -157,6 +162,8 @@ export const COLORS = { warning: colors.red[500], black: colors.black[100], grey: colors.grey[200], + grey500: colors.grey[500], + green500: colors.green[500], //--- // 기존 아이콘 색상 white: colors.white[100], diff --git a/src/components/common/NavMenu/NavMenu.variant.tsx b/src/components/common/NavMenu/NavMenu.variant.tsx index 9fee31b2..e8a4259c 100644 --- a/src/components/common/NavMenu/NavMenu.variant.tsx +++ b/src/components/common/NavMenu/NavMenu.variant.tsx @@ -1,12 +1,12 @@ import { cva } from 'class-variance-authority'; export const navMenuVariants = cva( - 'flex items-center gap-3 w-full px-4 py-3 text-sm bg-transparent h-11 rounded-full cursor-pointer hover:bg-green-100 active:bg-green-100', + 'flex items-center gap-4 w-full px-6 py-4 bg-transparent h-14 cursor-pointer active:bg-grey-900', { variants: { isActive: { - true: 'bg-green-100 text-green-800 ', - false: 'text-gray-600', + true: 'bg-grey-900 text-green-500', + false: 'text-grey-500', }, }, }, diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx index b0624a82..7d82d51d 100644 --- a/src/components/common/Navbar/index.tsx +++ b/src/components/common/Navbar/index.tsx @@ -1,85 +1,32 @@ 'use client'; -import Image from 'next/image'; -import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { useEffect, useState } from 'react'; -import { destroyTokens } from '@/utils/destroyTokens'; -import Divider from '@/components/common/Divider'; -import Icon from '@/components/common/Icon'; -import NavMenu from '@/components/common/NavMenu'; -import NavProfile from '@/components/common/NavProfile'; -import { BASE_ROUTES, NAV_LINKS } from '@/constants/_navbar'; -import { useAuth } from '@/hooks/useAuth'; -import { useUserStore } from '@/stores/useUserStore'; +import NavbarSection from '@/components/shared/Nav/NavbarSection'; +import { NAV_LINKS } from '@/constants/_navbar'; const Navbar = () => { - const [isMounted, setIsMounted] = useState(false); - - useEffect(() => { - setIsMounted(true); - }, []); - const pathname = usePathname(); - const username = useUserStore((state) => state.username); - const { logout } = useAuth(); - const defaultTab = NAV_LINKS[0].name; const selectedTab = NAV_LINKS.find((nav) => nav.href !== '/' && pathname.startsWith(nav.href)) ?.name ?? defaultTab; - - const handleLogout = () => { - destroyTokens(); - logout(); - }; - const isSurveyPage = /^\/survey\/\d+$/.test(pathname); + const mealLinks = NAV_LINKS.slice(0, 4); + const surveyLinks = NAV_LINKS.slice(4); return ( !isSurveyPage && ( -
- - logo - -
-
- {NAV_LINKS.map(({ name, href, icon }) => ( - - - {name} - - ))} -
-
-
-
- - - - -
+ ) ); diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx index 2d828e50..9d32b5d2 100644 --- a/src/components/common/Typography/index.tsx +++ b/src/components/common/Typography/index.tsx @@ -43,6 +43,21 @@ export const InfoCardTypo = customTypography('span', { color: 'black', }); +export const Label1White = customTypography('span', { + type: 'label1', + color: 'white', +}); + +export const Body2Grey500 = customTypography('span', { + type: 'Body2', + color: 'grey500', +}); + +export const Subtitle2Green500 = customTypography('span', { + type: 'Subtitle2', + color: 'green', +}); + // 리디자인 변경 전 Typography export const HeadPrimary = customTypography('h1', { type: 'heading1', diff --git a/src/components/shared/Nav/NavbarSection/index.tsx b/src/components/shared/Nav/NavbarSection/index.tsx new file mode 100644 index 00000000..7993b374 --- /dev/null +++ b/src/components/shared/Nav/NavbarSection/index.tsx @@ -0,0 +1,51 @@ +import Icon from '@/components/common/Icon'; +import NavMenu from '@/components/common/NavMenu'; +import { + Body2Grey500, + Label1White, + Subtitle2Green500, +} from '@/components/common/Typography'; +import { NAV_LINKS } from '@/constants/_navbar'; + +const ICON_SIZE = 24; + +type Props = { + title: string; + links: typeof NAV_LINKS; + selectedTab: string; +}; + +const NavbarSection = ({ title, links, selectedTab }: Props) => ( + <> + {title} +
+ {links.map(({ name, href, icon }) => ( + + + {selectedTab === name ? ( + + {name} + + ) : ( + + {name} + + )} + + ))} +
+ +); + +export default NavbarSection; diff --git a/src/constants/_navbar.ts b/src/constants/_navbar.ts index cfaa4cdf..cdb6a2e8 100644 --- a/src/constants/_navbar.ts +++ b/src/constants/_navbar.ts @@ -35,18 +35,13 @@ export const NAV_LINKS = [ { name: '식단 조회', href: BASE_ROUTES.VIEW_PLAN, - icon: 'search', + icon: 'navSearch', }, { name: '설문 결과 조회', href: BASE_ROUTES.VIEW_CHART, icon: 'chart', }, - { - name: '마이 페이지', - href: BASE_ROUTES.MY_PAGE, - icon: 'profile', - }, ]; const createRoutes = (baseRoutes: typeof BASE_ROUTES) => ({