[#362] TopNavigation 컴포넌트 리팩터링 (#393)

prgrms-web-devcourse · Aug 18, 2023 · f261e1b · f261e1b
1 parent 7484e93
commit f261e1b
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 56 deletions.
diff --git a/public/icons/close.svg b/public/icons/close.svg
diff --git a/public/icons/hamburger.svg b/public/icons/hamburger.svg
diff --git a/src/stories/Base/TopNavigation.stories.tsx b/src/stories/Base/TopNavigation.stories.tsx
@@ -1,6 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import TopNavigation from '@/ui/Base/TopNavigation';
-import { IconPost, IconShare } from '@public/icons';
+import {
+  IconPost,
+  IconShare,
+  IconArrowLeft,
+  IconHamburger,
+  IconClose,
+} from '@public/icons';
 
 const meta: Meta<typeof TopNavigation> = {
   title: 'Base/TopNavigation',
@@ -13,26 +19,97 @@ export default meta;
 type Story = StoryObj<typeof TopNavigation>;
 
 export const Default: Story = {
-  args: {
-    title: 'Refactoring 2nd(리팩터링 2판)',
-  },
-  render: args => <TopNavigation {...args} />,
-};
-
-export const BookshelfPage: Story = {
-  args: {
-    titleAlign: 'center',
-    children: <IconShare />,
-  },
-  render: args => <TopNavigation {...args} />,
-};
-
-export const GroupPage: Story = {
-  args: {
-    titleAlign: 'left',
-    title: '프롱이 리팩터링 스터디',
-    isOwner: true,
-    children: <IconPost />,
-  },
-  render: args => <TopNavigation {...args} />,
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconArrowLeft />
+      </TopNavigation.LeftItem>
+      <TopNavigation.CenterItem>
+        Refactoring 2nd(리팩터링 2판)
+      </TopNavigation.CenterItem>
+      <TopNavigation.RightItem>
+        <IconShare />
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  ),
+};
+
+export const OnlySide: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconArrowLeft />
+      </TopNavigation.LeftItem>
+      <TopNavigation.RightItem>
+        <IconShare />
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  ),
+};
+
+export const OnlyCenter: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.CenterItem textAlign="left">
+        Refactoring 2nd(리팩터링 2판)
+      </TopNavigation.CenterItem>
+    </TopNavigation>
+  ),
+};
+
+export const CenterWithLeft: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconArrowLeft />
+      </TopNavigation.LeftItem>
+      <TopNavigation.CenterItem textAlign="left">
+        Refactoring 2nd(리팩터링 2판)
+      </TopNavigation.CenterItem>
+    </TopNavigation>
+  ),
+};
+
+export const CenterWithRight: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.CenterItem>
+        Refactoring 2nd(리팩터링 2판)
+      </TopNavigation.CenterItem>
+      <TopNavigation.RightItem>
+        <IconShare />
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  ),
+};
+
+export const TextLeft: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconArrowLeft />
+      </TopNavigation.LeftItem>
+      <TopNavigation.CenterItem textAlign="left">
+        프롱이 리팩터링 스터디
+      </TopNavigation.CenterItem>
+      <TopNavigation.RightItem>
+        <IconPost />
+        <IconHamburger />
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  ),
+};
+
+export const PostWrite: Story = {
+  render: () => (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconClose />
+      </TopNavigation.LeftItem>
+      <TopNavigation.CenterItem>글 작성하기</TopNavigation.CenterItem>
+      <TopNavigation.RightItem>
+        <button className="font-bold text-main-900">완료</button>
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  ),
 };
diff --git a/src/ui/Base/TopNavigation.tsx b/src/ui/Base/TopNavigation.tsx
@@ -1,40 +1,53 @@
-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;
+import { PropsWithChildren, ReactNode } from 'react';
+
+interface TopNavigationProps {
+  children?: ReactNode;
 }
 
-const TopNavigation = ({
-  children,
-  titleAlign = 'center',
-  title = '',
-  isOwner = false,
-}: Props) => {
+type ItemProps = TopNavigationProps;
+
+const TopNavigation = ({ children }: TopNavigationProps) => {
   return (
-    <div className="relative flex h-[5.4rem] w-full gap-[1.5rem] bg-opacity-0 px-[2rem] py-[1.7rem]">
-      <Link href=".">
-        <IconArrowLeft className="hover:cursor-pointer" />
-      </Link>
-      <div
-        className={`flex w-full pr-[3.5rem] text-md font-normal leading-[1.9rem] ${TITLE_ALIGN_CLASSES[titleAlign]}`}
-      >
-        {title}
-      </div>
-      <div className="absolute right-[2rem] flex gap-[1rem]">
-        {children}
-        {isOwner && <IconHamburger className="hover:cursor-pointer" />}
-      </div>
+    <div className="relative flex h-[2.4rem] w-full items-center justify-center bg-opacity-0 px-[2rem] py-[1.7rem] text-md">
+      {children}
     </div>
   );
 };
 
-export default TopNavigation;
+const LeftItem = ({ children }: ItemProps) => {
+  return (
+    <div className="absolute left-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+      {children}
+    </div>
+  );
+};
+
+type CenterItemProps = PropsWithChildren<{ textAlign?: 'left' | 'center' }>;
+
+const textAligns = {
+  left: 'text-left',
+  center: 'text-center',
+} as const;
 
-const TITLE_ALIGN_CLASSES = {
-  center: 'justify-center',
-  left: 'justify-start',
+const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => {
+  const alignClassName = textAligns[textAlign];
+  return (
+    <div className={`w-full px-[3.5rem] ${alignClassName}`}>{children}</div>
+  );
 };
+
+const RightItem = ({ children }: ItemProps) => {
+  return (
+    <div className="absolute right-[2rem] flex gap-[1rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+      {children}
+    </div>
+  );
+};
+
+TopNavigation.LeftItem = LeftItem;
+
+TopNavigation.CenterItem = CenterItem;
+
+TopNavigation.RightItem = RightItem;
+
+export default TopNavigation;