chore: MultilineText에 text wrap 속성 적용

woowacourse-teams · Aug 14, 2024 · cd65d5a · cd65d5a
1 parent d7b66cf
commit cd65d5a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/frontend/src/components/AnswerListRecheckModal/index.tsx b/frontend/src/components/AnswerListRecheckModal/index.tsx
@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 
+import { MultilineTextViewer } from '@/components';
 import { ReviewWritingAnswer, ReviewWritingCardSection } from '@/types';
 
 import CheckboxItem from '../common/CheckboxItem';
@@ -54,7 +55,9 @@ const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }:
                           ))}
                         </div>
                       )}
-                      <div>{question.questionType === 'TEXT' && <div>{findTextAnswer(question.questionId)}</div>}</div>
+                      {question.questionType === 'TEXT' && (
+                        <MultilineTextViewer text={findTextAnswer(question.questionId) || ''} />
+                      )}
                     </S.ContentContainer>
                   </Fragment>
                 ))}

diff --git a/frontend/src/components/common/MultilineTextViewer/index.tsx b/frontend/src/components/common/MultilineTextViewer/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as S from './styles';
 
 interface MultilineTextViewerProps {
   text: string;
@@ -8,10 +8,10 @@ const MultilineTextViewer = ({ text }: MultilineTextViewerProps) => {
   return (
     <>
       {text.split('\n').map((line, index) => (
-        <React.Fragment key={index}>
+        <S.MultilineText key={index}>
           {line}
           <br />
-        </React.Fragment>
+        </S.MultilineText>
       ))}
     </>
   );

diff --git a/frontend/src/components/common/MultilineTextViewer/styles.ts b/frontend/src/components/common/MultilineTextViewer/styles.ts
@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const MultilineText = styled.div`
+  word-wrap: break-word;
+`;