[FE] 리뷰 작성, 상세 리뷰 보기 페이지에 백엔드 API 연동 및 dotenv-webpack 설치, BASE_URL을 .…

…env로 이동 (#78)

* chore: gitignore에 yarn-error.log 추가

* ci: env 파일 사용을 위한 dotenv-webpack 설치

* refactor: 엔드포인트에 env 파일을 통한 API_BASE_URL 경로 적용

* fix: 리뷰 상세보기 데이터에서 백엔드 응답과 속성 이름이 달랐던 부분 수정

* refactor: 백엔드 응답 및 리팩토링된 리뷰 쓰기 형식에 맞게 리뷰 쓰기 모킹 데이터 수정

* chore: 불필요한 console.log 삭제

frontend/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 
+yarn-error.log
 .env

frontend/package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
+    "dotenv-webpack": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.24.1",

frontend/src/apis/endpoints.ts

@@ -1,10 +1,8 @@
-const API_BASE_URL = 'http://localhost:8080';
-
 const endPoint = {
-  postingReview: `${API_BASE_URL}/reviews`,
-  gettingDetailedReview: (reviewId: number) => `${API_BASE_URL}/reviews/${reviewId}`,
+  postingReview: `${process.env.API_BASE_URL}/reviews`,
+  gettingDetailedReview: (reviewId: number) => `${process.env.API_BASE_URL}/reviews/${reviewId}`,
   gettingInfoToWriteReview: (reviewerGroupId: number) => `/reviewer-groups/${reviewerGroupId}`,
-  gettingKeyword: `${API_BASE_URL}/keywords`,
+  gettingKeyword: `${process.env.API_BASE_URL}/keywords`,
 };
 
 export default endPoint;

frontend/src/pages/DetailedReviewPage/index.tsx

@@ -15,7 +15,7 @@ const MOCK_DATA: DetailReviewData = {
     name: '올리',
   },
   createdAt: new Date('2024-07-16'),
-  reviewGroup: {
+  reviewerGroup: {
     groupId: 123456,
     name: 'review-me',
   },
@@ -38,7 +38,7 @@ const DetailedReviewPage = ({}) => {
   const fetch = async () => {
     try {
       setIsLoading(true);
-      getDetailedReviewApi({ reviewId: 123456 }).then((result) => {
+      getDetailedReviewApi({ reviewId: 4 }).then((result) => {
         setDetailReview(result);
         setErrorMessage('');
       });
@@ -52,13 +52,24 @@ const DetailedReviewPage = ({}) => {
   };
 
   useEffect(() => {
-    //fetch();
+    fetch();
   }, []);
 
+  if (isLoading) return <div>Loading...</div>;
+
+  if (errorMessage) return <div>Error: {errorMessage}</div>;
+
   return (
     <>
-      <ReviewDescription projectName={MOCK_DATA.reviewGroup.name} createdAt={MOCK_DATA.createdAt} isLock={true} />
-      {MOCK_DATA.contents.map((item, index) => (
+      <ReviewDescription
+        projectName={detailReview.reviewerGroup.name}
+        // NOTE: 프론트에서는 리뷰 작성일을 보여주지만,
+        // 현재 서버에서 오는 데이터가 deadline인 관계로 (속성 이름, value의 성격 모두 다름)
+        // 임의의 Date 객체로 하드코딩한 상태임
+        createdAt={new Date('2024-01-22')}
+        isLock={true}
+      />
+      {detailReview.contents.map((item, index) => (
         <ReviewViewSection question={item.question} answer={item.answer} key={index} />
       ))}
     </>

frontend/src/pages/ReviewWriting/index.tsx

@@ -14,9 +14,10 @@ const ReviewWritingPage = () => {
   const handleSubmitReview = async (event: React.FormEvent) => {
     event.preventDefault();
 
+    // NOTE: 모킹 데이터
     const reviewData: ReviewData = {
-      reviewerId: 1,
-      reviewerGroupId: 1,
+      reviewerId: 8,
+      reviewerGroupId: 5,
       contents: [
         {
           order: 1,
@@ -26,20 +27,21 @@ const ReviewWritingPage = () => {
         {
           order: 2,
           question: '2. 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.',
+
+          answer: (event.target as any).question2.value,
+        },
+        {
+          order: 3,
+          question: '3. 마지막 질문',
+
           answer: (event.target as any).question2.value,
         },
       ],
-      selectedKeywordIds: [
-        (event.target as any).keyword1.checked ? 1 : null,
-        (event.target as any).keyword2.checked ? 2 : null,
-        (event.target as any).keyword3.checked ? 3 : null,
-      ].filter(Boolean) as number[],
+      selectedKeywordIds: [1, 2],
     };
 
-    //console.log(reviewData);
     try {
       await postReviewApi({ reviewData });
-      console.log('Review submitted successfully');
     } catch (error) {
       console.error('Failed to submit review:', error);
     }

frontend/src/types/review.ts

@@ -10,7 +10,7 @@ export interface DetailReviewData {
     memberId: number;
     name: string;
   };
-  reviewGroup: {
+  reviewerGroup: {
     groupId: number;
     name: string;
   };

frontend/webpack.config.js

@@ -1,6 +1,7 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -49,6 +50,9 @@ module.exports = (env, argv) => {
         hash: true,
       }),
       new CleanWebpackPlugin(),
+      new Dotenv({
+        path: './.env',
+      }),
     ],
     devtool: isProduction ? 'hidden-source-map' : 'eval',
     devServer: {

frontend/yarn.lock

@@ -2945,6 +2945,25 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+dotenv-defaults@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz#6b3ec2e4319aafb70940abda72d3856770ee77ac"
+  integrity sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==
+  dependencies:
+    dotenv "^8.2.0"
+
+dotenv-webpack@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-8.1.0.tgz#4d66abc4a30395b46a030ebcd125320232b54873"
+  integrity sha512-owK1JcsPkIobeqjVrk6h7jPED/W6ZpdFsMPR+5ursB7/SdgDyO+VzAU+szK8C8u3qUhtENyYnj8eyXMR5kkGag==
+  dependencies:
+    dotenv-defaults "^2.0.2"
+
+dotenv@^8.2.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
+  integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"