From ff576e7b1f0983c6c6d757dad2d130272e742c3c Mon Sep 17 00:00:00 2001
From: Yejiin21 <101397075+Yejiin21@users.noreply.github.com>
Date: Fri, 24 Jan 2025 22:02:32 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20useContext=EC=9D=98=20null=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20basename=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B6=84=ED=95=B4=20=EC=97=90=EB=9F=AC=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design-system/stories/Profile.stories.tsx      | 16 +++++++++++++---
 design-system/ui/Profile.tsx                   |  6 +++---
 src/pages/menu/ui/MyHostPage.tsx               |  2 +-
 src/shared/ui/backgrounds/HostDetailLayout.tsx |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/design-system/stories/Profile.stories.tsx b/design-system/stories/Profile.stories.tsx
index 4872384..5b9b744 100644
--- a/design-system/stories/Profile.stories.tsx
+++ b/design-system/stories/Profile.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Profile from '../ui/Profile';
+import { MemoryRouter } from 'react-router-dom';
 
 type Story = StoryObj<typeof meta>;
 
@@ -9,6 +10,13 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     name: {
@@ -22,7 +30,7 @@ const meta = {
       defaultValue: '',
     },
     profile: {
-      control: { type: 'radio', options: ['userProfile', 'HostProfile'] },
+      control: { type: 'radio', options: ['userProfile', 'hostProfile'] },
       description: '프로필 타입을 선택합니다.',
       defaultValue: 'userProfile',
     },
@@ -35,20 +43,22 @@ export const DefaultProfile: Story = {
   args: {
     name: '유진',
     profile: 'userProfile',
+    className: 'lg:w-10 lg:h-10 md:h-9 md:w-9 sm:h-8 sm:w-8 lg:text-sm md:text-xs sm:text-xs',
   },
 };
 
 export const CustomStyledProfile: Story = {
   args: {
     name: '예진',
-    className: 'bg-blue-400',
     profile: 'userProfile',
+    className: 'bg-blue-400 lg:w-10 lg:h-10 md:h-9 md:w-9 sm:h-8 sm:w-8 lg:text-sm md:text-xs sm:text-xs',
   },
 };
 
 export const HostProfile: Story = {
   args: {
     name: '호스트 유진',
-    profile: 'HostProfile',
+    profile: 'hostProfile',
+    className: 'md:w-28 md:h-28 w-24 h-24',
   },
 };
diff --git a/design-system/ui/Profile.tsx b/design-system/ui/Profile.tsx
index bd55de3..cc52b35 100644
--- a/design-system/ui/Profile.tsx
+++ b/design-system/ui/Profile.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-type Profile = 'userProfile' | 'HostProfile';
+type Profile = 'userProfile' | 'hostProfile';
 
 interface ProfileProps {
   id?: number;
@@ -25,7 +25,7 @@ const ProfileCircle = ({ id, name, profile = 'userProfile', className = '', onCl
         }
       }}
       className={`${
-        profile === 'HostProfile' ? 'flex flex-col items-center hover:text-main' : 'flex items-center justify-center'
+        profile === 'hostProfile' ? 'flex flex-col items-center hover:text-main' : 'flex items-center justify-center'
       }`}
     >
       <div className="flex items-center">
@@ -34,7 +34,7 @@ const ProfileCircle = ({ id, name, profile = 'userProfile', className = '', onCl
         </div>
         {children && <span className="ml-2 text-black">{children}</span>}
       </div>
-      {profile === 'HostProfile' && name && (
+      {profile === 'hostProfile' && name && (
         <span className="mt-2 text-sm text-center">
           <Link to={`/menu/hostDetail/${id}`}>{name} &gt;</Link>
         </span>
diff --git a/src/pages/menu/ui/MyHostPage.tsx b/src/pages/menu/ui/MyHostPage.tsx
index 8333aed..881177a 100644
--- a/src/pages/menu/ui/MyHostPage.tsx
+++ b/src/pages/menu/ui/MyHostPage.tsx
@@ -23,7 +23,7 @@ const MyHostPage = () => {
             key={profile.id}
             id={profile.id}
             name={profile.name}
-            profile="HostProfile"
+            profile="hostProfile"
             onClick={() => handleProfileClick(profile.id)}
             className="md:w-20 md:h-20 w-16 h-16 hover:border hover:border-main"
           />
diff --git a/src/shared/ui/backgrounds/HostDetailLayout.tsx b/src/shared/ui/backgrounds/HostDetailLayout.tsx
index 759c329..4a71051 100644
--- a/src/shared/ui/backgrounds/HostDetailLayout.tsx
+++ b/src/shared/ui/backgrounds/HostDetailLayout.tsx
@@ -29,7 +29,7 @@ const HostDetailLayout = ({ rightContent, children }: HostDetailLayoutProps) =>
           color="white"
         />
         <div className="flex justify-center items-center px-6 md:px-10">
-          <ProfileCircle profile="HostProfile" className="md:w-28 md:h-28 w-24 h-24" />
+          <ProfileCircle profile="hostProfile" className="md:w-28 md:h-28 w-24 h-24" />
 
           <div className="flex flex-col gap-1 md:gap-3 ml-5 text-white">
             <p className="text-lg md:text-xl font-bold">{host?.name}</p>