feat : Logo 컴포넌트 생성 및 메인페이지 상단 로고, 알림버튼 개발

src/components/Common/LogoContainer/Logo.stories.tsx

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

src/components/Common/LogoContainer/Logo.tsx

@@ -0,0 +1,9 @@
+type LogoProps = {
+    h?: number;
+};
+
+export const Logo = ({ h = 24 }: LogoProps) => {
+    const height = `h-[${h}px]`;
+
+    return <img className={`${height}`} src="/logo.svg" alt="" />;
+};

src/components/Common/NotificationBadge/NotificationBadge.stories.tsx

@@ -1,19 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { MemoryRouter } from 'react-router-dom';
 import { NotificationBadge } from './NotificationBadge';
 
 const meta: Meta<typeof NotificationBadge> = {
     component: NotificationBadge,
     title: 'atoms/NotificationBadge',
     tags: ['autodocs'],
-    argTypes: {},
-    decorators: [
-        (Story) => (
-            <MemoryRouter>
-                <Story />
-            </MemoryRouter>
-        )
-    ]
+    argTypes: {}
 };
 export default meta;
 

src/components/Common/NotificationBadge/NotificationBadge.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
 interface NotificationBadgeProps {
     badgeType: 'basic' | 'dday';
@@ -10,8 +9,6 @@ export const NotificationBadge = ({
     badgeType,
     count
 }: NotificationBadgeProps) => {
-    const navigate = useNavigate();
-
     const MAX_COUNT = 99;
     const BaseStyle =
         'inline-flex items-center justify-center text-center align-text-middle';
@@ -57,10 +54,7 @@ export const NotificationBadge = ({
     };
 
     return (
-        <div
-            onClick={() => navigate('/notification')}
-            className={`${BaseStyle} ${styleMap[badgeType]}`}
-        >
+        <div className={`${BaseStyle} ${styleMap[badgeType]}`}>
             {renderContent(badgeType, count)}
         </div>
     );

src/components/HomePage/TopButtonContainer/TopButtonContainer.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
+import { MemoryRouter } from 'react-router-dom';
 import { TopButtonContainer } from './TopButtonContainer';
 
 const meta: Meta<typeof TopButtonContainer> = {
@@ -10,10 +10,18 @@ const meta: Meta<typeof TopButtonContainer> = {
     parameters: {
         docs: {
             description: {
-                component: 'homePage에서 상단에 위치하는 버튼 입니다.'
+                component:
+                    'homePage에서 상단에 위치하는 로고와 알람함 이동 버튼 입니다.'
             }
         }
-    }
+    },
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
 };
 export default meta;
 

src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx

@@ -1,8 +1,17 @@
+import { NavLink } from 'react-router-dom';
+import { Logo } from '../../Common/LogoContainer/Logo';
+import { IoIosNotifications } from 'react-icons/io';
+
 export const TopButtonContainer = () => {
     return (
         <div className="flex justify-between">
-            <button className="btn-base w-[44px] h-[44px]">1</button>
-            <button className="btn-base w-[44px] h-[44px]">2</button>
+            <NavLink to={'/'}>
+                <Logo h={34} />
+            </NavLink>
+
+            <NavLink to={'/notification'} className="size-[34px]">
+                <IoIosNotifications className="size-full text-[#22B8EF]" />
+            </NavLink>
         </div>
     );
 };