From 6cfa3dc527d53f7d6442f85258cf8439d1031f4f Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Thu, 25 Jul 2024 14:09:29 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20=EC=83=81=EC=84=B8=20=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20:=20url=20router=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99,=20=EB=B3=80=EA=B2=BD=EB=90=9C=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EB=B0=98=EC=98=81=20=EB=B0=8F=20=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20api=EB=A5=BC=20=EC=97=B0=EB=8F=99=20(#91)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: stylelint를 통한 css 속성 정렬 기능 오류 수정

- stylelint 버전16과 충돌되는 플러그인 삭제 : stylelint-config-prettier, stylelint-prettier
- css 정렬에 필요하지 않은 플러그인 삭제 : stylelint-config-standard, stylelint-config-styled-componented, stylelint-webpack-plugin
- 추가로 설치한 플러그인: postcss-syntax, @stylelint/postcss-css-in-js
- stylelint 적용 script 추가
- .stylelintrc.json 수정 : css 관련 rule 설정

* refactor: stylelint 적용에 따른 css 속성 정렬

* fix : 절대 경로 사용 시 오류 수정

오류 : eslintimport/no-unresolved

* chore: eslintrc.cjs 에서 불필요한 코드 삭제

 node 환경 setting 삭제

* style: eslint 적용에 따른 리뷰 상세페이지 import 순서 정리

* refactor: formatDate를 utils/date 파일로 이동

* design: theme에 colors,, fontSize 변경 및 borderRadius 추가

* feat: MultilineTextViewer 컴포넌트 생성

- 개행이 포함된 string에 개행을 적용해서 보여주는 컴포넌트

* feat: 깃허브 저장소 이미지 컴포넌트 생성

* feat: 리뷰와 관련된 날짜 UI 컴포넌트 생성

* featr: LockButton 삭제 LockToggle 추가

* refactor: 피그마 디자인 변경에 따른 ReviewDescription 변경

* feat: ReviewComment 컴포넌트 생성

* refactor: ReviewViewSection -> ReviewSection 으로 변경 및 리팩토링

- 불필요한  컴포넌트 삭제 : RevieAnswer , ReviewQuestion

* refactor: DetailedReviewPage 리팩토링

- 목데이터 변경
-  추가 및 변경된 컴포넌트를 사용해 리뷰 상세페이지 컴포넌트(DetailedReviewPage) 리팩토링
- DetailedReviewPage 폴더의 styles.ts 삭제

* refactor: review에 대한 타입 변경

* design : ReviewDate의 클론 스타일 적용

* feat: KeywordSection 컴포넌트 생성

- 리뷰 상세 페이지 키워드 부분 컴포넌트 생성

* feat: ReviewSectionHeader 컴포넌트 생성 및 적용

- 리뷰 상세보기에서 반복되는 질문,키워드 헤더부분을 컴포넌트로 분리

* design : 리뷰 상세페이지에 width 변경

* refactor: DetailedReview의 목데이터 변경 및 리팩토링

- 타입 변경에 따른 목 데이터 변경
- KeywordSection 적용

* design : formWidth를 theme에 추가 및 리뷰 작성/리뷰 상세 페이지에 적용

* fix: Layout에서 가로 스크롤 생기는 오류 수정

- 100vw는 스크롤을 포함한 뷰포트 너비라서 100%으로 수정

* feat: 리뷰 상페이지 router에 라우터 파라미터 적용 및 관련 설정 변경

- 데모데이를 위해 현재 데이터베이스에 있는 리뷰 상세페이지 id를 sidebar의 리뷰 상세페이지 메뉴 link에 적용
- 리뷰 상세페이지(DetailedReviewPage)의 api 핸들러 수정

* docs: 변수명 변경 (isLock -> isPublic)

* refactor: 깃헙 저장소 로고 주소 변수명 변경

- projectImgSrc -> thumbnailUrl

* refactor: 리뷰 상세 페이지 api 변경에 따른 수정

- 리뷰 상세 페이지 keyword 타입 변경
- api endpoint 변경 , router 변경, sidebar 상세보기 경로 변경
- useState에 빈 값에 대한 타입 추론 사용
---
 frontend/src/apis/endpoints.ts                     |  3 ++-
 frontend/src/apis/review.ts                        |  6 +++---
 frontend/src/components/layouts/Sidebar/index.tsx  |  2 +-
 frontend/src/mocks/handlers/review.ts              |  2 +-
 .../src/mocks/mockData/detailedReviewMockData.ts   |  8 +-------
 .../components/KeywordSection/index.tsx            |  8 +++-----
 frontend/src/pages/DetailedReviewPage/index.tsx    | 14 +++++++++-----
 frontend/src/types/review.ts                       |  7 +------
 8 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts
index 2fbf1d531..45d334ee7 100644
--- a/frontend/src/apis/endpoints.ts
+++ b/frontend/src/apis/endpoints.ts
@@ -1,6 +1,7 @@
 const endPoint = {
   postingReview: `${process.env.API_BASE_URL}reviews`,
-  gettingDetailedReview: (reviewId: number) => `${process.env.API_BASE_URL}reviews/${reviewId}`,
+  gettingDetailedReview: (reviewId: number, memberId: number) =>
+    `${process.env.API_BASE_URL}reviews/${reviewId}?memberId=${memberId}`,
   gettingInfoToWriteReview: (reviewerGroupId: number) => `/reviewer-groups/${reviewerGroupId}`,
   gettingKeyword: `${process.env.API_BASE_URL}keywords`,
 };
diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts
index 437f76fb3..49b873491 100644
--- a/frontend/src/apis/review.ts
+++ b/frontend/src/apis/review.ts
@@ -4,7 +4,7 @@ import { ReviewData, WritingReviewInfoData } from '@/types';
 import endPoint from './endpoints';
 
 export const getDataToWriteReviewApi = async (reviewerGroupId: number) => {
-  const response = await fetch(endPoint.gettingDataToWriteReview(reviewerGroupId), {
+  const response = await fetch(endPoint.gettingInfoToWriteReview(reviewerGroupId), {
     method: 'GET',
   });
 
@@ -34,8 +34,8 @@ export const postReviewApi = async ({ reviewData }: { reviewData: ReviewData })
 };
 
 // 상세리뷰
-export const getDetailedReviewApi = async ({ reviewId }: { reviewId: number }) => {
-  const response = await fetch(endPoint.gettingDetailedReview(reviewId), {
+export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: number; memberId: number }) => {
+  const response = await fetch(endPoint.gettingDetailedReview(reviewId, memberId), {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
diff --git a/frontend/src/components/layouts/Sidebar/index.tsx b/frontend/src/components/layouts/Sidebar/index.tsx
index de745aeb0..deefbb4d1 100644
--- a/frontend/src/components/layouts/Sidebar/index.tsx
+++ b/frontend/src/components/layouts/Sidebar/index.tsx
@@ -10,7 +10,7 @@ const PATH = {
   myPage: '/user/mypage',
   reviewWriting: '/user/review-writing',
   allReview: '/user/all-review',
-  detailedReview: '/user/detailed-review/0',
+  detailedReview: '/user/detailed-review/0?memberId=1',
   reviewGroupManagement: '/user/review-group-management',
 };
 
diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts
index 6feb7b3d3..89d0cfa4c 100644
--- a/frontend/src/mocks/handlers/review.ts
+++ b/frontend/src/mocks/handlers/review.ts
@@ -5,7 +5,7 @@ import endPoint from '@/apis/endpoints';
 import { DETAILED_REVIEW_MOCK_DATA } from '../mockData/detailedReviewMockData';
 
 const getDetailedReview = () =>
-  http.get(endPoint.gettingDetailedReview(0), async ({ request }) => {
+  http.get(endPoint.gettingDetailedReview(0, 1), async ({ request }) => {
     return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA);
   });
 
diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
index 19311520f..6aae872b9 100644
--- a/frontend/src/mocks/mockData/detailedReviewMockData.ts
+++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -24,11 +24,5 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
     { id: 567810, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
     { id: 98761, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
   ],
-  keywords: [
-    { id: 1, detail: '친절해요' },
-    { id: 12, detail: '친절합니다!' },
-    { id: 11, detail: '친절해요요요요요' },
-    { id: 14, detail: '친절해해해해해' },
-    { id: 18, detail: '친절해요요용' },
-  ],
+  keywords: ['친절해요', '친절합니다!', '친절해요요요요요', '친절해해해해해', '친절해요요용'],
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
index b94b4de94..0ee031dae 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -1,11 +1,9 @@
-import { Keyword } from '@/types';
-
 import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
 
 interface KeywordSectionProps {
-  keywords: Keyword[];
+  keywords: string[];
   index: number;
 }
 const KEY_WORD_HEADER = '키워드';
@@ -15,8 +13,8 @@ const KeywordSection = ({ keywords, index }: KeywordSectionProps) => {
     <S.KeywordSection>
       <ReviewSectionHeader number={index + 1} text={KEY_WORD_HEADER} />
       <S.KeywordContainer>
-        {keywords.map(({ id, detail }) => (
-          <S.KeywordBox key={id}>{detail}</S.KeywordBox>
+        {keywords.map((keyword) => (
+          <S.KeywordBox key={keyword}>{keyword}</S.KeywordBox>
         ))}
       </S.KeywordContainer>
     </S.KeywordSection>
diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx
index afc92cabf..826b32bcf 100644
--- a/frontend/src/pages/DetailedReviewPage/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 
 import { ReviewComment } from '@/components';
 import { DetailReviewData } from '@/types';
@@ -15,15 +15,19 @@ const COMMENT = 'VITE 쓰고 싶다.';
 
 const DetailedReviewPage = () => {
   const { id: reviewId } = useParams();
-  const [detailedReview, setDetailedReview] = useState<DetailReviewData | null>(null);
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const memberId = searchParams.get('memberId');
+
+  const [detailedReview, setDetailedReview] = useState<DetailReviewData>();
   const [isLoading, setIsLoading] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string>('');
 
   const fetch = async () => {
     if (!reviewId) return;
     try {
       setIsLoading(true);
-      const result = await getDetailedReviewApi({ reviewId: Number(reviewId) });
+      const result = await getDetailedReviewApi({ reviewId: Number(reviewId), memberId: Number(memberId) });
 
       setDetailedReview(result);
       setErrorMessage('');
@@ -43,7 +47,7 @@ const DetailedReviewPage = () => {
   if (isLoading) return <div>Loading...</div>;
 
   if (errorMessage) return <div>Error: {errorMessage}</div>;
-  if (!detailedReview) return <div>Error: '상세보기 리뷰 데이터를 가져올 수 없어요.'</div>;
+  if (!detailedReview) return <div>Error: 상세보기 리뷰 데이터를 가져올 수 없어요.</div>;
 
   return (
     <S.DetailedReviewPage>
diff --git a/frontend/src/types/review.ts b/frontend/src/types/review.ts
index fc52eb147..834e943c8 100644
--- a/frontend/src/types/review.ts
+++ b/frontend/src/types/review.ts
@@ -25,7 +25,7 @@ export interface DetailReviewData {
     };
   };
   contents: DetailReviewContent[];
-  keywords: Keyword[];
+  keywords: string[];
 }
 
 // api
@@ -46,11 +46,6 @@ export interface Question {
   content: string;
 }
 
-export interface Keyword {
-  id: number;
-  content: string;
-}
-
 export interface WritingReviewInfoData {
   reviewerGroup: {
     id: number;