Setting(project): GitHub Actions CI (lint/build) 설정 (#13)

constantly-dev · web-flow · commit 5dc8aebd2725 · 2025-08-21T01:29:15.000+09:00
* setting: ci workflow 작성

* setting: 추적 branch에 develop도 추가

* fix: extension에 eslint 의존성 추가 및 config 파일 추가

* fix: eslint config import bug fix

* setting: design-system vite config 파일 추가

* chore: add design-system dev-dependency

* setting: app css에 tailwind config &amp; styles css 파일 추가

* chore: 불필요한 index.css 파일 삭제

* fix: design-system styles css 파일 경로 수정

* fix: 잘못된 css 파일 import 경로 수정

* setting: extension react ver 19로 변경

* fix: monorepo lib 버전 일치

* fix: 중복되는 @vitejs/plugin-react 의존성 제거
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,52 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Extract Node.js version from package.json
+        id: get_node_version
+        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.get_node_version.outputs.version }}
+
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v4
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Run ESLint
+        run: pnpm run lint
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Extract Node.js version from package.json
+        id: get_node_version
+        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.get_node_version.outputs.version }}
+
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v4
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build
diff --git a/apps/client/src/App.css b/apps/client/src/App.css
@@ -1 +1,2 @@
 @import '@pinback/tailwind-config/shared-styles.css';
+@import '@pinback/design-system/styles';
diff --git a/apps/extension/eslint.config.js b/apps/extension/eslint.config.js
@@ -0,0 +1,5 @@
+import config from '@pinback/eslint-config/react-internal';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+/** @type {import("eslint").Linter.Config} */
+export default [...config, reactRefresh.configs.vite];
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -13,22 +13,27 @@
   "dependencies": {
     "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@tanstack/react-query": "^5.85.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.2.0",
+    "@eslint/js": "^9.33.0",
+    "@pinback/design-system": "workspace:*",
+    "@pinback/eslint-config": "workspace:*",
+    "@pinback/tailwind-config": "workspace:*",
+    "@pinback/typescript-config": "workspace:*",
     "@tailwindcss/vite": "^4.1.12",
     "@types/chrome": "^0.0.273",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.9.0",
+    "eslint": "^9.33.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.35.0",
-    "postcss": "^8.5.6",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^4.1.12",
diff --git a/apps/extension/src/App.css b/apps/extension/src/App.css
@@ -0,0 +1,2 @@
+@import '@pinback/tailwind-config/shared-styles.css';
+@import '@pinback/design-system/styles';
diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import './index.css' 
+import './App.css';
+
 const App = () => {
   return (
     <div className="App">
-      <div className="h-[50rem] w-[26rem] bg-blue-500 text-white flex items-center justify-center text-2xl">
-       자 핀백 앱잼 시작~오늘은 7월 7일임~
+      <div className="flex h-[50rem] w-[26rem] items-center justify-center bg-blue-500 text-2xl text-white">
+        자 핀백 앱잼 시작~오늘은 7월 7일임~
       </div>
     </div>
   );
diff --git a/apps/extension/src/index.css b/apps/extension/src/index.css
diff --git a/apps/landing/src/App.css b/apps/landing/src/App.css
@@ -1 +1,2 @@
 @import '@pinback/tailwind-config/shared-styles.css';
+@import '@pinback/design-system/styles';
diff --git a/packages/design-system/eslint.config.mjs b/packages/design-system/eslint.config.mjs
@@ -1,4 +1,4 @@
-import { config } from "@pinback/eslint-config/react-internal";
+import config from '@pinback/eslint-config/react-internal';
 
 /** @type {import("eslint").Linter.Config} */
 export default config;
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@pinback/design-system",
   "version": "0.0.0",
+  "type": "module",
   "private": true,
   "exports": {
     "./ui": "./src/components/index.ts",
@@ -18,12 +19,17 @@
     "@pinback/eslint-config": "workspace:*",
     "@pinback/tailwind-config": "workspace:*",
     "@pinback/typescript-config": "workspace:*",
+    "@tailwindcss/vite": "^4.1.12",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@turbo/gen": "^2.5.0",
     "@types/node": "^22.15.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.1",
     "eslint": "^9.33.0",
     "tailwindcss": "^4.1.12",
-    "typescript": "5.9.2"
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
diff --git a/packages/design-system/vite.config.ts b/packages/design-system/vite.config.ts
@@ -0,0 +1,30 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+    },
+  },
+  build: {
+    lib: {
+      entry: 'src/components/index.ts',
+      name: 'DesignSystem',
+      fileName: (format) => `design-system.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`@import '@pinback/tailwind-config/shared-styles.css';`
	`2`	`+@import '@pinback/design-system/styles';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import '@pinback/tailwind-config/shared-styles.css';`
	`2`	`+@import '@pinback/design-system/styles';`