refactor: 받은 리뷰가 없을 경우, EmptyContent 적용

woowacourse-teams · Feb 12, 2025 · c31a51c · c31a51c
1 parent 40d0482
commit c31a51c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 25 deletions.
diff --git a/frontend/src/components/common/EmptyContent/index.tsx b/frontend/src/components/common/EmptyContent/index.tsx
@@ -8,17 +8,19 @@ interface EmptyContentProps {
   iconWidth?: string;
   iconMessageGap?: string;
   messageFontSize?: string;
+  isBorder?: boolean;
 }
 
 const EmptyContent = ({
   iconHeight,
   iconWidth,
   iconMessageGap,
   messageFontSize,
+  isBorder,
   children,
 }: EssentialPropsWithChildren<EmptyContentProps>) => {
   return (
-    <S.EmptyContent $iconMessageGap={iconMessageGap}>
+    <S.EmptyContent $iconMessageGap={iconMessageGap} $isBorder={isBorder}>
       <S.Img $height={iconHeight} $width={iconWidth} alt="" src={Icon} />
       <S.MessageContainer $messageFontSize={messageFontSize}>{children}</S.MessageContainer>
     </S.EmptyContent>

diff --git a/frontend/src/components/common/EmptyContent/styles.ts b/frontend/src/components/common/EmptyContent/styles.ts
@@ -1,11 +1,20 @@
 import styled from '@emotion/styled';
 
-export const EmptyContent = styled.div<{ $iconMessageGap?: string }>`
+export const EmptyContent = styled.div<{ $iconMessageGap?: string; $isBorder?: boolean }>`
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.$iconMessageGap ?? '3.2rem'};
   align-items: center;
+
+  ${({ theme, $isBorder }) =>
+    $isBorder &&
+    `
+    border: 0.2rem solid ${theme.colors.lightGray};
+    border-radius: 1rem;
+    padding: 4rem 0;
+  `}
 `;
+
 interface ImgProps {
   $height?: string;
   $width?: string;

diff --git a/frontend/src/constants/review.ts b/frontend/src/constants/review.ts
@@ -10,8 +10,9 @@ export const REVIEW_MESSAGE = {
 };
 
 export const REVIEW_EMPTY = {
-  noReviewInTotal: '아직 받은 리뷰가 없어요!',
-  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요!',
+  noReviewInTotal: '아직 받은 리뷰가 없어요...',
+  noReviewLink: '생성한 리뷰 링크가 없어요...',
+  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요...',
 };
 
 export const REVIEW_URL_GENERATOR_FORM_VALIDATION = {

diff --git a/frontend/src/pages/ReviewCollectionPage/components/ReviewCollectionPageContents/index.tsx b/frontend/src/pages/ReviewCollectionPage/components/ReviewCollectionPageContents/index.tsx
@@ -1,8 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 
-import { Accordion, Dropdown, HighlightEditorContainer } from '@/components';
+import { Accordion, Dropdown, EmptyContent, HighlightEditorContainer } from '@/components';
 import { DropdownItem } from '@/components/common/Dropdown';
-import ReviewEmptySection from '@/components/common/ReviewEmptySection';
 import { ReviewInfoDataContext } from '@/components/layouts/ReviewDisplayLayout/ReviewInfoDataProvider';
 import { REVIEW_EMPTY, SESSION_STORAGE_KEY } from '@/constants';
 import { GroupedReview } from '@/types';
@@ -41,21 +40,29 @@ const ReviewCollectionPageContents = () => {
       const hasNoCheckboxAnswer = review.votes?.every((vote) => vote.count === 0);
 
       return hasNoCheckboxAnswer ? (
-        <ReviewEmptySection content={REVIEW_EMPTY.noReviewInQuestion} />
+        <EmptyContent iconWidth="18rem" messageFontSize="1.8rem" iconMessageGap="2.6rem">
+          {REVIEW_EMPTY.noReviewInQuestion}
+        </EmptyContent>
       ) : (
         <DoughnutChart reviewVotes={review.votes!} />
       );
     }
 
     if (review.answers?.length === 0) {
-      return <ReviewEmptySection content={REVIEW_EMPTY.noReviewInQuestion} />;
+      <EmptyContent iconWidth="18rem" messageFontSize="1.8rem" iconMessageGap="2.6rem">
+        {REVIEW_EMPTY.noReviewInQuestion}
+      </EmptyContent>;
     }
 
     return <HighlightEditorContainer questionId={review.question.id} answerList={review.answers!} />;
   };
 
   if (totalReviewCount === 0) {
-    return <ReviewEmptySection content={REVIEW_EMPTY.noReviewInTotal} />;
+    return (
+      <EmptyContent iconWidth="17rem" messageFontSize="2rem" iconMessageGap="2.6rem" isBorder={true}>
+        {REVIEW_EMPTY.noReviewInTotal}
+      </EmptyContent>
+    );
   }
 
   return (

diff --git a/frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/index.tsx b/frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/index.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router';
 
 import { URLGeneratorForm, EmptyContent } from '@/components';
-import { ROUTE } from '@/constants';
+import { REVIEW_EMPTY, ROUTE } from '@/constants';
 import { useGetReviewLinks } from '@/hooks';
 
 import ReviewLinkLayout from '../layouts/ReviewLinkLayout';
@@ -35,11 +35,9 @@ const ReviewLinkDashboard = () => {
           subTitle="클릭하면 해당 프로젝트의 리뷰 목록으로 이동해요"
         >
           {reviewLinks.lastReviewGroupId === 0 ? (
-            <S.EmptyContentWrapper>
-              <EmptyContent iconWidth="15rem" messageFontSize="1.8rem" iconMessageGap="2rem">
-                생성한 리뷰 링크가 없어요...
-              </EmptyContent>
-            </S.EmptyContentWrapper>
+            <EmptyContent iconWidth="15rem" messageFontSize="1.8rem" iconMessageGap="2rem" isBorder={true}>
+              {REVIEW_EMPTY.noReviewLink}
+            </EmptyContent>
           ) : (
             reviewLinks.reviewGroups.map((reviewGroup) => (
               <ReviewLinkItem

diff --git a/frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/styles.ts b/frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/styles.ts
@@ -77,11 +77,3 @@ export const LinkSection = styled.section`
     width: 90%;
   }
 `;
-
-export const EmptyContentWrapper = styled.div`
-  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
-
-  border-radius: 1rem;
-
-  padding: 3rem 0;
-`;
diff --git a/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useNavigate } from 'react-router';
 
-import { ReviewEmptySection } from '@/components';
+import { EmptyContent } from '@/components';
 import ReviewCard from '@/components/common/ReviewCard';
 import UndraggableWrapper from '@/components/common/UndraggableWrapper';
 import { ReviewInfoDataContext } from '@/components/layouts/ReviewDisplayLayout/ReviewInfoDataProvider';
@@ -41,7 +41,9 @@ const ReviewListPageContents = () => {
   return (
     <>
       {totalReviewCount === 0 ? (
-        <ReviewEmptySection content={REVIEW_EMPTY.noReviewInTotal} />
+        <EmptyContent iconWidth="17rem" messageFontSize="2rem" iconMessageGap="2.6rem" isBorder={true}>
+          {REVIEW_EMPTY.noReviewInTotal}
+        </EmptyContent>
       ) : (
         <S.ReviewSection>
           {reviews.map((review, index) => {