[#55] - Icon 공통 컴포넌트

src/common/components/icon/icon-map.ts

@@ -0,0 +1,10 @@
+const icons = import.meta.glob<{
+  default: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+}>('@assets/icons/*.svg', { query: '?react', eager: true });
+
+export const iconMap = Object.fromEntries(
+  Object.entries(icons).map(([path, { default: SvgComponent }]) => [
+    path.split('/').pop()?.replace('.svg', ''),
+    SvgComponent,
+  ]),
+) as Record<string, (props: React.SVGProps<SVGSVGElement>) => JSX.Element>;

src/common/components/icon/icon.tsx

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { iconMap } from './icon-map';
+import iconPalette from './iconPalette.json';
+
+type IconColor = keyof typeof iconPalette;
+
+interface IconProps {
+  name: string;
+  width?: number;
+  color?: IconColor;
+  customStyle?: ReturnType<typeof css>;
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
+}
+
+export default function Icon({ name, width, color, customStyle, onClick }: IconProps) {
+  const IconComponent = iconMap[name];
+
+  // 만약 width : width 로 그냥 넣어주게 되면 width를 설정하지 않을 경우
+  // undefined로 들어가서 기본으로 설정된 크기가 아닌 엄청 크게 보이는 문제가 발생해서
+  // width가 있는 경우에만 prop으로 넣는 방식을 채택했습니다.
+  // height같은 경우 viewBox 속성으로 인해 자동으로 비율이 조정되므로 undefined로 넣었습니다.
+  return (
+    <IconComponent
+      {...(width ? { width: width, height: undefined } : {})}
+      onClick={onClick}
+      css={[
+        css`
+          cursor: ${onClick ? 'pointer' : 'default'};
+
+          path {
+            fill: ${color ? iconPalette[color] : 'currentColor'};
+          }
+        `,
+        customStyle,
+      ]}
+    />
+  );
+}

src/common/components/icon/iconPalette.json

@@ -0,0 +1,16 @@
+{
+    "red": "#ff4d4f",
+    "blue": "#1890ff",
+    "green": "#52c41a",
+    "yellow": "#fadb14",
+    "orange": "#fa8c16",
+    "purple": "#722ed1",
+    "pink": "#eb2f96",
+    "teal": "#13c2c2",
+    "cyan": "#36cfc9",
+    "brown": "#a52a2a",
+    "gray": "#808080",
+    "black": "#000000",
+    "white": "#ffffff"
+  }
+

src/common/stories/icon.stories.tsx

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import Icon from '@/common/components/icon/icon';
+
+const meta = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    name: {
+      control: 'text',
+      description: '아이콘 이름',
+    },
+    width: {
+      control: { type: 'number', min: 1, max: 100, step: 1 },
+      description: '아이콘 크기 (width)',
+    },
+    color: {
+      control: 'select',
+      options: ['red', 'green', 'blue', 'black'],
+      description: '아이콘 색상',
+    },
+    customStyle: {
+      control: 'object',
+      description: 'Emotion 스타일 적용',
+    },
+    onClick: {
+      action: 'clicked',
+      description: '아이콘 클릭 이벤트',
+    },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: 'checkIcon',
+    width: 40,
+    color: 'black',
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    name: 'pin',
+    width: 18,
+    color: 'red',
+    customStyle: css`
+      transition:
+        transform 0.2s ease-in-out,
+        filter 0.2s ease-in-out;
+
+      &:hover {
+        transform: scale(1.2);
+        filter: brightness(1.2);
+      }
+    `,
+    onClick: () => console.log('Icon clicked!'),
+  },
+};

src/features/total-evaluation/components/improvement-title/improvement-title.tsx

@@ -1,4 +1,4 @@
-import CheckIcon from '@assets/icons/checkIcon.svg?react';
+import Icon from '@common/components/icon/icon';
 
 import * as styles from './improvement-title.styles';
 
@@ -9,7 +9,7 @@ interface ImprovementTitleProps {
 export default function ImprovementTitle({ improvementTitle }: ImprovementTitleProps) {
   return (
     <div css={styles.improvementTitleWrapper}>
-      <CheckIcon />
+      <Icon name="checkIcon" />
       <span css={styles.improvementTitle}>{improvementTitle}</span>
     </div>
   );

src/features/total-evaluation/components/logical-leap/logical-error.tsx

@@ -1,4 +1,4 @@
-import RedPin from '@assets/icons/redPin.svg?react';
+import Icon from '@/common/components/icon/icon';
 
 import * as styles from './logical-error.styles';
 
@@ -14,7 +14,7 @@ export default function LogicalError({ label, logicalErrorList }: LogicalErrorPr
       <div css={styles.logicalErrorTextWrapper}>
         <span css={styles.label}>
           {label}
-          <RedPin />
+          <Icon name="pin" />
         </span>
         <ul>
           {logicalErrorList.map((error) => (

src/features/total-evaluation/components/logical-leap/logical-improvement.tsx

@@ -1,4 +1,4 @@
-import GreenPin from '@assets/icons/greenPin.svg?react';
+import Icon from '@/common/components/icon/icon';
 
 import * as styles from './logical-improvement.styles';
 
@@ -14,7 +14,7 @@ export default function LogicalImprovement({ label, improvementText }: LogicalIm
       <div css={styles.logicalImprovementTextWrapper}>
         <span css={styles.label}>
           {label}
-          <GreenPin />
+          <Icon name="pin" color="green" />
         </span>
         <p css={styles.improvementText}>{improvementText}</p>
       </div>