From b1649a43f5376565bcadb6f070f87c12e8520766 Mon Sep 17 00:00:00 2001 From: kyuran kim <57716832+gxxrxn@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:15:43 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"[#362]=20TopNavigation=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=84=B0?= =?UTF-8?q?=EB=A7=81=20(#393)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 55a6b98299ced4a96f1e83b8b19ac3ced84077b9. --- public/icons/close.svg | 2 +- public/icons/hamburger.svg | 2 +- src/stories/Base/TopNavigation.stories.tsx | 123 ++++----------------- src/ui/Base/TopNavigation.tsx | 75 ++++++------- 4 files changed, 56 insertions(+), 146 deletions(-) diff --git a/public/icons/close.svg b/public/icons/close.svg index 24f9bfeb..4f6c393c 100644 --- a/public/icons/close.svg +++ b/public/icons/close.svg @@ -1,4 +1,4 @@ - + diff --git a/public/icons/hamburger.svg b/public/icons/hamburger.svg index 173f3948..2e1d8c4a 100644 --- a/public/icons/hamburger.svg +++ b/public/icons/hamburger.svg @@ -1,4 +1,4 @@ - + diff --git a/src/stories/Base/TopNavigation.stories.tsx b/src/stories/Base/TopNavigation.stories.tsx index 5dc96224..67aee5c3 100644 --- a/src/stories/Base/TopNavigation.stories.tsx +++ b/src/stories/Base/TopNavigation.stories.tsx @@ -1,12 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import TopNavigation from '@/ui/Base/TopNavigation'; -import { - IconPost, - IconShare, - IconArrowLeft, - IconHamburger, - IconClose, -} from '@public/icons'; +import { IconPost, IconShare } from '@public/icons'; const meta: Meta = { title: 'Base/TopNavigation', @@ -19,97 +13,26 @@ export default meta; type Story = StoryObj; export const Default: Story = { - render: () => ( - - - - - - Refactoring 2nd(리팩터링 2판) - - - - - - ), -}; - -export const OnlySide: Story = { - render: () => ( - - - - - - - - - ), -}; - -export const OnlyCenter: Story = { - render: () => ( - - - Refactoring 2nd(리팩터링 2판) - - - ), -}; - -export const CenterWithLeft: Story = { - render: () => ( - - - - - - Refactoring 2nd(리팩터링 2판) - - - ), -}; - -export const CenterWithRight: Story = { - render: () => ( - - - Refactoring 2nd(리팩터링 2판) - - - - - - ), -}; - -export const TextLeft: Story = { - render: () => ( - - - - - - 프롱이 리팩터링 스터디 - - - - - - - ), -}; - -export const PostWrite: Story = { - render: () => ( - - - - - 글 작성하기 - - - - - ), + args: { + title: 'Refactoring 2nd(리팩터링 2판)', + }, + render: args => , +}; + +export const BookshelfPage: Story = { + args: { + titleAlign: 'center', + children: , + }, + render: args => , +}; + +export const GroupPage: Story = { + args: { + titleAlign: 'left', + title: '프롱이 리팩터링 스터디', + isOwner: true, + children: , + }, + render: args => , }; diff --git a/src/ui/Base/TopNavigation.tsx b/src/ui/Base/TopNavigation.tsx index 0bd033c1..28dab48d 100644 --- a/src/ui/Base/TopNavigation.tsx +++ b/src/ui/Base/TopNavigation.tsx @@ -1,53 +1,40 @@ -import { PropsWithChildren, ReactNode } from 'react'; - -interface TopNavigationProps { - children?: ReactNode; +import { IconArrowLeft, IconHamburger } from '@public/icons'; +import Link from 'next/link'; +import { PropsWithChildren } from 'react'; + +interface Props extends PropsWithChildren { + titleAlign?: 'center' | 'left'; + title?: string; + isOwner?: boolean; } -type ItemProps = TopNavigationProps; - -const TopNavigation = ({ children }: TopNavigationProps) => { +const TopNavigation = ({ + children, + titleAlign = 'center', + title = '', + isOwner = false, +}: Props) => { return ( -
- {children} +
+ + + +
+ {title} +
+
+ {children} + {isOwner && } +
); }; -const LeftItem = ({ children }: ItemProps) => { - return ( -
- {children} -
- ); -}; - -type CenterItemProps = PropsWithChildren<{ textAlign?: 'left' | 'center' }>; - -const textAligns = { - left: 'text-left', - center: 'text-center', -} as const; - -const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => { - const alignClassName = textAligns[textAlign]; - return ( -
{children}
- ); -}; +export default TopNavigation; -const RightItem = ({ children }: ItemProps) => { - return ( -
- {children} -
- ); +const TITLE_ALIGN_CLASSES = { + center: 'justify-center', + left: 'justify-start', }; - -TopNavigation.LeftItem = LeftItem; - -TopNavigation.CenterItem = CenterItem; - -TopNavigation.RightItem = RightItem; - -export default TopNavigation;