style: 디자인 요건 반영

Nexters · Jul 26, 2024 · 20fc48b · 20fc48b
1 parent d05bde0
commit 20fc48b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/app/(playground)/playground/bottom-sheet/_components/bottom-sheet/index.tsx b/src/app/(playground)/playground/bottom-sheet/_components/bottom-sheet/index.tsx
@@ -55,7 +55,7 @@ export default function BottomSheet() {
           <Button
             variant="outline"
             className={
-              "h-full w-full rounded-xl border-none bg-[#5E8AFF] text-lg text-white"
+              "h-full w-full rounded-xl border-none bg-[#5E8AFF] text-lg font-bold text-white"
             }
           >
             세션 참여 조사하기
@@ -81,7 +81,10 @@ export default function BottomSheet() {
           <div className="flex-grow overflow-y-auto">
             <div className="gap-4 pb-4">
               <div className="flex flex-col items-center space-y-4">
-                <Label htmlFor="name" className="w-full text-left text-base">
+                <Label
+                  htmlFor="name"
+                  className="w-full text-left text-base font-semibold"
+                >
                   이름
                 </Label>
                 <form.Field name="name">
@@ -154,7 +157,7 @@ export default function BottomSheet() {
                       type="submit"
                       variant="outline"
                       disabled={!isFormComplete || isSubmitting}
-                      className={`h-full w-full rounded-xl border-none bg-[#5E8AFF] text-lg text-white disabled:bg-[#D5D7D9]`}
+                      className={`h-full w-full rounded-xl border-none bg-[#5E8AFF] text-lg font-bold text-white disabled:bg-[#D5D7D9]`}
                     >
                       제출하기
                     </Button>

diff --git a/src/app/(playground)/playground/bottom-sheet/_components/image-radio/option.tsx b/src/app/(playground)/playground/bottom-sheet/_components/image-radio/option.tsx
@@ -30,17 +30,17 @@ export function ImageRadioOption({
         onChange={context.onChange}
         checked={checked}
       />
-      <div className="flex h-full w-full flex-col items-center space-y-5 rounded-2xl border border-[#3C3C3C] bg-[#222222] p-4 transition-all duration-200 hover:border-blue-300 hover:bg-[#2E2E2E] peer-checked:border-[#5E8AFF]">
+      <div className="flex h-full w-full flex-col items-center space-y-4 rounded-2xl border border-[#3C3C3C] bg-[#222222] px-[27px] pb-5 pt-6 transition-all duration-200 hover:border-blue-300 hover:bg-[#2E2E2E] peer-checked:border-[#5E8AFF]">
         {imageUrl && (
           <Image
             src={imageUrl as string}
             alt={text}
             width={100}
             height={100}
-            className="mb-2 h-24 w-24 object-cover"
+            className="h-[100px] w-[100px] object-cover"
           />
         )}
-        <span className="text-center font-medium">{text}</span>
+        <span className="text-center text-lg font-semibold">{text}</span>
       </div>
     </label>
   );