Team-Timo · ehye1 · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026
diff --git a/apps/timo-web/.gitignore b/apps/timo-web/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#icons
+/public/sprite.svg
diff --git a/apps/timo-web/app/layout.tsx b/apps/timo-web/app/layout.tsx
@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 
 import type { Metadata } from "next";
 
+import { SvgSprite } from "@/components/SvgSprite";
 import { QueryProvider } from "@/providers/QueryProvider";
 
 const pretendard = localFont({
@@ -25,6 +26,7 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
     <html lang="en" className={pretendard.variable}>
       <body>
+        <SvgSprite />
         <QueryProvider>{children}</QueryProvider>
       </body>
     </html>

diff --git a/apps/timo-web/components/.gitkeep b/apps/timo-web/components/.gitkeep
diff --git a/apps/timo-web/components/SvgSprite.tsx b/apps/timo-web/components/SvgSprite.tsx
@@ -0,0 +1,22 @@
+import fs from "fs";
+import path from "path";
+
+const spritePath = path.resolve(process.cwd(), "public/sprite.svg");
+let cachedSprite: string | null | undefined;
+
+export const SvgSprite = () => {
+  if (cachedSprite === undefined) {
+    cachedSprite = fs.existsSync(spritePath)
+      ? fs.readFileSync(spritePath, "utf-8")
+      : null;
+  }
+
+  if (!cachedSprite) return null;
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: cachedSprite }}
+      style={{ display: "none" }}
+    />
+  );
+};
@@ -14,7 +14,11 @@
     "check-types": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes"
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes",
+    "icons:optimize": "svgo -f src/icons/source --config=./svgo.config.mjs --multipass",
+    "icons:sprite": "tsx src/icons/generate-sprite.ts",
+    "icons:names": "tsx src/icons/generate-icon-names.ts && prettier --write src/icons/iconNames.ts",
+    "icons": "pnpm icons:optimize && pnpm icons:sprite && pnpm icons:names"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
@@ -31,10 +35,14 @@
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
+    "@types/svg-sprite": "^0.0.39",
     "chromatic": "^17.7.2",
     "eslint": "^9.39.1",
     "storybook": "^8.6.14",
+    "svg-sprite": "^2.0.4",
+    "svgo": "^4.0.1",
     "tailwindcss": "^4.3.1",
+    "tsx": "^4.22.4",
     "typescript": "5.9.2"
   },
   "dependencies": {

@@ -0,0 +1,46 @@
+import type { IconName } from "./iconNames";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  name: IconName;
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  rotate?: 90 | 180 | 270;
+  ariaHidden?: boolean;
+}
+
+export const Icon = ({
+  name,
+  size,
+  width,
+  height,
+  className,
+  rotate,
+  ariaHidden = true,
+  ...rest
+}: IconProps) => {
+  const w = width ?? size ?? 20;
+  const h = height ?? size ?? 20;
+
+  const rotateClass =
+    rotate === 90
+      ? "rotate-90"
+      : rotate === 180
+        ? "rotate-180"
+        : rotate === 270
+          ? "rotate-[270deg]"
+          : "";
+
+  return (
+    <svg
+      width={typeof w === "number" ? `${w}px` : w}
+      height={typeof h === "number" ? `${h}px` : h}
+      className={`inline-block ${rotateClass} ${className ?? ""}`}
+      aria-hidden={ariaHidden}
+      {...rest}
+    >
+      <use href={`#icon-${name}`} />
+    </svg>
+  );
+};
@@ -0,0 +1,17 @@
+import fs from "fs";
+import path from "path";
+
+const sourceDir = path.resolve(process.cwd(), "src/icons/source");
+const outputFile = path.resolve(process.cwd(), "src/icons/iconNames.ts");
+
+const names = fs
+  .readdirSync(sourceDir)
+  .filter((f) => f.endsWith(".svg"))
+  .map((f) => path.basename(f, ".svg"))
+  .sort();
+
+const content = `// auto-generated
+export type IconName =\n  | ${names.map((n) => `'${n}'`).join("\n  | ")};\n`;
+
+fs.writeFileSync(outputFile, content);
+console.log("✅ iconNames.ts 생성 완료");
@@ -0,0 +1,45 @@
+import fs from "fs";
+import path from "path";
+
+import SVGSpriter from "svg-sprite";
+
+const sourceDir = path.resolve(process.cwd(), "src/icons/source");
+const outputDir = path.resolve(process.cwd(), "../../apps/timo-web/public");
+
+const spriter = new SVGSpriter({
+  dest: outputDir,
+  mode: {
+    symbol: {
+      dest: ".",
+      sprite: "sprite.svg",
+    },
+  },
+  shape: {
+    id: {
+      separator: "",
+      generator: (name: string) => `icon-${path.basename(name, ".svg")}`,
+    },
+  },
+});
+
+const files = fs.readdirSync(sourceDir).filter((f) => f.endsWith(".svg"));
+
+for (const file of files) {
+  const filePath = path.join(sourceDir, file);
+  spriter.add(filePath, file, fs.readFileSync(filePath, "utf-8"));
+}
+
+spriter.compile((error, result) => {
+  if (error) throw error;
+
+  for (const mode of Object.values(result)) {
+    for (const resource of Object.values(
+      mode as Record<string, { path: string; contents: Buffer }>,
+    )) {
+      fs.mkdirSync(path.dirname(resource.path), { recursive: true });
+      fs.writeFileSync(resource.path, resource.contents);
+    }
+  }
+
+  console.log("✅ sprite.svg 생성 완료");
+});
@@ -0,0 +1,2 @@
+// auto-generated
+export type IconName = never;
@@ -1 +1,2 @@
-export {};
+export { Icon } from "./Icon";
+export type { IconName } from "./iconNames";
@@ -0,0 +1,14 @@
+export default {
+  multipass: true,
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
+    },
+    "removeDimensions",
+  ],
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// auto-generated
		export type IconName = never;
Comment thread coderabbitai[bot] marked this conversation as resolved.