From 7910fc52ed5a9909f2ce99613dc136e29abbf146 Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 17:16:07 +0900
Subject: [PATCH 1/9] =?UTF-8?q?chore:=20gray-500=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 465c4723..e7e21e8a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,7 @@ export default {
           200: '#636363',
           300: '#454545',
           400: '#DBDBDB',
+          500: '#1f2937',
         },
         active: {
           orange: '#FF9900',

From ebc3af1aa59ca15d61ed02b79691fbcd965f921b Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 17:16:44 +0900
Subject: [PATCH 2/9] =?UTF-8?q?style:=20=EC=88=98=EC=8B=A0=EC=9E=90?=
 =?UTF-8?q?=EC=99=80=20=EC=A7=88=EB=AC=B8=20=EC=95=84=EC=9D=B4=ED=85=9C=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=EA=B3=BC=20border=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ReviewReplyPage/components/QuestionItem/index.tsx | 6 +++---
 src/pages/ReviewReplyPage/components/ReceiverItem/index.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/QuestionItem/index.tsx b/src/pages/ReviewReplyPage/components/QuestionItem/index.tsx
index b1ff4da2..eac2d6f8 100644
--- a/src/pages/ReviewReplyPage/components/QuestionItem/index.tsx
+++ b/src/pages/ReviewReplyPage/components/QuestionItem/index.tsx
@@ -39,11 +39,11 @@ const QuestionItem = ({
       }}
       className={`flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border text-sm ${
         index === selectedQuestionIndex
-          ? 'border-black bg-main-hover-yellow text-black dark:border-white dark:bg-main-red-300 dark:text-white'
+          ? 'border-2 border-black bg-main-hover-yellow text-black dark:border-white dark:bg-gray-500 dark:text-white'
           : 'border-gray-100 bg-white text-gray-300 dark:border-gray-300 dark:bg-main-red-200 dark:text-gray-100'
-      } ${complete && 'border-2 !border-sub-green'} ${
+      } ${complete && 'border-1 !border-sub-green'} ${
         (state.status === 'END' || state.status === 'DEADLINE') &&
-        'border-2 !border-sub-green'
+        'border-1 !border-sub-green'
       }`}
     >
       {index + 1}
diff --git a/src/pages/ReviewReplyPage/components/ReceiverItem/index.tsx b/src/pages/ReviewReplyPage/components/ReceiverItem/index.tsx
index bae65240..33c29b2b 100644
--- a/src/pages/ReviewReplyPage/components/ReceiverItem/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReceiverItem/index.tsx
@@ -35,16 +35,16 @@ const ReceiverItem = ({
               py-1.5
               ${
                 selectedReceiver.receiverId === receiverId
-                  ? 'border-black bg-main-yellow dark:border-white dark:bg-main-red-300'
+                  ? 'border-2 border-black bg-main-yellow dark:border-white dark:bg-gray-500'
                   : 'border-gray-100 bg-white dark:border-gray-300 dark:bg-main-red-200'
               } ${
                 individualReplyCompletes &&
                 index !== undefined &&
                 individualReplyCompletes[index] &&
-                'border-2 !border-sub-green'
+                'border-1 !border-sub-green'
               } ${
                 (state.status === 'END' || state.status === 'DEADLINE') &&
-                'border-2 !border-sub-green'
+                'border-1 !border-sub-green'
               }`}
     >
       <Profile

From 4103529338f14e51e4958173fdd66d13670bccdb Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 17:39:18 +0900
Subject: [PATCH 3/9] =?UTF-8?q?style:=20questions=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EA=B8=80=EC=9E=90=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ReviewReplyPage/components/Questions/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/Questions/index.tsx b/src/pages/ReviewReplyPage/components/Questions/index.tsx
index 893dfe9f..b143a94c 100644
--- a/src/pages/ReviewReplyPage/components/Questions/index.tsx
+++ b/src/pages/ReviewReplyPage/components/Questions/index.tsx
@@ -68,15 +68,15 @@ const Questions = ({
   return (
     <div className={`flex flex-col gap-2.5`}>
       <div className="flex justify-between">
-        <h2 className="text-lg dark:text-white">{title}</h2>
+        <h2 className="text-lg dark:text-white md:text-2xl">{title}</h2>
         {isRequired && (
-          <h3 className="text-sm text-sub-red-200 dark:text-active-orange">
+          <h3 className="text-sm text-sub-red-200 dark:text-active-orange md:text-lg">
             필수 질문
           </h3>
         )}
       </div>
       {description && (
-        <p className="mb-4 min-h-[2.5rem] whitespace-pre-wrap text-sm text-gray-300 dark:text-gray-400">
+        <p className="mb-4 min-h-[2.5rem] whitespace-pre-wrap text-sm text-gray-300 dark:text-gray-400 md:text-lg">
           {description}
         </p>
       )}

From 3050e5077b9716e6a58cb11d96abe67ab7b2f76a Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 17:39:38 +0900
Subject: [PATCH 4/9] =?UTF-8?q?chore:=20=EA=B8=80=EC=9E=90=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=203xl,=204xl=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tailwind.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index e7e21e8a..7f76128e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,6 +75,8 @@ export default {
         lg: '0.875rem',
         xl: '1rem',
         '2xl': '1.125rem',
+        '3xl': '1.5rem',
+        '4xl': '1.875rem',
       },
       boxShadow: {
         md: '0px 2px 0px 0px rgba(0, 0, 0, 0.25)',

From c22242db3394de44cd1156c89dcd42e95491cb71 Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 17:51:00 +0900
Subject: [PATCH 5/9] =?UTF-8?q?style:=20=EC=A0=9C=EB=AA=A9,=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85,=20=EC=9D=91=EB=8B=B5=20=EB=8C=80=EC=83=81=EC=9E=90?=
 =?UTF-8?q?=20=EA=B8=80=EC=9E=90=20=ED=81=AC=EA=B8=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReviewReplyEdit/ReviewReply.tsx           | 9 ++++++++-
 .../ReviewReplyPage/components/ReviewReplyEdit/index.tsx | 6 ++++--
 .../components/ReviewReplyEnd/ReviewReply.tsx            | 9 ++++++++-
 .../ReviewReplyPage/components/ReviewReplyEnd/index.tsx  | 9 +++++++--
 .../components/ReviewReplyStart/ReviewReply.tsx          | 9 ++++++++-
 .../components/ReviewReplyStart/index.tsx                | 4 +++-
 6 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
index 1f8a9a43..9ba64f16 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
@@ -60,7 +60,14 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
   return (
     <div className="flex h-full flex-col justify-between gap-2">
       <div className="flex flex-col gap-5 overflow-auto pt-2.5">
-        <h3 className="text-sm text-gray-300 dark:text-gray-400 md:text-lg">{`응답 대상자: ${selectedReceiver.name}`}</h3>
+        <div className="mt-2 flex items-center gap-2 text-base md:text-xl">
+          <span className="text-gray-300 dark:text-gray-400 ">
+            응답 대상자:
+          </span>
+          <span className="text-sub-orange dark:text-sub-yellow">
+            {selectedReceiver.name}
+          </span>
+        </div>
         <div className="flex flex-col gap-5">
           <ul className="flex items-center gap-2.5 overflow-x-auto">
             {receivers.map((receiver, index) => (
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx
index 1b823837..d9204807 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/index.tsx
@@ -125,8 +125,10 @@ const ReviewReplyEdit = () => {
     <>
       <Header />
       <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
-        <h3 className="mt-2.5 whitespace-pre-wrap text-sm dark:text-white md:text-lg">
+        <h1 className="text-2xl font-bold dark:text-white md:text-4xl">
+          {title}
+        </h1>
+        <h3 className="mt-2.5 whitespace-pre-wrap text-lg dark:text-white md:text-2xl">
           {description}
         </h3>
         {!initModal && (
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEnd/ReviewReply.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEnd/ReviewReply.tsx
index d524380c..09b98cf8 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyEnd/ReviewReply.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyEnd/ReviewReply.tsx
@@ -53,7 +53,14 @@ const ReviewReply = ({ reviewData }: ReviewReplyProps) => {
   return (
     <div className="flex h-full flex-col justify-between gap-2">
       <div className="flex flex-col gap-5 pt-2.5">
-        <h3 className="text-sm text-gray-300 dark:text-gray-400">{`응답 대상자: ${selectedReceiver.name}`}</h3>
+        <div className="mt-2 flex items-center gap-2 text-base md:text-xl">
+          <span className="text-gray-300 dark:text-gray-400 ">
+            응답 대상자:
+          </span>
+          <span className="text-sub-orange dark:text-sub-yellow">
+            {selectedReceiver.name}
+          </span>
+        </div>
         <div className="flex flex-col gap-5">
           <ul className="flex items-center gap-2.5 overflow-x-auto">
             {receivers.map((receiver) => (
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx
index bcc1a19d..55dbc90b 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyEnd/index.tsx
@@ -25,7 +25,7 @@ const ReviewReplyEnd = () => {
     responserId: user?.id as number,
   })
   const { data: reviewData } = useGetReviewForParticipation({ id: reviewId })
-  const { title, questions } = reviewData
+  const { title, questions, description } = reviewData
 
   const methods = useForm<ReviewReplyEndType>({
     defaultValues: {
@@ -99,7 +99,12 @@ const ReviewReplyEnd = () => {
     <>
       <Header />
       <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
+        <h1 className="text-2xl font-bold dark:text-white md:text-4xl">
+          {title}
+        </h1>
+        <h3 className="mt-2.5 whitespace-pre-wrap text-sm dark:text-white md:text-lg">
+          {description}
+        </h3>
         {!initModal && (
           <FormProvider {...methods}>
             <ReviewReply reviewData={reviewData} />
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReviewReply.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReviewReply.tsx
index 555afab3..114930b9 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReviewReply.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReviewReply.tsx
@@ -60,7 +60,14 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
   return (
     <div className="flex h-full flex-col justify-between gap-2">
       <div className="flex flex-col gap-5 pt-2.5">
-        <h3 className="text-sm text-gray-300 dark:text-gray-400">{`응답 대상자: ${selectedReceiver.name}`}</h3>
+        <div className="mt-2 flex items-center gap-2 text-base md:text-xl">
+          <span className="text-gray-300 dark:text-gray-400 ">
+            응답 대상자:
+          </span>
+          <span className="text-sub-orange dark:text-sub-yellow">
+            {selectedReceiver.name}
+          </span>
+        </div>
         <div className="flex flex-col gap-5">
           <ul className="flex items-center gap-2.5 overflow-x-auto">
             {receivers.map((receiver, index) => (
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx
index d48529de..0ccc624d 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyStart/index.tsx
@@ -60,7 +60,9 @@ const ReviewReplyStart = () => {
     <>
       <Header handleGoBack={handleGoBack} />
       <div className="flex h-full w-full max-w-[37.5rem] flex-col p-5 text-black">
-        <h1 className="text-lg dark:text-white md:text-2xl">{title}</h1>
+        <h1 className="text-2xl font-bold dark:text-white md:text-4xl">
+          {title}
+        </h1>
         {reviewStep === 1 && (
           <h3 className="mt-2.5 whitespace-pre-wrap text-sm dark:text-white md:text-lg">
             {description}

From 7f0d1ce78d712316a66b67a348354c6f59857817 Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 18:15:13 +0900
Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20=EC=A3=BC=EA=B4=80=EC=8B=9D=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=EC=88=98=20=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReplyCategory/ReplyText/index.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
index e7f47514..a2734571 100644
--- a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyText/index.tsx
@@ -33,15 +33,18 @@ const ReplyText = ({
     setText(getValues(`${registerPath}.answerText`) || '')
   }, [registerPath, getValues])
 
-  const handleChangeReplyText = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setTextCount(e.currentTarget.value.length)
-    setText(e.currentTarget.value)
-  }
-
   useEffect(() => {
     handleCheckReply({ value: text.trim().length })
   }, [handleCheckReply, text])
 
+  useEffect(() => {
+    setTextCount(text.length)
+  }, [text])
+
+  const handleChangeReplyText = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.currentTarget.value)
+  }
+
   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">

From b5a5d689a3c17c276e90bd94828353137358675a Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 18:32:34 +0900
Subject: [PATCH 7/9] =?UTF-8?q?style:=20=EC=88=98=EC=8B=A0=EC=9E=90=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95=20height=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReviewReplyStart/ReceiverList.tsx    | 13 ++++++++++---
 .../components/ReviewReplyStart/ReceiverSelect.tsx  | 12 ++++++------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverList.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverList.tsx
index 2cef3844..f4aabc1e 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverList.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverList.tsx
@@ -1,5 +1,5 @@
 import { Profile } from '@/components'
-import { CheckInTheCircleIcon } from '@/assets/icons'
+import { CheckInTheCircleIcon, AlertIcon } from '@/assets/icons'
 import { User } from '../../types'
 
 interface ReceiverListProps {
@@ -34,8 +34,8 @@ const ReceiverList = ({
         </button>
       </div>
 
-      {receiverList.length > 0 && (
-        <ul className="flex max-h-[200px] flex-col overflow-auto border bg-main-ivory">
+      {receiverList.length > 0 ? (
+        <ul className="flex h-40 flex-col overflow-auto border bg-main-ivory dark:bg-main-gray md:h-48">
           {receiverList.map((receiver, index) => (
             <li
               key={index}
@@ -49,6 +49,13 @@ const ReceiverList = ({
             </li>
           ))}
         </ul>
+      ) : (
+        <div className="flex h-40 flex-col items-center justify-center gap-3 border bg-main-ivory dark:bg-main-gray md:h-48">
+          <AlertIcon className="fill-black dark:fill-white" />
+          <span className="dark:text-white">
+            선택할 수 있는 유저가 없습니다.
+          </span>
+        </div>
       )}
     </div>
   )
diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverSelect.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverSelect.tsx
index 9919fa15..8d9831de 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverSelect.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyStart/ReceiverSelect.tsx
@@ -181,18 +181,18 @@ const ReceiverSelect = ({ setReviewStep, questions }: ReceiverSelectProps) => {
             handleResetKeyword={handleResetName}
             tabIndex={0}
           />
-          <div className="mt-4 flex flex-col gap-3">
+          <div className="mt-2 flex flex-col gap-3">
+            <ReceiverList
+              receiverList={filteredNonReceivers}
+              handleSelectAllReceivers={handleNonReceiver.selectAll}
+              handleSelectReceiver={handleNonReceiver.select}
+            />
             <ReceiverList
               receiverList={filteredReceivers}
               selected={true}
               handleSelectAllReceivers={handleReceiver.selectAll}
               handleSelectReceiver={handleReceiver.select}
             />
-            <ReceiverList
-              receiverList={filteredNonReceivers}
-              handleSelectAllReceivers={handleNonReceiver.selectAll}
-              handleSelectReceiver={handleNonReceiver.select}
-            />
           </div>
         </div>
 

From 48e578999bc36f756ba0b900cecfe9f2df461751 Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 18:51:29 +0900
Subject: [PATCH 8/9] =?UTF-8?q?style:=20=EB=8B=B5=EB=B3=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20text=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReviewReplyEdit/ReviewReply.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
index 9ba64f16..a072c893 100644
--- a/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
+++ b/src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx
@@ -59,7 +59,7 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
 
   return (
     <div className="flex h-full flex-col justify-between gap-2">
-      <div className="flex flex-col gap-5 overflow-auto pt-2.5">
+      <div className="flex flex-col gap-5 pt-2.5">
         <div className="mt-2 flex items-center gap-2 text-base md:text-xl">
           <span className="text-gray-300 dark:text-gray-400 ">
             응답 대상자:
@@ -106,7 +106,7 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
               htmlFor="review-reply"
               className="flex h-full w-full items-center justify-center"
             >
-              답변 제출하기
+              답변 수정하기
             </label>
           </button>
         ) : (

From e67feb51cb4c7d1f9f3aefd776d8b42ddeeb4e04 Mon Sep 17 00:00:00 2001
From: hayamaster <dnfxmfkdbzos@naver.com>
Date: Sun, 3 Dec 2023 19:25:04 +0900
Subject: [PATCH 9/9] =?UTF-8?q?style:=20=EC=9C=A1=EA=B0=81=ED=98=95=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=AF=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

---
 .../components/Questions/index.tsx            |  2 +-
 .../ReplyCategory/ReplyHexa/index.tsx         | 73 ++++++++++---------
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/pages/ReviewReplyPage/components/Questions/index.tsx b/src/pages/ReviewReplyPage/components/Questions/index.tsx
index b143a94c..9498bb3d 100644
--- a/src/pages/ReviewReplyPage/components/Questions/index.tsx
+++ b/src/pages/ReviewReplyPage/components/Questions/index.tsx
@@ -76,7 +76,7 @@ const Questions = ({
         )}
       </div>
       {description && (
-        <p className="mb-4 min-h-[2.5rem] whitespace-pre-wrap text-sm text-gray-300 dark:text-gray-400 md:text-lg">
+        <p className="mb-2 min-h-[2.5rem] whitespace-pre-wrap text-sm text-gray-300 dark:text-gray-400 md:text-lg">
           {description}
         </p>
       )}
diff --git a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyHexa/index.tsx b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyHexa/index.tsx
index 4b72d9d2..dc24c69a 100644
--- a/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyHexa/index.tsx
+++ b/src/pages/ReviewReplyPage/components/ReplyCategory/ReplyHexa/index.tsx
@@ -55,49 +55,54 @@ const ReplyHexa = ({
   ])
 
   return (
-    <div className="flex flex-col gap-5">
+    <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">
         <HexagonIcon className="h-4 w-4 stroke-sub-orange dark:stroke-sub-yellow" />
         <p className="text-sm text-sub-orange dark:text-sub-yellow">
           육각형 스탯
         </p>
       </span>
-      {options.map(({ optionId, optionName }, index) => {
-        const hexaPath: HexaPath = `replyTargets.${receiverIndex}.replies.${
-          questionIndex + index
-        }.answerHexa`
+      <div className="grid w-fit grid-cols-2 gap-6">
+        {options.map(({ optionId, optionName }, index) => {
+          const hexaPath: HexaPath = `replyTargets.${receiverIndex}.replies.${
+            questionIndex + index
+          }.answerHexa`
 
-        watch(hexaPath)
+          watch(hexaPath)
 
-        return (
-          <div key={optionId} className="flex gap-5">
-            <label
-              htmlFor={`${optionId}`}
-              className="w-fit bg-gray-300 px-1.5 py-1 text-sm text-white dark:bg-gray-400 dark:text-black"
+          return (
+            <div
+              key={optionId}
+              className="flex w-fit flex-col gap-2 rounded-md border bg-main-hover-yellow p-2 dark:bg-main-gray"
             >
-              {optionName}
-            </label>
-            <select
-              {...(register(hexaPath),
-              {
-                onChange: (e) => {
-                  setValue(hexaPath, parseInt(e.currentTarget.value))
-                  setSelectedOptionValue(parseInt(e.currentTarget.value))
-                },
-              })}
-              disabled={state.status === 'END' || state.status === 'DEADLINE'}
-              value={getValues(hexaPath) || 0}
-              className="border border-gray-200 bg-white px-2.5 py-1 text-center text-sm focus:outline-none dark:border-gray-400 dark:bg-main-gray dark:text-white"
-            >
-              {Array.from({ length: 11 }, (_, i) => i).map((option) => (
-                <option key={option} value={option}>
-                  {option === 0 ? '점수 선택' : option}
-                </option>
-              ))}
-            </select>
-          </div>
-        )
-      })}
+              <label
+                htmlFor={`${optionId}`}
+                className="w-fit rounded-md border border-sub-blue bg-white px-1.5 text-sm font-bold text-sub-blue dark:border-sub-skyblue dark:bg-main-red-200 dark:text-sub-skyblue md:px-2 md:text-lg"
+              >
+                {optionName}
+              </label>
+              <select
+                {...(register(hexaPath),
+                {
+                  onChange: (e) => {
+                    setValue(hexaPath, parseInt(e.currentTarget.value))
+                    setSelectedOptionValue(parseInt(e.currentTarget.value))
+                  },
+                })}
+                disabled={state.status === 'END' || state.status === 'DEADLINE'}
+                value={getValues(hexaPath) || 0}
+                className="w-fit border border-gray-200 bg-white px-2.5 py-1 text-center text-sm focus:outline-none dark:border-gray-400 dark:bg-main-gray dark:text-white"
+              >
+                {Array.from({ length: 11 }, (_, i) => i).map((option) => (
+                  <option key={option} value={option}>
+                    {option === 0 ? '점수 선택' : option}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )
+        })}
+      </div>
     </div>
   )
 }