[Fix] Box 컴포넌트의 text 스펙을 수정해요.

apps/wow-docs/app/page.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
 import MultiGroup from "wowds-ui/MultiGroup";
@@ -16,7 +17,7 @@ const Home = () => {
         <RadioButton label="2학년" value="2학년" />
       </RadioGroup>
       <MultiGroup variant="checkbox">
-        <Checkbox children="checkbox1" value="checkbox1" />
+        <Checkbox children="checkbox1" disabled={true} value="checkbox1" />
         <Checkbox children="checkbox2" value="checkbox2" />
         <Checkbox children="checkbox3" value="checkbox3" />
         <Checkbox children="checkbox4" value="checkbox4" />

packages/wow-icons/src/component/Warn.tsx

@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Warn = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "24",
+      height = "25",
+      viewBox = "0 0 24 25",
+      stroke = "white",
+      fill = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="warn icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M21.3 12.5C21.3 17.6362 17.1362 21.8 12 21.8C6.86375 21.8 2.7 17.6362 2.7 12.5C2.7 7.36375 6.86375 3.2 12 3.2C17.1362 3.2 21.3 7.36375 21.3 12.5Z"
+          stroke={color[stroke]}
+          strokeWidth="1.4"
+        />
+        <path
+          d="M12.766 6.81606L12.6566 14.9411H11.3441L11.2348 6.81606H12.766ZM12.0004 18.2223C11.4535 18.2223 10.9848 17.7692 11.0004 17.2067C10.9848 16.6598 11.4535 16.2067 12.0004 16.2067C12.5473 16.2067 13.0004 16.6598 13.0004 17.2067C13.0004 17.7692 12.5473 18.2223 12.0004 18.2223Z"
+          fill={color[fill]}
+        />
+      </svg>
+    );
+  }
+);
+
+Warn.displayName = "Warn";
+export default Warn;

packages/wow-icons/src/component/index.ts

@@ -1,2 +1,3 @@
 export { default as Check } from "./Check.tsx";
 export { default as RightArrow } from "./RightArrow.tsx";
+export { default as Warn } from "./Warn.tsx";

packages/wow-ui/package.json

@@ -101,7 +101,8 @@
     "plop": "^4.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.1.9",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@playwright/test": "^1.45.0"
   },
   "dependencies": {
     "wowds-icons": "workspace:^"

packages/wow-ui/src/components/Box/Box.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { Flex, styled } from "@styled-system/jsx";
 import { useState } from "react";
 
 import Box from "@/components/Box";
@@ -26,8 +27,8 @@ const meta = {
     },
     variant: {
       description: "박스의 타입을 설정합니다.",
-      mapping: ["text", "checkbox", "arrow"],
-      options: ["text", "checkbox", "arrow"],
+      mapping: ["text", "checkbox", "arrow", "warn"],
+      options: ["text", "checkbox", "arrow", "warn"],
       control: {
         type: "select",
         labels: {
@@ -40,8 +41,8 @@ const meta = {
     text: {
       description: "박스에 메인으로 표기할 텍스트를 입력합니다.",
       table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" },
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: "{}" },
       },
       control: {
         type: "text",
@@ -201,6 +202,48 @@ export const LeftElementBox: Story = {
   },
 };
 
+export const WarnBox: Story = {
+  args: {
+    text: "2024년 1학기 1차 정회원 지원 중이에요.",
+    subText: "정회원 가입 조건을 완료해주세요.",
+    status: "error",
+    variant: "warn",
+  },
+};
+
+export const TextReactElementBox: Story = {
+  args: {
+    text: (
+      <Flex direction="column" gap="sm">
+        <Flex align="center" direction="row" gap="xs">
+          <styled.span color="GrayText" textStyle="h3">
+            학번
+          </styled.span>
+          <styled.span color="textBlack">C000000</styled.span>
+        </Flex>
+        <Flex align="center" direction="row" gap="xs">
+          <styled.span color="GrayText" textStyle="h3">
+            학과
+          </styled.span>
+          <styled.span color="textBlack">컴퓨터공학과</styled.span>
+        </Flex>
+        <Flex align="center" direction="row" gap="xs">
+          <styled.span color="GrayText" textStyle="h3">
+            전화번호
+          </styled.span>
+          <styled.span color="textBlack">01000000000</styled.span>
+        </Flex>
+        <Flex align="center" direction="row" gap="xs">
+          <styled.span color="GrayText" textStyle="h3">
+            이메일
+          </styled.span>
+          <styled.span color="textBlack">[email protected]</styled.span>
+        </Flex>
+      </Flex>
+    ),
+  },
+};
+
 const ControlledBox = () => {
   const [checked, setChecked] = useState(false);
 

packages/wow-ui/src/components/Box/index.tsx

@@ -2,20 +2,20 @@
 import { cva } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
 import type { ColorToken } from "@styled-system/tokens";
-import { RightArrow } from "wowds-icons";
+import { RightArrow, Warn } from "wowds-icons";
 
 import Checkbox from "@/components/Checkbox";
 import { useCheckedState } from "@/hooks";
 
-type BoxVariantType = "arrow" | "checkbox" | "text";
+type BoxVariantType = "arrow" | "checkbox" | "text" | "warn";
 
 export interface BoxProps<T extends BoxVariantType> {
   variant?: T;
   onClick?: T extends "arrow" ? () => void : never;
   onChange?: T extends "checkbox" ? () => void : never;
   checked?: T extends "checkbox" ? boolean : never;
   leftElement?: React.ReactNode;
-  text: string;
+  text: React.ReactNode;
   textColor?: ColorToken;
   subText?: string;
   subTextColor?: ColorToken;
@@ -31,7 +31,7 @@ export interface BoxProps<T extends BoxVariantType> {
  * @param {string} [className] 체크박스에 전달하는 커스텀 클래스를 설정합니다.
  * @param {string} [textColor] text의 색상을 변경할 수 있습니다.
  * @param {"text" | "checkbox" | "arrow"} [variant] Box 컴포넌트의 타입을 설정합니다.
- * @param {string} text Box 컴포넌트에 메인으로 표기할 텍스트를 입력합니다.
+ * @param {ReactNode} text Box 컴포넌트에 메인으로 표기할 텍스트를 입력합니다.
  * @param {string} [subText] Box 컴포넌트에 작성할 추가 정보를 입력합니다.
  * @param {string} [subTextColor] subtext의 색상을 변경할 수 있습니다.
  * @param {"default" | "success" | "error"} [status] Box 컴포넌트를 통해 사용자의 상태를 반환합니다.
@@ -50,13 +50,13 @@ const Box = <T extends BoxVariantType = "text">({
   status = "default",
   onClick,
   onChange,
-  style,
   checked: checkedProp,
   ...rest
 }: BoxProps<T>) => {
   const { handleClick, checked } = useCheckedState({
     checked: checkedProp,
     onChange,
+    value: "checked",
   });
 
   const getStrokeColor = (status: "default" | "success" | "error") => {
@@ -74,6 +74,25 @@ const Box = <T extends BoxVariantType = "text">({
       onClick();
     }
   };
+
+  const renderRightElement = (variant: BoxVariantType | undefined) => {
+    if (variant === "checkbox") {
+      return <Checkbox checked={checked} onClick={handleClick} />;
+    } else if (variant === "arrow") {
+      return (
+        <RightArrow height={20} stroke={getStrokeColor(status)} width={20} />
+      );
+    } else if (variant === "warn") {
+      return (
+        <Warn
+          fill={getStrokeColor(status)}
+          height={24}
+          stroke={getStrokeColor(status)}
+          width={24}
+        />
+      );
+    } else return null;
+  };
   return (
     <Flex
       alignItems="center"
@@ -90,7 +109,7 @@ const Box = <T extends BoxVariantType = "text">({
         <Flex direction="column" gap="xxs">
           <styled.span
             color={textColor ? textColor : "textBlack"}
-            textStyle="h3"
+            textStyle={typeof text === "string" ? "h3" : undefined}
           >
             {text}
           </styled.span>
@@ -102,13 +121,7 @@ const Box = <T extends BoxVariantType = "text">({
           </styled.span>
         </Flex>
       </Flex>
-      <div>
-        {variant === "checkbox" ? (
-          <Checkbox checked={checked} onClick={handleClick} />
-        ) : variant === "arrow" ? (
-          <RightArrow height={20} stroke={getStrokeColor(status)} width={20} />
-        ) : null}
-      </div>
+      <div>{renderRightElement(variant)}</div>
     </Flex>
   );
 };
@@ -151,6 +164,9 @@ const containerStyle = cva({
       checkbox: {
         cursor: "default",
       },
+      warn: {
+        cursor: "default",
+      },
     },
   },
 });

packages/wow-ui/src/components/Checkbox/index.tsx

@@ -10,7 +10,7 @@ import type {
 import { forwardRef, useId } from "react";
 import { Check as CheckIcon } from "wowds-icons";
 
-import { useCheckedState } from "@/hooks";
+import { useGroupCheckedState } from "@/hooks";
 
 /**
  * @description 사용자가 선택하거나 선택 해제할 수 있는 체크박스 컴포넌트입니다.
@@ -77,7 +77,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       handleKeyUp,
       handleMouseDown,
       handleMouseUp,
-    } = useCheckedState({
+    } = useGroupCheckedState({
       defaultChecked,
       checked: checkedProp,
       disabled: disabledProp,
@@ -86,7 +86,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       onClick,
       onKeyDown,
     });
-
+    console.log(checked);
     return (
       <styled.label
         alignItems="center"

packages/wow-ui/src/components/Switch/index.tsx

@@ -5,7 +5,7 @@ import { Flex, styled } from "@styled-system/jsx";
 import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
 import { forwardRef, useId } from "react";
 
-import useCheckedState from "@/hooks/useCheckedState";
+import { useGroupCheckedState } from "@/hooks";
 
 /**
  * @description on, off 두 가지 상태로 설정할 수 있는 스위치 컴포넌트입니다.
@@ -72,7 +72,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       handleKeyUp,
       handleMouseUp,
       handleMouseDown,
-    } = useCheckedState({
+    } = useGroupCheckedState({
       defaultChecked,
       checked: checkedProp,
       disabled: disabledProp,

packages/wow-ui/src/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useCheckedState } from "./useCheckedState";
+export { default as useGroupCheckedState } from "./useGroupCheckedState";

packages/wow-ui/src/hooks/useCheckedState.ts

@@ -1,7 +1,5 @@
 import type { KeyboardEvent } from "react";
-import { useContext, useEffect, useState } from "react";
-
-import MultiGroupContext from "@/components/MultiGroup/MultiGroupContext";
+import { useEffect, useState } from "react";
 
 interface CheckedStateProps {
   defaultChecked?: boolean;
@@ -17,48 +15,21 @@ const useCheckedState = ({
   defaultChecked = false,
   checked: checkedProp,
   disabled: disabledProp,
-  value,
-  onChange,
   onClick,
   onKeyDown,
 }: CheckedStateProps) => {
-  const {
-    onChange: groupOnChange,
-    checked: groupCheckedValues,
-    disabled: groupDisabled,
-  } = useContext(MultiGroupContext);
-
-  const groupCheckedValue = groupCheckedValues?.includes(value);
-  const disabled = groupDisabled || disabledProp || false;
+  const disabled = disabledProp || false;
 
   const [checkedValue, setCheckedValue] = useState<boolean>(
-    groupCheckedValue || checkedProp || defaultChecked
+    checkedProp || defaultChecked
   );
   const [pressed, setPressed] = useState<boolean>(false);
 
   useEffect(() => {
-    if (groupCheckedValue !== undefined) {
-      setCheckedValue(groupCheckedValue);
-    }
-  }, [groupCheckedValue]);
-
-  useEffect(() => {
-    if (groupCheckedValue === undefined && checkedProp !== undefined) {
+    if (checkedProp) {
       setCheckedValue(checkedProp);
     }
-  }, [checkedProp, groupCheckedValue]);
-
-  const toggleCheckedState = (value: string) => {
-    if (disabled) return;
-
-    if (groupOnChange) {
-      groupOnChange(value);
-    } else if (onChange) {
-      onChange();
-    } else {
-      setCheckedValue((prev) => !prev);
-    }
-  };
+  }, [checkedProp]);
 
   const handleMouseDown = () => {
     if (!disabled) setPressed(true);
@@ -68,8 +39,7 @@ const useCheckedState = ({
     if (!disabled) setPressed(false);
   };
 
-  const handleClick = (value: string) => {
-    toggleCheckedState(value);
+  const handleClick = () => {
     onClick?.();
   };
 
@@ -83,7 +53,6 @@ const useCheckedState = ({
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       setPressed(true);
-      toggleCheckedState(value);
       onKeyDown?.();
     }
   };