[CI] Turborepo 빌드 최적화 적용

.github/workflows/ci.yml

@@ -56,6 +56,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
 
       - uses: pnpm/action-setup@v4
 
@@ -67,5 +70,24 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Check affected packages
+        id: affected
+        env:
+          BASE_REF: ${{ github.base_ref }}
+        run: |
+          set +e
+          pnpm turbo query affected --base "origin/$BASE_REF" --head HEAD --exit-code
+          CODE=$?
+          set -e
+          if [ $CODE -eq 0 ]; then
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+          elif [ $CODE -eq 1 ]; then
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "turbo query failed with exit code $CODE"
+            exit $CODE
+          fi
+
       - name: Build
+        if: steps.affected.outputs.has_changes == 'true'
         run: pnpm build

apps/timo-web/providers/QueryProvider.tsx

@@ -1,10 +1,19 @@
 "use client";
 
 import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import dynamic from "next/dynamic";
 
 import { queryClient } from "@/api/query-client";
 
+const ReactQueryDevtools =
+  process.env.NODE_ENV === "development"
+    ? dynamic(() =>
+        import("@tanstack/react-query-devtools").then(
+          (m) => m.ReactQueryDevtools,
+        ),
+      )
+    : () => null;
+
 interface QueryProviderProps {
   children: React.ReactNode;
 }
@@ -13,9 +22,7 @@ export const QueryProvider = ({ children }: QueryProviderProps) => {
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      {process.env.NODE_ENV === "development" ? (
-        <ReactQueryDevtools initialIsOpen={false} />
-      ) : null}
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
 };

package.json

@@ -8,6 +8,7 @@
     "dev:web": "turbo run dev --filter=timo-web",
     "storybook": "pnpm --filter @repo/timo-design-system storybook",
     "build-storybook": "pnpm --filter @repo/timo-design-system build-storybook",
+    "build:storybook": "turbo run build:storybook",
     "chromatic": "pnpm --filter @repo/timo-design-system chromatic",
     "lint": "turbo run lint",
     "lint:web": "turbo run lint --filter=timo-web",

packages/timo-design-system/package.json

@@ -12,8 +12,8 @@
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes"
+    "build:storybook": "storybook build",
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes --build-script-name=build:storybook"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",

turbo.json

@@ -10,18 +10,26 @@
   ],
   "tasks": {
     "build": {
+      "description": "Next.js 앱 빌드 및 패키지 컴파일",
       "dependsOn": ["^build"],
-      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*", "!**/*.stories.{tsx,mdx}"],
       "outputs": [".next/**", "!.next/cache/**", "!.next/dev/**"],
       "passThroughEnv": ["SENTRY_AUTH_TOKEN"]
     },
+    "build:storybook": {
+      "description": "Storybook 정적 파일 빌드",
+      "outputs": ["storybook-static/**"]
+    },
     "lint": {
+      "description": "ESLint로 코드 스타일 및 오류 검사",
       "dependsOn": ["^lint"]
     },
     "check-types": {
+      "description": "TypeScript 타입 검사",
       "dependsOn": ["^check-types"]
     },
     "dev": {
+      "description": "개발 서버 실행",
       "cache": false,
       "persistent": true
     }