Fix(bds): 아바타 컴포넌트 기본 프로필 컬러 변경

apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.css.ts

@@ -35,6 +35,7 @@ export const leftContainer = style({
 export const userInfo = style({
   display: 'flex',
   gap: '1.2rem',
+  alignItems: 'center',
 });
 
 export const nickName = style({

apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.tsx

@@ -80,7 +80,7 @@ const UserCommentReply = ({
     <div className={styles.container({ isEditingReply })}>
       <div className={styles.userInfoContainer}>
         <div className={styles.leftContainer}>
-          <Icon name="recomment_line" width="2rem" height="2rem" />
+          <Icon name="recomment_line" width="1.2rem" height="1.8rem" />
           <div className={styles.userInfo}>
             <Avatar size="sm" src={profileImage} />
             <div>

packages/bds-ui/src/components/avator/avatar.stories.tsx

@@ -5,24 +5,58 @@ import Avatar from './avatar';
 const meta: Meta<typeof Avatar> = {
   title: 'Common/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
-  args: {
-    size: 'md',
-    alt: '유저 프로필 이미지',
-  },
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component: `
-\`Avatar\` 컴포넌트는 유저의 프로필 이미지를 표시합니다. 
+**Avatar** 컴포넌트는 유저의 프로필 이미지를 표시합니다.
 
-- \`src\`: 이미지 URL
-- \`alt\`: 이미지 대체 텍스트
-- \`fallback\`: 이미지가 없을 경우 대신 보여줄 이니셜 텍스트
-- \`size\`: 'sm' | 'md' | 'lg' (크기 옵션)
+## Props 요약
+- **src**: 이미지 URL
+- **alt**: 이미지 대체 텍스트
+- **fallback**: 이미지가 없을 경우 대신 보여줄 이니셜 텍스트
+- **size**: 'sm' | 'md' | 'lg' (크기 옵션)
 
-\`src\`가 없고 \`fallback\`도 없으면 아이콘이 자동 표시됩니다.
-`,
+\`src\`가 없고 \`fallback\`도 없으면 기본 프로필 아이콘이 표시됩니다.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    size: 'md',
+    alt: '유저 프로필 이미지',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: '아바타의 크기를 결정합니다.',
+      table: {
+        type: { summary: 'sm | md | lg' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    src: {
+      control: { type: 'text' },
+      description: '프로필 이미지 URL입니다.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    alt: {
+      control: { type: 'text' },
+      description: '이미지 대체 텍스트입니다.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    fallback: {
+      control: { type: 'text' },
+      description: '이미지가 없을 때 표시할 이니셜 텍스트입니다.',
+      table: {
+        type: { summary: 'string' },
       },
     },
   },
@@ -31,57 +65,87 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
+// 이미지가 있는 아바타
 export const WithImage: Story = {
-  name: '이미지 포함',
   args: {
-    src: 'https://www.news1.kr/_next/image?url=https%3A%2F%2Fi3n.news1.kr%2Fsystem%2Fphotos%2F2024%2F10%2F20%2F6937996%2Fhigh.jpg&w=1920&q=75',
+    src: 'https://i.pravatar.cc/150?img=32',
   },
-};
-
-export const WithFallbackText: Story = {
-  name: 'Fallback 텍스트',
-  args: {
-    fallback: 'JS',
+  parameters: {
+    docs: {
+      description: {
+        story: '프로필 이미지가 있는 경우입니다.',
+      },
+    },
   },
 };
 
-export const WithIconFallback: Story = {
-  name: 'Fallback 없음 (아이콘)',
+// Fallback 텍스트
+export const WithFallback: Story = {
   args: {
-    src: '',
-    fallback: '',
+    fallback: 'JH',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '이미지가 없고 fallback 텍스트(이니셜)만 표시하는 경우입니다.',
+      },
+    },
   },
 };
 
-export const WithIconLgFallback: Story = {
-  name: 'Fallback 없음 (lg 아이콘)',
-  args: {
-    src: '',
-    size: 'lg',
-    fallback: '',
+// 기본 아이콘 (src, fallback 모두 없음)
+export const WithIcon: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'src와 fallback 모두 없을 때 기본 프로필 아이콘이 표시됩니다.',
+      },
+    },
   },
 };
 
+// 작은 사이즈
 export const Small: Story = {
-  name: '작은 사이즈 (sm)',
   args: {
     size: 'sm',
-    fallback: 'S',
+    src: 'https://i.pravatar.cc/150?img=32',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'sm 사이즈 (3rem) 아바타입니다.',
+      },
+    },
   },
 };
 
+// 중간 사이즈
 export const Medium: Story = {
-  name: '중간 사이즈 (md)',
   args: {
     size: 'md',
-    fallback: 'MM',
+    src: 'https://i.pravatar.cc/150?img=32',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'md 사이즈 (3.6rem) 아바타입니다. 기본값입니다.',
+      },
+    },
   },
 };
 
+// 큰 사이즈
 export const Large: Story = {
-  name: '큰 사이즈 (lg)',
   args: {
     size: 'lg',
-    src: 'https://dimg.donga.com/wps/NEWS/IMAGE/2025/03/31/131318432.1.jpg',
+    src: 'https://i.pravatar.cc/150?img=32',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'lg 사이즈 (12.8rem) 아바타입니다.',
+      },
+    },
   },
 };

packages/bds-ui/src/components/avator/avatar.tsx

@@ -4,8 +4,8 @@ import * as styles from './avatar.css';
 
 interface AvatarProps {
   size: 'sm' | 'md' | 'lg';
-  src?: string; // 추후 api 연동시 Optional로 되어있는 것을 Required로 바꿀 생각입니다.
-  alt?: string; // 이것도
+  src?: string;
+  alt?: string;
   fallback?: string;
   className?: string;
 }
@@ -19,10 +19,7 @@ const Avatar = ({
   ...props
 }: AvatarProps) => {
   const renderFallback = !src && !fallback && (
-    <Icon
-      name={size === 'lg' ? 'profile_none' : 'profile_fill'}
-      className={styles.imgVariants()}
-    />
+    <Icon name="profile" className={styles.imgVariants()} />
   );
 
   return (

packages/bds-ui/src/icons/icon-list.ts

@@ -53,8 +53,7 @@ export const iconNames = [
   'more',
   'page_selected',
   'page_unselected',
-  'profile_fill',
-  'profile_none',
+  'profile',
   'recomment_line',
   'search',
   'send',