refactor: 홈 관리 네비게이션에 랜딩페이지로 이동하는 기능 추가 및 TopNav 구조 개선 (#627)

* style: 불필요한 directory 구조 한 단계 제거 (Common)

* style: 행동디자인에서 Switch 바깥으로 분리

* refactor: TopNav 자유롭게 사용할 수 있도록 변경

* style: 디렉토리 구조 변하면서 생긴 import 수정

* style: 사용하지 않는 import 문 제거

* design: TextButton color onTertiary 추가

* remove: 사용하지 않게된 Switch 제거

* remove: 사용하지 않는 Back 컴포넌트 제거

* feat: 흔듯콘 아이콘 추가

* refactor: TopNav, NavElement를 사용해 navigate 책임 이동

* refactor: 변경된 TopNav 적용

* style: 콘솔 경고창 에러를 방지하기 위해 변경

* feat: noEmphasis prop 추가 (true일 때 강조되지 않음)

* design: 마진 맞춰줌

* remove: navigate 기능이 들어오면서 스토리북에서 변경되는 것을 보여줄 수 없어서 스토리북에서 제거

* style: emotion css를 위한 추가

* style: NavElement -> NavItem으로 이름 변경

* Merge branch 'fe-dev' into feature/#614

---------

Co-authored-by: Soyeon Choe <[email protected]>

client/src/components/Design/components/Icon/Icon.style.ts

@@ -19,6 +19,7 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   toss: 'white',
   meatballs: 'black',
   editPencil: 'gray',
+  heundeut: 'gray',
 };
 
 export const iconStyle = ({iconType, theme, iconColor}: IconStylePropsWithTheme) => {

client/src/components/Design/components/Icon/Icon.tsx

@@ -14,6 +14,7 @@ import X from '@assets/image/x.svg';
 import PencilMini from '@assets/image/pencil_mini.svg';
 import Meatballs from '@assets/image/meatballs.svg';
 import EditPencil from '@assets/image/editPencil.svg';
+import Heundeut from '@assets/image/heundeut.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
 
@@ -34,6 +35,7 @@ const ICON = {
   toss: <img src={Toss} width="16" height="16" alt="toss icon" />,
   meatballs: <Meatballs />,
   editPencil: <EditPencil />,
+  heundeut: <Heundeut />,
 };
 
 export const Icon: React.FC<IconProps> = ({iconColor, iconType, ...htmlProps}: IconProps) => {

client/src/components/Design/components/Icon/Icon.type.ts

@@ -15,7 +15,8 @@ export type IconType =
   | 'pencilMini'
   | 'toss'
   | 'meatballs'
-  | 'editPencil';
+  | 'editPencil'
+  | 'heundeut';
 
 export type IconColor = ColorKeys;
 

client/src/components/Design/components/TextButton/TextButton.tsx

@@ -1,8 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import {forwardRef} from 'react';
 
-import {useTheme} from '@theme/HDesignProvider';
-
 import Text from '../Text/Text';
 
 import {TextButtonProps} from './TextButton.type';
@@ -11,8 +9,6 @@ export const TextButton: React.FC<TextButtonProps> = forwardRef<HTMLButtonElemen
   {textColor, textSize, children, ...htmlProps}: TextButtonProps,
   ref,
 ) {
-  const {theme} = useTheme();
-
   return (
     <button ref={ref} {...htmlProps}>
       <Text size={textSize} textColor={textColor}>

client/src/components/Design/components/TextButton/TextButton.type.ts

@@ -1,6 +1,6 @@
 import {TextSize} from '../Text/Text.type';
 
-export type TextColor = 'black' | 'gray';
+export type TextColor = 'black' | 'gray' | 'onTertiary';
 
 export interface TextButtonStyleProps {
   textColor: TextColor;

client/src/components/Design/components/TopNav/NavItem.style.ts

@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const navItemStyle = css({
+  padding: '0 0.5rem',
+
+  ':first-of-type': {
+    paddingLeft: 0,
+  },
+});

client/src/components/Design/components/TopNav/NavItem.tsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import type {NavItemProps} from './NavItem.type';
+
+import {useLocation, useNavigate} from 'react-router-dom';
+
+import getDeletedLastPath from '@utils/getDeletedLastPath';
+
+import TextButton from '../TextButton/TextButton';
+
+import {navItemStyle} from './NavItem.style';
+
+const NavItem = ({displayName, routePath, onHandleRouteInFunnel, noEmphasis = false, children}: NavItemProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const matchPath = location.pathname.includes(routePath);
+
+  const handleNavigation = () => {
+    if (onHandleRouteInFunnel) {
+      onHandleRouteInFunnel();
+      return;
+    }
+
+    switch (routePath) {
+      case '/':
+        navigate('/');
+        break;
+      case '-1':
+        navigate(-1);
+        break;
+      default:
+        navigate(`${getDeletedLastPath(location.pathname)}${routePath}`);
+        break;
+    }
+  };
+
+  const getTextColor = () => {
+    if (noEmphasis) return 'gray';
+
+    return matchPath ? 'onTertiary' : 'gray';
+  };
+
+  return (
+    <li css={navItemStyle} onClick={handleNavigation}>
+      {children ? (
+        children
+      ) : (
+        <TextButton textColor={getTextColor()} textSize="bodyBold">
+          {displayName}
+        </TextButton>
+      )}
+    </li>
+  );
+};
+
+export default NavItem;

client/src/components/Design/components/TopNav/NavItem.type.ts

@@ -0,0 +1,14 @@
+export type NavItemOptionProps = {
+  displayName?: string;
+  onHandleRouteInFunnel?: () => void;
+};
+
+export type NavItemRequireProps = {
+  routePath: string;
+};
+
+export type NavItemStyleProps = {
+  noEmphasis?: boolean;
+};
+
+export type NavItemProps = NavItemRequireProps & NavItemOptionProps & NavItemStyleProps & React.PropsWithChildren;

client/src/components/Design/components/TopNav/TopNav.style.ts

@@ -7,12 +7,3 @@ export const topNavStyle = css({
   padding: '0 1rem',
   width: '100%',
 });
-
-export const topNavNonStyle = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0 1rem',
-  width: '100%',
-  height: '1.5rem',
-});

client/src/components/Design/components/TopNav/TopNav.tsx

@@ -1,20 +1,19 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
+import NavItem from './NavItem';
+import {topNavStyle} from './TopNav.style';
 
-import Switch from '@HDcomponents/Switch/Switch';
-
-import {topNavNonStyle, topNavStyle} from './TopNav.style';
-import Back from './Back';
+type TopNavProps = React.PropsWithChildren & {
+  Element?: React.ReactNode;
+};
 
-const TopNav: React.FC<React.PropsWithChildren> = ({children}) => {
-  const hasBack = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === Back);
-  const hasSwitch = React.Children.toArray(children).some(
-    child => React.isValidElement(child) && child.type === Switch,
+const TopNav = ({children}: TopNavProps) => {
+  return (
+    <nav>
+      <ul css={topNavStyle}>{children}</ul>
+    </nav>
   );
-
-  const isExistNav = hasBack || hasSwitch;
-
-  return <div css={isExistNav ? topNavStyle : topNavNonStyle}>{children}</div>;
 };
 
+TopNav.Item = NavItem;
+
 export default TopNav;

client/src/components/Design/index.tsx

@@ -17,14 +17,12 @@ import Input from './components/Input/Input';
 import LabelInput from './components/LabelInput/LabelInput';
 import ListButton from './components/ListButton/ListButton';
 import LabelGroupInput from './components/LabelGroupInput/LabelGroupInput';
-import Switch from './components/Switch/Switch';
 import Top from './components/Top/Top';
 import Tab from './components/Tabs/Tab';
 import Tabs from './components/Tabs/Tabs';
 import Text from './components/Text/Text';
 import TextButton from './components/TextButton/TextButton';
 import Title from './components/Title/Title';
-import Back from './components/TopNav/Back';
 import TopNav from './components/TopNav/TopNav';
 import DepositCheck from './components/DepositCheck/DepositCheck';
 import DepositToggle from './components/DepositToggle/DepositToggle';
@@ -48,15 +46,13 @@ export {
   LabelInput,
   ListButton,
   LabelGroupInput,
-  Switch,
   Top,
   Tab,
   Tabs,
   Text,
   TextButton,
   Title,
   TopNav,
-  Back,
   MainLayout,
   FunnelLayout,
   ContentLayout,

client/src/hooks/useEventPageLayout.ts

@@ -4,11 +4,9 @@ import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
-import useNavSwitch from './useNavSwitch';
 import useRequestGetEvent from './queries/event/useRequestGetEvent';
 
 const useEventPageLayout = () => {
-  const navProps = useNavSwitch();
   const eventId = getEventIdByUrl();
   const {eventName, bankName, accountNumber} = useRequestGetEvent();
 
@@ -23,7 +21,6 @@ const useEventPageLayout = () => {
 
   return {
     eventId,
-    navProps,
     isAdmin,
     isLoginPage,
     eventOutline,