[🚀 deploy] Github Actions CI/CD 파이프라인 구축

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+*.log

.eslintrc.cjs

@@ -30,4 +30,4 @@ module.exports = {
     // 여기에 필요 시 추가 규칙 설정
     'react/react-in-jsx-scope': 'off', // React 17+ JSX 자동 설정
   },
-}
+};

.github/ISSUE_TEMPLATE/♻️refactor.md

@@ -1,19 +1,22 @@
 ---
-name: "♻️refactor"
+name: '♻️refactor'
 about: Refactoring 작업 사항을 입력해주세요.
-title: "♻️[refactor] "
+title: '♻️[refactor] '
 labels: refactor
 assignees: ''
-
 ---
 
-## 📌 Description  
+## 📌 Description
+
 이슈에 대한 설명을 입력해주세요.
 
-## ✅ Todo  
-수행할 작업 목록을 작성해주세요. 예:  
-- [ ] todo1  
+## ✅ Todo
+
+수행할 작업 목록을 작성해주세요. 예:
+
+- [ ] todo1
 - [ ] 필요한 항목을 추가하세요.
 
-## 📎 ETC  
+## 📎 ETC
+
 기타 논의할 사항이나 참고할 내용이 있다면 작성해주세요.

.github/ISSUE_TEMPLATE/✨feat.md

@@ -1,17 +1,19 @@
 ---
-name: "✨feat"
+name: '✨feat'
 about: Feature 작업 사항을 입력해주세요.
-title: "✨[feat] "
+title: '✨[feat] '
 labels: feat
 assignees: ''
-
 ---
 
-## Description 📝  
+## Description 📝
+
 이슈에 대한 설명을 입력해주세요.
 
-## Todo ✅  
+## Todo ✅
+
 - [ ] todo1
 
-## ETC 🔍  
+## ETC 🔍
+
 기타 이슈사항을 입력해주세요.

.github/ISSUE_TEMPLATE/🐛fix.md

@@ -4,30 +4,37 @@ about: Bug 발생 시 작성해주세요.
 title: "\U0001F41B[fix] "
 labels: bug
 assignees: ''
-
 ---
 
-## Problem  
+## Problem
+
 무슨 문제가 발생했는지 설명해주세요.
 
-## Reproduction  
-버그 재현 방법을 자세히 설명해주세요.  
+## Reproduction
+
+버그 재현 방법을 자세히 설명해주세요.
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-## Screenshot  
-이해를 돕기 위한 스크린샷을 첨부해주세요.  
+## Screenshot
+
+이해를 돕기 위한 스크린샷을 첨부해주세요.
+
+## Expected Behavior
 
-## Expected Behavior  
 버그가 없었을 때 어떤 결과가 나왔어야 하는지 설명해주세요.
 
-## Log  
-에러 로그가 있다면 아래에 첨부해주세요.  
+## Log
+
+에러 로그가 있다면 아래에 첨부해주세요.
+
+## Browser
+
+어떤 브라우저에서 문제가 발생했나요?
 
-## Browser  
-어떤 브라우저에서 문제가 발생했나요?  
-- [ ] Chrome  
-- [ ] Firefox  
+- [ ] Chrome
+- [ ] Firefox
 - [ ] 기타: (직접 입력)

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,11 +5,19 @@
   3. 새로운 모듈 설치시 PR message에 기재할 것.
   4. PR 올리기전에 branch 반드시 확인할 것.
  -->
- ## 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
-  -
- ## 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
-  -
- ## 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
-  -
- ## Issue 번호 <!-- issue number을 link 시켜주세요 (ex. "- close #3333") -->
- - 
+
+## 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
+
+-
+
+## 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
+
+-
+
+## 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
+
+-
+
+## Issue 번호 <!-- issue number을 link 시켜주세요 (ex. "- close #3333") -->
+
+-

.github/workflows/deploy.yml

@@ -0,0 +1,58 @@
+name: Deploy to Cloud Run with Docker
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  deploy:
+    name: Build & Deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Vite app
+        run: pnpm run build
+
+      - name: Set up Docker
+        uses: docker/setup-buildx-action@v2
+
+      - name: Authenticate to Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          credentials_json: ${{ secrets.GCP_SA_KEY }}
+
+      - name: Set up gcloud CLI
+        uses: google-github-actions/setup-gcloud@v2
+
+      - name: Configure Docker for GCR
+        run: gcloud auth configure-docker --quiet
+
+      - name: Build and Push Docker image
+        run: |
+          docker buildx build --platform linux/amd64 -f dockerfile_frontend -t gcr.io/${{ secrets.GCP_PROJECT }}/${{ secrets.GCP_RUN_SERVICE }} --push .
+
+      - name: Deploy to Cloud Run
+        run: |
+          gcloud run deploy ${{ secrets.GCP_RUN_SERVICE }} \
+            --image gcr.io/${{ secrets.GCP_PROJECT }}/${{ secrets.GCP_RUN_SERVICE }} \
+            --region ${{ secrets.GCP_REGION }} \
+            --platform managed \
+            --allow-unauthenticated

.prettierrc

@@ -1,6 +1,6 @@
 {
   "singleQuote": true,
-  "semi": false,
+  "semi": true,
   "trailingComma": "all",
   "printWidth": 80,
   "tabWidth": 2,

README.md

@@ -1,69 +1 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# 매칭핏

eslint.config.js

@@ -1,9 +1,9 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { globalIgnores } from 'eslint/config';
 
 export default tseslint.config([
   globalIgnores(['dist']),
@@ -20,4 +20,4 @@ export default tseslint.config([
       globals: globals.browser,
     },
   },
-])
+]);

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>매칭핏</title>
   </head>

package.json

@@ -11,13 +11,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.10.0",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.1",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-modal": "^3.16.3",
+    "react-router-dom": "^7.6.3",
+    "recharts": "^3.1.0",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
+    "@types/html2canvas": "^1.0.0",
+    "@types/jspdf": "^2.0.0",
+    "@types/node": "^24.0.10",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@typescript-eslint/parser": "^8.35.1",
     "@vitejs/plugin-react": "^4.5.2",