프론트엔드 인프라 재구축

.github/workflows/ci.yml

@@ -0,0 +1,61 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+permissions:
+  id-token: write
+
+jobs:
+  build:
+    env:
+      ENV_PATH: .env
+    environment: Production
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.14.0
+
+      # Install
+      - name: Install Dependencies
+        run: pnpm install
+
+      # Test - test를 진행하지 않으므로 생략
+      # - name: Run Tests
+      #   run: pnpm test
+
+      # Lint
+      - name: Lint Code
+        run: pnpm lint
+
+      - name: Create .env file
+        run: |
+          touch ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_API_MOCKING=${{ secrets.NEXT_PUBLIC_API_MOCKING }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_IMAGE_BASE_PATH=${{ secrets.NEXT_PUBLIC_IMAGE_BASE_PATH }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_JUULABEL_API_URL=${{ secrets.NEXT_PUBLIC_JUULABEL_API_URL }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+
+      # Build
+      - name: Build Project
+        run: pnpm build

.github/workflows/deploy.dev.yml

@@ -0,0 +1,66 @@
+on:
+  pull_request:
+    branches: [release/*]
+    types: [closed]
+
+jobs:
+  deploy:
+    if: github.event.pull_request.merged == true
+    env:
+      ENV_PATH: .env
+    environment: Develop
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Create .env file
+        run: |
+          touch ${{ env.ENV_PATH }}
+          echo ENV_VERSION='dev' >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_API_MOCKING=${{ secrets.NEXT_PUBLIC_API_MOCKING }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_IMAGE_BASE_PATH=${{ secrets.NEXT_PUBLIC_IMAGE_BASE_PATH }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_JUULABEL_API_URL=${{ secrets.NEXT_PUBLIC_JUULABEL_API_URL }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.14.0
+          run_install: false
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build Project
+        run: pnpm build
+
+      - name: ZIP project files
+        run: |
+          zip -r juulabel-front-qa.zip . -x "*.git*" "node_modules/*"
+
+      - name: Acces to AWS
+        uses: aws-actions/configure-aws-credentials@v3
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Upload to S3
+        run: |
+          aws s3 cp ./juulabel-front-qa.zip s3://${{ secrets.S3_BUCKET }}/juulabel-front-qa.zip
+
+      - name: Deploy to EC2
+        run: aws deploy create-deployment
+          --application-name ${{ secrets.CODEDEPLOY_APPLICATION_NAME }}
+          --deployment-config-name CodeDeployDefault.AllAtOnce
+          --deployment-group-name ${{ secrets.CODEDEPLOY_GROUP_NAME }}
+          --s3-location bucket=${{ secrets.S3_BUCKET }},key=juulabel-front-qa.zip,bundleType=zip

.github/workflows/deploy.prod.yml

@@ -0,0 +1,67 @@
+on:
+  pull_request:
+    branches: [main]
+    types: [closed]
+
+jobs:
+  deploy:
+    if: github.event.pull_request.merged == true
+    env:
+      ENV_PATH: .env
+    environment: Production
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Create .env file
+        run: |
+          touch ${{ env.ENV_PATH }}
+          echo ENV_VERSION='production' >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_API_MOCKING=${{ secrets.NEXT_PUBLIC_API_MOCKING }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_IMAGE_BASE_PATH=${{ secrets.NEXT_PUBLIC_IMAGE_BASE_PATH }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_JUULABEL_API_URL=${{ secrets.NEXT_PUBLIC_JUULABEL_API_URL }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }} >> ${{ env.ENV_PATH }}
+          echo NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI }} >> ${{ env.ENV_PATH }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.14.0
+          run_install: false
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build Project
+        run: pnpm build
+
+      - name: ZIP project files
+        run: |
+          zip -r juulabel-front.zip . -x "*.git*" "node_modules/*"
+
+      - name: Acces to AWS
+        uses: aws-actions/configure-aws-credentials@v3
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Upload to S3
+        run: |
+          aws s3 cp ./juulabel-front.zip s3://${{ secrets.S3_BUCKET }}/juulabel-front.zip
+
+      - name: Deploy to EC2
+        run: |
+          aws deploy create-deployment
+          --application-name ${{ secrets.CODEDEPLOY_APPLICATION_NAME }}
+          --deployment-config-name CodeDeployDefault.AllAtOnce
+          --deployment-group-name ${{ secrets.CODEDEPLOY_GROUP_NAME }}
+          --s3-location bucket=${{ secrets.S3_BUCKET }}, bundleType=zip, key=juulabel-front.zip

.nvmrc

@@ -0,0 +1 @@
+22.4.0

.prettierrc

@@ -1,3 +1,12 @@
 {
-  "tabWidth": 2
+  "singleQuote": true,
+  "parser": "typescript",
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "endOfLine": "auto"
 }

appspec.yml

@@ -0,0 +1,17 @@
+version: 0.0
+os: linux
+files:
+  - source: /
+    destination: /home/juulabel-front
+file_exists_behavior: OVERWRITE
+permissions:
+  - object: /home/juulabel-front
+    pattern: "**"
+    owner: root
+    group: root
+    mode: 755
+hooks:
+  AfterInstall:
+    - location: scripts/after_install.sh
+      timeout: 300
+      runas: root

eslint.config.mjs

@@ -0,0 +1,70 @@
+import tseslint from "typescript-eslint";
+import eslint from "@eslint/js";
+import react from "eslint-plugin-react";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import next from "@next/eslint-plugin-next";
+import eslintPluginPrettier from "eslint-plugin-prettier";
+import globals from "globals";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/build/**",
+      "**/public/**",
+      "**/.next/**",
+      "**/.github/**",
+      "**/tailwind.config.js",
+      "**/postcss.config.js",
+      "**/next.config.js",
+      "**/next-env.d.ts",
+    ],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+      react,
+      next,
+      prettier: eslintPluginPrettier,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      "react/jsx-uses-react": "off",
+      "react/react-in-jsx-scope": "off", // React import를 사용하지 않도록 설정
+
+      "prettier/prettier": "warn", // Prettier 규칙을 ESLint에서 경고로 설정
+
+      "@typescript-eslint/no-unused-vars": "off", // 사용하지 않는 변수 허용
+
+      "@typescript-eslint/no-explicit-any": "off", // any 타입 사용 허용
+      "@typescript-eslint/no-require-imports": "off", // require 사용 허용
+
+      "react/no-unescaped-entities": "off", // React 컴포넌트에서 엔티티를 직접 사용하는 것을 허용
+      "@typescript-eslint/no-non-null-assertion": "off", // non-null assertion 사용 허용
+      "@next/next/no-page-custom-font": "off", // next.js에서 커스텀 폰트 사용을 허용
+      "react/jsx-filename-extension": [
+        1,
+        {
+          extensions: [".ts", ".tsx"],
+        }, // ts파일에서 tsx 문법 사용 허용
+      ],
+    },
+  },
+  {
+    extends: [tseslint.configs.disableTypeChecked],
+  },
+);

package.json

@@ -8,7 +8,8 @@
     "build": "cross-env NODE_ENV=production next build",
     "start": "cross-env NODE_ENV=production PORT=5001 next start",
     "start:qa": "cross-env NODE_ENV=production PORT=5005 next start",
-    "lint": "next lint",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "check-code": "prettier --check .",
     "format": "prettier --write ."
   },
@@ -44,7 +45,10 @@
     "zustand": "^4.5.6"
   },
   "devDependencies": {
+    "@eslint/js": "^9.26.0",
+    "@next/eslint-plugin-next": "^15.3.2",
     "@svgr/webpack": "^8.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/event-source-polyfill": "^1.0.5",
     "@types/node": "^20.17.24",
     "@types/react": "^18.3.18",
@@ -58,17 +62,32 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
+    "globals": "^16.1.0",
     "msw": "^2.7.3",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.2",
+    "typescript-eslint": "^8.32.0",
     "workbox-webpack-plugin": "^7.3.0"
   },
   "prettier": {
     "plugins": [
-      "prettier-plugin-tailwindcss"
+      "prettier-plugin-tailwindcss",
+      "@trivago/prettier-plugin-sort-imports"
+    ],
+    "importOrder": [
+      "<THIRD_PARTY_MODULES>",
+      "^@/app/(.*)$",
+      "^@/_components/(.*)$",
+      "^@/_common/(.*)$",
+      "^@/_lib/(.*)$",
+      "^@/_store/(.*)$",
+      "^@/_types/(.*)$",
+      "^@/_utils/(.*)$",
+      "^@/(.*)$",
+      "^[./]"
     ],
     "tailwindConfig": "./tailwind.config.ts"
   },