next.config.ts SVG 옵션 변경

next.config.ts

@@ -14,14 +14,17 @@ const nextConfig: NextConfig = {
           loader: require.resolve("@svgr/webpack"),
           options: {
             svgo: true,
-            titleProp: true,
             svgoConfig: {
               plugins: [
-                { name: "removeViewBox", active: false },
-                { name: "removeDimensions", active: true },
-                // { name: "removeAttrs", params: { attrs: "(fill|stroke)" } },
+                {
+                  name: "removeAttrs",
+                  params: {
+                    attrs: "(fill|stroke)",
+                  },
+                },
               ],
             },
+            titleProp: true,
           },
         },
       ],

src/app/(route)/list/_components/ListItem/ListItem.tsx

@@ -26,7 +26,7 @@ const ListItem = ({ img, title, description, id, linkState = "list" }: ListItemP
   return (
     <Link
       href={linkState === "list" ? `/list/${id}` : `/notice/${id}`}
-      className="duration-130 border-b-flatGray-50 flex w-full cursor-pointer items-center gap-[14px] border-b px-[20px] py-[30px] transition-colors hover:bg-[#F9F9F9]"
+      className="duration-130 flex w-full cursor-pointer items-center gap-[14px] border-b border-b-flatGray-50 px-[20px] py-[30px] transition-colors hover:bg-[#F9F9F9]"
     >
       <div className="min-w-0 flex-1">
         {linkState === "list" && (

src/components/Icon/Icon.stories.tsx

@@ -1,3 +1,4 @@
+// src/components/Icon/Icon.stories.tsx
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import Icon from "./Icon";
 import * as Icons from "./index";
@@ -8,32 +9,106 @@ const meta: Meta<typeof Icon> = {
   title: "아이콘/Icon",
   component: Icon,
   tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
   argTypes: {
     name: {
       control: "select",
       options: iconOptions,
+      description: "표시할 아이콘 이름",
+    },
+    size: {
+      control: { type: "number" },
+      description: "아이콘 크기(px)",
+      defaultValue: 24,
+    },
+    title: {
+      control: "text",
+      description: "접근성용 레이블",
+    },
+    className: {
+      control: "text",
+      description: "추가 CSS 클래스(Tailwind 포함)",
+    },
+    // 필요 시 직접 색상 지정도 가능
+    fill: {
+      control: "color",
+      description: "SVG fill 색상(hex)",
+      table: { category: "SVG Props" },
+    },
+    stroke: {
+      control: "color",
+      description: "SVG stroke 색상(hex)",
+      table: { category: "SVG Props" },
     },
-    size: { control: { type: "number" } },
-    className: { control: "text" },
-    title: { control: "text" },
   },
 };
 export default meta;
 
 type Story = StoryObj<typeof Icon>;
 
-export const AllIcons: Story = {
+// 1) 기본 예시
+export const Default: Story = {
+  args: {
+    name: iconOptions[0],
+    size: 24,
+    title: "icon",
+  },
+};
+
+// 3) 아이콘 차트: 전체 아이콘 미리보기
+export const IconChart: Story = {
+  render: () => (
+    <div className="p-4">
+      <h3 className="mb-4 text-center text-xl font-bold">아이콘 차트</h3>
+      <div className="mx-auto grid max-w-6xl grid-cols-6 gap-4">
+        {iconOptions.map((iconName) => (
+          <div
+            key={iconName}
+            className="flex flex-col items-center rounded-lg border border-gray-200 p-3 transition-shadow hover:shadow-md"
+          >
+            <Icon name={iconName} size={24} className="mb-2" />
+            <span className="break-words text-center text-xs text-gray-600">{iconName}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story: "모든 아이콘을 그리드로 확인합니다.",
+      },
+    },
+  },
+};
+
+// 4) 색상/스타일 프리셋 예시
+export const ColorVariants: Story = {
   render: () => (
-    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
-      {iconOptions.map((iconName) => (
-        <div
-          key={iconName}
-          style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
-        >
-          <Icon name={iconName} size={24} />
-          <span style={{ fontSize: "12px" }}>{iconName}</span>
-        </div>
-      ))}
+    <div className="grid grid-cols-5 gap-6">
+      <div>
+        <Icon name="EyeOpen" size={30} />
+        <span>기본</span>
+      </div>
+      <div>
+        <Icon name="EyeOpen" size={30} className="fill-none stroke-none" />
+        <span>fill-none stroke-none</span>
+      </div>
+      <div>
+        <Icon name="EyeOpen" size={30} className="fill-blue-500 stroke-none" />
+        <span>fill-blue-500 stroke-none</span>
+      </div>
+      <div>
+        <Icon name="EyeOpen" size={30} className="fill-none stroke-blue-500" />
+        <span>fill-none stroke-blue-500</span>
+      </div>
+      <div>
+        <Icon name="EyeOpen" size={30} className="stroke-blue-500 text-blue-500" />
+        <span>stroke-blue-500 text-blue-500</span>
+      </div>
     </div>
   ),
 };

src/components/Icon/Icon.tsx

@@ -37,7 +37,9 @@ export default function Icon({ name, size = 24, title, ...props }: Props) {
       width={size}
       height={size}
       aria-label={title}
-      aria-hidden={title ? "false" : "true"}
+      aria-hidden={title ? false : true}
+      fill="currentColor"
+      stroke="currentColor"
       {...props}
     />
   );

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["svgr.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }