diff --git a/next.config.ts b/next.config.ts
index 8f341964..7469a059 100644
--- a/next.config.ts
+++ b/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,
},
},
],
diff --git a/src/app/(route)/list/_components/ListItem/ListItem.tsx b/src/app/(route)/list/_components/ListItem/ListItem.tsx
index 7839b023..0c9a4ba9 100644
--- a/src/app/(route)/list/_components/ListItem/ListItem.tsx
+++ b/src/app/(route)/list/_components/ListItem/ListItem.tsx
@@ -26,7 +26,7 @@ const ListItem = ({ img, title, description, id, linkState = "list" }: ListItemP
return (
{linkState === "list" && (
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fea..3e0b2eaa 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 144d5150..282c2f1b 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/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
= {
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;
-export const AllIcons: Story = {
+// 1) 기본 예시
+export const Default: Story = {
+ args: {
+ name: iconOptions[0],
+ size: 24,
+ title: "icon",
+ },
+};
+
+// 3) 아이콘 차트: 전체 아이콘 미리보기
+export const IconChart: Story = {
+ render: () => (
+
+
아이콘 차트
+
+ {iconOptions.map((iconName) => (
+
+
+ {iconName}
+
+ ))}
+
+
+ ),
+ parameters: {
+ layout: "fullscreen",
+ docs: {
+ description: {
+ story: "모든 아이콘을 그리드로 확인합니다.",
+ },
+ },
+ },
+};
+
+// 4) 색상/스타일 프리셋 예시
+export const ColorVariants: Story = {
render: () => (
-
- {iconOptions.map((iconName) => (
-
-
- {iconName}
-
- ))}
+
+
+
+ 기본
+
+
+
+ fill-none stroke-none
+
+
+
+ fill-blue-500 stroke-none
+
+
+
+ fill-none stroke-blue-500
+
+
+
+ stroke-blue-500 text-blue-500
+
),
};
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index e5e66efb..7f838e7a 100644
--- a/src/components/Icon/Icon.tsx
+++ b/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}
/>
);
diff --git a/tsconfig.json b/tsconfig.json
index 31534d20..c1334095 100644
--- a/tsconfig.json
+++ b/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"]
}