[FE] feat : 리뷰 작성 내용 확인 에서 쓰지 않은 서술형에서 답변을 작성하지 않았다는 문구 띄어주기

frontend/src/components/common/LongReviewItem/styles.ts

@@ -19,16 +19,11 @@ export const Textarea = styled.textarea<TextareaProps>`
   height: 15rem;
   padding: 1.6rem;
 
-  font-weight: ${({ theme }) => theme.fontWeight.medium};
   overflow-wrap: break-word;
 
   border: 0.1rem solid ${({ $isError, theme }) => ($isError ? theme.colors.red : theme.colors.black)};
   border-radius: 0.8rem;
 
-  &::placeholder {
-    font-weight: ${({ theme }) => theme.fontWeight.medium};
-  }
-
   ${({ $style }) => $style && { ...$style }};
 `;
 

frontend/src/components/index.tsx

@@ -1,4 +1,3 @@
 export * from './layouts';
 export * from './common';
 export * from './error';
-export { default as AnswerListRecheckModal } from './AnswerListRecheckModal';

frontend/src/components/AnswerListRecheckModal/components/ReviewWritingCard/index.tsx → frontend/src/pages/ReviewWritingCardFromPage/components/AnswerListRecheckModal/components/ReviewCard/index.tsx

@@ -2,11 +2,11 @@ import { EssentialPropsWithChildren } from '@/types';
 
 import * as S from './styles';
 
-interface ReviewWritingCardProps {
+interface ReviewCardProps {
   title: string;
 }
 
-const ReviewWritingCard = ({ title, children }: EssentialPropsWithChildren<ReviewWritingCardProps>) => {
+const ReviewCard = ({ title, children }: EssentialPropsWithChildren<ReviewCardProps>) => {
   return (
     <S.Container>
       <S.Header>
@@ -17,4 +17,4 @@ const ReviewWritingCard = ({ title, children }: EssentialPropsWithChildren<Revie
   );
 };
 
-export default ReviewWritingCard;
+export default ReviewCard;

frontend/src/components/AnswerListRecheckModal/index.tsx → frontend/src/pages/ReviewWritingCardFromPage/components/AnswerListRecheckModal/index.tsx

@@ -1,13 +1,11 @@
 import { Fragment } from 'react';
 
-import { MultilineTextViewer } from '@/components';
+import { CheckboxItem, MultilineTextViewer } from '@/components';
+import ContentModal from '@/components/common/modals/ContentModal';
 import { ReviewWritingAnswer, ReviewWritingCardSection } from '@/types';
 
-import CheckboxItem from '../common/CheckboxItem';
-import ContentModal from '../common/modals/ContentModal';
-
 import QuestionCard from './components/QuestionCard';
-import ReviewWritingCard from './components/ReviewWritingCard';
+import ReviewCard from './components/ReviewCard';
 import * as S from './styles';
 
 interface AnswerListRecheckModalProps {
@@ -34,8 +32,8 @@ const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }:
       <S.AnswerListContainer>
         <S.CardLayout>
           {questionSectionList.map((section) => (
-            <S.ReviewWritingCardWrapper key={section.sectionId}>
-              <ReviewWritingCard title={section.header}>
+            <S.ReviewCardWrapper key={section.sectionId}>
+              <ReviewCard title={section.header}>
                 {section.questions.map((question) => (
                   <Fragment key={question.questionId}>
                     <QuestionCard questionType="normal" question={question.content} />
@@ -55,14 +53,20 @@ const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }:
                           ))}
                         </div>
                       )}
-                      {<S.TextAnswerWrapper>{question.questionType === 'TEXT'}</S.TextAnswerWrapper> && (
-                        <MultilineTextViewer text={findTextAnswer(question.questionId) || ''} />
+                      {question.questionType === 'TEXT' && (
+                        <S.TextAnswerWrapper>
+                          {findTextAnswer(question.questionId) ? (
+                            <MultilineTextViewer text={findTextAnswer(question.questionId) as string} />
+                          ) : (
+                            <S.EmptyTextAnswer>작성한 답변이 없어요</S.EmptyTextAnswer>
+                          )}
+                        </S.TextAnswerWrapper>
                       )}
                     </S.ContentContainer>
                   </Fragment>
                 ))}
-              </ReviewWritingCard>
-            </S.ReviewWritingCardWrapper>
+              </ReviewCard>
+            </S.ReviewCardWrapper>
           ))}
         </S.CardLayout>
       </S.AnswerListContainer>

frontend/src/components/AnswerListRecheckModal/styles.ts → frontend/src/pages/ReviewWritingCardFromPage/components/AnswerListRecheckModal/styles.ts

@@ -18,7 +18,7 @@ export const ContentContainer = styled.div`
   flex-direction: column;
 `;
 
-export const ReviewWritingCardWrapper = styled.div`
+export const ReviewCardWrapper = styled.div`
   overflow: hidden;
   border: 0.2rem solid ${({ theme }) => theme.colors.lightPurple};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
@@ -27,3 +27,8 @@ export const ReviewWritingCardWrapper = styled.div`
 export const TextAnswerWrapper = styled.div`
   margin-top: 1rem;
 `;
+
+export const EmptyTextAnswer = styled.p`
+  width: 100%;
+  color: ${({ theme }) => theme.colors.gray};
+`;

frontend/src/pages/ReviewWritingCardFromPage/components/CardForm/index.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { ConfirmModal, AnswerListRecheckModal } from '@/components';
+import { ConfirmModal } from '@/components';
 import {
   useCurrentCardIndex,
   useGetDataToWrite,
@@ -14,12 +14,10 @@ import {
   useUpdateDefaultAnswers,
 } from '@/hooks';
 import useModals from '@/hooks/useModals';
+import { AnswerListRecheckModal, ProgressBar, ReviewWritingCard } from '@/pages/ReviewWritingCardFromPage/components';
 import { answerMapAtom, answerValidationMapAtom, visitedCardListAtom } from '@/recoil';
 import { ReviewWritingFormResult } from '@/types';
 
-import ProgressBar from '../ProgressBar';
-import ReviewWritingCard from '../ReviewWritingCard';
-
 import * as S from './styles';
 
 // const PROJECT_IMAGE_SIZE = '5rem';

frontend/src/pages/ReviewWritingCardFromPage/components/index.tsx

@@ -0,0 +1,7 @@
+export { default as AnswerListRecheckModal } from './AnswerListRecheckModal';
+export { default as CardForm } from './CardForm';
+export { default as CardSliderController } from './CardSliderController';
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+export { default as ProgressBar } from './ProgressBar';
+export { default as QnABox } from './QnABox';
+export { default as ReviewWritingCard } from './ReviewWritingCard';