프론트엔드 통합 CI 파일 설정

.github/workflows/fe-ci.yml

@@ -0,0 +1,121 @@
+name: FRONTEND-CI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - dev
+      - main
+    paths:
+      - 'src/frontend/**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  changes:
+    if: ${{ github.actor != 'l10nbot' }} # Avoid running for 'l10nbot'
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - uses: actions/cache@v4
+        id: cache
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: |
+          cd src/frontend
+          pnpm install --strict-peer-dependencies=false --frozen-lockfile
+          pnpm add turbo --save-dev -w
+
+  type-check:
+    needs: [changes]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Typescript Check
+        run: |
+          cd src/frontend
+          pnpm install
+          pnpm typescript
+        env:
+          NODE_OPTIONS: --max-old-space-size=4096
+
+  lint:
+    needs: [changes]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Prettier check
+        run: |
+          cd src/frontend
+          pnpm install
+          pnpm format --check
+
+      - name: Lint
+        run: |
+          cd src/frontend  
+          pnpm lint
+
+  build:
+    needs: [changes, lint, type-check]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Build project
+        run: |
+          cd src/frontend
+          pnpm install
+          pnpm build
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+
+      - name: Build Storybook
+        run: |
+          cd src/frontend
+          pnpm install
+          pnpm build-storybook
+
+  required:
+    needs: [changes, lint, type-check, build]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1

src/frontend/.eslintignore

@@ -0,0 +1,47 @@
+# Node modules 디렉토리 제외
+node_modules/
+
+# 빌드 결과물 제외
+dist/
+build/
+
+# 환경설정 파일 제외
+package.json
+turbo.json
+.eslintrc.json
+
+# 로그 파일
+npm-debug.log
+
+# 프로젝트 루트에서 제외된 다른 파일들
+public/
+
+# 기타 설정 파일 제외 (필요시)
+*.config.js
+*.config.cjs
+*.config.mjs
+
+# GitHub 워크플로우 및 VSCode 설정 파일 제외
+.github/
+.vscode/
+.DS_Store
+.idea/
+
+# Jest 관련 파일 제외 (필요시)
+jest.config.js
+jest.setup.js
+
+# TurboRepo 캐시 제외
+.turbo/
+
+# ESLint 설정 파일 제외
+.eslintrc.json
+.eslintignore
+
+# 압축된 자바스크립트 및 CSS 파일 제외
+*.min.js
+*.min.css
+
+# 포맷팅을 제외할 파일들
+.prettierrc
+storybook-static

src/frontend/.eslintrc.js

@@ -1,10 +1,9 @@
 // This configuration only applies to the package manager root.
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  ignorePatterns: ["apps/**", "packages/**"],
-  extends: ["@workspace/eslint-config/library.js"],
-  parser: "@typescript-eslint/parser",
+  ignorePatterns: ['apps/**', 'packages/**'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     project: true,
   },
-}
+};

src/frontend/.gitignore

@@ -36,3 +36,4 @@ npm-debug.log*
 *.pem
 
 *storybook.log
+*storybook-static

src/frontend/.prettierignore

@@ -0,0 +1,49 @@
+# Node modules 디렉토리 제외
+node_modules/
+
+# 빌드 결과물 제외
+dist/
+build/
+
+# 환경설정 파일 제외
+package.json
+turbo.json
+.eslintrc.json
+
+# 로그 파일
+npm-debug.log
+
+# 프로젝트 루트에서 제외된 다른 파일들
+public/
+
+# 기타 설정 파일 제외 (필요시)
+*.config.js
+*.config.cjs
+*.config.mjs
+
+# GitHub 워크플로우 및 VSCode 설정 파일 제외
+.github/
+.vscode/
+.DS_Store
+.idea/
+
+# Jest 관련 파일 제외 (필요시)
+jest.config.js
+jest.setup.js
+
+# TurboRepo 캐시 제외
+.turbo/
+
+# ESLint 설정 파일 제외
+.eslintrc.json
+.eslintignore
+
+# 압축된 자바스크립트 및 CSS 파일 제외
+*.min.js
+*.min.css
+
+# 포맷팅을 제외할 파일들
+.prettierrc
+storybook-static
+
+README.md

src/frontend/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 180,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "singleAttributePerLine": true
+}

src/frontend/README.md

@@ -27,5 +27,5 @@ Your `tailwind.config.ts` and `globals.css` are already set up to use the compon
 To use the components in your app, import them from the `ui` package.
 
 ```tsx
-import { Button } from "@workspace/ui/components/ui/button"
+import { Button } from '@workspace/ui/components/ui/button';
 ```

src/frontend/apps/web/app/layout.tsx

@@ -18,10 +18,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased `}
-      >
+    <html
+      lang="en"
+      suppressHydrationWarning
+    >
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased `}>
         <Providers>{children}</Providers>
       </body>
     </html>

src/frontend/apps/web/src/shared/components/react-query/RQProvider.tsx

@@ -20,15 +20,13 @@ function RQProvider({ children }: Props) {
           retry: false,
         },
       },
-    })
+    }),
   );
 
   return (
     <QueryClientProvider client={client}>
       {children}
-      <ReactQueryDevtools
-        initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'}
-      />
+      <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} />
     </QueryClientProvider>
   );
 }

src/frontend/apps/web/tailwind.config.ts

@@ -1 +1 @@
-export * from "@workspace/ui/tailwind.config";
+export * from '@workspace/ui/tailwind.config';

src/frontend/dangerfile.ts

@@ -0,0 +1,19 @@
+import { danger, fail, warn, message } from 'danger';
+
+// PR에서 변경된 파일 목록 가져오기
+const changedFiles = danger.git.modified_files;
+
+// 예시: 변경된 파일에 대해 경고 추가
+if (changedFiles.some((file) => file.includes('src/frontend'))) {
+  warn('Frontend files were modified. Please ensure that UI tests are run.');
+}
+
+// 예시: 특정 파일이 포함된 경우 실패를 표시
+if (changedFiles.some((file) => file.includes('README.md'))) {
+  fail('The README.md file was modified. Please check for outdated documentation.');
+}
+
+// 예시: 특정 파일 변경을 알림으로 표시
+if (changedFiles.length === 0) {
+  message('No files were modified in this PR.');
+}

src/frontend/package.json

@@ -8,11 +8,14 @@
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "storybook": "pnpm --filter @workspace/ui run storybook",
-    "build-storybook": "pnpm --filter @workspace/ui run build-storybook"
+    "build-storybook": "pnpm --filter @workspace/ui run build-storybook",
+    "danger": "danger ci --config tsconfig.danger.json",
+    "typescript": "tsc --noEmit"
   },
   "devDependencies": {
     "@workspace/eslint-config": "workspace:*",
     "@workspace/typescript-config": "workspace:*",
+    "danger": "^12.3.3",
     "prettier": "^3.4.2",
     "turbo": "^2.3.3",
     "typescript": "5.7.3"

src/frontend/packages/eslint-config/next.js

@@ -1,12 +1,12 @@
-import js from "@eslint/js"
-import pluginNext from "@next/eslint-plugin-next"
-import eslintConfigPrettier from "eslint-config-prettier"
-import pluginReact from "eslint-plugin-react"
-import pluginReactHooks from "eslint-plugin-react-hooks"
-import globals from "globals"
-import tseslint from "typescript-eslint"
+import js from '@eslint/js';
+import pluginNext from '@next/eslint-plugin-next';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
-import { config as baseConfig } from "./base.js"
+import { config as baseConfig } from './base.js';
 
 /**
  * A custom ESLint configuration for libraries that use Next.js.
@@ -29,23 +29,25 @@ export const nextJsConfig = [
   },
   {
     plugins: {
-      "@next/next": pluginNext,
+      '@next/next': pluginNext,
     },
     rules: {
       ...pluginNext.configs.recommended.rules,
-      ...pluginNext.configs["core-web-vitals"].rules,
+      ...pluginNext.configs['core-web-vitals'].rules,
     },
   },
   {
     plugins: {
-      "react-hooks": pluginReactHooks,
+      'react-hooks': pluginReactHooks,
     },
-    settings: { react: { version: "detect" } },
+    settings: { react: { version: 'detect' } },
     rules: {
       ...pluginReactHooks.configs.recommended.rules,
       // React scope no longer necessary with new JSX transform.
-      "react/react-in-jsx-scope": "off",
-      "react/prop-types": "off",
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
     },
   },
-]
+];

src/frontend/packages/eslint-config/package.json

@@ -12,7 +12,7 @@
     "@next/eslint-plugin-next": "^15.1.0",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
-    "eslint": "^9.15.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.37.2",