From 9ea0611db65ee8bedf11cd42c7befed7ba90d590 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Thu, 2 Jan 2025 20:00:13 +0900
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=EA=B0=95=EC=A0=90=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=84=9C?=
 =?UTF-8?q?=EB=B2=84=20=EC=9D=91=EB=8B=B5=20=ED=98=95=EC=8B=9D=EA=B3=BC=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mocks/mockData/detailedReviewMockData.ts  |  12 +-
 .../src/mocks/mockData/reviewListMockData.ts  | 144 ++++++++++++------
 2 files changed, 106 insertions(+), 50 deletions(-)

diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
index 919428f5c..8364d99d0 100644
--- a/frontend/src/mocks/mockData/detailedReviewMockData.ts
+++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -26,8 +26,16 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
             minCount: 1,
             maxCount: 2,
             options: [
-              { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력', isChecked: true },
-              { optionId: 2, content: '💡 문제 해결 능력', isChecked: false },
+              {
+                optionId: 1,
+                content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)',
+                isChecked: true,
+              },
+              {
+                optionId: 2,
+                content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)',
+                isChecked: false,
+              },
             ],
           },
         },
diff --git a/frontend/src/mocks/mockData/reviewListMockData.ts b/frontend/src/mocks/mockData/reviewListMockData.ts
index 8f9986c3d..7d73abd0c 100644
--- a/frontend/src/mocks/mockData/reviewListMockData.ts
+++ b/frontend/src/mocks/mockData/reviewListMockData.ts
@@ -10,8 +10,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2024-07-24',
       contentPreview: `1. 나는 짧은 데이터`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
       ],
     },
     {
@@ -19,8 +23,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2023-08-29',
       contentPreview: `2. 전해주고 싶어 슬픈 시간이 다 흩어진 후에야 들리지만 눈을 감고 느껴봐 움직이는 마음 너를 향한 내 눈빛을 특별한 기적을 기다리지마 눈 앞에선 우리의 거친 길은 알 수 없는 미래와 벽 바꾸지 않아 포기할 수 없어 변치 않을 사랑으로 지켜줘 상처 입은 내 맘까지 시선 속에서 말은 필요 없어 멈춰져 버린 이 시간 사랑해 널 이 느낌 이대로 그려왔던 헤매임의 끝 이 세상 속에서 반복되는 슬픔 이젠 안녕 수많은 알 수 없는 길 속에 희미한 빛을 난 쫓아가 언제까지라도 함께 하는거야 다시 만난 나의 세계`,
       categories: [
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
-        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
+        { optionId: 4, content: '💻기술적 역량, 전문 지식 (예: 요구 사항을 이해하고 이를 구현하는 능력)' },
       ],
     },
     {
@@ -41,8 +45,12 @@ export const REVIEW_LIST: ReviewList = {
         Disco overload I'm into that I'm good to go
       `,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
     {
@@ -61,8 +69,8 @@ export const REVIEW_LIST: ReviewList = {
           아무 걱정도 하지는 마, 나에게 다 맡겨 봐
           `,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -80,8 +88,8 @@ export const REVIEW_LIST: ReviewList = {
         That tick, that tick, tick bomb
       `,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -95,8 +103,12 @@ export const REVIEW_LIST: ReviewList = {
         Ooh-ooh, ooh-ooh, lalalala-lalala
         `,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
     {
@@ -104,8 +116,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `7. 나는 짧은 데이터`,
       categories: [
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -113,8 +125,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `8. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
-        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 4, content: '💻기술적 역량, 전문 지식 (예: 요구 사항을 이해하고 이를 구현하는 능력)' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
       ],
     },
     {
@@ -122,8 +138,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `9. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -131,8 +151,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `10. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
       ],
     },
     {
@@ -140,8 +160,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `11. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -149,8 +169,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `12. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 4, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 4,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
     {
@@ -158,8 +182,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2024-07-24',
       contentPreview: `13. 물론 시중에 출간되어 있는 책들로 공부하는 것도 큰 장점이지만 더 깊은 공부를 하고 싶을 때 공식 문서를 확인해보는 것이 좋기 때문에, 저 개인적인 생각으로는 언어 공부를 아예 처음 입문하시는 분들은 한국에서 출간된 개발 서적으로 공부를 시작하시다가 모르는 부분이.....`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
       ],
     },
     {
@@ -167,8 +195,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2023-08-29',
       contentPreview: `14. 하루스터디는 효율적인 공부 방법을 제공하는 학습 진행 도구 서비스입니다. 하루스터디는 목표 설정 단계, 학습 단계, 회고 단계를 반복하는 학습 사이클을 통해 학습 효율을 끌어올립니다. 하루스터디를 사용하게 되면 '학습을 잘 하는 방법'에 대해서...`,
       categories: [
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
-        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
+        { optionId: 4, content: '💻기술적 역량, 전문 지식 (예: 요구 사항을 이해하고 이를 구현하는 능력)' },
       ],
     },
     {
@@ -176,8 +204,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `15. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
     {
@@ -185,8 +217,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `16. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -194,8 +226,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `17. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -203,8 +235,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `18. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
     {
@@ -212,8 +248,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `19. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -221,8 +257,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `20. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 4, content: '🤓 기술적 역량, 전문 지식' },
-        { optionId: 5, content: '🌱 성장 마인드셋' },
+        { optionId: 4, content: '💻기술적 역량, 전문 지식 (예: 요구 사항을 이해하고 이를 구현하는 능력)' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
       ],
     },
     {
@@ -230,8 +270,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `21. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 5, content: '🌱 성장 마인드셋' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        {
+          optionId: 5,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -239,8 +283,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `22. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 3, content: '⏰ 시간 관리 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 3, content: '⏰시간 관리 능력 (예: 일정과 마감 기한 준수, 업무의 우선 순위 분배)' },
       ],
     },
     {
@@ -248,8 +292,8 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `23. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
-        { optionId: 2, content: '💡 문제 해결 능력' },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
+        { optionId: 2, content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)' },
       ],
     },
     {
@@ -257,8 +301,12 @@ export const REVIEW_LIST: ReviewList = {
       createdAt: '2021-08-01',
       contentPreview: `24. 공간을 한 눈에, 예약은 한 번에! 맞춤형 공간예약 서비스 제작 플랫폼 찜꽁입니다! 공간 제공자(관리자)는 에디터를 통해 공간을 생성할 수 있습니다! 생성한 공간은 링크를 통해 사용자에게 제공할 수 있으며, 사용자는 링크를 통해 간편하게 공간을 확인하고 예약을...`,
       categories: [
-        { optionId: 4, content: '🌱 성장 마인드셋' },
-        { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력' },
+        {
+          optionId: 4,
+          content:
+            '🌱성장 마인드셋 (예: 새로운 분야나 잘 모르는 분야에 도전하는 마음, 꾸준한 노력으로 프로젝트 이전보다 성장하는 모습)',
+        },
+        { optionId: 1, content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)' },
       ],
     },
   ],

From 46488a1e49790d2b327d8ba114750922092d555a Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Thu, 2 Jan 2025 22:05:23 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20StrengthKeywordList=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewCard/StrengthKeywordList/index.tsx  | 32 +++++++++++++++++++
 .../ReviewCard/StrengthKeywordList/styles.ts  | 25 +++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx
 create mode 100644 frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts

diff --git a/frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx b/frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx
new file mode 100644
index 000000000..bd601cb10
--- /dev/null
+++ b/frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx
@@ -0,0 +1,32 @@
+import { Category } from '@/types';
+
+import * as S from './styles';
+
+interface StrengthKeywordProps {
+  categories: Category[];
+}
+
+const StrengthKeywordList = ({ categories }: StrengthKeywordProps) => {
+  const formattedCategories = categories.map((category) => {
+    // 카테고리 내용에서 '(예: ' 앞부분만 추출
+    const contentWithoutExample = Array.from(category.content.split(' (예: ')[0]);
+
+    const emoji = contentWithoutExample.shift();
+    const keyword = contentWithoutExample.join('');
+
+    return {
+      optionId: category.optionId,
+      content: `${emoji} ${keyword}`,
+    };
+  });
+
+  return (
+    <S.KeywordList>
+      {formattedCategories.map((category) => (
+        <S.KeywordItem key={category.optionId}>{category.content}</S.KeywordItem>
+      ))}
+    </S.KeywordList>
+  );
+};
+
+export default StrengthKeywordList;
diff --git a/frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts b/frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts
new file mode 100644
index 000000000..89f4ac6f6
--- /dev/null
+++ b/frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts
@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const KeywordList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2.5rem;
+  align-items: center;
+
+  font-size: 1.2rem;
+
+  ${media.small} {
+    gap: 1.2rem;
+  }
+`;
+
+export const KeywordItem = styled.span`
+  padding: 0.5rem 2rem;
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+  border-radius: 1.4rem;
+
+  color: ${({ theme }) => theme.colors.primary};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;

From 7ff2091470fdb85e112131e0c093c3f61c7b861c Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Thu, 2 Jan 2025 22:08:58 +0900
Subject: [PATCH 03/16] =?UTF-8?q?refactor:=20ReviewCard=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewCard/StrengthKeywordList/index.tsx  |  0
 .../ReviewCard/StrengthKeywordList/styles.ts  |  0
 .../{ => common}/ReviewCard/index.tsx         |  9 ++--
 .../{ => common}/ReviewCard/styles.ts         | 44 ++++++-------------
 .../ReviewListPageContents/index.tsx          |  2 +-
 5 files changed, 18 insertions(+), 37 deletions(-)
 rename frontend/src/components/{ => common}/ReviewCard/StrengthKeywordList/index.tsx (100%)
 rename frontend/src/components/{ => common}/ReviewCard/StrengthKeywordList/styles.ts (100%)
 rename frontend/src/components/{ => common}/ReviewCard/index.tsx (72%)
 rename frontend/src/components/{ => common}/ReviewCard/styles.ts (58%)

diff --git a/frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx b/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
similarity index 100%
rename from frontend/src/components/ReviewCard/StrengthKeywordList/index.tsx
rename to frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
diff --git a/frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts b/frontend/src/components/common/ReviewCard/StrengthKeywordList/styles.ts
similarity index 100%
rename from frontend/src/components/ReviewCard/StrengthKeywordList/styles.ts
rename to frontend/src/components/common/ReviewCard/StrengthKeywordList/styles.ts
diff --git a/frontend/src/components/ReviewCard/index.tsx b/frontend/src/components/common/ReviewCard/index.tsx
similarity index 72%
rename from frontend/src/components/ReviewCard/index.tsx
rename to frontend/src/components/common/ReviewCard/index.tsx
index 92baf19a9..359dd184d 100644
--- a/frontend/src/components/ReviewCard/index.tsx
+++ b/frontend/src/components/common/ReviewCard/index.tsx
@@ -1,5 +1,6 @@
 import { Category } from '@/types';
 
+import StrengthKeywordList from './StrengthKeywordList';
 import * as S from './styles';
 
 interface ReviewCardProps {
@@ -13,16 +14,12 @@ const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: Revi
   return (
     <S.Layout onClick={handleClick}>
       <S.Header>
-        <S.Date>{createdAt}</S.Date>
+        <S.Date>{`작성일 | ${createdAt}`}</S.Date>
       </S.Header>
       <S.Main>
         <S.ContentPreview>{contentPreview}</S.ContentPreview>
         <S.Footer>
-          <S.Keyword>
-            {categories.map((category) => (
-              <div key={category.optionId}>{category.content}</div>
-            ))}
-          </S.Keyword>
+          <StrengthKeywordList categories={categories} />
         </S.Footer>
       </S.Main>
     </S.Layout>
diff --git a/frontend/src/components/ReviewCard/styles.ts b/frontend/src/components/common/ReviewCard/styles.ts
similarity index 58%
rename from frontend/src/components/ReviewCard/styles.ts
rename to frontend/src/components/common/ReviewCard/styles.ts
index 5d333823e..133526f91 100644
--- a/frontend/src/components/ReviewCard/styles.ts
+++ b/frontend/src/components/common/ReviewCard/styles.ts
@@ -5,15 +5,15 @@ import media from '@/utils/media';
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  border: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
   border-radius: 1rem;
 
   &:hover {
     cursor: pointer;
-    border: 0.15rem solid ${({ theme }) => theme.colors.primaryHover};
+    border: 0.2rem solid ${({ theme }) => theme.colors.primaryHover};
 
-    & > div:first-of-type {
-      background-color: ${({ theme }) => theme.colors.lightPurple};
+    & > div {
+      background-color: ${({ theme }) => theme.colors.palePurple};
     }
   }
 `;
@@ -23,16 +23,16 @@ export const Header = styled.div`
   align-items: center;
 
   width: 100%;
-  height: 3.8rem;
 
-  background-color: ${({ theme }) => theme.colors.lightGray};
+  padding: 2rem 0 0 2.5rem;
+
   border-radius: 1rem 1rem 0 0;
 `;
 
 export const Date = styled.p`
   height: fit-content;
-  padding: 0 3rem;
-  font-size: 1.3rem;
+
+  color: ${({ theme }) => theme.colors.gray};
 `;
 
 export const Main = styled.div`
@@ -41,9 +41,11 @@ export const Main = styled.div`
   gap: 2rem;
 
   width: 100%;
-  padding: 2rem 3rem;
+  padding: 2rem 2.5rem;
 
   font-size: 1.6rem;
+
+  border-radius: 0 0 1rem 1rem;
 `;
 
 export const ContentPreview = styled.p`
@@ -52,10 +54,11 @@ export const ContentPreview = styled.p`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 
-  height: 6rem;
+  height: 7.5rem;
   padding-right: 2rem;
 
-  line-height: 2rem;
+  line-height: 2.5rem;
+
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 `;
@@ -72,22 +75,3 @@ export const Footer = styled.div`
     align-items: flex-start;
   }
 `;
-
-export const Keyword = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2.5rem;
-  align-items: center;
-
-  font-size: 1.4rem;
-
-  ${media.small} {
-    gap: 1.2rem;
-  }
-
-  div {
-    padding: 0.5rem 3rem;
-    background-color: ${({ theme }) => theme.colors.lightPurple};
-    border-radius: 0.8rem;
-  }
-`;
diff --git a/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx
index 172242ad0..3d8f11597 100644
--- a/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx
+++ b/frontend/src/pages/ReviewListPage/components/ReviewListPageContents/index.tsx
@@ -2,9 +2,9 @@ import { useContext } from 'react';
 import { useNavigate } from 'react-router';
 
 import { ReviewEmptySection } from '@/components';
+import ReviewCard from '@/components/common/ReviewCard';
 import UndraggableWrapper from '@/components/common/UndraggableWrapper';
 import { ReviewInfoDataContext } from '@/components/layouts/ReviewDisplayLayout/ReviewInfoDataProvider';
-import ReviewCard from '@/components/ReviewCard';
 import { REVIEW_EMPTY } from '@/constants';
 import { ROUTE } from '@/constants/route';
 import { useGetReviewList, useSearchParamAndQuery } from '@/hooks';

From 42bd98f5e7ec83644f789d1a073086f46309e336 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Thu, 2 Jan 2025 23:18:01 +0900
Subject: [PATCH 04/16] =?UTF-8?q?refactor:=20formattedCategories=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=9C=A0=ED=8B=B8=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D,=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewCard/StrengthKeywordList/index.tsx     | 16 +++-------------
 .../src/mocks/mockData/detailedReviewMockData.ts |  2 +-
 .../components/KeywordSection/index.tsx          |  5 ++++-
 frontend/src/utils/formattedCategories.ts        | 14 ++++++++++++++
 4 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/utils/formattedCategories.ts

diff --git a/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx b/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
index bd601cb10..51288bd24 100644
--- a/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
+++ b/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
@@ -1,4 +1,5 @@
 import { Category } from '@/types';
+import formattedCategories from '@/utils/formattedCategories';
 
 import * as S from './styles';
 
@@ -7,22 +8,11 @@ interface StrengthKeywordProps {
 }
 
 const StrengthKeywordList = ({ categories }: StrengthKeywordProps) => {
-  const formattedCategories = categories.map((category) => {
-    // 카테고리 내용에서 '(예: ' 앞부분만 추출
-    const contentWithoutExample = Array.from(category.content.split(' (예: ')[0]);
-
-    const emoji = contentWithoutExample.shift();
-    const keyword = contentWithoutExample.join('');
-
-    return {
-      optionId: category.optionId,
-      content: `${emoji} ${keyword}`,
-    };
-  });
+  const transformedCategories = formattedCategories(categories);
 
   return (
     <S.KeywordList>
-      {formattedCategories.map((category) => (
+      {transformedCategories.map((category) => (
         <S.KeywordItem key={category.optionId}>{category.content}</S.KeywordItem>
       ))}
     </S.KeywordList>
diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
index 8364d99d0..db8e92858 100644
--- a/frontend/src/mocks/mockData/detailedReviewMockData.ts
+++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -34,7 +34,7 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
               {
                 optionId: 2,
                 content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)',
-                isChecked: false,
+                isChecked: true,
               },
             ],
           },
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
index 7c9572616..050857f1b 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -1,4 +1,5 @@
 import { Options } from '@/types';
+import formattedCategories from '@/utils/formattedCategories';
 
 import * as S from './styles';
 
@@ -7,10 +8,12 @@ interface KeywordSectionProps {
 }
 
 const KeywordSection = ({ options }: KeywordSectionProps) => {
+  const transformedOptions = formattedCategories(options);
+
   return (
     <S.KeywordSection>
       <S.KeywordList>
-        {options.map(({ optionId, content }) => (
+        {transformedOptions.map(({ optionId, content }) => (
           <S.KeywordItem key={optionId}>{content}</S.KeywordItem>
         ))}
       </S.KeywordList>
diff --git a/frontend/src/utils/formattedCategories.ts b/frontend/src/utils/formattedCategories.ts
new file mode 100644
index 000000000..629317a24
--- /dev/null
+++ b/frontend/src/utils/formattedCategories.ts
@@ -0,0 +1,14 @@
+const formattedCategories = <T extends { optionId: number; content: string }>(categories: T[]) => {
+  return categories.map((category) => {
+    const contentWithoutExample = Array.from(category.content.split(' (예: ')[0]);
+    const emoji = contentWithoutExample.shift();
+    const keyword = contentWithoutExample.join('');
+
+    return {
+      optionId: category.optionId,
+      content: `${emoji} ${keyword}`,
+    };
+  });
+};
+
+export default formattedCategories;

From 3db57738330f737cf39ed5503995e7ab11b256d1 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Thu, 2 Jan 2025 23:51:47 +0900
Subject: [PATCH 05/16] =?UTF-8?q?refactor:=20=EC=9E=91=EC=84=B1=EC=9D=BC?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EC=8B=9D=EC=9D=84=20ReviewDat?=
 =?UTF-8?q?e=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/ReviewCard/index.tsx    |  6 ++++-
 .../components/common/ReviewDate/index.tsx    |  9 ++-----
 .../components/common/ReviewDate/styles.ts    | 24 ++++---------------
 .../components/ReviewDescription/index.tsx    |  2 +-
 4 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/common/ReviewCard/index.tsx b/frontend/src/components/common/ReviewCard/index.tsx
index 359dd184d..a7acac46a 100644
--- a/frontend/src/components/common/ReviewCard/index.tsx
+++ b/frontend/src/components/common/ReviewCard/index.tsx
@@ -1,5 +1,7 @@
 import { Category } from '@/types';
 
+import ReviewDate from '../ReviewDate';
+
 import StrengthKeywordList from './StrengthKeywordList';
 import * as S from './styles';
 
@@ -11,10 +13,12 @@ interface ReviewCardProps {
 }
 
 const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: ReviewCardProps) => {
+  const date = new Date(createdAt);
+
   return (
     <S.Layout onClick={handleClick}>
       <S.Header>
-        <S.Date>{`작성일 | ${createdAt}`}</S.Date>
+        <ReviewDate date={date} dateTitle={`작성일`} />
       </S.Header>
       <S.Main>
         <S.ContentPreview>{contentPreview}</S.ContentPreview>
diff --git a/frontend/src/components/common/ReviewDate/index.tsx b/frontend/src/components/common/ReviewDate/index.tsx
index 8c86290cc..35cb5f871 100644
--- a/frontend/src/components/common/ReviewDate/index.tsx
+++ b/frontend/src/components/common/ReviewDate/index.tsx
@@ -1,4 +1,3 @@
-import ClockIcon from '@/assets/clock.svg';
 import { formatDate } from '@/utils';
 
 import * as S from './styles';
@@ -10,15 +9,11 @@ export interface ReviewDateProps {
 
 const ReviewDate = ({ date, dateTitle }: ReviewDateProps) => {
   const { year, month, day } = formatDate(date);
+
   return (
     <S.ReviewDate>
-      <S.ReviewDateText>
-        <S.ClockImg src={ClockIcon} alt="시계 아이콘" />
-        <span>{dateTitle}</span>
-        <S.Colon>:</S.Colon>
-      </S.ReviewDateText>
       <span>
-        {year}-{month}-{day}
+        {dateTitle} | {year}-{month}-{day}
       </span>
     </S.ReviewDate>
   );
diff --git a/frontend/src/components/common/ReviewDate/styles.ts b/frontend/src/components/common/ReviewDate/styles.ts
index 6af512685..0b666b79c 100644
--- a/frontend/src/components/common/ReviewDate/styles.ts
+++ b/frontend/src/components/common/ReviewDate/styles.ts
@@ -2,31 +2,15 @@ import styled from '@emotion/styled';
 
 import media from '@/utils/media';
 
-export const ReviewDateText = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  ${media.small} {
-    display: none;
-  }
-`;
-
-export const ClockImg = styled.img`
-  width: auto;
-  height: 1.6rem;
-  margin-right: 0.8rem;
-`;
-
 export const ReviewDate = styled.div`
   display: flex;
   align-items: center;
 
+  span {
+    color: ${({ theme }) => theme.colors.gray};
+  }
+
   ${media.xSmall} {
     font-size: ${({ theme }) => theme.fontSize.small};
   }
 `;
-
-export const Colon = styled.span`
-  margin: 0 1rem;
-`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
index ed4e721b8..72dc2f745 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
@@ -2,7 +2,7 @@ import ReviewDate, { ReviewDateProps } from '@/components/common/ReviewDate';
 
 import * as S from './styles';
 
-const DATE_TITLE = '리뷰 작성일';
+const DATE_TITLE = '작성일';
 
 interface ReviewDescriptionProps extends Omit<ReviewDateProps, 'dateTitle'> {
   projectName: string;

From 2078ac0a521625d84c06070fd8a842798a0d3d8a Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Fri, 3 Jan 2025 00:30:39 +0900
Subject: [PATCH 06/16] =?UTF-8?q?design:=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailedReviewPageContents/index.tsx      | 19 +++++++++-------
 .../DetailedReviewPageContents/styles.ts      | 22 +++++++++++++++----
 .../components/KeywordSection/index.tsx       |  2 +-
 .../components/KeywordSection/styles.ts       |  8 +++----
 .../components/ReviewDescription/styles.ts    |  3 ---
 .../components/ReviewSection/styles.ts        |  8 +++++--
 .../components/ReviewSectionHeader/styles.ts  |  4 +---
 7 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
index cef4b9e72..834385207 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
@@ -56,14 +56,17 @@ const DetailedReviewPageContents = () => {
         isPublic={true}
         handleClickToggleButton={() => console.log('click toggle ')}
       />
-      {parsedDetailedReview.sections.map((section) =>
-        section.questions.map((question) => (
-          <S.ReviewContentContainer key={question.questionId}>
-            <ReviewSection question={question.content} answer={question.answer!} />
-            {question.questionType === 'CHECKBOX' && <KeywordSection options={question.optionGroup!.options} />}
-          </S.ReviewContentContainer>
-        )),
-      )}
+      <S.Separator />
+      <S.DetailedReviewContainer>
+        {parsedDetailedReview.sections.map((section) =>
+          section.questions.map((question) => (
+            <S.ReviewContentContainer key={question.questionId}>
+              <ReviewSection question={question.content} answer={question.answer!} />
+              {question.questionType === 'CHECKBOX' && <KeywordSection options={question.optionGroup!.options} />}
+            </S.ReviewContentContainer>
+          )),
+        )}
+      </S.DetailedReviewContainer>
     </S.DetailedReviewPageContents>
   );
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
index 6acc796b6..c2547488c 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
@@ -5,9 +5,12 @@ import media from '@/utils/media';
 export const DetailedReviewPageContents = styled.div`
   width: 70%;
   margin-top: 2rem;
-  border: 0.1rem solid ${({ theme }) => theme.colors.lightPurple};
+  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
+
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
+  padding: 2rem 3rem;
+
   ${media.medium} {
     width: 80%;
   }
@@ -17,10 +20,21 @@ export const DetailedReviewPageContents = styled.div`
   }
 `;
 
-export const ReviewContentContainer = styled.div`
-  margin-bottom: 7rem;
-  padding: 0 4rem;
+export const Separator = styled.div`
+  width: 100%;
+  height: 0.3rem;
+  background-color: ${({ theme }) => theme.colors.disabled};
+  margin: 3rem 0;
+`;
 
+export const DetailedReviewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  gap: 4rem;
+`;
+
+export const ReviewContentContainer = styled.div`
   ${media.xSmall} {
     padding: 0 2rem;
   }
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
index 050857f1b..d838f384d 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -14,7 +14,7 @@ const KeywordSection = ({ options }: KeywordSectionProps) => {
     <S.KeywordSection>
       <S.KeywordList>
         {transformedOptions.map(({ optionId, content }) => (
-          <S.KeywordItem key={optionId}>{content}</S.KeywordItem>
+          <li key={optionId}>{content}</li>
         ))}
       </S.KeywordList>
     </S.KeywordSection>
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
index 09f7c695e..10e51c927 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
@@ -6,10 +6,10 @@ export const KeywordSection = styled.section`
 `;
 
 export const KeywordList = styled.ul`
-  padding-left: 2rem;
+  padding-left: 4rem;
   list-style-type: disc;
-`;
 
-export const KeywordItem = styled.li`
-  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
index e6cfa2323..1efd90a21 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
@@ -9,9 +9,7 @@ export const Description = styled.section`
 
   width: 100%;
   margin: 0;
-  padding: 1rem 3rem;
 
-  background-color: ${({ theme }) => theme.colors.lightPurple};
   border-radius: ${({ theme }) => theme.borderRadius.basic} ${({ theme }) => theme.borderRadius.basic} 0 0;
 
   ${media.xSmall} {
@@ -31,7 +29,6 @@ export const ProjectInfoContainer = styled.div`
   justify-content: flex-start;
 
   width: 100%;
-  margin: 0 1rem;
 `;
 
 export const ProjectName = styled.p`
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
index eb8917aa8..c6f53968e 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
@@ -2,7 +2,11 @@ import styled from '@emotion/styled';
 
 export const ReviewSection = styled.section`
   width: 100%;
-  margin-top: 3.2rem;
+
+  display: flex;
+  flex-direction: column;
+
+  gap: 2rem;
 `;
 
 export const Answer = styled.div`
@@ -10,7 +14,7 @@ export const Answer = styled.div`
 
   box-sizing: border-box;
   width: 100%;
-  height: 23rem;
+  height: 20rem;
   padding: 1rem 1.5rem;
 
   font-size: 1.6rem;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts
index 517c62e27..117dcfb33 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
 export const ReviewSectionHeader = styled.p`
-  margin-bottom: 1rem;
-  font-size: 1.6rem;
-  font-weight: bold;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;

From 679a8dea46944410ebff59e6f153f615bfbb1d42 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Fri, 3 Jan 2025 00:58:18 +0900
Subject: [PATCH 07/16] =?UTF-8?q?chore:=20=EC=9E=91=EC=84=B1=EC=9D=BC=20?=
 =?UTF-8?q?=ED=98=95=EC=8B=9D=EC=9D=84=20'-'=EC=97=90=EC=84=9C=20'.'?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/ReviewDate/index.tsx | 2 +-
 frontend/src/components/common/ReviewDate/styles.ts | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/ReviewDate/index.tsx b/frontend/src/components/common/ReviewDate/index.tsx
index 35cb5f871..921d3e9b5 100644
--- a/frontend/src/components/common/ReviewDate/index.tsx
+++ b/frontend/src/components/common/ReviewDate/index.tsx
@@ -13,7 +13,7 @@ const ReviewDate = ({ date, dateTitle }: ReviewDateProps) => {
   return (
     <S.ReviewDate>
       <span>
-        {dateTitle} | {year}-{month}-{day}
+        {dateTitle} | {year}.{month}.{day}
       </span>
     </S.ReviewDate>
   );
diff --git a/frontend/src/components/common/ReviewDate/styles.ts b/frontend/src/components/common/ReviewDate/styles.ts
index 0b666b79c..90ca38c05 100644
--- a/frontend/src/components/common/ReviewDate/styles.ts
+++ b/frontend/src/components/common/ReviewDate/styles.ts
@@ -6,9 +6,8 @@ export const ReviewDate = styled.div`
   display: flex;
   align-items: center;
 
-  span {
-    color: ${({ theme }) => theme.colors.gray};
-  }
+  color: ${({ theme }) => theme.colors.gray};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
 
   ${media.xSmall} {
     font-size: ${({ theme }) => theme.fontSize.small};

From 330db3bebbc66568296cc0e058e4d85ff30ee5c1 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Sat, 4 Jan 2025 19:48:21 +0900
Subject: [PATCH 08/16] =?UTF-8?q?refactor:=20=EB=B0=B0=EC=97=B4=EC=9D=84?=
 =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=ED=95=98=EB=8D=98=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=EB=A5=BC=20=EB=8B=A8=EC=9D=BC=20=EB=AC=B8=EC=9E=90=EC=97=B4?=
 =?UTF-8?q?=EC=9D=84=20=ED=8F=AC=EB=A7=B7=ED=8C=85=ED=95=98=EB=8A=94=20for?=
 =?UTF-8?q?matKeyword=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/formatKeyword.ts       |  9 +++++++++
 frontend/src/utils/formattedCategories.ts | 14 --------------
 2 files changed, 9 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/utils/formatKeyword.ts
 delete mode 100644 frontend/src/utils/formattedCategories.ts

diff --git a/frontend/src/utils/formatKeyword.ts b/frontend/src/utils/formatKeyword.ts
new file mode 100644
index 000000000..303629b1f
--- /dev/null
+++ b/frontend/src/utils/formatKeyword.ts
@@ -0,0 +1,9 @@
+const formatKeyword = (content: string): string => {
+  const contentWithoutExample = Array.from(content.split(' (예: ')[0]);
+  const emoji = contentWithoutExample.shift();
+  const keyword = contentWithoutExample.join('');
+
+  return `${emoji} ${keyword}`;
+};
+
+export default formatKeyword;
diff --git a/frontend/src/utils/formattedCategories.ts b/frontend/src/utils/formattedCategories.ts
deleted file mode 100644
index 629317a24..000000000
--- a/frontend/src/utils/formattedCategories.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const formattedCategories = <T extends { optionId: number; content: string }>(categories: T[]) => {
-  return categories.map((category) => {
-    const contentWithoutExample = Array.from(category.content.split(' (예: ')[0]);
-    const emoji = contentWithoutExample.shift();
-    const keyword = contentWithoutExample.join('');
-
-    return {
-      optionId: category.optionId,
-      content: `${emoji} ${keyword}`,
-    };
-  });
-};
-
-export default formattedCategories;

From 0a1fc8cdcb78206532f20c7deee8c26d64f61889 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Sat, 4 Jan 2025 19:58:15 +0900
Subject: [PATCH 09/16] =?UTF-8?q?refactor:=20ReviewCard=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=EA=B0=95=EC=A0=90=20=ED=82=A4=EC=9B=8C=EB=93=9C=EB=A5=BC=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=ED=95=98=EB=8A=94=20ReviewKeyword=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewCard/StrengthKeywordList/index.tsx  | 22 -----------------
 .../components/common/ReviewCard/index.tsx    |  8 +++++--
 .../components/common/ReviewCard/styles.ts    | 24 +++++++++++++------
 .../components/common/ReviewKeyword/index.tsx | 11 +++++++++
 .../styles.ts                                 | 17 +------------
 5 files changed, 35 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
 create mode 100644 frontend/src/components/common/ReviewKeyword/index.tsx
 rename frontend/src/components/common/{ReviewCard/StrengthKeywordList => ReviewKeyword}/styles.ts (50%)

diff --git a/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx b/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
deleted file mode 100644
index 51288bd24..000000000
--- a/frontend/src/components/common/ReviewCard/StrengthKeywordList/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Category } from '@/types';
-import formattedCategories from '@/utils/formattedCategories';
-
-import * as S from './styles';
-
-interface StrengthKeywordProps {
-  categories: Category[];
-}
-
-const StrengthKeywordList = ({ categories }: StrengthKeywordProps) => {
-  const transformedCategories = formattedCategories(categories);
-
-  return (
-    <S.KeywordList>
-      {transformedCategories.map((category) => (
-        <S.KeywordItem key={category.optionId}>{category.content}</S.KeywordItem>
-      ))}
-    </S.KeywordList>
-  );
-};
-
-export default StrengthKeywordList;
diff --git a/frontend/src/components/common/ReviewCard/index.tsx b/frontend/src/components/common/ReviewCard/index.tsx
index a7acac46a..57b7de1e6 100644
--- a/frontend/src/components/common/ReviewCard/index.tsx
+++ b/frontend/src/components/common/ReviewCard/index.tsx
@@ -1,8 +1,8 @@
 import { Category } from '@/types';
 
 import ReviewDate from '../ReviewDate';
+import ReviewKeyword from '../ReviewKeyword';
 
-import StrengthKeywordList from './StrengthKeywordList';
 import * as S from './styles';
 
 interface ReviewCardProps {
@@ -23,7 +23,11 @@ const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: Revi
       <S.Main>
         <S.ContentPreview>{contentPreview}</S.ContentPreview>
         <S.Footer>
-          <StrengthKeywordList categories={categories} />
+          <S.ReviewKeywordList>
+            {categories.map(({ optionId, content }) => (
+              <ReviewKeyword key={optionId} content={content} />
+            ))}
+          </S.ReviewKeywordList>
         </S.Footer>
       </S.Main>
     </S.Layout>
diff --git a/frontend/src/components/common/ReviewCard/styles.ts b/frontend/src/components/common/ReviewCard/styles.ts
index 133526f91..eeaf05591 100644
--- a/frontend/src/components/common/ReviewCard/styles.ts
+++ b/frontend/src/components/common/ReviewCard/styles.ts
@@ -5,7 +5,7 @@ import media from '@/utils/media';
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
+  border: 0.2rem solid ${({ theme }) => theme.colors.disabled};
   border-radius: 1rem;
 
   &:hover {
@@ -29,12 +29,6 @@ export const Header = styled.div`
   border-radius: 1rem 1rem 0 0;
 `;
 
-export const Date = styled.p`
-  height: fit-content;
-
-  color: ${({ theme }) => theme.colors.gray};
-`;
-
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
@@ -75,3 +69,19 @@ export const Footer = styled.div`
     align-items: flex-start;
   }
 `;
+
+export const ReviewKeywordList = styled.ul`
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+
+  flex-wrap: wrap;
+
+  font-size: 1.2rem;
+
+  list-style-type: none;
+
+  ${media.small} {
+    gap: 1.2rem;
+  }
+`;
diff --git a/frontend/src/components/common/ReviewKeyword/index.tsx b/frontend/src/components/common/ReviewKeyword/index.tsx
new file mode 100644
index 000000000..8b77f0c22
--- /dev/null
+++ b/frontend/src/components/common/ReviewKeyword/index.tsx
@@ -0,0 +1,11 @@
+import formatKeyword from '@/utils/formatKeyword';
+
+import * as S from './styles';
+
+const ReviewKeyword = ({ content }: { content: string }) => {
+  const formattedKeyword = formatKeyword(content);
+
+  return <S.ReviewKeyword>{formattedKeyword}</S.ReviewKeyword>;
+};
+
+export default ReviewKeyword;
diff --git a/frontend/src/components/common/ReviewCard/StrengthKeywordList/styles.ts b/frontend/src/components/common/ReviewKeyword/styles.ts
similarity index 50%
rename from frontend/src/components/common/ReviewCard/StrengthKeywordList/styles.ts
rename to frontend/src/components/common/ReviewKeyword/styles.ts
index 89f4ac6f6..876f0d451 100644
--- a/frontend/src/components/common/ReviewCard/StrengthKeywordList/styles.ts
+++ b/frontend/src/components/common/ReviewKeyword/styles.ts
@@ -1,21 +1,6 @@
 import styled from '@emotion/styled';
 
-import media from '@/utils/media';
-
-export const KeywordList = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2.5rem;
-  align-items: center;
-
-  font-size: 1.2rem;
-
-  ${media.small} {
-    gap: 1.2rem;
-  }
-`;
-
-export const KeywordItem = styled.span`
+export const ReviewKeyword = styled.li`
   padding: 0.5rem 2rem;
   background-color: ${({ theme }) => theme.colors.lightPurple};
   border-radius: 1.4rem;

From 5f81c4ef648cc0207a82644e6502bc0348235a0c Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Sat, 4 Jan 2025 20:12:47 +0900
Subject: [PATCH 10/16] =?UTF-8?q?refactor:=20KeywordSection=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20MultipleChoiceAnswer=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=AA=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailedReviewPageContents/index.tsx      |  6 +++--
 .../DetailedReviewPageContents/styles.ts      |  2 +-
 .../components/KeywordSection/index.tsx       | 24 -------------------
 .../components/MultipleChoiceAnswer/index.tsx |  9 +++++++
 .../MultipleChoiceAnswerList/index.tsx        | 21 ++++++++++++++++
 .../styles.ts                                 |  5 +---
 .../DetailedReviewPage/components/index.tsx   |  2 +-
 7 files changed, 37 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
 create mode 100644 frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
 create mode 100644 frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
 rename frontend/src/pages/DetailedReviewPage/components/{KeywordSection => MultipleChoiceAnswerList}/styles.ts (62%)

diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
index 834385207..44e7753b2 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { ROUTE_PARAM } from '@/constants';
 import { useGetDetailedReview, useSearchParamAndQuery } from '@/hooks';
-import { ReviewDescription, ReviewSection, KeywordSection } from '@/pages/DetailedReviewPage/components';
+import { MultipleChoiceAnswerList, ReviewDescription, ReviewSection } from '@/pages/DetailedReviewPage/components';
 import { substituteString } from '@/utils';
 
 import * as S from './styles';
@@ -62,7 +62,9 @@ const DetailedReviewPageContents = () => {
           section.questions.map((question) => (
             <S.ReviewContentContainer key={question.questionId}>
               <ReviewSection question={question.content} answer={question.answer!} />
-              {question.questionType === 'CHECKBOX' && <KeywordSection options={question.optionGroup!.options} />}
+              {question.questionType === 'CHECKBOX' && (
+                <MultipleChoiceAnswerList answerList={question.optionGroup!.options} />
+              )}
             </S.ReviewContentContainer>
           )),
         )}
diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
index c2547488c..9a80ce69e 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
@@ -5,7 +5,7 @@ import media from '@/utils/media';
 export const DetailedReviewPageContents = styled.div`
   width: 70%;
   margin-top: 2rem;
-  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
+  border: 0.2rem solid ${({ theme }) => theme.colors.disabled};
 
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
deleted file mode 100644
index d838f384d..000000000
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Options } from '@/types';
-import formattedCategories from '@/utils/formattedCategories';
-
-import * as S from './styles';
-
-interface KeywordSectionProps {
-  options: Options[];
-}
-
-const KeywordSection = ({ options }: KeywordSectionProps) => {
-  const transformedOptions = formattedCategories(options);
-
-  return (
-    <S.KeywordSection>
-      <S.KeywordList>
-        {transformedOptions.map(({ optionId, content }) => (
-          <li key={optionId}>{content}</li>
-        ))}
-      </S.KeywordList>
-    </S.KeywordSection>
-  );
-};
-
-export default KeywordSection;
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
new file mode 100644
index 000000000..f65c7974e
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
@@ -0,0 +1,9 @@
+import formatKeyword from '@/utils/formatKeyword';
+
+const MultipleChoiceAnswer = ({ answer }: { answer: string }) => {
+  const formattedAnswer = formatKeyword(answer);
+
+  return <li>{formattedAnswer}</li>;
+};
+
+export default MultipleChoiceAnswer;
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
new file mode 100644
index 000000000..bc15df430
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
@@ -0,0 +1,21 @@
+import { Options } from '@/types';
+
+import MultipleChoiceAnswer from '../MultipleChoiceAnswer';
+
+import * as S from './styles';
+
+interface MultipleChoiceAnswerListProps {
+  answerList: Options[];
+}
+
+const MultipleChoiceAnswerList = ({ answerList }: MultipleChoiceAnswerListProps) => {
+  return (
+    <S.MultipleChoiceAnswerList>
+      {answerList.map(({ optionId, content }) => (
+        <MultipleChoiceAnswer key={optionId} answer={content} />
+      ))}
+    </S.MultipleChoiceAnswerList>
+  );
+};
+
+export default MultipleChoiceAnswerList;
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
similarity index 62%
rename from frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
rename to frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
index 10e51c927..08223e960 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
@@ -1,11 +1,8 @@
 import styled from '@emotion/styled';
 
-export const KeywordSection = styled.section`
-  width: 100%;
+export const MultipleChoiceAnswerList = styled.ul`
   margin-top: 2rem;
-`;
 
-export const KeywordList = styled.ul`
   padding-left: 4rem;
   list-style-type: disc;
 
diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx
index 4bfb172bd..d90930600 100644
--- a/frontend/src/pages/DetailedReviewPage/components/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx
@@ -1,4 +1,4 @@
-export { default as KeywordSection } from './KeywordSection';
+export { default as MultipleChoiceAnswerList } from './MultipleChoiceAnswerList';
 export { default as ReviewDescription } from './ReviewDescription';
 export { default as ReviewSection } from './ReviewSection';
 export { default as DetailedReviewPageContents } from './DetailedReviewPageContents';

From 70634cc08fa59cc9b7295fd5aea7dde7feaf9fea Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Sat, 4 Jan 2025 20:17:28 +0900
Subject: [PATCH 11/16] =?UTF-8?q?refactor:=20formatKeyword=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EC=97=90=EC=84=9C=20=EB=B0=98=ED=99=98=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=EC=9D=84=20=EB=AA=85=EC=8B=9C=ED=95=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/formatKeyword.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/formatKeyword.ts b/frontend/src/utils/formatKeyword.ts
index 303629b1f..7e2a046e5 100644
--- a/frontend/src/utils/formatKeyword.ts
+++ b/frontend/src/utils/formatKeyword.ts
@@ -1,4 +1,4 @@
-const formatKeyword = (content: string): string => {
+const formatKeyword = (content: string) => {
   const contentWithoutExample = Array.from(content.split(' (예: ')[0]);
   const emoji = contentWithoutExample.shift();
   const keyword = contentWithoutExample.join('');

From 27f0b9cf000d7e6a66f829d98d3acfd7b715b6a1 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Sat, 4 Jan 2025 20:29:30 +0900
Subject: [PATCH 12/16] =?UTF-8?q?style:=20css=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/OptionSwitch/styles.ts  |  3 +--
 frontend/src/components/common/ReviewCard/styles.ts    |  8 ++------
 frontend/src/components/common/ReviewDate/styles.ts    |  3 +--
 frontend/src/components/common/ReviewKeyword/styles.ts |  7 ++++---
 .../components/DetailedReviewPageContents/styles.ts    |  8 +++-----
 .../components/MultipleChoiceAnswerList/styles.ts      | 10 +++++-----
 .../components/ReviewDescription/styles.ts             |  1 -
 .../components/ReviewSection/styles.ts                 |  4 +---
 8 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/common/OptionSwitch/styles.ts b/frontend/src/components/common/OptionSwitch/styles.ts
index b2be3f531..2e2bf729f 100644
--- a/frontend/src/components/common/OptionSwitch/styles.ts
+++ b/frontend/src/components/common/OptionSwitch/styles.ts
@@ -10,13 +10,12 @@ export const OptionSwitchContainer = styled.ul`
 
   width: 20rem;
   height: 4.4rem;
+  margin-top: 0.9rem;
   padding: 0.7rem;
 
   background-color: ${({ theme }) => theme.colors.lightGray};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
-  margin-top: 0.9rem;
-
   @media screen and (max-width: 530px) {
     width: 100%;
   }
diff --git a/frontend/src/components/common/ReviewCard/styles.ts b/frontend/src/components/common/ReviewCard/styles.ts
index eeaf05591..93786a694 100644
--- a/frontend/src/components/common/ReviewCard/styles.ts
+++ b/frontend/src/components/common/ReviewCard/styles.ts
@@ -23,7 +23,6 @@ export const Header = styled.div`
   align-items: center;
 
   width: 100%;
-
   padding: 2rem 0 0 2.5rem;
 
   border-radius: 1rem 1rem 0 0;
@@ -52,7 +51,6 @@ export const ContentPreview = styled.p`
   padding-right: 2rem;
 
   line-height: 2.5rem;
-
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 `;
@@ -72,13 +70,11 @@ export const Footer = styled.div`
 
 export const ReviewKeywordList = styled.ul`
   display: flex;
-  align-items: center;
-  gap: 2.5rem;
-
   flex-wrap: wrap;
+  gap: 2.5rem;
+  align-items: center;
 
   font-size: 1.2rem;
-
   list-style-type: none;
 
   ${media.small} {
diff --git a/frontend/src/components/common/ReviewDate/styles.ts b/frontend/src/components/common/ReviewDate/styles.ts
index 90ca38c05..dc65be47b 100644
--- a/frontend/src/components/common/ReviewDate/styles.ts
+++ b/frontend/src/components/common/ReviewDate/styles.ts
@@ -5,9 +5,8 @@ import media from '@/utils/media';
 export const ReviewDate = styled.div`
   display: flex;
   align-items: center;
-
-  color: ${({ theme }) => theme.colors.gray};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  color: ${({ theme }) => theme.colors.gray};
 
   ${media.xSmall} {
     font-size: ${({ theme }) => theme.fontSize.small};
diff --git a/frontend/src/components/common/ReviewKeyword/styles.ts b/frontend/src/components/common/ReviewKeyword/styles.ts
index 876f0d451..7c5345aae 100644
--- a/frontend/src/components/common/ReviewKeyword/styles.ts
+++ b/frontend/src/components/common/ReviewKeyword/styles.ts
@@ -2,9 +2,10 @@ import styled from '@emotion/styled';
 
 export const ReviewKeyword = styled.li`
   padding: 0.5rem 2rem;
-  background-color: ${({ theme }) => theme.colors.lightPurple};
-  border-radius: 1.4rem;
 
-  color: ${({ theme }) => theme.colors.primary};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  color: ${({ theme }) => theme.colors.primary};
+
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+  border-radius: 1.4rem;
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
index 9a80ce69e..74eb3bac8 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts
@@ -5,12 +5,11 @@ import media from '@/utils/media';
 export const DetailedReviewPageContents = styled.div`
   width: 70%;
   margin-top: 2rem;
-  border: 0.2rem solid ${({ theme }) => theme.colors.disabled};
+  padding: 2rem 3rem;
 
+  border: 0.2rem solid ${({ theme }) => theme.colors.disabled};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
-  padding: 2rem 3rem;
-
   ${media.medium} {
     width: 80%;
   }
@@ -23,14 +22,13 @@ export const DetailedReviewPageContents = styled.div`
 export const Separator = styled.div`
   width: 100%;
   height: 0.3rem;
-  background-color: ${({ theme }) => theme.colors.disabled};
   margin: 3rem 0;
+  background-color: ${({ theme }) => theme.colors.disabled};
 `;
 
 export const DetailedReviewContainer = styled.div`
   display: flex;
   flex-direction: column;
-
   gap: 4rem;
 `;
 
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
index 08223e960..28d2a664b 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
 export const MultipleChoiceAnswerList = styled.ul`
-  margin-top: 2rem;
-
-  padding-left: 4rem;
-  list-style-type: disc;
-
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+
+  margin-top: 2rem;
+  padding-left: 4rem;
+
+  list-style-type: disc;
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
index 1efd90a21..52ee76dff 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
@@ -27,7 +27,6 @@ export const ProjectInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-
   width: 100%;
 `;
 
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
index c6f53968e..b4092fd70 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
@@ -1,12 +1,10 @@
 import styled from '@emotion/styled';
 
 export const ReviewSection = styled.section`
-  width: 100%;
-
   display: flex;
   flex-direction: column;
-
   gap: 2rem;
+  width: 100%;
 `;
 
 export const Answer = styled.div`

From 8cf24146820dac1f4b9107c5f58780a48d63002a Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Mon, 6 Jan 2025 16:05:22 +0900
Subject: [PATCH 13/16] =?UTF-8?q?refactor:=20QuestionAnswerSection?=
 =?UTF-8?q?=EC=9D=84=20=EC=A7=88=EB=AC=B8=EA=B3=BC=20=EB=8B=B5=EB=B3=80(?=
 =?UTF-8?q?=EA=B0=9D=EA=B4=80=EC=8B=9D/=EC=A3=BC=EA=B4=80=EC=8B=9D)=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/MultilineTextViewer/index.tsx      |  4 +--
 .../common/MultilineTextViewer/styles.ts      | 14 ++++++++++
 .../DetailedReviewPageContents/index.tsx      | 12 +++++----
 .../components/MultipleChoiceAnswer/index.tsx |  4 +--
 .../MultipleChoiceAnswerList/index.tsx        |  8 +++---
 .../MultipleChoiceAnswerList/styles.ts        |  1 -
 .../QuestionAnswerSection/index.tsx           | 26 +++++++++++++++++++
 .../QuestionAnswerSection/styles.ts           |  8 ++++++
 .../components/QuestionTitle/index.tsx        | 11 ++++++++
 .../styles.ts                                 |  2 +-
 .../components/ReviewSection/index.tsx        | 25 ------------------
 .../components/ReviewSection/styles.ts        | 22 ----------------
 .../components/ReviewSectionHeader/index.tsx  | 11 --------
 .../DetailedReviewPage/components/index.tsx   |  2 +-
 14 files changed, 76 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
 create mode 100644 frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
 create mode 100644 frontend/src/pages/DetailedReviewPage/components/QuestionTitle/index.tsx
 rename frontend/src/pages/DetailedReviewPage/components/{ReviewSectionHeader => QuestionTitle}/styles.ts (68%)
 delete mode 100644 frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
 delete mode 100644 frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
 delete mode 100644 frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx

diff --git a/frontend/src/components/common/MultilineTextViewer/index.tsx b/frontend/src/components/common/MultilineTextViewer/index.tsx
index 6c39d0ce2..6b9445056 100644
--- a/frontend/src/components/common/MultilineTextViewer/index.tsx
+++ b/frontend/src/components/common/MultilineTextViewer/index.tsx
@@ -6,14 +6,14 @@ interface MultilineTextViewerProps {
 
 const MultilineTextViewer = ({ text }: MultilineTextViewerProps) => {
   return (
-    <>
+    <S.MultilineTextContainer>
       {text.split('\n').map((line, index) => (
         <S.MultilineText key={index}>
           {line}
           <br />
         </S.MultilineText>
       ))}
-    </>
+    </S.MultilineTextContainer>
   );
 };
 
diff --git a/frontend/src/components/common/MultilineTextViewer/styles.ts b/frontend/src/components/common/MultilineTextViewer/styles.ts
index a5ef99e88..9cd1b2197 100644
--- a/frontend/src/components/common/MultilineTextViewer/styles.ts
+++ b/frontend/src/components/common/MultilineTextViewer/styles.ts
@@ -1,5 +1,19 @@
 import styled from '@emotion/styled';
 
+export const MultilineTextContainer = styled.div`
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 20rem;
+  padding: 1rem 1.5rem;
+
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+`;
+
 export const MultilineText = styled.div`
   word-wrap: break-word;
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
index 44e7753b2..0141be1c4 100644
--- a/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { ROUTE_PARAM } from '@/constants';
 import { useGetDetailedReview, useSearchParamAndQuery } from '@/hooks';
-import { MultipleChoiceAnswerList, ReviewDescription, ReviewSection } from '@/pages/DetailedReviewPage/components';
+import { ReviewDescription, QuestionAnswerSection } from '@/pages/DetailedReviewPage/components';
 import { substituteString } from '@/utils';
 
 import * as S from './styles';
@@ -61,10 +61,12 @@ const DetailedReviewPageContents = () => {
         {parsedDetailedReview.sections.map((section) =>
           section.questions.map((question) => (
             <S.ReviewContentContainer key={question.questionId}>
-              <ReviewSection question={question.content} answer={question.answer!} />
-              {question.questionType === 'CHECKBOX' && (
-                <MultipleChoiceAnswerList answerList={question.optionGroup!.options} />
-              )}
+              <QuestionAnswerSection
+                question={question.content}
+                questionType={question.questionType}
+                answer={question.answer}
+                options={question.optionGroup?.options}
+              />
             </S.ReviewContentContainer>
           )),
         )}
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
index f65c7974e..e08e8b7a7 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
@@ -1,7 +1,7 @@
 import formatKeyword from '@/utils/formatKeyword';
 
-const MultipleChoiceAnswer = ({ answer }: { answer: string }) => {
-  const formattedAnswer = formatKeyword(answer);
+const MultipleChoiceAnswer = ({ selectedOption }: { selectedOption: string }) => {
+  const formattedAnswer = formatKeyword(selectedOption);
 
   return <li>{formattedAnswer}</li>;
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
index bc15df430..da9a4d5d1 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx
@@ -5,14 +5,14 @@ import MultipleChoiceAnswer from '../MultipleChoiceAnswer';
 import * as S from './styles';
 
 interface MultipleChoiceAnswerListProps {
-  answerList: Options[];
+  selectedOptionList: Options[];
 }
 
-const MultipleChoiceAnswerList = ({ answerList }: MultipleChoiceAnswerListProps) => {
+const MultipleChoiceAnswerList = ({ selectedOptionList }: MultipleChoiceAnswerListProps) => {
   return (
     <S.MultipleChoiceAnswerList>
-      {answerList.map(({ optionId, content }) => (
-        <MultipleChoiceAnswer key={optionId} answer={content} />
+      {selectedOptionList.map(({ optionId, content }) => (
+        <MultipleChoiceAnswer key={optionId} selectedOption={content} />
       ))}
     </S.MultipleChoiceAnswerList>
   );
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
index 28d2a664b..db52191cf 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/styles.ts
@@ -5,7 +5,6 @@ export const MultipleChoiceAnswerList = styled.ul`
   flex-direction: column;
   gap: 0.5rem;
 
-  margin-top: 2rem;
   padding-left: 4rem;
 
   list-style-type: disc;
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
new file mode 100644
index 000000000..a02aaf55f
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
@@ -0,0 +1,26 @@
+import { MultilineTextViewer } from '@/components';
+import { Options, QuestionType } from '@/types';
+
+import MultipleChoiceAnswerList from '../MultipleChoiceAnswerList';
+import QuestionTitle from '../QuestionTitle';
+
+import * as S from './styles';
+
+interface QuestionAnswerProps {
+  question: string;
+  questionType: QuestionType;
+  answer?: string;
+  options?: Options[];
+}
+
+const QuestionAnswerSection = ({ question, questionType, answer, options }: QuestionAnswerProps) => {
+  return (
+    <S.QuestionAnswerSection>
+      <QuestionTitle text={question} />
+      {questionType === 'CHECKBOX' && options && <MultipleChoiceAnswerList selectedOptionList={options} />}
+      {questionType === 'TEXT' && answer && <MultilineTextViewer text={answer} />}
+    </S.QuestionAnswerSection>
+  );
+};
+
+export default QuestionAnswerSection;
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
new file mode 100644
index 000000000..8618dfd64
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const QuestionAnswerSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionTitle/index.tsx b/frontend/src/pages/DetailedReviewPage/components/QuestionTitle/index.tsx
new file mode 100644
index 000000000..65fdd38d1
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionTitle/index.tsx
@@ -0,0 +1,11 @@
+import * as S from './styles';
+
+interface QuestionProps {
+  text: string;
+}
+
+const QuestionTitle = ({ text }: QuestionProps) => {
+  return <S.QuestionTitle>{text}</S.QuestionTitle>;
+};
+
+export default QuestionTitle;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts b/frontend/src/pages/DetailedReviewPage/components/QuestionTitle/styles.ts
similarity index 68%
rename from frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts
rename to frontend/src/pages/DetailedReviewPage/components/QuestionTitle/styles.ts
index 117dcfb33..f29376283 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionTitle/styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
 
-export const ReviewSectionHeader = styled.p`
+export const QuestionTitle = styled.p`
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
deleted file mode 100644
index c059715b6..000000000
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { MultilineTextViewer } from '@/components';
-
-import ReviewSectionHeader from '../ReviewSectionHeader';
-
-import * as S from './styles';
-
-interface ReviewSectionProps {
-  question: string;
-  answer: string;
-}
-
-const ReviewSection = ({ question, answer }: ReviewSectionProps) => {
-  return (
-    <S.ReviewSection>
-      <ReviewSectionHeader text={question} />
-      {answer && (
-        <S.Answer>
-          <MultilineTextViewer text={answer} />
-        </S.Answer>
-      )}
-    </S.ReviewSection>
-  );
-};
-
-export default ReviewSection;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
deleted file mode 100644
index b4092fd70..000000000
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/styles.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-
-export const ReviewSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 100%;
-`;
-
-export const Answer = styled.div`
-  overflow-y: auto;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 20rem;
-  padding: 1rem 1.5rem;
-
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-
-  background-color: ${({ theme }) => theme.colors.lightGray};
-`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx
deleted file mode 100644
index 50fa0dab5..000000000
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSectionHeader/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as S from './styles';
-
-interface ReviewSectionHeaderProps {
-  text: string;
-}
-
-const ReviewSectionHeader = ({ text }: ReviewSectionHeaderProps) => {
-  return <S.ReviewSectionHeader>{text}</S.ReviewSectionHeader>;
-};
-
-export default ReviewSectionHeader;
diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx
index d90930600..429067d52 100644
--- a/frontend/src/pages/DetailedReviewPage/components/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx
@@ -1,4 +1,4 @@
 export { default as MultipleChoiceAnswerList } from './MultipleChoiceAnswerList';
 export { default as ReviewDescription } from './ReviewDescription';
-export { default as ReviewSection } from './ReviewSection';
+export { default as QuestionAnswerSection } from './QuestionAnswerSection';
 export { default as DetailedReviewPageContents } from './DetailedReviewPageContents';

From 62eaf4c64eee17c1b56d2bb69b88174119f6b784 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Mon, 6 Jan 2025 16:11:42 +0900
Subject: [PATCH 14/16] =?UTF-8?q?refactor:=20MultilineTextViewer=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components}/MultilineTextViewer/index.tsx                | 0
 .../components}/MultilineTextViewer/styles.ts                | 0
 .../components/QuestionAnswerSection/index.tsx               | 5 +----
 frontend/src/pages/DetailedReviewPage/components/index.tsx   | 4 +++-
 4 files changed, 4 insertions(+), 5 deletions(-)
 rename frontend/src/{components/common => pages/DetailedReviewPage/components}/MultilineTextViewer/index.tsx (100%)
 rename frontend/src/{components/common => pages/DetailedReviewPage/components}/MultilineTextViewer/styles.ts (100%)

diff --git a/frontend/src/components/common/MultilineTextViewer/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/index.tsx
similarity index 100%
rename from frontend/src/components/common/MultilineTextViewer/index.tsx
rename to frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/index.tsx
diff --git a/frontend/src/components/common/MultilineTextViewer/styles.ts b/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts
similarity index 100%
rename from frontend/src/components/common/MultilineTextViewer/styles.ts
rename to frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
index a02aaf55f..08feec32d 100644
--- a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
@@ -1,9 +1,6 @@
-import { MultilineTextViewer } from '@/components';
+import { MultipleChoiceAnswerList, QuestionTitle, MultilineTextViewer } from '@/pages/DetailedReviewPage/components';
 import { Options, QuestionType } from '@/types';
 
-import MultipleChoiceAnswerList from '../MultipleChoiceAnswerList';
-import QuestionTitle from '../QuestionTitle';
-
 import * as S from './styles';
 
 interface QuestionAnswerProps {
diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx
index 429067d52..c8f0574f8 100644
--- a/frontend/src/pages/DetailedReviewPage/components/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx
@@ -1,4 +1,6 @@
+export { default as QuestionAnswerSection } from './QuestionAnswerSection';
+export { default as QuestionTitle } from './QuestionTitle';
 export { default as MultipleChoiceAnswerList } from './MultipleChoiceAnswerList';
+export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as ReviewDescription } from './ReviewDescription';
-export { default as QuestionAnswerSection } from './QuestionAnswerSection';
 export { default as DetailedReviewPageContents } from './DetailedReviewPageContents';

From 33a44c4e9672794edd6c985a98796dcf527e9abd Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Mon, 6 Jan 2025 16:23:31 +0900
Subject: [PATCH 15/16] =?UTF-8?q?refactor:=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=ED=8F=AC=ED=95=A8=20=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=9D=BC=20=ED=8F=AC=EB=A7=B7=ED=8C=85=EB=90=9C=20=EB=8B=B5?=
 =?UTF-8?q?=EB=B3=80=20=EB=98=90=EB=8A=94=20=EC=9B=90=EB=B3=B8=20=EB=8B=B5?=
 =?UTF-8?q?=EB=B3=80=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/index.tsx                      | 1 -
 .../components/MultipleChoiceAnswer/index.tsx                 | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index 2a15f749f..1079b3102 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -1,7 +1,6 @@
 export { default as Button } from './Button';
 export { default as Input } from './Input';
 export { default as ReviewDate } from './ReviewDate';
-export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as TopButton } from './TopButton';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxItem } from './CheckboxItem';
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
index e08e8b7a7..2c0dbd4f7 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswer/index.tsx
@@ -1,9 +1,11 @@
 import formatKeyword from '@/utils/formatKeyword';
 
 const MultipleChoiceAnswer = ({ selectedOption }: { selectedOption: string }) => {
+  const isExampleIncluded = selectedOption.includes('예');
+
   const formattedAnswer = formatKeyword(selectedOption);
 
-  return <li>{formattedAnswer}</li>;
+  return <li>{isExampleIncluded ? formattedAnswer : selectedOption}</li>;
 };
 
 export default MultipleChoiceAnswer;

From 541b8902737fe6d84e457187304942cf2510d31c Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Mon, 6 Jan 2025 16:46:39 +0900
Subject: [PATCH 16/16] =?UTF-8?q?refactor:=20MultilineTextViewer=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=EB=A5=BC=20src/components/common/=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common}/MultilineTextViewer/index.tsx     |  4 ++--
 .../common/MultilineTextViewer/styles.ts      |  5 +++++
 frontend/src/components/common/index.tsx      |  1 +
 .../components/MultilineTextViewer/styles.ts  | 19 -------------------
 .../QuestionAnswerSection/index.tsx           |  9 +++++++--
 .../QuestionAnswerSection/styles.ts           | 14 ++++++++++++++
 .../DetailedReviewPage/components/index.tsx   |  1 -
 7 files changed, 29 insertions(+), 24 deletions(-)
 rename frontend/src/{pages/DetailedReviewPage/components => components/common}/MultilineTextViewer/index.tsx (85%)
 create mode 100644 frontend/src/components/common/MultilineTextViewer/styles.ts
 delete mode 100644 frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts

diff --git a/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/index.tsx b/frontend/src/components/common/MultilineTextViewer/index.tsx
similarity index 85%
rename from frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/index.tsx
rename to frontend/src/components/common/MultilineTextViewer/index.tsx
index 6b9445056..6c39d0ce2 100644
--- a/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/index.tsx
+++ b/frontend/src/components/common/MultilineTextViewer/index.tsx
@@ -6,14 +6,14 @@ interface MultilineTextViewerProps {
 
 const MultilineTextViewer = ({ text }: MultilineTextViewerProps) => {
   return (
-    <S.MultilineTextContainer>
+    <>
       {text.split('\n').map((line, index) => (
         <S.MultilineText key={index}>
           {line}
           <br />
         </S.MultilineText>
       ))}
-    </S.MultilineTextContainer>
+    </>
   );
 };
 
diff --git a/frontend/src/components/common/MultilineTextViewer/styles.ts b/frontend/src/components/common/MultilineTextViewer/styles.ts
new file mode 100644
index 000000000..a5ef99e88
--- /dev/null
+++ 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;
+`;
diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index 1079b3102..2a15f749f 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -1,6 +1,7 @@
 export { default as Button } from './Button';
 export { default as Input } from './Input';
 export { default as ReviewDate } from './ReviewDate';
+export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as TopButton } from './TopButton';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxItem } from './CheckboxItem';
diff --git a/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts b/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts
deleted file mode 100644
index 9cd1b2197..000000000
--- a/frontend/src/pages/DetailedReviewPage/components/MultilineTextViewer/styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-
-export const MultilineTextContainer = styled.div`
-  overflow-y: auto;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 20rem;
-  padding: 1rem 1.5rem;
-
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-
-  background-color: ${({ theme }) => theme.colors.lightGray};
-`;
-
-export const MultilineText = styled.div`
-  word-wrap: break-word;
-`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
index 08feec32d..a1606b0a1 100644
--- a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx
@@ -1,4 +1,5 @@
-import { MultipleChoiceAnswerList, QuestionTitle, MultilineTextViewer } from '@/pages/DetailedReviewPage/components';
+import { MultilineTextViewer } from '@/components';
+import { MultipleChoiceAnswerList, QuestionTitle } from '@/pages/DetailedReviewPage/components';
 import { Options, QuestionType } from '@/types';
 
 import * as S from './styles';
@@ -15,7 +16,11 @@ const QuestionAnswerSection = ({ question, questionType, answer, options }: Ques
     <S.QuestionAnswerSection>
       <QuestionTitle text={question} />
       {questionType === 'CHECKBOX' && options && <MultipleChoiceAnswerList selectedOptionList={options} />}
-      {questionType === 'TEXT' && answer && <MultilineTextViewer text={answer} />}
+      {questionType === 'TEXT' && answer && (
+        <S.TextAnswerWrapper>
+          <MultilineTextViewer text={answer} />
+        </S.TextAnswerWrapper>
+      )}
     </S.QuestionAnswerSection>
   );
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
index 8618dfd64..59e13d1b2 100644
--- a/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/styles.ts
@@ -6,3 +6,17 @@ export const QuestionAnswerSection = styled.section`
   gap: 2rem;
   width: 100%;
 `;
+
+export const TextAnswerWrapper = styled.div`
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 20rem;
+  padding: 1rem 1.5rem;
+
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx
index c8f0574f8..a455c2400 100644
--- a/frontend/src/pages/DetailedReviewPage/components/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx
@@ -1,6 +1,5 @@
 export { default as QuestionAnswerSection } from './QuestionAnswerSection';
 export { default as QuestionTitle } from './QuestionTitle';
 export { default as MultipleChoiceAnswerList } from './MultipleChoiceAnswerList';
-export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as ReviewDescription } from './ReviewDescription';
 export { default as DetailedReviewPageContents } from './DetailedReviewPageContents';