config: 스토리북 세팅

Co-Authored-By: 박유현 <[email protected]>

.storybook/main.ts

@@ -0,0 +1,65 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { join, dirname } from "path";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  // https://stackblitz.com/edit/sb-vanilla-extract-webpack?file=.storybook%2Fmain.ts
+  webpackFinal(config) {
+    // Add Vanilla-Extract and MiniCssExtract Plugins
+    config.plugins?.push(
+      new VanillaExtractPlugin(),
+      new MiniCssExtractPlugin(),
+    );
+
+    // Exclude vanilla extract files from regular css processing
+    config.module?.rules?.forEach((rule) => {
+      if (
+        typeof rule !== "string" &&
+        rule &&
+        rule.test instanceof RegExp &&
+        rule.test.test("test.css")
+      ) {
+        rule.exclude = /\.vanilla\.css$/i;
+      }
+    });
+
+    config.module?.rules?.push({
+      test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: require.resolve("css-loader"),
+          options: {
+            url: false, // Required as image imports should be handled via JS/TS import statements
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,44 @@
+import type { Preview } from "@storybook/react";
+
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+
+import "../src/styles/global.css";
+import "../src/styles/reset.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  // https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation
+  globalTypes: {
+    theme: {
+      defaultValue: "light",
+      toolbar: {
+        title: "Theme",
+        icon: "circlehollow",
+        items: ["light", "dark"],
+        dynamicTitle: true,
+      },
+    },
+  },
+};
+
+// https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemebydataattribute
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+    attributeName: "data-theme",
+  }),
+];
+
+export default preview;

README.md

@@ -1 +1,40 @@
-# design-system
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next.config.mjs

@@ -0,0 +1,10 @@
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default withVanillaExtract(nextConfig);