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"] }