일부 컴포넌트 구현 및 스토리북 추가

.gitignore

@@ -36,5 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 *storybook.log
+storybook-static
 
 .env.local
+

.storybook/main.ts

@@ -1,6 +1,17 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
+  staticDirs: [
+    "../public",
+    {
+      from: "../public/images",
+      to: "/public/images",
+    },
+    {
+      from: "../public/fonts",
+      to: "/public/fonts",
+    },
+  ],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
@@ -13,16 +24,28 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs",
     options: {},
   },
-  // TODO: 폰트가 먹여졌는지 의문
-  staticDirs: ["../public"],
   features: {
     experimentalRSC: true,
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",
   },
-  previewHead: (head) => `
-    ${head}'<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />'
-  `,
+  webpackFinal: async (config) => {
+    config.module?.rules?.forEach((rule) => {
+      if (
+        rule &&
+        typeof rule === "object" &&
+        rule.test instanceof RegExp &&
+        rule.test.test(".svg")
+      ) {
+        rule.exclude = /\.svg$/;
+      }
+    });
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -1,13 +1,16 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
 
-import { Pretendard } from "../src/app/fonts/index";
+import "../src/styles/reset.css";
 import "../src/styles/globals.css";
-import "../src/styles/theme.css";
 import { cn } from "../src/utils/cn";
+import { Pretendard } from "../src/app/fonts/index";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: "dark",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -16,7 +19,7 @@ const preview: Preview = {
     },
     decorators: [
       (Story) => (
-        <div>
+        <div className={cn(Pretendard.variable, "font-pretendard")}>
           <Story />
         </div>
       ),

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

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@radix-ui/react-navigation-menu": "^1.2.0",
-    "@radix-ui/themes": "^3.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
     "class-variance-authority": "^0.7.0",
@@ -39,7 +39,9 @@
     "@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",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/eslint-plugin-query": "^5.50.1",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -48,7 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.19",
-    "chromatic": "^11.5.6",
+    "chromatic": "^11.7.0",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.1.0",
     "eslint": "^8.57.0",