[FE] refactor: 리뷰 상세페이지에서 변경된 API를 연동 (#297)

* refactor: 새로운 API 구조에 맞춰 ReviewCard 컴포넌트 및 타입 수정 * refactor: 새로운 API 구조에 맞춰 ReviewList Mock Data 수정 * refactor: revieweeName 뒤에 붙는 메시지 상수 처리 * design: ReviewListPage CSS 수정 * chore: ReviewList Mock Data 프로젝트명 변경 * refactor: 불필요한 코드 제거 * refactor: useGetReviewList의 데이터 변수명을 ReviewListData로 변경 * chore: useGetReviewList를 review 폴더로 이동 * refactor: 상세페이지에서 변경된 API에 맞게 인터페이스 및 코드 변경 * refactor: 변경된 API에 맞게 목 데이터 수정 및 createdAt 추가 * design: 상세페이지 전반적인 디자인 수정 * refactor: new Date() 추가
woowacourse-teams · Aug 12, 2024 · c58c6b8 · c58c6b8
1 parent cc4f8d5
commit c58c6b8
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 63 deletions.
diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -5,26 +5,101 @@ export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = {
   memberId: 2,
 };
 
-const ANSWER =
-  '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. ';
+const revieweeName = 'badahertz52';
 
 export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
-  id: 123456,
-  createdAt: new Date('2024-07-16'),
-  revieweeName: 'badahertz52',
+  formId: 1,
+  revieweeName: revieweeName,
   projectName: 'review-me',
-  contents: [
+  createdAt: '2024-05-05',
+  sections: [
     {
-      id: 1,
-      question: '[공개] 동료의 개발 역량 향상을 위해 피드백을 남겨 주세요.',
-      answer: ANSWER,
+      sectionId: 1,
+      header: `💡 ${revieweeName}와 함께 한 기억을 떠올려볼게요.`,
+      questions: [
+        {
+          questionId: 1,
+          required: true,
+          questionType: 'CHECKBOX',
+          content: `프로젝트 기간 동안, ${revieweeName}의 강점이 드러났던 순간을 선택해주세요. (1~2개)`,
+          optionGroup: {
+            optionGroupId: 1,
+            minCount: 1,
+            maxCount: 2,
+            options: [
+              { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력', isChecked: true },
+              { optionId: 2, content: '💡 문제 해결 능력', isChecked: false },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      sectionId: 2,
+      header: '이제 선택한 순간을 바탕으로 리뷰를 작성해볼게요',
+      questions: [
+        {
+          questionId: 2,
+          required: true,
+          questionType: 'CHECKBOX',
+          content: `${revieweeName}에서 어떤 부분이 인상 깊었는지 선택해주세요. (1개 이상)`,
+          optionGroup: {
+            optionGroupId: 1,
+            minCount: 1,
+            maxCount: 3,
+            options: [
+              {
+                optionId: 4,
+                content: '반대 의견을 내더라도 듣는 사람이 기분 나쁘지 않게 이야기해요.',
+                isChecked: true,
+              },
+              { optionId: 5, content: '팀원들의 의견을 잘 모아서 회의가 매끄럽게 진행되도록 해요.', isChecked: true },
+            ],
+          },
+        },
+        {
+          questionId: 3,
+          required: true,
+          questionType: 'TEXT',
+          content: '위에서 선택한 사항에 대해 조금 더 자세히 설명해주세요.',
+          optionGroup: null,
+          hasGuideline: true,
+          guideline: `상황을 자세하게 기록할수록 ${revieweeName}에게 도움이 돼요. OO 덕분에 팀이 원활한 소통을 이뤘거나, 함께 일하면서 배울 점이 있었는지 떠올려 보세요.`,
+          answer: '쑤쑤 쑤퍼노바 인상깊어요',
+        },
+      ],
+    },
+    {
+      sectionId: 3,
+      header: '응원의 한마디를 남겨주세요',
+      questions: [
+        {
+          questionId: 4,
+          required: true,
+          questionType: 'TEXT',
+          content: `앞으로의 성장을 위해서 ${revieweeName}이 어떤 목표를 설정하면 좋을까요?`,
+          optionGroup: null,
+          hasGuideline: true,
+          guideline: `어떤 점을 보완하면 좋을지와 함께 '이렇게 해보면 어떨까?'하는 간단한 솔루션을 제안해봐요.`,
+          answer: '어디까지 성장할려구~?',
+        },
+      ],
+    },
+    {
+      sectionId: 4,
+      header: '응원의 한마디를 남겨주세요',
+      questions: [
+        {
+          questionId: 5,
+          required: false,
+          questionType: 'TEXT',
+          content: `${revieweeName}에게 전하고 싶은 다른 리뷰가 있거나 응원의 말이 있다면 적어주세요.`,
+          optionGroup: null,
+          hasGuideline: false,
+          guideline: null,
+          answer: '응원합니다 화이팅!!',
+        },
+      ],
     },
-
-    { id: 2, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
-    { id: 3, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
-  ],
-  keywords: [
-    { id: 11, content: '친절해요' },
-    { id: 22, content: '이야기를 잘 들어줘요.' },
   ],
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
@@ -7,6 +7,7 @@ import * as S from './styles';
 interface DetailedReviewPageContentsProps {
   groupAccessCode: string;
 }
+
 const DetailedReviewPageContents = ({ groupAccessCode }: DetailedReviewPageContentsProps) => {
   const { param: reviewId, queryString: memberId } = useSearchParamAndQuery({
     paramKey: 'reviewId',
@@ -30,10 +31,17 @@ const DetailedReviewPageContents = ({ groupAccessCode }: DetailedReviewPageConte
         handleClickToggleButton={() => console.log('click toggle ')}
       />
       {/* 시연 때 숨김 <RevieweeComments comment={detailedReview.reviewerGroup.description} /> */}
-      {detailedReview.contents.map(({ id, question, answer }, index) => (
+      {/* {detailedReview.contents.map(({ id, question, answer }, index) => (
         <ReviewSection key={id} question={question} answer={answer} index={index} />
-      ))}
-      <KeywordSection keywords={detailedReview.keywords} index={detailedReview.contents.length} />
+      ))} */}
+      {detailedReview.sections.map((section) =>
+        section.questions.map((question, index) => (
+          <S.ReviewContentContainer key={index}>
+            <ReviewSection question={question.content} answer={question.answer!} />
+            {question.questionType === 'CHECKBOX' && <KeywordSection options={question.optionGroup!.options} />}
+          </S.ReviewContentContainer>
+        )),
+      )}
     </S.DetailedReviewPageContents>
   );
 };

diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
@@ -2,4 +2,11 @@ import styled from '@emotion/styled';
 
 export const DetailedReviewPageContents = styled.div`
   width: ${({ theme }) => theme.formWidth};
+  border: 0.1rem solid ${({ theme }) => theme.colors.lightPurple};
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+`;
+
+export const ReviewContentContainer = styled.div`
+  margin-bottom: 7rem;
+  padding: 0 4rem;
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -1,22 +1,19 @@
-import { Keyword } from '@/types';
+import { Options } from '@/types';
 
-import ReviewSectionHeader from '../ReviewSectionHeader';
+// import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
 
 interface KeywordSectionProps {
-  keywords: Keyword[];
-  index: number;
+  options: Options[];
 }
-const KEY_WORD_HEADER = '키워드';
 
-const KeywordSection = ({ keywords, index }: KeywordSectionProps) => {
+const KeywordSection = ({ options }: KeywordSectionProps) => {
   return (
     <S.KeywordSection>
-      <ReviewSectionHeader number={index + 1} text={KEY_WORD_HEADER} />
       <S.KeywordContainer>
-        {keywords.map(({ id, content }) => (
-          <S.KeywordBox key={id}>{content}</S.KeywordBox>
+        {options.map(({ optionId, content }) => (
+          <S.KeywordBox key={optionId}>{content}</S.KeywordBox>
         ))}
       </S.KeywordContainer>
     </S.KeywordSection>

diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
 
 export const KeywordSection = styled.section`
   width: 100%;
-  margin-top: 3.2rem;
+  margin-top: 2rem;
 `;
 
 export const KeywordContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  row-gap: 3.2rem;
+  row-gap: 2.5rem;
   column-gap: 2.4rem;
 `;
 
@@ -21,7 +21,7 @@ export const KeywordBox = styled.div`
   height: fit-content;
   padding: 0.8rem 2.5rem;
 
-  font-size: 1.6rem;
+  font-size: ${({ theme }) => theme.fontSize.small};
   line-height: 2.4rem;
   text-align: center;
 

diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
@@ -2,7 +2,7 @@ import { ProjectImg, ReviewDate } from '@/components';
 import { ProjectImgProps } from '@/components/common/ProjectImg';
 import { ReviewDateProps } from '@/components/common/ReviewDate';
 
-import LockToggle from '../LockToggle';
+// import LockToggle from '../LockToggle';
 
 import * as S from './styles';
 
@@ -19,9 +19,9 @@ const ReviewDescription = ({
   thumbnailUrl,
   projectName,
   revieweeName,
-  isPublic,
+  // isPublic,
   date,
-  handleClickToggleButton,
+  // handleClickToggleButton,
 }: ReviewDescriptionProps) => {
   return (
     <S.Description>

diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
@@ -6,14 +6,20 @@ export const Description = styled.section`
   justify-content: space-between;
 
   width: 100%;
-  height: 6rem;
+  height: 9rem;
   margin: 0;
-  padding-left: 0;
+
+  padding: 1rem 3rem;
+
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+  border-radius: ${({ theme }) => theme.borderRadius.basic} 0 0;
 `;
+
 export const DescriptionSide = styled.div`
   display: flex;
   width: 100%;
 `;
+
 //NOTE: 6rem :깃헙 로고 사이즈
 export const ProjectInfoContainer = styled.div`
   display: flex;
@@ -43,6 +49,7 @@ export const RevieweeNameAndDateContainer = styled.div`
 export const RevieweeNameWrapper = styled.p`
   margin-top: 0;
 `;
+
 export const RevieweeName = styled.span`
   color: ${({ theme }) => theme.colors.primary};
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
@@ -4,20 +4,21 @@ import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
 
-const INDEX_OFFSET = 1;
+// const INDEX_OFFSET = 1;
 interface ReviewSectionProps {
   question: string;
   answer: string;
-  index: number;
 }
 
-const ReviewSection = ({ question, answer, index }: ReviewSectionProps) => {
+const ReviewSection = ({ question, answer }: ReviewSectionProps) => {
   return (
     <S.ReviewSection>
-      <ReviewSectionHeader number={index + INDEX_OFFSET} text={question} />
-      <S.Answer>
-        <MultilineTextViewer text={answer} />
-      </S.Answer>
+      <ReviewSectionHeader text={question} />
+      {answer && (
+        <S.Answer>
+          <MultilineTextViewer text={answer} />
+        </S.Answer>
+      )}
     </S.ReviewSection>
   );
 };

diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx
@@ -1,16 +1,11 @@
 import * as S from './styles';
 
 interface ReviewSectionHeaderProps {
-  number: number;
   text: string;
 }
 
-const ReviewSectionHeader = ({ number, text }: ReviewSectionHeaderProps) => {
-  return (
-    <S.ReviewSectionHeader>
-      {number}. {text}
-    </S.ReviewSectionHeader>
-  );
+const ReviewSectionHeader = ({ text }: ReviewSectionHeaderProps) => {
+  return <S.ReviewSectionHeader>{text}</S.ReviewSectionHeader>;
 };
 
 export default ReviewSectionHeader;
diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/styles.ts b/frontend/src/pages/ReviewListPage/components/PageContents/styles.ts
@@ -4,7 +4,7 @@ export const Layout = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4rem;
-  width: 80%;
+  width: ${({ theme }) => theme.formWidth};
 `;
 
 export const ReviewSection = styled.div`

diff --git a/frontend/src/pages/ReviewListPage/components/SearchSection/index.tsx b/frontend/src/pages/ReviewListPage/components/SearchSection/index.tsx
@@ -12,7 +12,7 @@ const SearchSection = ({ handleChange, options, placeholder }: SearchSectionProp
   return (
     <S.Container>
       <S.SearchBox>
-        <SearchInput $width="48rem" $height="100%" placeholder={placeholder} />
+        <SearchInput $width="42rem" $height="100%" placeholder={placeholder} />
         <Button styleType="secondary">검색</Button>
       </S.SearchBox>
       <DropDown onChange={handleChange} options={options} />

diff --git a/frontend/src/pages/ReviewListPage/components/SearchSection/styles.ts b/frontend/src/pages/ReviewListPage/components/SearchSection/styles.ts
@@ -7,7 +7,7 @@ export const Container = styled.div`
   height: 4rem;
 
   button {
-    width: 9rem;
+    width: 8rem;
     color: ${({ theme }) => theme.colors.primary};
   }
 `;

diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
@@ -3,7 +3,7 @@ import { CSSProperties } from 'react';
 
 import { ThemeProperty } from '../types';
 
-export const formWidth = '65rem';
+export const formWidth = '70rem';
 export const sidebarWidth: ThemeProperty<string> = {
   desktop: '25rem',
   mobile: '100vw',