REV-392/답변 페이지 디자인 수정

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}

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-2 min-h-[2.5rem] whitespace-pre-wrap text-sm text-gray-300 dark:text-gray-400 md:text-lg">
           {description}
         </p>
       )}

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

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>
   )
 }

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">

src/pages/ReviewReplyPage/components/ReviewReplyEdit/ReviewReply.tsx

@@ -59,8 +59,15 @@ 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="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 ">
+            응답 대상자:
+          </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) => (
@@ -99,7 +106,7 @@ const ReviewReply = ({ reviewData, handleSubmit }: ReviewReplyProps) => {
               htmlFor="review-reply"
               className="flex h-full w-full items-center justify-center"
             >
-              답변 제출하기
+              답변 수정하기
             </label>
           </button>
         ) : (

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 && (

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) => (

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} />

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>
   )

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>
 

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) => (

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}

tailwind.config.js

@@ -36,6 +36,7 @@ export default {
           200: '#636363',
           300: '#454545',
           400: '#DBDBDB',
+          500: '#1f2937',
         },
         active: {
           orange: '#FF9900',
@@ -74,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)',