아이콘 아셋 추가 및 SVGR 설정

.storybook/preview.tsx

@@ -1,10 +1,8 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
 
-import { Pretendard } from "../src/app/fonts/index";
 import "../src/styles/globals.css";
 import "../src/styles/theme.css";
-import { cn } from "../src/utils/cn";
 
 const preview: Preview = {
   parameters: {

next.config.mjs

@@ -5,9 +5,37 @@ import { fileURLToPath } from "node:url";
 import createJiti from "jiti";
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
-// Import env here to validate during build. Using jiti we can import .ts files :)
+// 빌드 중에 검증을 위해 여기에서 env를 가져옵니다. jiti를 사용하여 .ts 파일을 가져올 수 있습니다 :)
 jiti("./src/env");
 
-const nextConfig = {};
+const nextConfig = {
+  webpack(config) {
+    // SVG 가져오기를 처리하는 기존 규칙을 가져옵니다.
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
+
+    config.module.rules.push(
+      // 기존 규칙을 다시 적용하지만, ?url로 끝나는 svg 가져오기만 해당합니다.
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // 다른 모든 *.svg 가져오기를 React 컴포넌트로 변환합니다.
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    );
+
+    // 이제 우리가 처리했으므로 *.svg를 무시하도록 파일 로더 규칙을 수정합니다.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+};
 
 export default nextConfig;

package.json

@@ -39,6 +39,7 @@
     "@storybook/nextjs": "^8.2.6",
     "@storybook/react": "^8.2.6",
     "@storybook/test": "^8.2.6",
+    "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/eslint-plugin-query": "^5.50.1",
     "@types/node": "^20",