feat : 페이지 상단 바 개발

.github/CODEOWNERS

@@ -1 +1 @@
-* @HelloWook @kangminguu @cmlim0070 @mmjjaa
+* @HelloWook @kangminguu @cmlim0070 @mmjjaa @saseungmin

src/components/Common/TopBar/TopBar.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TopBar } from './TopBar';
+
+const meta: Meta<typeof TopBar> = {
+    component: TopBar,
+    title: 'TopBar',
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <div style={{ width: '351px', border: '1px solid #ccc' }}>
+                <Story />
+            </div>
+        )
+    ]
+};
+export default meta;
+
+type Story = StoryObj<typeof TopBar>;
+
+export const Default: Story = {
+    args: {
+        onClick: () => {
+            alert('즐겁다');
+        }
+    }
+};

src/components/Common/TopBar/TopBar.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BackButton } from '../BackButton/BackButton';
+
+type TopBaerProps = { onClick: () => void };
+
+export const TopBar = ({ onClick }: TopBaerProps) => {
+    return (
+        <div className="flex items-center justify-between w-full px-4 text-2xl ">
+            <BackButton onClick={onClick} />
+            <p className="">완료</p>
+        </div>
+    );
+};

src/pages/Letter/Create/CreateLetterPage.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CreateLetterPage } from './CreateLetterPage';
+
+const meta: Meta<typeof CreateLetterPage> = {
+    component: CreateLetterPage,
+    title: 'Pages/CreateLetterPage',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof CreateLetterPage>;
+
+export const Default: Story = {
+    args: {}
+};

src/pages/Letter/Create/CreateLetterPage.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const CreateLetterPage = () => {
+    return (
+        <div className="bg-slate-500 w-[375px] max-w-[768px] h-[815px]"></div>
+    );
+};

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { ErrorPage } from '@/pages/ErrorPage';
 import { HomePage } from '@/pages/HomePage';
-import { CreateLetterPage } from '@/pages/CreateLetterPage';
+import { CreateLetterPage } from '@/pages/Letter/Create/CreateLetterPage';
 import { MapExplorerPage } from '@/pages/MapExplorerPage';
 import { MyPage } from '@/pages/MyPage';
 import { LoginPage } from '@/pages/LoginPage';