fix: useContext의 null 처리로 인한 basename 구조 분해 에러 해결

GoTogether-Inc · Jan 24, 2025 · ff576e7 · ff576e7
1 parent de8a6ee
commit ff576e7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>