feat : 페이지 상단 바 개발 (#96)

* feat : top bar 개발

* story : top bar 스토리 작성

* chore : letter 페이지 경로 변경

* chore : 코드 오너 멘토님 추가

* chore : git에 올라간 common 파일 삭제

* chore : 에러 발생 시 스토리북에서 무시하도록 처리

* chore : ci 파일 수정

* chore : 빌드 에러 수정

.github/CODEOWNERS

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

.github/workflows/storybook.yml

@@ -30,6 +30,7 @@ jobs:
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN  }}
                   buildScriptName: build-storybook
                   onlyChanged: true
+                  ignoreLastBuildOnBranch: true
 
             - name: comment PR
               uses: thollander/actions-comment-pull-request@v1

src/components/Common/Input/Input.tsx

@@ -45,7 +45,7 @@ export const Input = ({
     };
 
     if (errorMessage && !pattern)
-        throw new Error('에러를 판단할 패턴이 없습니다.');
+        console.error('에러를 판단할 패턴이 없습니다.');
     return (
         <div className="relative mb-6">
             {text && (
@@ -68,7 +68,7 @@ export const Input = ({
             {togglePassword && (
                 <button
                     type="button"
-                    className="absolute right-3 top-1/2 translate-y-1/3 transform text-gray md:translate-y-1/2"
+                    className="absolute transform right-3 top-1/2 translate-y-1/3 text-gray md:translate-y-1/2"
                     onClick={() => setShowPassword(!showPassword)}
                 >
                     {showPassword ? <FaEye /> : <FaEyeSlash />}

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';