배포 - Nextjs 마이그레이션

.github/workflows/autoSync.yml

@@ -5,28 +5,14 @@ on:
     branches: [main]
 
 jobs:
-  build:
+  sync:
     runs-on: ubuntu-latest
-    container: pandoc/latex
     steps:
-      - uses: actions/checkout@v2
-      - name: Install mustache (to update the date)
-        run: apk add ruby && gem install mustache
-      - name: creates output
-        run: sh ./build.sh
-      - name: Pushes to another repository
-        if: github.event_name == 'push'
-        id: push_directory
-        uses: cpina/github-action-push-to-another-repository@main
-        env:
-          API_TOKEN_GITHUB: ${{ secrets.AUTO_SYNC }}
+      - uses: actions/checkout@v4
         with:
-          source-directory: 'output'
-          destination-github-username: constantly-dev
-          destination-repository-name: 35-APPJAM-WEB-DASH
-          user-email: ${{ secrets.EMAIL }}
-          commit-message: ${{ github.event.commits[0].message }}
-          target-branch: main
+          fetch-depth: 0
 
-      - name: Test get variable exported by push-to-another-repository
-        run: echo $DESTINATION_CLONED_DIRECTORY
+      - name: Push to fork
+        run: |
+          git remote add fork https://x-access-token:${{ secrets.AUTO_SYNK }}@github.com/hongmac/dash-client.git
+          git push fork main

.gitignore

@@ -29,3 +29,6 @@ dist-ssr
 storybook-static/
 # Sentry Config File
 .env.sentry-build-plugin
+
+.next
+next-env.d.ts

.storybook/main.ts

@@ -1,16 +1,16 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
+  addons: ['@chromatic-com/storybook', '@storybook/addon-a11y', '@storybook/addon-docs'],
+  framework: '@storybook/nextjs-vite',
+  staticDirs: ['../public'],
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), ...vanillaExtractPlugin({ identifiers: 'debug' })],
+    };
   },
 };
 export default config;

.storybook/next-navigation-mock.ts

@@ -0,0 +1,62 @@
+const noop = () => {};
+
+const mockRouter = {
+  push: noop,
+  replace: noop,
+  refresh: noop,
+  back: noop,
+  forward: noop,
+  prefetch: noop,
+};
+
+export function useRouter() {
+  return mockRouter;
+}
+
+export function usePathname(): string {
+  return '/';
+}
+
+export function useSearchParams(): ReadonlyURLSearchParams | null {
+  return typeof window !== 'undefined' ? new ReadonlyURLSearchParams(window.location.search) : null;
+}
+
+class ReadonlyURLSearchParams {
+  private params: URLSearchParams;
+
+  constructor(init?: string | URLSearchParams) {
+    this.params = new URLSearchParams(init);
+  }
+
+  get(name: string): string | null {
+    return this.params.get(name);
+  }
+
+  getAll(name: string): string[] {
+    return this.params.getAll(name);
+  }
+
+  has(name: string): boolean {
+    return this.params.has(name);
+  }
+
+  keys(): IterableIterator<string> {
+    return this.params.keys();
+  }
+
+  values(): IterableIterator<string> {
+    return this.params.values();
+  }
+
+  entries(): IterableIterator<[string, string]> {
+    return this.params.entries();
+  }
+
+  forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void): void {
+    this.params.forEach(callbackfn);
+  }
+
+  toString(): string {
+    return this.params.toString();
+  }
+}

.storybook/preview.tsx

@@ -1,12 +1,15 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/nextjs-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import ModalProvider from '../src/shared/components/ModalProvider/ModalProvier';
+import ModalProvider from '../src/common/components/Modal/ModalProvider';
 import '../src/shared/styles/global.css';
 import '../src/shared/styles/reset.css';
 
 const preview: Preview = {
   parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

README.md

@@ -335,6 +335,6 @@ const InfoText = () => {
 
 - button 태그에 **`type`**은 명시적으로 작성
 - 비교 연산자는 **`===`**와 **`!==`**만을 사용
-- axios 안에서 **`then/catch`** 대신 **`async/await`** 지향
+- API 호출 시 **`then/catch`** 대신 **`async/await`** 지향
 
     </details>

custom.d.ts

@@ -4,3 +4,16 @@ declare module '*.svg?react' {
   const src: string;
   export default src;
 }
+
+/** vanilla-extract *.css.ts 모듈이 Next.js PagesPageConfig 검사에 걸리지 않도록 default 보강 */
+declare module '*.css' {
+  import type { ComponentType } from 'react';
+  const styles: { default: ComponentType<any>; [key: string]: string | ComponentType<any> };
+  export = styles;
+}
+
+declare module '*.css.js' {
+  import type { ComponentType } from 'react';
+  const styles: { default: ComponentType<any>; [key: string]: string | ComponentType<any> };
+  export = styles;
+}

next.config.mjs

@@ -0,0 +1,30 @@
+import bundleAnalyzer from '@next/bundle-analyzer';
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+const withVanillaExtract = createVanillaExtractPlugin({
+  identifiers: 'debug', // 기존 Vite 설정과 동일 (short | debug | custom)
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // output: 'export', // Single-Page Application (SPA) 출력.
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  // 상위 폴더 lockfile과 구분해 이 프로젝트를 루트로 사용 (경고 제거)
+  outputFileTracingRoot: __dirname,
+  // src/pages는 SPA(react-router) 컴포넌트이므로 Pages Router로 검증하지 않도록 비활성화
+  typedRoutes: false,
+  eslint: {
+    // 마이그레이션 단계에서 기존 a11y/훅 규칙으로 빌드 실패하지 않도록 무시 (추후 규칙 수정 후 제거 권장)
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default withBundleAnalyzer(withVanillaExtract(nextConfig));

package.json

@@ -4,10 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
-    "build": "tsc -b && vite build",
+    "dev": "next dev",
+    "analyze": "ANALYZE=true next build",
+    "build": "next build",
+    "start": "next build && next start -p 8080",
     "lint": "eslint .",
-    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "svgr": "npx @svgr/cli -d src/shared/assets/svg --no-prettier --ignore-existing --typescript --no-dimensions --no-index --jsx-runtime automatic public/svg"
@@ -23,33 +24,31 @@
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
-    "@vanilla-extract/vite-plugin": "^4.0.19",
-    "@vitejs/plugin-react": "^4.3.4",
-    "axios": "^1.7.9",
     "clsx": "^2.1.1",
+    "ky": "^1.14.3",
     "motion": "^12.23.12",
+    "next": "15.5.7",
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.56.1",
     "react-hot-toast": "^2.5.1",
     "react-image-file-resizer": "^0.4.8",
-    "react-router-dom": "^7.1.1",
     "swiper": "^11.2.1",
-    "vite-tsconfig-paths": "^5.1.4",
     "zod": "^3.24.3",
     "zustand": "^5.0.7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
+    "@chromatic-com/storybook": "^5.0.0",
     "@eslint/js": "^9.17.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
+    "@next/bundle-analyzer": "^16.1.6",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
     "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/nextjs-vite": "^10.2.7",
+    "@storybook/react": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
     "@storybook/test": "^8.4.7",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/dom": "^10.4.0",
@@ -60,7 +59,9 @@
     "@types/swiper": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vanilla-extract/next-plugin": "^2.4.10",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "chromatic": "^11.28.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
@@ -73,13 +74,11 @@
     "globals": "^15.14.0",
     "install": "^0.13.0",
     "msw": "^2.10.4",
-    "storybook": "^8.4.7",
+    "storybook": "^10.2.7",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.28.0",
-    "vite": "^6.0.5",
-    "vite-bundle-visualizer": "^1.2.1",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "eslintConfig": {
     "extends": [