Feat/스토리북 아이콘 갤러리 작업

src/components/common/Avatar/index.tsx

@@ -62,7 +62,7 @@ const Avatar = ({ profileUrl, size = AVATAR_SIZE.LG }: IAvatar) => {
       <div
         className={cn('bg-surface-empty rounded-[50%] flex justify-center items-center', boxSize)}
       >
-        <Icon name='user_s' className={cn('stroke-icon-minimal', iconSize)} />
+        <Icon name='user_s' className={cn('text-icon-minimal', iconSize)} />
       </div>
     );
   }

src/components/common/Icon/Icon.stories.tsx

@@ -21,6 +21,6 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     name: 'xClose_s',
-    className: 'w-[100px] h-[100px] stroke-critical',
+    className: 'w-[100px] h-[100px] text-critical',
   },
 };

src/components/common/Icon/index.tsx

@@ -8,7 +8,7 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
   className?: string;
 }
 
-const Icon = ({ name, className, ...props }: IconProps) => {
+const Icon = ({ name, className = 'h-16 w-16 text-icon-sub', ...props }: IconProps) => {
   const IconComponent = iconTypes[name];
 
   return <IconComponent className={className} {...props} />;

src/components/common/Tag/Tag.stories.tsx

@@ -38,7 +38,7 @@ export const TagWithRightIcon: Story = {
     children: (
       <>
         <Tag.Label>전체</Tag.Label>
-        <Icon name='xClose_s' className='w-16 h-16 stroke-icon-sub' />
+        <Icon name='xClose_s' className='w-16 h-16 text-icon-sub' />
       </>
     ),
   },
@@ -51,7 +51,7 @@ export const TagWithLeftIcon: Story = {
     isButton: true,
     children: (
       <>
-        <Icon name='xClose_s' className='w-16 h-16 stroke-icon-sub' />
+        <Icon name='xClose_s' className='w-16 h-16 text-icon-sub' />
         <Tag.Label>전체</Tag.Label>
       </>
     ),
@@ -66,7 +66,7 @@ export const TagWithLongLabel: Story = {
     children: (
       <>
         <Tag.Label>긴태그긴태그긴태그긴태그긴태그</Tag.Label>
-        <Icon name='xClose_s' className='w-16 h-16 stroke-icon-sub' />
+        <Icon name='xClose_s' className='w-16 h-16 text-icon-sub' />
       </>
     ),
   },

src/stories/Colors.mdx

@@ -1,16 +1,24 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 import { colors } from 'styles/theme';
 
-<Meta title='Colors' />
+<Meta title='Common/Color/Colors' />
 
 <ColorPalette>
   {Object.keys(colors).map((category) => {
     const categoryValue = colors[category];
-    if (typeof categoryValue === 'object' && !Array.isArray(categoryValue) && categoryValue !== null) {
+    if (
+      typeof categoryValue === 'object' &&
+      !Array.isArray(categoryValue) &&
+      categoryValue !== null
+    ) {
       // 색상이 객체로 further nested된 경우
       return Object.keys(categoryValue).map((subCategory) => {
         const subCategoryValue = categoryValue[subCategory];
-        if (typeof subCategoryValue === 'object' && !Array.isArray(subCategoryValue) && subCategoryValue !== null) {
+        if (
+          typeof subCategoryValue === 'object' &&
+          !Array.isArray(subCategoryValue) &&
+          subCategoryValue !== null
+        ) {
           // 더욱 세부적인 nested colors 처리
           return (
             <ColorItem
@@ -34,7 +42,14 @@ import { colors } from 'styles/theme';
       });
     } else {
       // Single depth color 처리
-      return <ColorItem key={category} title={`theme.color.${category}`} subtitle={`${category}`} colors={{ [category]: categoryValue }} />;
+      return (
+        <ColorItem
+          key={category}
+          title={`theme.color.${category}`}
+          subtitle={`${category}`}
+          colors={{ [category]: categoryValue }}
+        />
+      );
     }
   })}
 </ColorPalette>

src/stories/IconGallery.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+import * as iconTypes from '../components/common/Icon/lib/index';
+import Icon from '../components/common/Icon';
+
+<Meta title='Common/Icon/Icons' />
+
+<h1>Icons</h1>
+<p>기본 사이즈 16 x 16 / 컬러 text-icon-sub</p>
+
+<br />
+<IconGallery>
+  {Object.keys(iconTypes).map((key) => (
+    <IconItem name={key}>
+      <Icon name={key} />
+    </IconItem>
+  ))}
+</IconGallery>