pr check action 수정 (#6)

* eslint 설정 수정 및 lint script 수정 (#3) * Update action-check-pr.yaml (#2) pnpm을 전역으로 설치 * pr check action 오류 수정 (#4) * pr check action 오류 수정 * gitignore prettier 설정 포함 * path alias 설정 및 index.html public 하위로 이동 * action 라벨 라이브러리 수정 * 라벨 추가를 위한 권한 설정 * 액션 오류 수정 * README 업데이트 - 디렉토리 구조 추가 (#1) * README 업데이트 - 디렉토리 구조 추가 * pr check action 추가 Create action-check-pr.yaml * eslint 설정 수정 및 lint script 수정 (#3) * Update action-check-pr.yaml (#2) pnpm을 전역으로 설치 * pr check action 오류 수정 (#4) * pr check action 오류 수정 * gitignore prettier 설정 포함 * path alias 설정 및 index.html public 하위로 이동 * action 라벨 라이브러리 수정 * 라벨 추가를 위한 권한 설정 * 액션 오류 수정
rieulp · Nov 7, 2024 · 774585d · 774585d
1 parent fc6b6d2
commit 774585d
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 38 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/action-check-pr.yaml b/.github/workflows/action-check-pr.yaml
@@ -4,6 +4,10 @@ on:
   pull_request:
     types: [opened, edited, synchronize, reopened, ready_for_review]
 
+permissions:
+  pull-requests: write # PR에 대한 쓰기 권한 부여
+  issues: write # 이슈에 대한 쓰기 권한 부여 (라벨 추가를 위한)
+
 jobs:
   check:
     runs-on: ubuntu-latest
@@ -15,27 +19,29 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '18'  # 사용하고자 하는 Node.js 버전
+          node-version: '18'
+      - name: Install pnpm
+        run: npm install -g pnpm # pnpm을 전역으로 설치
 
       - name: Install Dependencies
-        run: pnpm install  # pnpm을 사용하여 의존성 설치
+        run: pnpm install # pnpm을 사용하여 의존성 설치
 
       - name: Run Lint
-        run: pnpm lint  # 린트 실행
+        run: pnpm lint # 린트 실행
 
       - name: Run Prettier
-        run: pnpm format --check  # 프리티어 체크
+        run: pnpm format --check # 프리티어 체크
 
-      - name: Build
-        run: pnpm build  # 빌드 실행
+      - name: Build # 머지하려는 브랜치가 main 브랜치이면 build:prod, dev 브랜치이면 build:dev
+        run: pnpm build:${{ github.event.pull_request.base.ref == 'main' && 'prod' || 'dev' }}
 
   label:
     runs-on: ubuntu-latest
-    needs: check  # check 작업이 완료된 후 실행
+    needs: check # check 작업이 완료된 후 실행
 
     steps:
       - name: Add Labels
-        if: github.event.pull_request.draft == false  # 드래프트가 아닐 경우에만 실행
-        uses: actions/add-labels@v1
+        if: github.event.pull_request.draft == false # 드래프트가 아닐 경우에만 실행
+        uses: actions-ecosystem/action-add-labels@v1 # 라벨 추가 액션
         with:
-          labels: ${{ github.event.pull_request.base.ref == 'dev' && 'dev' || github.event.pull_request.base.ref == 'main' && 'main'}}  # dev로 머지 시 dev 라벨, main으로 머지 시 main 라벨
+          labels: ${{ github.event.pull_request.base.ref == 'dev' && 'dev' || github.event.pull_request.base.ref == 'main' && 'main'}} # dev로 머지 시 dev 라벨, main으로 머지 시 main 라벨
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
 node_modules
-.prettierrc
+build
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 120
+}
diff --git a/README.md b/README.md
@@ -16,3 +16,21 @@
 ## 컴포넌트 목록
 
 ## 디렉토리 구조
+
+```md
+프로젝트 루트/
+├── node_modules/
+├── src/ # 소스 파일 디렉토리
+│ ├── components/ # React 컴포넌트
+│ ├── styles/ # 스타일 파일 (CSS, SCSS 등)
+│ ├── utils/ # 유틸리티 함수
+│ ├── index.tsx # 애플리케이션 진입점
+│ └── App.tsx # 주요 React 컴포넌트
+├── .gitignore # Git 무시 파일 목록
+├── package.json # 프로젝트 메타데이터 및 의존성
+├── tsconfig.json # TypeScript 설정 파일
+├── webpack.config.js # Webpack 설정 파일
+├── .eslintrc.js # ESLint 설정 파일
+├── .prettierrc # Prettier 설정 파일
+└── README.md # 프로젝트 설명 문서
+```
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,26 @@
+import { defineConfig } from 'eslint-define-config';
+import reactPlugin from 'eslint-plugin-react';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
+
+export default defineConfig([
+  {
+    files: ['*.ts', '*.tsx'], // TypeScript 파일에 대한 설정
+    languageOptions: {
+      parser: '@typescript-eslint/parser', // 타입스크립트 파서
+    },
+    plugins: {
+      react: reactPlugin,
+      '@typescript-eslint': typescriptPlugin,
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  },
+]);
diff --git a/package.json b/package.json
@@ -6,12 +6,12 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "format": "prettier --write .",
-    "lint": "eslint --fix .",
+    "lint": "eslint .",
     "dev": "cross-env NODE_ENV=development webpack serve --open",
     "build:dev": "cross-env NODE_ENV=development webpack",
     "build:prod": "cross-env NODE_ENV=production webpack",
-    "start:dev": "npm run build:dev && node dist/bundle.js",
-    "start:prod": "npm run build:prod && node dist/bundle.js"
+    "start:dev": "npm run build:dev && serve -s build",
+    "start:prod": "npm run build:prod && serve -s build"
   },
   "keywords": [],
   "author": "",
@@ -32,6 +32,7 @@
     "@typescript-eslint/parser": "^8.13.0",
     "babel-loader": "^9.2.1",
     "eslint": "^9.14.0",
+    "eslint-define-config": "^2.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "html-webpack-plugin": "^5.6.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/index.html → public/index.html b/index.html → public/index.html
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from 'App';
+import App from '@/App';
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,16 +7,19 @@ module.exports = {
   entry: './src/index.tsx',
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'build'),
     clean: true, // 이전 빌드 파일 삭제
   },
   resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
     extensions: ['.ts', '.tsx', '.js', '.jsx'], // 처리할 파일 확장자
   },
   module: {
     rules: [
       {
-        test: /\.tsx?$/, // 타입스크립트 파일 처리
+        test: /\.tsx?$/, // 타입스크립트 파일 처리 ts, tsx
         use: 'ts-loader',
         exclude: /node_modules/,
       },
@@ -25,7 +28,7 @@ module.exports = {
   mode: process.env.NODE_ENV || 'development',
   plugins: [
     new HtmlWebpackPlugin({
-      template: './index.html', // 기본 HTML 템플릿
+      template: './public/index.html', // 기본 HTML 템플릿
     }),
   ],
   devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false, // 소스 맵