style: 육각형 스탯 디자인 변경

prgrms-web-devcourse · Dec 3, 2023 · e67feb5 · e67feb5
1 parent 48e5789
commit e67feb5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git 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
@@ -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>
   )
 }