[#358] TopNavigation 컴포넌트 (#378)

* feat: TopNavigation 레이아웃 구성

* feat: TopNavigation 스토리북 작성

* chore: TitleClasses 분리

* chore: props 추가 및 수정

* chore: Icon 추가

* settings: Storybook에 SVGR 옵션 추가

* feat: 아이콘 추가 및 기능 구현

* feat: Storybook 작성

* chore: Icon 컴포넌트에서 크기값 제거

* chore: 코드리뷰 반영

* chore: Link href 수정

* chore: 코드리뷰 반영

* chore: interface 수정

* chore: Storybook 타이틀 수정

* chore: Storybook Default 이름 수정

* feat: Story 페이지별 추가 및 경로 변경

* fix: 우측 option absolute로 변경 및 불필요한 컨스턴트, div요소 제거

* fix: 옵션 컨테이너 padding값 수정

* refactor: 스타일 코드 수정

* refactor: 부모 요소에 relative 속성 추가

.storybook/main.ts

@@ -24,5 +24,25 @@ const config: StorybookConfig = {
       disable: true,
     },
   },
+  webpackFinal: async config => {
+    const imageRule = config.module?.rules?.find(rule => {
+      const test = (rule as { test: RegExp }).test;
+
+      if (!test) {
+        return false;
+      }
+
+      return test.test('.svg');
+    }) as { [key: string]: any };
+
+    imageRule.exclude = /\.svg$/;
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
 };
 export default config;

public/icons/index.ts

@@ -0,0 +1,4 @@
+export { default as IconLeftArrow } from './left-arrow.svg';
+export { default as IconShare } from './share.svg';
+export { default as IconPost } from './post.svg';
+export { default as IconOptions } from './options.svg';

src/stories/Base/TopNavigation.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TopNavigation from '@/ui/Base/TopNavigation';
+import { IconPost, IconShare } from '@public/icons';
+
+const meta: Meta<typeof TopNavigation> = {
+  title: 'Base/TopNavigation',
+  component: TopNavigation,
+  tags: ['autodocs'],
+};
+
+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} />,
+};

src/ui/Base/TopNavigation.tsx

@@ -0,0 +1,40 @@
+import { IconLeftArrow, IconOptions } from '@public/icons';
+import Link from 'next/link';
+import { PropsWithChildren } from 'react';
+
+interface Props extends PropsWithChildren {
+  titleAlign?: 'center' | 'left';
+  title?: string;
+  isOwner?: boolean;
+}
+
+const TopNavigation = ({
+  children,
+  titleAlign = 'center',
+  title = '',
+  isOwner = false,
+}: Props) => {
+  return (
+    <div className="relative flex h-[5.4rem] w-full gap-[1.5rem] bg-opacity-0 px-[2rem] py-[1.7rem]">
+      <Link href=".">
+        <IconLeftArrow 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 && <IconOptions className="hover:cursor-pointer" />}
+      </div>
+    </div>
+  );
+};
+
+export default TopNavigation;
+
+const TITLE_ALIGN_CLASSES = {
+  center: 'justify-center',
+  left: 'justify-start',
+};