hotfix: api 분리 (#356)

* hotfix: response 분리

* chore: 프론트 yml 파일 변경

.github/workflows/fe-merge-dev.yml

@@ -4,8 +4,8 @@ on:
   workflow_dispatch:
 
   pull_request:
-    branches: [ develop ]
-    types: [ closed ]
+    branches: [develop]
+    types: [closed]
     paths: frontend/**
 
 permissions:
@@ -23,13 +23,18 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
-          cache-dependency-path: "frontend"
+          cache: 'npm'
+          cache-dependency-path: 'frontend'
 
       - name: Install npm
         run: npm install
         working-directory: frontend
 
+      - name: 테스트 환경변수 설정
+        run: |
+          echo "REACT_APP_API_DEFAULT_DEV=${{ secrets.REACT_APP_API_DEFAULT_DEV }}" >> $GITHUB_ENV
+          echo "REACT_APP_API_DEFAULT_PROD=${{ secrets.REACT_APP_API_DEFAULT_PROD }}" >> $GITHUB_ENV
+
       - name: Build project
         run: npm run build
         working-directory: frontend
@@ -41,7 +46,7 @@ jobs:
           path: frontend/dist
 
   deploy:
-    runs-on: [ self-hosted, dev ]
+    runs-on: [self-hosted, dev]
     needs: build-and-upload
 
     if: github.event.pull_request.merged
@@ -70,5 +75,3 @@ jobs:
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
         if: always()
-
-

.github/workflows/fe-merge-prod.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
 
   pull_request:
-    branches: [ main ]
+    branches: [main]
     types: [closed]
     paths: frontend/**
 
@@ -23,13 +23,18 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
-          cache-dependency-path: "frontend"
+          cache: 'npm'
+          cache-dependency-path: 'frontend'
 
       - name: Install npm
         run: npm install
         working-directory: frontend
 
+      - name: 테스트 환경변수 설정
+        run: |
+          echo "REACT_APP_API_DEFAULT_DEV=${{ secrets.REACT_APP_API_DEFAULT_DEV }}" >> $GITHUB_ENV
+          echo "REACT_APP_API_DEFAULT_PROD=${{ secrets.REACT_APP_API_DEFAULT_PROD }}" >> $GITHUB_ENV
+
       - name: Build project
         run: npm run build
         working-directory: frontend
@@ -41,7 +46,7 @@ jobs:
           path: frontend/dist
 
   deploy:
-    runs-on: [ self-hosted, prod]
+    runs-on: [self-hosted, prod]
     needs: build-and-upload
 
     if: github.event.pull_request.merged

frontend/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+
 .env
 dist/
 build/

frontend/package.json

@@ -49,7 +49,7 @@
     "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^6.19.9",
     "cypress": "^12.17.4",
-    "dotenv": "^16.3.1",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",

frontend/src/apis/getApi.ts

@@ -7,7 +7,6 @@ interface Headers {
   'Content-Type': string;
   [key: string]: string;
 }
-
 export const getApi = async <T>(
   type: 'tMap' | 'default' | 'login',
   url: string,
@@ -18,21 +17,17 @@ export const getApi = async <T>(
   const headers: Headers = {
     'Content-Type': 'application/json',
   };
-
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
-
   const response = await fetch(apiUrl, {
     method: 'GET',
     headers: headers,
   });
-
   const responseData: T = await response.json();
   if (response.status >= 400) {
     //todo: status 상태별로 로그인 토큰 유효 검증
     throw new Error('API 요청에 실패했습니다.');
   }
-
   return responseData;
 };

frontend/src/apis/postApi.ts

@@ -7,13 +7,11 @@ interface Headers {
   'Content-Type': string;
   [key: string]: string;
 }
-
 export const postApi = async (url: string, data?: {}, contentType?: string) => {
   const userToken = localStorage.getItem('userToken');
   const headers: Headers = {
     'Content-Type': `${contentType || 'application/json'}`,
   };
-
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
@@ -23,11 +21,9 @@ export const postApi = async (url: string, data?: {}, contentType?: string) => {
     headers: headers,
     body: JSON.stringify(data),
   });
-
   if (response.status >= 400) {
     //todo: status 상태별로 로그인 토큰 유효 검증
     throw new Error('API 요청에 실패했습니다.');
   }
-
   return response;
 };

frontend/src/apis/putApi.ts

@@ -7,7 +7,6 @@ interface Headers {
   'Content-Type': string;
   [key: string]: string;
 }
-
 export const putApi = async (
   url: string,
   data: { name: string; images: string[]; description: string },
@@ -16,7 +15,6 @@ export const putApi = async (
   const headers: Headers = {
     'Content-Type': 'application/json',
   };
-
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
@@ -26,10 +24,8 @@ export const putApi = async (
     headers: headers,
     body: JSON.stringify(data),
   });
-
   if (response.status >= 400) {
     throw new Error('API 요청에 실패했습니다.');
   }
-
   return response;
 };

frontend/webpack.common.js

@@ -1,10 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ProvidePlugin, EnvironmentPlugin } = require('webpack');
-const dotenv = require('dotenv');
-
-// Load environment variables from '.env' file
-const env = dotenv.config().parsed || {};
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
   entry: {
@@ -23,10 +20,8 @@ module.exports = {
       React: 'react',
       process: 'process/browser.js',
     }),
-    new EnvironmentPlugin({
-      REACT_APP_API_DEFAULT_DEV: env.REACT_APP_API_DEFAULT_DEV,
-      REACT_APP_API_DEFAULT_PROD: env.REACT_APP_API_DEFAULT_PROD,
-    }),
+
+    new Dotenv(),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],