Merge branch 'main' into 26-feat/모달-컴포넌트-제작

Author: KyeongJooni

.github/workflows/pr-check.yml

@@ -75,7 +75,7 @@ jobs:
 
       - name: Build size check
         run: |
-          BUILD_SIZE_KB=$(du -sk dist | cut -f1)
+          BUILD_SIZE_KB=$(du -sk build/client | cut -f1)
           BUILD_SIZE_MB=$((BUILD_SIZE_KB / 1024))
           echo "Build size: ${BUILD_SIZE_MB}MB"
 
@@ -93,7 +93,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: build-test-files
-          path: dist/
+          path: build/client/
           retention-days: 1
 
       - name: Comment build results on PR
@@ -148,10 +148,10 @@ jobs:
 
               // 빌드 크기 정보
               try {
-                const stats = fs.statSync('dist');
+                const stats = fs.statSync('build/client');
                 if (stats.isDirectory()) {
                   const { execSync } = require('child_process');
-                  const sizeKB = execSync('du -sk dist | cut -f1', { encoding: 'utf8' }).trim();
+                  const sizeKB = execSync('du -sk build/client | cut -f1', { encoding: 'utf8' }).trim();
                   const sizeMB = Math.round(parseInt(sizeKB) / 1024);
 
                   if (sizeMB > 10) {

.gitignore

@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
+build
 dist-ssr
 *.local
 .react-router
@@ -38,3 +38,7 @@ storybook-static
 # Yarn
 .yarn/cache
 .yarn/install-state.gz
+!.yarn/releases
+
+# Vercel
+.vercel

.yarn/releases/yarn-4.10.3.cjs

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

.yarnrc.yml

@@ -5,8 +5,8 @@
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "dev": "react-router dev",
+    "build": "react-router build",
     "lint": "eslint .",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
@@ -23,10 +23,12 @@
     "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
+    "@vercel/react-router": "^1.2.4",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "es-toolkit": "^1.43.0",
+    "isbot": "^5.1.32",
     "pretendard": "^1.3.9",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

package.json

@@ -1,7 +1,8 @@
+import { vercelPreset } from '@vercel/react-router/vite';
 import type { Config } from '@react-router/dev/config';
 
 export default {
   appDirectory: 'src/app',
-  buildDirectory: 'dist',
   ssr: false,
+  presets: [vercelPreset()],
 } satisfies Config;

react-router.config.ts

@@ -1,37 +1,12 @@
-import { PassThrough } from 'node:stream';
-import { createReadableStreamFromReadable } from '@react-router/node';
-import { renderToPipeableStream } from 'react-dom/server';
-import { ServerRouter, type EntryContext } from 'react-router';
+import { handleRequest } from '@vercel/react-router/entry.server';
+import type { AppLoadContext, EntryContext } from 'react-router';
 
-export default function handleRequest(
+export default async function handleServerRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  routerContext: EntryContext
-) {
-  return new Promise((resolve, reject) => {
-    const { pipe } = renderToPipeableStream(
-      <ServerRouter context={routerContext} url={request.url} />,
-      {
-        onShellReady() {
-          responseHeaders.set('Content-Type', 'text/html');
-
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
-
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            })
-          );
-
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-      }
-    );
-  });
+  routerContext: EntryContext,
+  loadContext?: AppLoadContext
+): Promise<Response> {
+  return handleRequest(request, responseStatusCode, responseHeaders, routerContext, loadContext);
 }