[FE] fix: 섹션별 답변 모아보기의 중복 출력 문제 해결 및 리스트 형식으로 출력 (#821)

* fix: 받은 리뷰가 중복되어 표시되는 오류 수정 * design: 형광펜 에디터가 답변을 list 형태로 출력하도록 설정 * design: 답변 간 간격 설정
woowacourse-teams · Oct 11, 2024 · 1f02630 · 1f02630
1 parent 046b230
commit 1f02630
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/frontend/src/components/highlight/EditorLineBlock/index.tsx b/frontend/src/components/highlight/EditorLineBlock/index.tsx
@@ -3,6 +3,8 @@ import { EditorLine, HighlightRange } from '@/types';
 
 import Syntax from '../Syntax';
 
+import * as S from './style';
+
 interface EditorLineBlockProps {
   line: EditorLine;
   lineIndex: number;
@@ -60,9 +62,9 @@ const EditorLineBlock = ({ line, lineIndex }: EditorLineBlockProps) => {
   };
 
   return (
-    <p className={EDITOR_LINE_CLASS_NAME} data-index={lineIndex}>
+    <S.EditorLineBlock className={EDITOR_LINE_CLASS_NAME} data-index={lineIndex}>
       {renderSentenceList()}
-    </p>
+    </S.EditorLineBlock>
   );
 };
 

diff --git a/frontend/src/components/highlight/EditorLineBlock/style.ts b/frontend/src/components/highlight/EditorLineBlock/style.ts
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const EditorLineBlock = styled.p`
+  display: list-item;
+  margin-left: 3rem;
+  text-indent: -2.2rem;
+  list-style-type: disc;
+`;
diff --git a/frontend/src/components/highlight/HighlightEditor/index.tsx b/frontend/src/components/highlight/HighlightEditor/index.tsx
@@ -92,7 +92,7 @@ const HighlightEditor = ({ questionId, answerList }: HighlightEditorProps) => {
   }, [isEditable]);
 
   return (
-    <div ref={editorRef} style={{ position: 'relative' }}>
+    <S.HighlightEditorContainer ref={editorRef}>
       <S.SwitchButtonWrapper>
         <EditSwitchButton isEditable={isEditable} handleEditToggleButton={handleEditToggleButton} />
       </S.SwitchButtonWrapper>
@@ -120,7 +120,7 @@ const HighlightEditor = ({ questionId, answerList }: HighlightEditorProps) => {
       {isEditable && removalTarget && removerPosition && (
         <HighlightRemoverWrapper buttonPosition={removerPosition} removeHighlightByClick={removeHighlightByClick} />
       )}
-    </div>
+    </S.HighlightEditorContainer>
   );
 };
 

diff --git a/frontend/src/components/highlight/HighlightEditor/style.ts b/frontend/src/components/highlight/HighlightEditor/style.ts
@@ -1,5 +1,15 @@
 import styled from '@emotion/styled';
 
+export const HighlightEditorContainer = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  padding: 1rem;
+`;
+
 export const SwitchButtonWrapper = styled.div`
   display: flex;
   justify-content: end;

diff --git a/frontend/src/pages/ReviewCollectionPage/index.tsx b/frontend/src/pages/ReviewCollectionPage/index.tsx
@@ -41,9 +41,6 @@ const ReviewCollectionPage = () => {
                       {review.answers && (
                         <HighlightEditor questionId={review.question.id} answerList={review.answers} />
                       )}
-                      {review.answers?.map((answer, index) => {
-                        return <S.ReviewAnswer key={index}>{answer.content}</S.ReviewAnswer>;
-                      })}
                     </S.ReviewAnswerContainer>
                   )}
                 </Accordion>