From b2a779423578486a9331224995f7d697fececfb0 Mon Sep 17 00:00:00 2001
From: hyoribogo <97094709+hyoribogo@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:53:14 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EC=83=9D=EC=84=B1=ED=95=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EA=B4=80=EB=A6=AC=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95=20(#113)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 생성한 리뷰 관리 페이지 상세에서 scrolltop적용

* refactor: 질문 크기 수정

* refactor: 헥사스텟 UI 수정

* style: 중복 아이콘 제거

* style: 폰트 사이즈 더 크게 변경

* style: 아이콘 에셋 수정

* refactor: 리뷰 정보 컴포넌트로 변경

* style: hover 이벤트 임시 제거

* style: drawer 레이아웃 스타일 변경

---------

Co-authored-by: Kim0426 <706shin1728@naver.com>
---
 src/assets/icons/index.ts                     |  1 -
 src/assets/icons/text.svg                     |  3 -
 src/components/UserList/index.tsx             | 10 ++--
 .../AllResponseByReceiver/index.tsx           |  2 +-
 .../AllResponseByResponser/index.tsx          |  2 +-
 .../components/AnswerGroup/RenderHexaStat.tsx | 22 ++++---
 .../AnswerGroup/RenderRefinedSubjective.tsx   |  4 +-
 .../AnswerGroup/RenderStarRatingAnswer.tsx    |  2 +-
 .../AnswerGroup/RenderSubjectiveAnswer.tsx    |  4 +-
 .../components/AnswerGroup/index.tsx          | 39 ++++++------
 .../components/ProfileGroup/index.tsx         |  4 +-
 .../ReceiverTabReviewDatail/index.tsx         | 54 +++++++++--------
 .../ResponserTabReviewDetail/index.tsx        | 60 ++++++++++---------
 .../components/SortDropDown/index.tsx         |  2 +-
 .../CreatedReviewManagePage/constants.tsx     | 24 +++-----
 src/pages/CreatedReviewManagePage/index.tsx   | 15 +++--
 .../ReplyCategory/ReplyDropdown/index.tsx     |  2 +-
 .../ReplyCategory/ReplyText/index.tsx         |  4 +-
 18 files changed, 124 insertions(+), 130 deletions(-)
 delete mode 100644 src/assets/icons/text.svg

diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 6a4efe45..6d323237 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -12,7 +12,6 @@ export { default as CloseIcon } from './close.svg?react'
 export { default as ArrowBelowIcon } from './arrow-below.svg?react'
 export { default as RegistrationIcon } from './registration.svg?react'
 export { default as FilterIcon } from './filter.svg?react'
-export { default as TextIcon } from './text.svg?react'
 export { default as CheckInTheCircleIcon } from './check-in-the-circle.svg?react'
 export { default as PlusIcon } from './plus.svg?react'
 export { default as LogoColIcon } from './logo-col.svg?react'
diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg
deleted file mode 100644
index c58fff38..00000000
--- a/src/assets/icons/text.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="18" viewBox="0 0 16 18" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 17V1M15 3V1H1V3M10 17H6" stroke={stroke} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index b3b14ca0..e4707f78 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -67,18 +67,18 @@ const UserList = ({
                       questionType !== 'PROCEEDING' && (
                         <span
                           className={`h-1.5 w-1.5 rounded-full ${
-                            hasSavedResult(user.id) ? '' : 'bg-red-600'
+                            hasSavedResult(user.id) ? 'hidden' : 'bg-red-600'
                           }`}
                         ></span>
                       )}
                     <Profile name={user.name} />
                   </div>
-                  <div className="text-xs text-gray-300 dark:text-gray-100 md:text-sm">
+                  <div className="text-xs text-gray-300 dark:text-gray-100 md:text-base">
                     {date ? (
                       `답변일시: ${date}`
                     ) : responserCount ? (
                       <span>
-                        응답자:{responserCount && responserCount[index]}명
+                        응답자: {responserCount && responserCount[index]}명
                       </span>
                     ) : (
                       <p className="text-sub-red-200 dark:text-sub-yellow">
@@ -105,12 +105,12 @@ const UserList = ({
                     )}
                   <Profile name={user.name} />
                 </div>
-                <div className="text-xs text-gray-300 dark:text-gray-100 md:text-sm">
+                <div className="text-xs text-gray-300 dark:text-gray-100 md:text-base">
                   {date ? (
                     `답변일시: ${date}`
                   ) : responserCount ? (
                     <span>
-                      응답자:{responserCount && responserCount[index]}명
+                      응답자: {responserCount && responserCount[index]}명
                     </span>
                   ) : (
                     <p className="text-sub-red-200 dark:text-sub-yellow">
diff --git a/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx b/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx
index fd9b76f6..30a074d9 100644
--- a/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AllResponseByReceiver/index.tsx
@@ -42,7 +42,7 @@ const AllResponseReviewByResponser = ({
     <div className="flex flex-col gap-5">
       <SearchBar handleChangeKeyword={handleChangeKeyword} />
       <div className="rounded-md border border-gray-200 bg-main-yellow text-black dark:border-gray-100 dark:bg-main-red-200 dark:text-white md:max-h-[24rem]">
-        <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-sm">
+        <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-base">
           <span>수신자: </span>
           <span className="text-sub-blue dark:text-sub-skyblue">
             {responseByReceiver?.length || 0}
diff --git a/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx b/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx
index 30c1d20d..836e0821 100644
--- a/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AllResponseByResponser/index.tsx
@@ -87,7 +87,7 @@ const AllResponseReviewByResponser = ({
       <div className="rounded-md border border-gray-200 bg-main-yellow text-black dark:border-gray-100 dark:bg-main-red-200 dark:text-white md:max-h-[24rem]">
         {findUserBySearchKeyword?.length ? (
           <>
-            <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-sm">
+            <header className="flex items-center whitespace-pre-wrap rounded-t-md border-b border-b-gray-100 bg-main-yellow p-3 text-xs dark:border-b-gray-200 dark:bg-main-red-200 md:text-base">
               <span>응답완료: </span>
               <span className="text-sub-blue dark:text-sub-skyblue">
                 {
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx
index e69dd6fd..8cb0a24e 100644
--- a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderHexaStat.tsx
@@ -14,20 +14,24 @@ const RenderHexaStat = ({
   return (
     <>
       <div>
-        <h2 className="mb-[0.81rem] flex h-[1.375rem] w-fit items-center justify-center bg-gray-300 p-2 text-sm text-white">
+        <h2 className="mb-4 flex h-fit w-fit items-center justify-center bg-gray-300 px-2 text-sm text-white md:text-base">
           {value?.name}
         </h2>
       </div>
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-3 gap-4 md:gap-6">
         {filteredAnswers.map((value) => (
-          <div className="flex gap-[0.31rem]" key={nanoid()}>
-            <img
-              src={BasicProfile}
-              className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
-            />
+          <div className="flex justify-between gap-2" key={nanoid()}>
+            <div className="flex gap-2">
+              <img
+                src={BasicProfile}
+                className="avatar h-5 w-5 border dark:bg-white dark:fill-white"
+              />
 
-            <p className="text-sm">{value?.userName}</p>
-            <p className="text-sm text-sub-wine">{value?.value}</p>
+              <p className="text-sm md:text-lg">{value?.userName}</p>
+            </div>
+            <p className="shrink-0 text-sm text-sub-wine md:text-lg">
+              {value?.value}
+            </p>
           </div>
         ))}
       </div>
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
index 7286f916..3ac64bbb 100644
--- a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderRefinedSubjective.tsx
@@ -43,7 +43,7 @@ const RenderRefinedSubjective = ({
   return (
     <div className="relative mt-8 flex w-full flex-col bg-transparent">
       {isLoading && (
-        <div className="spinner-dot-pulse absolute right-6 top-6 [--spinner-color:var(--blue-9)]">
+        <div className="spinner-dot-pulse absolute right-6 top-10 [--spinner-color:var(--blue-9)]">
           <div className="spinner-pulse-dot"></div>
         </div>
       )}
@@ -52,7 +52,7 @@ const RenderRefinedSubjective = ({
 
       <ReactTextareaAutosize
         onChange={handleChangePrompt}
-        className="m-0 w-full shrink-0 resize-none rounded-none border border-gray-200 bg-transparent p-5 text-sm dark:text-white"
+        className="w-full shrink-0 resize-none rounded-none border border-gray-200 bg-transparent p-5 text-sm dark:text-white md:text-lg"
         value={result ? result : prompt}
       ></ReactTextareaAutosize>
 
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx
index 75331996..d262e2c6 100644
--- a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderStarRatingAnswer.tsx
@@ -14,7 +14,7 @@ const RenderStarRatingAnswer = ({ value, userName }: StarRatingAnswerProps) => {
           src={BasicProfile}
           className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
         />
-        <p className="ml-[1.31rem] text-sm">{userName}</p>
+        <p className="ml-5 text-sm md:text-lg">{userName}</p>
       </h3>
       <div className="ml-[42.96px] mt-[0.5rem] text-base leading-5 md:mt-[0.62rem]">
         <StarRatingList rate={Number(value)} fixed={true} />
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx
index 3edde230..370e7a77 100644
--- a/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AnswerGroup/RenderSubjectiveAnswer.tsx
@@ -26,9 +26,9 @@ const RenderSubjectiveAnswer = ({
         src={BasicProfile}
         className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
       />
-      <p className="ml-[1.31rem] text-sm">{value?.userName}</p>
+      <p className="ml-5 text-sm md:text-lg">{value?.userName}</p>
     </h3>
-    <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">
+    <p className="ml-10 mt-2 text-base leading-5 md:mt-2.5 md:text-xl">
       {value?.value}
     </p>
 
diff --git a/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
index 4c9de30c..8be8e911 100644
--- a/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/AnswerGroup/index.tsx
@@ -34,11 +34,11 @@ const renderDefault = (value: Answer) => (
     <h3 className="flex items-center ">
       <img
         src={BasicProfile}
-        className="avatar h-[1.25rem] w-[1.25rem] border dark:bg-white dark:fill-white"
+        className="avatar h-5 w-5 border dark:bg-white dark:fill-white"
       />
-      <p className="ml-[1.31rem] text-sm">{value?.userName}</p>
+      <p className="ml-5 text-sm md:text-lg">{value?.userName}</p>
     </h3>
-    <p className="ml-[42.96px] mt-[0.5rem] break-all  text-base leading-5 md:mt-[0.62rem]">
+    <p className="ml-10 mt-2 break-all text-base leading-6 md:mt-2.5 md:text-xl">
       {value?.value}
     </p>
   </>
@@ -71,7 +71,7 @@ const QuestionAnswerRenderer = memo(
           className="accordion-content w-full border-x border-gray-200 text-black dark:text-white"
           key={nanoid()}
         >
-          <div className="accordion-content border-none px-2.5">
+          <div className="accordion-content border-none px-4">
             {(() => {
               switch (questionType) {
                 case 'RATING':
@@ -115,25 +115,26 @@ const QuestionAnswerRenderer = memo(
         <input type="checkbox" id={inputId} className="accordion-toggle" />
         <label
           htmlFor={inputId}
-          className="accordion-title flex h-10 justify-center border border-gray-200 bg-white px-2.5 text-lg dark:border-gray-400 dark:bg-main-gray"
+          className="accordion-title flex justify-center border border-gray-200 bg-white px-2.5 py-1 text-lg dark:border-gray-400 dark:bg-main-gray md:py-2.5"
         >
-          <div className="flex h-11 items-center text-lg md:text-xl">
+          <div className="flex items-center justify-between gap-4 text-lg md:text-xl">
             {QUESTION_TYPE[questionType]}
-            <span className="ml-[0.63rem] text-lg md:text-xl">
-              {questionTitle}
+            <span className="w-full text-lg md:text-2xl">{questionTitle}</span>
+
+            <span className="accordion-icon static">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
+                  className="dark:fill-white"
+                ></path>
+              </svg>
             </span>
           </div>
-
-          <span className="accordion-icon absolute top-1/2 flex -translate-y-1/2 items-center justify-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
-            </svg>
-          </span>
         </label>
 
         {questionType !== 'HEXASTAT' &&
diff --git a/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx b/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx
index 08d306dc..6e81bb2d 100644
--- a/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/ProfileGroup/index.tsx
@@ -26,7 +26,7 @@ const ProfileGroup = ({ name, responserSize, type }: ProfileGroupProps) => {
         )}
         {type === 'receiver' ? (
           <p className="text-[0.875rem] md:text-xl">
-            <span className="inline cursor-pointer  rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
+            <span className="inline rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
               {responserSize}명의 피어
             </span>
             <span className="ml-[0.25rem] text-[0.75rem] md:text-base ">
@@ -35,7 +35,7 @@ const ProfileGroup = ({ name, responserSize, type }: ProfileGroupProps) => {
           </p>
         ) : (
           <p className="text-[0.875rem] md:text-xl">
-            <span className="inline cursor-pointer  rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
+            <span className="inline rounded-md border-[1px] border-sub-green bg-white pb-[0.19rem] pl-[0.31rem] pr-[0.31rem] pt-[0.19rem] text-[0.75rem]  text-sub-green dark:border-sub-yellow dark:bg-main-red-200 dark:text-sub-yellow md:text-base">
               {responserSize}명의 피어
             </span>
             <span className="ml-[0.25rem] text-[0.75rem] md:text-base ">
diff --git a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
index 982dec9c..d3ef4971 100644
--- a/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/ReceiverTabReviewDatail/index.tsx
@@ -111,39 +111,41 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <label className="overlay" htmlFor="drawer-bottom"></label>
-      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
-        <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory pb-8 dark:bg-main-red-100 md:h-5/6">
+        <div className="sticky top-0 z-50 flex h-8 w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-10">
           <label
             htmlFor="drawer-bottom"
             className="flex w-full cursor-pointer justify-center"
           >
-            <CloseDropDownIcon className="h-[1rem] w-[1rem] cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-[1.25rem] md:w-[1.25rem]" />
+            <CloseDropDownIcon className="h-4 w-4 cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-5 md:w-5" />
           </label>
         </div>
-        <div className="mx-auto w-full max-w-[550px] self-start px-2.5">
-          <ProfileGroup
-            type="receiver"
-            name={receiverName}
-            responserSize={responserCount?.size}
-          />
-        </div>
-        <div className="accordion-group m-0 mb-[10px] flex w-[21.875rem] max-w-[550px] flex-col gap-10 md:w-[34.375rem]">
-          {getReviewQuestion?.questions?.map((question) => (
-            <AnswerGroup
-              questionType={question?.type}
-              questionTitle={question?.title}
-              questionId={question?.id}
-              key={question?.id}
-              answers={getAnswer(
-                question?.type,
-                question?.id,
-                responseByReceiver,
-              )}
-              reviewId={reviewId}
-              userId={receiverId}
-              reviewStatus={getReviewQuestion?.status}
+        <div className="flex w-full max-w-[37.5rem] flex-col items-center gap-8 px-5">
+          <div className="self-start">
+            <ProfileGroup
+              type="receiver"
+              name={receiverName}
+              responserSize={responserCount?.size}
             />
-          ))}
+          </div>
+          <div className="accordion-group m-0 mb-[10px] flex w-full flex-col gap-10">
+            {getReviewQuestion?.questions?.map((question) => (
+              <AnswerGroup
+                questionType={question?.type}
+                questionTitle={question?.title}
+                questionId={question?.id}
+                key={question?.id}
+                answers={getAnswer(
+                  question?.type,
+                  question?.id,
+                  responseByReceiver,
+                )}
+                reviewId={reviewId}
+                userId={receiverId}
+                reviewStatus={getReviewQuestion?.status}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </>
diff --git a/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx b/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
index 7d995813..bf1e1caf 100644
--- a/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/ResponserTabReviewDetail/index.tsx
@@ -47,42 +47,44 @@ const ReceiverReviewDetail = ({
   return (
     <>
       <label className="overlay" htmlFor="drawer-bottom"></label>
-      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory dark:bg-main-red-100 md:h-5/6">
-        <div className="sticky top-0 z-50 flex h-[30px] w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-[40px]">
+      <div className="drawer drawer-bottom m-0 flex h-[90%] w-full flex-col items-center gap-10 overflow-auto bg-main-ivory pb-8 dark:bg-main-red-100 md:h-5/6">
+        <div className="sticky top-0 z-50 flex h-8 w-full shrink-0 flex-col items-center justify-center bg-main-yellow dark:bg-main-red-200 sm:h-10">
           <label
             htmlFor="drawer-bottom"
             className="flex w-full cursor-pointer justify-center"
           >
-            <CloseDropDownIcon className="h-[1rem] w-[1rem] cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-[1.25rem] md:w-[1.25rem]" />
+            <CloseDropDownIcon className="h-4 w-4 cursor-pointer fill-black stroke-black text-black dark:fill-white dark:stroke-white dark:text-white md:h-5 md:w-5" />
           </label>
         </div>
-        <div className="accordion-group m-0 mb-[10px] flex w-[21.875rem] max-w-[550px] flex-col gap-10 md:w-[34.375rem]">
-          <ProfileGroup
-            name={responserName}
-            type="responser"
-            responserSize={getAllReceiverName.length}
-          />
-          <SelectResponseUser
-            allUser={getAllReceiverName}
-            selectedName={selectedName}
-            setSelectedName={setSelectedName}
-          />
-          {getReviewQuestion?.questions?.map((question) => (
-            <AnswerGroup
-              role="responser"
-              questionType={question?.type}
-              questionTitle={question?.title}
-              key={question?.id}
-              answers={getAnswer(
-                question?.type,
-                question?.id,
-                getUserSelectedAnswers,
-              )}
-              questionId={question?.id}
-              userId={responserId}
-              reviewId={reviewId}
+        <div className="flex w-full max-w-[37.5rem] flex-col items-center gap-8 px-5">
+          <div className="accordion-group m-0 mb-[10px] flex w-full flex-col gap-10">
+            <ProfileGroup
+              name={responserName}
+              type="responser"
+              responserSize={getAllReceiverName.length}
             />
-          ))}
+            <SelectResponseUser
+              allUser={getAllReceiverName}
+              selectedName={selectedName}
+              setSelectedName={setSelectedName}
+            />
+            {getReviewQuestion?.questions?.map((question) => (
+              <AnswerGroup
+                role="responser"
+                questionType={question?.type}
+                questionTitle={question?.title}
+                key={question?.id}
+                answers={getAnswer(
+                  question?.type,
+                  question?.id,
+                  getUserSelectedAnswers,
+                )}
+                questionId={question?.id}
+                userId={responserId}
+                reviewId={reviewId}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </>
diff --git a/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx b/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx
index 0b90e7e2..54807692 100644
--- a/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx
+++ b/src/pages/CreatedReviewManagePage/components/SortDropDown/index.tsx
@@ -18,7 +18,7 @@ const SortDropDown = ({
         <IconButton
           tabIndex={0}
           text="정렬"
-          className="flex h-6 w-14 gap-0.5 rounded-none border border-gray-200 bg-white p-0 text-xs dark:bg-main-gray dark:text-white"
+          className="flex h-fit gap-1 rounded-none border border-gray-200 bg-white px-2 py-0 text-xs dark:bg-main-gray dark:text-white md:text-base"
         >
           <ReviewAlignIcon className="fill-black dark:fill-white" />
         </IconButton>
diff --git a/src/pages/CreatedReviewManagePage/constants.tsx b/src/pages/CreatedReviewManagePage/constants.tsx
index ceaddc7e..17e706da 100644
--- a/src/pages/CreatedReviewManagePage/constants.tsx
+++ b/src/pages/CreatedReviewManagePage/constants.tsx
@@ -1,10 +1,10 @@
 import {
   SingleChoiceIcon,
   DropdownIcon,
-  TextIcon,
   StarRatingIcon,
   HexagonIcon,
   MultipleChoiceIcon,
+  SubjectiveIcon,
 } from '@/assets/icons'
 
 export const PATH = {
@@ -22,24 +22,14 @@ export const REVIEW_MANAGE_TAB_TITLE = {
 }
 
 export const QUESTION_TYPE = {
-  SINGLE_CHOICE: (
-    <SingleChoiceIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
-  ),
+  SINGLE_CHOICE: <SingleChoiceIcon className="dark:stroke-white" />,
   MULTIPLE_CHOICE: (
-    <MultipleChoiceIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
-  ),
-  DROPDOWN: (
-    <DropdownIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
-  ),
-  SUBJECTIVE: (
-    <TextIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
-  ),
-  RATING: (
-    <StarRatingIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
-  ),
-  HEXASTAT: (
-    <HexagonIcon className="fill-dark stroke-black dark:fill-white dark:stroke-white" />
+    <MultipleChoiceIcon className="stroke-black dark:stroke-white" />
   ),
+  DROPDOWN: <DropdownIcon className="dark:fill-white" />,
+  SUBJECTIVE: <SubjectiveIcon className="dark:fill-white" />,
+  RATING: <StarRatingIcon className="dark:stroke-white" />,
+  HEXASTAT: <HexagonIcon className="dark:stroke-white" />,
 }
 
 export const DEFAULT_VALUE = {
diff --git a/src/pages/CreatedReviewManagePage/index.tsx b/src/pages/CreatedReviewManagePage/index.tsx
index bc411766..6d8d3f97 100644
--- a/src/pages/CreatedReviewManagePage/index.tsx
+++ b/src/pages/CreatedReviewManagePage/index.tsx
@@ -4,7 +4,7 @@ import { AxiosError } from 'axios'
 import { Suspense, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useToast } from '@/hooks'
-import { Header, Modal } from '@/components'
+import { Header, Modal, ReviewInfo } from '@/components'
 import {
   useCloseSurvey,
   useGetReviewForCreator,
@@ -132,13 +132,12 @@ const CreatedReviewManagePage = () => {
       </div>
 
       <div className="mx-auto flex w-full max-w-[37.5rem] flex-col px-5 py-7 md:p-10">
-        <h1 className="text-2xl font-bold md:text-3xl">
-          {getReviewQuestion?.title}
-        </h1>
-
-        <h2 className="mt-3 whitespace-pre-wrap text-sm md:mt-4 md:text-xl">
-          {getReviewQuestion?.description}
-        </h2>
+        <ReviewInfo
+          {...{
+            title: getReviewQuestion?.title,
+            description: getReviewQuestion?.description,
+          }}
+        />
         <div className="mt-7">{REVIEW_MANAGE_TAB_CONTENT[activeTab]}</div>
         {getReviewQuestion?.status === 'PROCEEDING' && (
           <button
diff --git a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyDropdown/index.tsx b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyDropdown/index.tsx
index 91dc7fc9..cb703a8d 100644
--- a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyDropdown/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyDropdown/index.tsx
@@ -59,7 +59,7 @@ const ReplyChoice = ({
   return (
     <div className="flex flex-col gap-4">
       <span className="flex w-fit items-center gap-2 rounded-full border border-sub-orange bg-white px-3 py-1 dark:border-sub-yellow dark:bg-main-red-200">
-        <DropdownIcon className="h-4 w-4 stroke-sub-orange dark:stroke-sub-yellow" />
+        <DropdownIcon className="h-4 w-4 fill-sub-orange dark:fill-sub-yellow" />
         <p className="text-sm text-sub-orange dark:text-sub-yellow">드롭다운</p>
       </span>
       <select
diff --git a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
index a2734571..db737036 100644
--- a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
@@ -1,7 +1,7 @@
 import { useState, ChangeEvent, useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useLocation } from 'react-router-dom'
-import { TextIcon } from '@/assets/icons'
+import { SubjectiveIcon } from '@/assets/icons'
 import {
   ReviewReplyStartType,
   ReviewReplyEditType,
@@ -48,7 +48,7 @@ const ReplyText = ({
   return (
     <div className="relative flex flex-col gap-4">
       <span className="flex w-fit items-center gap-2 rounded-full border border-sub-orange bg-white px-3 py-1 dark:border-sub-yellow dark:bg-main-red-200">
-        <TextIcon className="h-3 w-3 stroke-sub-orange dark:stroke-sub-yellow" />
+        <SubjectiveIcon className="h-4 w-4 fill-sub-orange dark:fill-sub-yellow" />
         <p className="text-sm text-sub-orange dark:text-sub-yellow">주관식</p>
       </span>
       <textarea