fix: chromait ci

.github/workflows/chromatic.yml

@@ -41,10 +41,35 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+        # ✅ [디버깅] 전체 파일 구조 확인 (node_modules, .git 제외)
+      - name: 📂 Debug - Show File Structure
+        run: |
+          # 1. tree 유틸리티 설치
+          sudo apt-get update && sudo apt-get install -y tree
+
+          echo "=========================================="
+          echo "📍 PROJECT ROOT TREE (node_modules 제외)"
+          echo "=========================================="
+          # -I 옵션으로 불필요한 폴더 제외하고 전체 구조 출력
+          tree -I 'node_modules|.git|dist|.nx'
+
+          echo " "
+          echo "=========================================="
+          echo "📍 APPS/CORE DETAILED CHECK"
+          echo "=========================================="
+          # 문제가 되는 apps/core 내부는 숨김 파일(.으로 시작)까지 포함해서 자세히 리스트 출력
+          ls -Rla apps/core
+
       # 5. Storybook 빌드 (단계 분리)
       # 이 단계에서 Storybook 정적 파일을 'dist/storybook/core' 경로에 생성합니다.
       - name: Build Storybook
-        run: pnpm nx run core:build-storybook --no-cloud
+        run: pnpm nx run core:build-storybook --no-cloud --stats-json
+
+      # ✅ [디버깅용] 빌드 결과물 확인 단계 추가
+      - name: Check build output
+        run: |
+          echo "--- Listing files in dist/storybook/core ---"
+          ls -R dist/storybook/core
 
       # 6. Chromatic에 배포 (action 대신 CLI 직접 실행)
       - name: Publish to Chromatic

.gitignore

@@ -56,6 +56,3 @@ out
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
 
-
-# Env
-.env

apps/core/.storybook/main.ts

@@ -13,14 +13,20 @@ const require = createRequire(import.meta.url);
 function getAbsolutePath(value: string): string {
   return dirname(require.resolve(`${value}/package.json`));
 }
-
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const config: StorybookConfig = {
-  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    path.resolve(__dirname, '..', 'components') + '/**/*.mdx',
+    path.resolve(__dirname, '..', 'components') +
+      '/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     // getAbsolutePath('@storybook/addon-essentials'),
     // getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
     '@storybook/addon-docs',
+    '@nx/storybook/preset',
   ],
   framework: {
     name: getAbsolutePath('@storybook/nextjs'),
@@ -30,6 +36,20 @@ const config: StorybookConfig = {
     defaultName: 'Documentation',
   },
   staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    // ✅ [핵심] Webpack이 모듈을 찾을 때 "프로젝트 루트"도 찾아보게 설정
+    if (config.resolve) {
+      config.resolve.modules = [
+        ...(config.resolve.modules || []),
+        // 현재 파일(.storybook/main.ts) 기준 3칸 위(Root)를 모듈 탐색 경로에 추가
+        path.resolve(dirname(fileURLToPath(import.meta.url)), '../../../'),
+      ];
+    }
+
+    // ... 기존 StyleX 관련 설정이 있다면 유지 ...
+
+    return config;
+  },
   babel: async (options: any) => {
     return {
       ...options,
@@ -51,7 +71,7 @@ const config: StorybookConfig = {
               // 현재 파일(.storybook/main.ts) 위치 기준으로 상위 폴더를 지정합니다.
               rootDir: path.resolve(
                 dirname(fileURLToPath(import.meta.url)),
-                '../'
+                '../../../'
               ),
             },
           },

apps/core/components/template/StoryTemplate.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react/dist';
+import StoryTemplate from './StoryTemplate';
+
+const meta: Meta<typeof StoryTemplate> = {
+  component: StoryTemplate,
+  // 앱 내부이므로 title에 앱 이름을 고정하거나 생략해도 됩니다.
+  title: 'ProTracker/StoryTemplate',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StoryTemplate>;
+
+export const Primary: Story = {
+  args: {},
+};

apps/core/components/template/StoryTemplate.tsx

@@ -0,0 +1,21 @@
+import * as stylex from '@stylexjs/stylex';
+import { tokens } from './tokens.stylex';
+const styles = stylex.create({
+  base: {
+    backgroundColor: tokens.primary,
+  },
+  large: {
+    width: '80px',
+  },
+});
+
+const StoryTemplate = ({ xstyle }: { xstyle?: stylex.StyleXStyles }) => {
+  return (
+    <>
+      <p className="">쉬바!</p>
+      <div {...stylex.props(styles.base, styles['large'])}>스토리 템플릿!</div>
+    </>
+  );
+};
+
+export default StoryTemplate;

apps/core/components/template/tokens.stylex.ts

@@ -0,0 +1,5 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const tokens = stylex.defineVars({
+  primary: '#123456',
+});

apps/core/project.json

@@ -46,13 +46,11 @@
       }
     },
     "build-storybook": {
-      "executor": "nx:run-commands",
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
       "options": {
-        "command": "node node_modules/storybook/dist/bin/dispatcher.js build -c apps/core/.storybook -o dist/storybook/core",
-        "cwd": ".",
-        "builder-options": {
-          "useSWC": false
-        }
+        "configDir": "apps/core/.storybook",
+        "outputDir": "dist/storybook/core"
       }
     },
     "storybook": {

debug-storybook.log

@@ -1,25 +1,26 @@
-[22:03:35.858] [INFO] storybook v10.1.4
-[22:03:37.615] [DEBUG] Getting package.json info for C:/Users/dltkd/PorTracker/PorTracker/package.json...
-[22:03:39.550] [DEBUG] Serving static files from apps/core/public at /
-[22:03:39.557] [INFO] Starting...
-[22:03:39.592] [WARN] No story files found for the specified pattern: apps\core\**\*.mdx
-[22:03:39.785] [DEBUG] Starting preview..
-[22:03:39.875] [INFO] Using implicit CSS loaders
-[22:03:40.745] [INFO] Using SWC as compiler
-[22:03:40.847] [INFO] Using default Webpack5 setup
-[22:03:53.136] [ERROR] Failed to build the preview
-[22:03:53.139] [WARN] Force closed preview build
-[22:03:53.140] [ERROR] SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
-Run Storybook with --debug-webpack for more information.
-    at starter (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/@storybook+builder-webpack5@10.1.4_@rspack+core@1.6.6_@swc+helpers@0.5.17__@swc+core@1.5.29_@_nhpdu6c4hvg76elowldl3an5ku/node_modules/@storybook/builder-webpack5/dist/index.js:799:11)
-    at starter.next (<anonymous>)
-    at Module.start (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/@storybook+builder-webpack5@10.1.4_@rspack+core@1.6.6_@swc+helpers@0.5.17__@swc+core@1.5.29_@_nhpdu6c4hvg76elowldl3an5ku/node_modules/@storybook/builder-webpack5/dist/index.js:857:34)
+[19:29:57.592] [INFO] storybook v10.1.4
+[19:29:59.714] [DEBUG] Getting package.json info for C:/Users/dltkd/PorTracker/PorTracker/package.json...
+[19:30:01.718] [DEBUG] Serving static files from apps/core/public at /
+[19:30:01.723] [INFO] Starting...
+[19:30:01.756] [WARN] No story files found for the specified pattern: apps\core\components\**\*.mdx
+[19:30:01.946] [DEBUG] Starting preview..
+[19:30:02.026] [INFO] Addon-docs: using MDX3
+[19:30:02.107] [INFO] Using implicit CSS loaders
+[19:30:02.915] [INFO] Using SWC as compiler
+[19:30:03.007] [INFO] Using default Webpack5 setup
+[19:30:12.188] [ERROR] Error: listen EFAULT: bad address in system call argument :::6006
+    at Server.setupListenHandle [as _listen2] (node:net:1940:16)
+    at listenInCluster (node:net:1997:12)
+    at Server.listen (node:net:2102:7)
+    at _Polka.listen (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:6100:110)
+    at file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:7190:39
+    at new Promise (<anonymous>)
+    at storybookDevServer (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:7189:19)
     at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
-    at async storybookDevServer (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:7180:82)
     at async buildOrThrow (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:5556:12)
     at async buildDevStandalone (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/core-server/index.js:7582:66)
     at async withTelemetry (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/_node-chunks/chunk-6KX7N5UF.js:205:12)
     at async dev (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/bin/core.js:2734:3)
     at async _Command.<anonymous> (file:///C:/Users/dltkd/PorTracker/PorTracker/node_modules/.pnpm/storybook@10.1.4_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/bin/core.js:2801:92)
-[22:03:53.143] [WARN] Broken build, fix the error above.
+[19:30:12.195] [WARN] Broken build, fix the error above.
 You may need to refresh the browser.