From d5126ea07ab188b47a4cf9b0066d977a41ef28b1 Mon Sep 17 00:00:00 2001 From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com> Date: Thu, 26 Sep 2024 15:19:56 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=99=88=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=EC=97=90=20?= =?UTF-8?q?=EB=9E=9C=EB=94=A9=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20TopNav=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#627)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 <soy2302ten@gmail.com> --- .../Design/components/Icon/Icon.style.ts | 1 + .../Design/components/Icon/Icon.tsx | 2 + .../Design/components/Icon/Icon.type.ts | 3 +- .../components/Switch/Switch.stories.tsx | 35 ------------ .../Design/components/Switch/Switch.style.ts | 6 -- .../Design/components/Switch/Switch.tsx | 24 -------- .../Design/components/Switch/Switch.type.ts | 5 -- .../components/TextButton/TextButton.tsx | 4 -- .../components/TextButton/TextButton.type.ts | 2 +- .../Design/components/TopNav/Back.tsx | 20 ------- .../Design/components/TopNav/NavItem.style.ts | 9 +++ .../Design/components/TopNav/NavItem.tsx | 55 +++++++++++++++++++ .../Design/components/TopNav/NavItem.type.ts | 14 +++++ .../components/TopNav/TopNav.stories.tsx | 50 ----------------- .../Design/components/TopNav/TopNav.style.ts | 9 --- .../Design/components/TopNav/TopNav.tsx | 25 ++++----- client/src/components/Design/index.tsx | 4 -- .../{Common => }/Logo/Logo.style.ts | 0 .../{Common => }/Logo/RunningDogLogo.tsx | 0 .../{Common => }/Logo/StandingDogLogo.tsx | 0 .../src/components/{Common => }/Logo/index.ts | 0 client/src/hooks/useEventPageLayout.ts | 3 - client/src/hooks/useNavSwitch.tsx | 42 -------------- client/src/pages/AccountPage/Account.tsx | 4 +- .../src/pages/AddBillFunnel/AddBillFunnel.tsx | 4 +- .../CompleteCreateEventStep.tsx | 7 ++- .../CreateEventPage/CreateEventFunnel.tsx | 8 ++- .../src/pages/EditBillPage/EditBillPage.tsx | 4 +- .../pages/EventPage/AdminPage/EventMember.tsx | 15 +---- .../src/pages/EventPage/EventPageLayout.tsx | 19 +++++-- .../pages/MainPage/Section/MainSection.tsx | 3 +- 31 files changed, 129 insertions(+), 248 deletions(-) delete mode 100644 client/src/components/Design/components/Switch/Switch.stories.tsx delete mode 100644 client/src/components/Design/components/Switch/Switch.style.ts delete mode 100644 client/src/components/Design/components/Switch/Switch.tsx delete mode 100644 client/src/components/Design/components/Switch/Switch.type.ts delete mode 100644 client/src/components/Design/components/TopNav/Back.tsx create mode 100644 client/src/components/Design/components/TopNav/NavItem.style.ts create mode 100644 client/src/components/Design/components/TopNav/NavItem.tsx create mode 100644 client/src/components/Design/components/TopNav/NavItem.type.ts delete mode 100644 client/src/components/Design/components/TopNav/TopNav.stories.tsx rename client/src/components/{Common => }/Logo/Logo.style.ts (100%) rename client/src/components/{Common => }/Logo/RunningDogLogo.tsx (100%) rename client/src/components/{Common => }/Logo/StandingDogLogo.tsx (100%) rename client/src/components/{Common => }/Logo/index.ts (100%) delete mode 100644 client/src/hooks/useNavSwitch.tsx diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts index fa08309ec..43620715b 100644 --- a/client/src/components/Design/components/Icon/Icon.style.ts +++ b/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) => { diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx index ae8f4b36d..d59a08bc4 100644 --- a/client/src/components/Design/components/Icon/Icon.tsx +++ b/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) => { diff --git a/client/src/components/Design/components/Icon/Icon.type.ts b/client/src/components/Design/components/Icon/Icon.type.ts index 580f0e919..4d92e73b5 100644 --- a/client/src/components/Design/components/Icon/Icon.type.ts +++ b/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; diff --git a/client/src/components/Design/components/Switch/Switch.stories.tsx b/client/src/components/Design/components/Switch/Switch.stories.tsx deleted file mode 100644 index 870783682..000000000 --- a/client/src/components/Design/components/Switch/Switch.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type {Meta, StoryObj} from '@storybook/react'; - -import Switch from '@HDcomponents/Switch/Switch'; - -const meta = { - title: 'Components/Switch', - component: Switch, - tags: ['autodocs'], - parameters: { - layout: 'centered', - }, - argTypes: { - value: { - description: '', - control: {type: 'select', options: ['홈', '관리']}, - }, - values: { - description: '', - }, - onChange: { - description: '', - }, - }, - args: { - value: '홈', - values: ['홈', '관리'], - onChange: value => alert(`${value} 선택됨`), - }, -} satisfies Meta<typeof Switch>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Playground: Story = {}; diff --git a/client/src/components/Design/components/Switch/Switch.style.ts b/client/src/components/Design/components/Switch/Switch.style.ts deleted file mode 100644 index d88c18748..000000000 --- a/client/src/components/Design/components/Switch/Switch.style.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {css} from '@emotion/react'; - -export const switchContainerStyle = css({ - display: 'flex', - gap: '0.75rem', -}); diff --git a/client/src/components/Design/components/Switch/Switch.tsx b/client/src/components/Design/components/Switch/Switch.tsx deleted file mode 100644 index 4a1275185..000000000 --- a/client/src/components/Design/components/Switch/Switch.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import TextButton from '../TextButton/TextButton'; - -import {switchContainerStyle} from './Switch.style'; -import {SwitchProps} from './Switch.type'; - -function Switch({value, values, onChange}: SwitchProps) { - return ( - <div css={switchContainerStyle}> - {values.map((item, index) => ( - <TextButton - key={`${index}_${item}`} - textColor={value === item ? 'black' : 'gray'} - textSize="bodyBold" - onClick={() => onChange(values[index])} - > - {item} - </TextButton> - ))} - </div> - ); -} - -export default Switch; diff --git a/client/src/components/Design/components/Switch/Switch.type.ts b/client/src/components/Design/components/Switch/Switch.type.ts deleted file mode 100644 index 7e0d31d0f..000000000 --- a/client/src/components/Design/components/Switch/Switch.type.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface SwitchProps { - value: string; - values: string[]; - onChange: (value: string) => void; -} diff --git a/client/src/components/Design/components/TextButton/TextButton.tsx b/client/src/components/Design/components/TextButton/TextButton.tsx index 9e73667d5..f21fd6549 100644 --- a/client/src/components/Design/components/TextButton/TextButton.tsx +++ b/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}> diff --git a/client/src/components/Design/components/TextButton/TextButton.type.ts b/client/src/components/Design/components/TextButton/TextButton.type.ts index 0299d89b9..5a1287734 100644 --- a/client/src/components/Design/components/TextButton/TextButton.type.ts +++ b/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; diff --git a/client/src/components/Design/components/TopNav/Back.tsx b/client/src/components/Design/components/TopNav/Back.tsx deleted file mode 100644 index 5bbd83618..000000000 --- a/client/src/components/Design/components/TopNav/Back.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import {useNavigate} from 'react-router-dom'; - -import TextButton from '@HDcomponents/TextButton/TextButton'; - -type BackProps = { - onClick?: () => void; -}; - -function Back({onClick}: BackProps) { - const navigate = useNavigate(); - - return ( - <TextButton onClick={() => (onClick ? onClick() : navigate(-1))} textSize="bodyBold" textColor="gray"> - 뒤로가기 - </TextButton> - ); -} - -export default Back; diff --git a/client/src/components/Design/components/TopNav/NavItem.style.ts b/client/src/components/Design/components/TopNav/NavItem.style.ts new file mode 100644 index 000000000..eb65ca32f --- /dev/null +++ b/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, + }, +}); diff --git a/client/src/components/Design/components/TopNav/NavItem.tsx b/client/src/components/Design/components/TopNav/NavItem.tsx new file mode 100644 index 000000000..41c38a150 --- /dev/null +++ b/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; diff --git a/client/src/components/Design/components/TopNav/NavItem.type.ts b/client/src/components/Design/components/TopNav/NavItem.type.ts new file mode 100644 index 000000000..d5b302468 --- /dev/null +++ b/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; diff --git a/client/src/components/Design/components/TopNav/TopNav.stories.tsx b/client/src/components/Design/components/TopNav/TopNav.stories.tsx deleted file mode 100644 index 885ed4f5b..000000000 --- a/client/src/components/Design/components/TopNav/TopNav.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import type {Meta, StoryObj} from '@storybook/react'; - -import React from 'react'; -import {reactRouterParameters, withRouter} from 'storybook-addon-react-router-v6'; - -import TopNav from '@HDcomponents/TopNav/TopNav'; - -import Switch from '../Switch/Switch'; - -import Back from './Back'; - -const meta = { - title: 'Components/TopNav', - component: TopNav, - tags: ['autodocs'], - decorators: [withRouter], - parameters: { - reactRouter: reactRouterParameters({ - location: { - pathParams: { - eventId: '123123', - }, - }, - routing: {path: '/event/:eventId/home'}, - }), - // layout: 'centered', - }, - argTypes: { - children: { - description: '', - control: {type: 'select'}, - options: ['Back', 'Switch', 'Any'], - mapping: { - Back: <Back />, - Switch: <Switch values={['홈', '관리']} value="홈" onChange={value => console.log(value)} />, - Any: <div />, - }, - }, - }, - args: { - children: 'Back', - }, -} satisfies Meta<typeof TopNav>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Playground: Story = {}; diff --git a/client/src/components/Design/components/TopNav/TopNav.style.ts b/client/src/components/Design/components/TopNav/TopNav.style.ts index 9ca69c7b0..b0efc6695 100644 --- a/client/src/components/Design/components/TopNav/TopNav.style.ts +++ b/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', -}); diff --git a/client/src/components/Design/components/TopNav/TopNav.tsx b/client/src/components/Design/components/TopNav/TopNav.tsx index 1530322e9..91f0eba07 100644 --- a/client/src/components/Design/components/TopNav/TopNav.tsx +++ b/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; diff --git a/client/src/components/Design/index.tsx b/client/src/components/Design/index.tsx index eed1b359e..a75245994 100644 --- a/client/src/components/Design/index.tsx +++ b/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,7 +46,6 @@ export { LabelInput, ListButton, LabelGroupInput, - Switch, Top, Tab, Tabs, @@ -56,7 +53,6 @@ export { TextButton, Title, TopNav, - Back, MainLayout, FunnelLayout, ContentLayout, diff --git a/client/src/components/Common/Logo/Logo.style.ts b/client/src/components/Logo/Logo.style.ts similarity index 100% rename from client/src/components/Common/Logo/Logo.style.ts rename to client/src/components/Logo/Logo.style.ts diff --git a/client/src/components/Common/Logo/RunningDogLogo.tsx b/client/src/components/Logo/RunningDogLogo.tsx similarity index 100% rename from client/src/components/Common/Logo/RunningDogLogo.tsx rename to client/src/components/Logo/RunningDogLogo.tsx diff --git a/client/src/components/Common/Logo/StandingDogLogo.tsx b/client/src/components/Logo/StandingDogLogo.tsx similarity index 100% rename from client/src/components/Common/Logo/StandingDogLogo.tsx rename to client/src/components/Logo/StandingDogLogo.tsx diff --git a/client/src/components/Common/Logo/index.ts b/client/src/components/Logo/index.ts similarity index 100% rename from client/src/components/Common/Logo/index.ts rename to client/src/components/Logo/index.ts diff --git a/client/src/hooks/useEventPageLayout.ts b/client/src/hooks/useEventPageLayout.ts index 4322d5c4c..57fea80d2 100644 --- a/client/src/hooks/useEventPageLayout.ts +++ b/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, diff --git a/client/src/hooks/useNavSwitch.tsx b/client/src/hooks/useNavSwitch.tsx deleted file mode 100644 index a622a7a30..000000000 --- a/client/src/hooks/useNavSwitch.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import {useEffect, useState} from 'react'; -import {useLocation, useNavigate} from 'react-router-dom'; - -const PATH_TABLE: Record<string, string> = { - 홈: 'home', - 관리: 'admin', -}; - -const PATH_DISPLAY_TABLE: Record<string, string> = { - home: '홈', - admin: '관리', -}; - -const useNavSwitch = () => { - const paths = ['홈', '관리']; - const location = useLocation(); - const navigate = useNavigate(); - - const pathArray = location.pathname.split('/'); - const basePath = pathArray.slice(0, -1).join('/'); - const lastPath = pathArray[pathArray.length - 1]; - - const [nav, setNav] = useState(PATH_DISPLAY_TABLE[lastPath]); - - useEffect(() => { - const isLogin = lastPath === 'login'; - setNav(isLogin ? '관리' : PATH_DISPLAY_TABLE[lastPath]); - }, [location]); - - const onChange = (displayName: string) => { - setNav(displayName); - navigate(`${basePath}/${PATH_TABLE[displayName]}`); - }; - - return { - nav, - paths, - onChange, - }; -}; - -export default useNavSwitch; diff --git a/client/src/pages/AccountPage/Account.tsx b/client/src/pages/AccountPage/Account.tsx index 1b7d685ff..29e389fe6 100644 --- a/client/src/pages/AccountPage/Account.tsx +++ b/client/src/pages/AccountPage/Account.tsx @@ -5,7 +5,7 @@ import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal'; import useAccount from '@hooks/useAccount'; -import {Back, FixedButton, Flex, FunnelLayout, LabelInput, MainLayout, Top, TopNav} from '@components/Design'; +import {FixedButton, Flex, FunnelLayout, LabelInput, MainLayout, Top, TopNav} from '@components/Design'; import getDeletedLastPath from '@utils/getDeletedLastPath'; @@ -25,7 +25,7 @@ const Account = () => { return ( <MainLayout backgroundColor="white"> <TopNav> - <Back /> + <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" /> </TopNav> <FunnelLayout> <Top> diff --git a/client/src/pages/AddBillFunnel/AddBillFunnel.tsx b/client/src/pages/AddBillFunnel/AddBillFunnel.tsx index a98b60919..acb13d698 100644 --- a/client/src/pages/AddBillFunnel/AddBillFunnel.tsx +++ b/client/src/pages/AddBillFunnel/AddBillFunnel.tsx @@ -2,7 +2,7 @@ import {Member} from 'types/serviceType'; import useAddBillFunnel from '@hooks/useAddBillFunnel'; -import {Back, MainLayout, TopNav} from '@components/Design'; +import {MainLayout, TopNav} from '@components/Design'; import PriceStep from './steps/PriceStep'; import {TitleStep} from './steps/TitleStep'; @@ -20,7 +20,7 @@ const AddBillFunnel = () => { return ( <MainLayout backgroundColor="white"> <TopNav> - <Back /> + <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" /> </TopNav> {step === 'price' && <PriceStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />} {step === 'title' && <TitleStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />} diff --git a/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx b/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx index 7c2415c67..34ee64661 100644 --- a/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx +++ b/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx @@ -1,10 +1,11 @@ -import {useLocation, useNavigate} from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; import {css} from '@emotion/react'; -import {RunningDog} from '@components/Common/Logo'; import Top from '@components/Design/components/Top/Top'; -import {FixedButton, MainLayout, Title, TopNav} from '@HDesign/index'; +import {RunningDog} from '@components/Logo'; + +import {FixedButton} from '@HDesign/index'; import {ROUTER_URLS} from '@constants/routerUrls'; diff --git a/client/src/pages/CreateEventPage/CreateEventFunnel.tsx b/client/src/pages/CreateEventPage/CreateEventFunnel.tsx index d9347a389..0b1bdf914 100644 --- a/client/src/pages/CreateEventPage/CreateEventFunnel.tsx +++ b/client/src/pages/CreateEventPage/CreateEventFunnel.tsx @@ -3,7 +3,7 @@ import {useNavigate} from 'react-router-dom'; import useFunnel from '@hooks/useFunnel'; import useCreateEventData from '@hooks/useCreateEventData'; -import {Back, MainLayout, TopNav} from '@components/Design'; +import {MainLayout, TopNav} from '@components/Design'; import SetEventNameStep from './SetEventNameStep'; import SetEventPasswordStep from './SetEventPasswordStep'; @@ -31,7 +31,11 @@ const CreateEventFunnel = () => { return ( <MainLayout backgroundColor="white"> - <TopNav>{step !== STEP_SEQUENCE[STEP_SEQUENCE.length - 1] && <Back onClick={handleBack} />}</TopNav> + <TopNav> + {step !== STEP_SEQUENCE[STEP_SEQUENCE.length - 1] && ( + <TopNav.Item displayName="뒤로가기" noEmphasis routePath="" onHandleRouteInFunnel={handleBack} /> + )} + </TopNav> <Funnel> <Step name="eventName"> <SetEventNameStep moveToNextStep={moveToNextStep} {...eventNameProps} /> diff --git a/client/src/pages/EditBillPage/EditBillPage.tsx b/client/src/pages/EditBillPage/EditBillPage.tsx index c9bf1448d..75a02d755 100644 --- a/client/src/pages/EditBillPage/EditBillPage.tsx +++ b/client/src/pages/EditBillPage/EditBillPage.tsx @@ -7,7 +7,7 @@ import Top from '@components/Design/components/Top/Top'; import useEditBillPage from '@hooks/useEditBillPage'; -import {Back, FixedButton, Flex, MainLayout, TopNav} from '@components/Design'; +import {FixedButton, Flex, MainLayout, TopNav} from '@components/Design'; const EditBillPage = () => { const { @@ -31,7 +31,7 @@ const EditBillPage = () => { return ( <MainLayout backgroundColor="white"> <TopNav> - <Back /> + <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" /> </TopNav> <div css={css` diff --git a/client/src/pages/EventPage/AdminPage/EventMember.tsx b/client/src/pages/EventPage/AdminPage/EventMember.tsx index a59f124f8..91fb8b276 100644 --- a/client/src/pages/EventPage/AdminPage/EventMember.tsx +++ b/client/src/pages/EventPage/AdminPage/EventMember.tsx @@ -3,18 +3,7 @@ import {Report} from 'types/serviceType'; import useEventMember from '@hooks/useEventMember'; -import { - Back, - MainLayout, - TopNav, - Top, - Amount, - DepositToggle, - Icon, - IconButton, - FixedButton, - Text, -} from '@components/Design'; +import {MainLayout, TopNav, Top, Amount, DepositToggle, Icon, IconButton, FixedButton, Text} from '@components/Design'; import {useTheme} from '@components/Design'; import {eventMemberStyle, memberList, eventMember, memberEditInput, noneReports} from './EventMember.style'; @@ -26,7 +15,7 @@ const EventMember = () => { return ( <MainLayout backgroundColor="white"> <TopNav> - <Back /> + <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" /> </TopNav> <section css={eventMemberStyle}> <Top> diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx index 3e33fedde..c0747a727 100644 --- a/client/src/pages/EventPage/EventPageLayout.tsx +++ b/client/src/pages/EventPage/EventPageLayout.tsx @@ -6,15 +6,14 @@ import useEventPageLayout from '@hooks/useEventPageLayout'; import {ShareEventButton} from '@components/ShareEventButton'; -import {MainLayout, TopNav, Switch} from '@HDesign/index'; +import {Flex, Icon, IconButton, MainLayout, TopNav} from '@HDesign/index'; export type EventPageContextProps = Event & { isAdmin: boolean; }; const EventPageLayout = () => { - const {navProps, isAdmin, isLoginPage, eventOutline} = useEventPageLayout(); - const {nav, paths, onChange} = navProps; + const {isAdmin, isLoginPage, eventOutline} = useEventPageLayout(); const outletContext: EventPageContextProps = { isAdmin, @@ -23,10 +22,18 @@ const EventPageLayout = () => { return ( <MainLayout backgroundColor="gray"> - <TopNav> - <Switch value={nav} values={paths} onChange={onChange} /> + <Flex justifyContent="spaceBetween" alignItems="center" margin="0 1rem 0 0"> + <TopNav> + <TopNav.Item routePath="/"> + <IconButton variants="none"> + <Icon iconType="heundeut" /> + </IconButton> + </TopNav.Item> + <TopNav.Item displayName="홈" routePath="/home" /> + <TopNav.Item displayName="관리" routePath="/admin" /> + </TopNav> {!isLoginPage && <ShareEventButton eventOutline={eventOutline} />} - </TopNav> + </Flex> <Outlet context={outletContext} /> </MainLayout> ); diff --git a/client/src/pages/MainPage/Section/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection.tsx index 5ae1dd8cb..3be031978 100644 --- a/client/src/pages/MainPage/Section/MainSection.tsx +++ b/client/src/pages/MainPage/Section/MainSection.tsx @@ -1,9 +1,10 @@ import {css, keyframes} from '@emotion/react'; import {useNavigate} from 'react-router-dom'; -import {StandingDog} from '@components/Common/Logo'; import ChevronDown from '@assets/image/chevronDownLarge.svg'; +import {StandingDog} from '@components/Logo'; + import {Button, Text} from '@HDesign/index'; import {ROUTER_URLS} from '@constants/routerUrls';