fix: #330 라디오 버튼 디자인 토큰 반영

depromeet · Sep 10, 2024 · d0752e2 · d0752e2
1 parent 0218aa7
commit d0752e2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/apps/web/src/component/common/radioButton/Radio.tsx b/apps/web/src/component/common/radioButton/Radio.tsx
@@ -4,15 +4,24 @@ import { forwardRef, useContext } from "react";
 import { RadioContext } from "./RadioButtonGroup";
 
 import { Typography } from "@/component/common/typography";
-import { DESIGN_SYSTEM_COLOR } from "@/style/variable";
+import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 
 type RadioProps = {
   value: string;
   children: React.ReactNode;
+  rounded?: "sm" | "lg";
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked">;
 
-export const Radio = forwardRef<HTMLLabelElement, RadioProps>(function ({ value, children, ...props }, ref) {
+export const Radio = forwardRef<HTMLLabelElement, RadioProps>(function ({ value, rounded = "sm", children, ...props }, ref) {
   const radioContext = useContext(RadioContext);
+
+  const STYLE_MAP = {
+    borderRadius: {
+      sm: "0.6rem",
+      lg: "0.8rem",
+    },
+  } as const;
+
   return (
     <label
       ref={ref}
@@ -21,13 +30,13 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(function ({ value,
         font-weight: 600;
         width: fit-content;
         padding: 1.2rem 1.6rem;
-        border-radius: 0.6rem;
-        background-color: ${radioContext?.isChecked(value) ? DESIGN_SYSTEM_COLOR.theme3 : DESIGN_SYSTEM_COLOR.lightGrey2};
+        border-radius: ${STYLE_MAP.borderRadius[rounded]};
+        background-color: ${radioContext?.isChecked(value) ? DESIGN_TOKEN_COLOR.blue600 : DESIGN_TOKEN_COLOR.gray100};
         transition: 0.2s all;
         cursor: pointer;
       `}
     >
-      <Typography color={radioContext?.isChecked(value) ? "white" : "darkGrayText"} variant={"body16Medium"}>
+      <Typography color={radioContext?.isChecked(value) ? "gray00" : "gray800"} variant={"body16Medium"}>
         {children}
       </Typography>
       <input

diff --git a/apps/web/src/component/retrospectCreate/steps/DueDate.tsx b/apps/web/src/component/retrospectCreate/steps/DueDate.tsx
@@ -39,8 +39,12 @@ export function DueDate() {
           margin-bottom: 1.2rem;
         `}
       >
-        <Radio value={"has-duedate-neg"}>마감일 미지정</Radio>
-        <Radio value={"has-duedate-pos"}>마감일 지정</Radio>
+        <Radio value={"has-duedate-neg"} rounded="lg">
+          마감일 미지정
+        </Radio>
+        <Radio value={"has-duedate-pos"} rounded="lg">
+          마감일 지정
+        </Radio>
       </RadioButtonGroup>
       {selectedValue === "has-duedate-pos" && (
         <DateTimeInput