fix: box props 네이밍 변경

GDSC-Hongik · Jun 23, 2024 · 9190473 · 9190473
1 parent caaa341
commit 9190473
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/wow-ui/src/components/Box/Box.stories.tsx b/packages/wow-ui/src/components/Box/Box.stories.tsx
@@ -24,7 +24,7 @@ const meta = {
       },
       control: false,
     },
-    boxVariantType: {
+    variant: {
       description: "박스의 타입을 설정합니다.",
       mapping: ["text", "checkbox", "arrow"],
       options: ["text", "checkbox", "arrow"],
@@ -134,7 +134,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    boxVariantType: "text",
+    variant: "text",
     text: "Text",
     subText: "Subtext",
   },
@@ -144,7 +144,7 @@ export const CheckBox: Story = {
   args: {
     text: "Text",
     subText: "Subtext",
-    boxVariantType: "checkbox",
+    variant: "checkbox",
     onChange: () => {
       console.log("체크");
     },
@@ -155,7 +155,7 @@ export const ArrowBox: Story = {
   args: {
     text: "Text",
     subText: "Subtext",
-    boxVariantType: "arrow",
+    variant: "arrow",
     onClick: () => {
       console.log("클릭 이벤트 발생");
     },
@@ -174,7 +174,7 @@ export const SuccessBox: Story = {
   args: {
     text: "Text",
     subText: "Subtext",
-    boxVariantType: "checkbox",
+    variant: "checkbox",
     onChange: () => {
       console.log("체크");
     },
@@ -187,7 +187,7 @@ export const LeftElementBox: Story = {
     subText: "디스코드 연동이 필요해요.",
     textColor: "discord",
     status: "error",
-    boxVariantType: "arrow",
+    variant: "arrow",
     onClick: () => {
       console.log("클릭");
     },
@@ -210,10 +210,10 @@ const ControlledBox = () => {
 
   return (
     <Box
-      boxVariantType="checkbox"
       checked={checked}
       subText="checkBox controlled by checked"
       text="CheckBox Test"
+      variant="checkbox"
       onChange={handleChange}
     />
   );

diff --git a/packages/wow-ui/src/components/Box/index.tsx b/packages/wow-ui/src/components/Box/index.tsx
@@ -10,7 +10,7 @@ import { useCheckedState } from "@/hooks";
 type BoxVariantType = "arrow" | "checkbox" | "text";
 
 export interface BoxProps<T extends BoxVariantType> {
-  boxVariantType?: T;
+  variant?: T;
   onClick?: T extends "arrow" ? () => void : never;
   onChange?: T extends "checkbox" ? () => void : never;
   checked?: T extends "checkbox" ? boolean : never;
@@ -30,7 +30,7 @@ export interface BoxProps<T extends BoxVariantType> {
  * @param {boolean} [checked] Box 컴포넌트의 타입이 "checkbox"일때 전달할 수 있는 체크박스의 상태입니다.
  * @param {string} [className] 체크박스에 전달하는 커스텀 클래스를 설정합니다.
  * @param {string} [textColor] text의 색상을 변경할 수 있습니다.
- * @param {"text" | "checkbox" | "arrow"} [boxVariantType] Box 컴포넌트의 타입을 설정합니다.
+ * @param {"text" | "checkbox" | "arrow"} [variant] Box 컴포넌트의 타입을 설정합니다.
  * @param {string} text Box 컴포넌트에 메인으로 표기할 텍스트를 입력합니다.
  * @param {string} [subText] Box 컴포넌트에 작성할 추가 정보를 입력합니다.
  * @param {string} [subTextColor] subtext의 색상을 변경할 수 있습니다.
@@ -42,7 +42,7 @@ export interface BoxProps<T extends BoxVariantType> {
 
 const Box = <T extends BoxVariantType = "text">({
   leftElement,
-  boxVariantType,
+  variant,
   text,
   textColor,
   subText,
@@ -70,14 +70,14 @@ const Box = <T extends BoxVariantType = "text">({
     }
   };
   const handleArrowClick = () => {
-    if (boxVariantType === "arrow" && onClick) {
+    if (variant === "arrow" && onClick) {
       onClick();
     }
   };
   return (
     <Flex
       alignItems="center"
-      className={containerStyle({ status, boxVariantType })}
+      className={containerStyle({ status, variant })}
       direction="row"
       gap="lg"
       id={`box-${text}`}
@@ -103,9 +103,9 @@ const Box = <T extends BoxVariantType = "text">({
         </Flex>
       </Flex>
       <div>
-        {boxVariantType === "checkbox" ? (
+        {variant === "checkbox" ? (
           <Checkbox checked={checked} onClick={handleClick} />
-        ) : boxVariantType === "arrow" ? (
+        ) : variant === "arrow" ? (
           <RightArrow height={20} stroke={getStrokeColor(status)} width={20} />
         ) : null}
       </div>
@@ -141,7 +141,7 @@ const containerStyle = cva({
         borderColor: "error",
       },
     },
-    boxVariantType: {
+    variant: {
       arrow: {
         cursor: "pointer",
       },