[#1] 디자인 시스템 공통 컴포넌트에 1차 적용

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,6 +1,15 @@
 import type { Preview } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "../src/_app/styles/globals.css";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false, // 테스트 환경이므로 재시도 방지
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -21,6 +30,14 @@ const preview: Preview = {
       test: "todo",
     },
   },
+
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
 };
 
 export default preview;

app/layout.tsx

@@ -1,8 +1,9 @@
 import QueryProviders from "@/app/_providers/query-providers";
+import { ResponsiveLayout } from "@/src/shared/layout/responsive-layout";
+import Toast from "@/src/shared/ui/toast";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "../src/_app/styles/globals.css";
-import { ResponsiveLayout } from "@/src/shared/layout/responsive-layout";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -31,6 +32,7 @@ export default function RootLayout({
       >
         <QueryProviders>
           <ResponsiveLayout>{children}</ResponsiveLayout>
+          <Toast />
         </QueryProviders>
       </body>
     </html>

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  turbopack: {},
   async rewrites() {
     return [
       {
@@ -9,5 +10,14 @@ const nextConfig: NextConfig = {
       },
     ];
   },
+
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
 };
+
 export default nextConfig;