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

* feature: Box 컴포넌트 기본 세팅 * feature: RightIcon 추가 * feature: storybook세팅 * fix: RightArrow 절대경로 수정 * fix: 파이프라인 이름 수정 * fix: panda config 수정 * fix: turbo 버전 조정 * fix: 상태관리 설정 * fix: 스토리북 수정 * fix: 스토리북 에러 수정 * fix: storybook 문서화 추가 * fix: 제네릭을 이용한 타입 정의 * fix: p5 코드리뷰 * fix: 제네릭 타입 깔끔하게 수정 * fix: 코드리뷰 반영 * fix: 터보레포 버전 변경 * fix: 파이프라인 수정 * fix: box props 네이밍 변경 * feature: Box 컴포넌트 스펙 수정 * feature: Warn Icon 추가 * fix: useCheckedState훅 두개로 분리 * fix: 개별 props 반영 * fix: 개별 workflow 수정 * fix: workflow 수정 * fix: workflow에 설치명 정확히 입력 * fix: 명령어 간단화 * fix: 워크플로우 수정 * fix: firefox 버전 확인 * fix: 이것저것 시도하기 * fix : 워크플로우 수정 * chore: playwright 패키지 설치 * chore: Devdependency로 변경 * fix: 코드리뷰 반영 * fix: 배럴 파일 제거 * fix: 경로 수정 * chore: playwright/test 패키지 설치 * fix: 찐 코드리뷰 마무리
GDSC-Hongik · Jun 30, 2024 · fdc36e6 · fdc36e6
1 parent 1728b3f
commit fdc36e6
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 61 deletions.
diff --git a/packages/wow-icons/src/component/Warn.tsx b/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;
diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts
@@ -1,3 +1,4 @@
 export { default as Check } from "./Check.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as RightArrow } from "./RightArrow.tsx";
+export { default as Warn } from "./Warn.tsx";
diff --git a/packages/wow-icons/src/svg/warn.svg b/packages/wow-icons/src/svg/warn.svg
diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -90,6 +90,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
+    "@playwright/test": "^1.45.0",
     "@storybook/addon-a11y": "^8.1.9",
     "@storybook/addon-essentials": "^8.1.9",
     "@storybook/addon-interactions": "^8.1.9",
@@ -108,11 +109,11 @@
     "chromatic": "^11.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "playwright": "1.45.0",
     "plop": "^4.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.1.9",
-    "typescript": "^5.3.3",
-    "playwright": "1.45.0"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "wowds-icons": "workspace:^"

diff --git a/packages/wow-ui/src/components/Box/Box.stories.tsx b/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,7 @@ const meta = {
     text: {
       description: "박스에 메인으로 표기할 텍스트를 입력합니다.",
       table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" },
+        type: { summary: "ReactNode" },
       },
       control: {
         type: "text",
@@ -201,6 +201,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);
 

diff --git a/packages/wow-ui/src/components/Box/index.tsx b/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";
+import useCheckedState from "@/hooks/useCheckedState";
 
-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,7 @@ const Box = <T extends BoxVariantType = "text">({
       onClick();
     }
   };
+
   return (
     <Flex
       alignItems="center"
@@ -90,7 +91,7 @@ const Box = <T extends BoxVariantType = "text">({
         <Flex direction="column" gap="xxs">
           <styled.span
             color={textColor ? textColor : "textBlack"}
-            textStyle="h3"
+            {...(typeof text === "string" && { textStyle: "h3" })}
           >
             {text}
           </styled.span>
@@ -103,11 +104,20 @@ const Box = <T extends BoxVariantType = "text">({
         </Flex>
       </Flex>
       <div>
-        {variant === "checkbox" ? (
+        {variant === "checkbox" && (
           <Checkbox checked={checked} onClick={handleClick} />
-        ) : variant === "arrow" ? (
+        )}
+        {variant === "arrow" && (
           <RightArrow height={20} stroke={getStrokeColor(status)} width={20} />
-        ) : null}
+        )}
+        {variant === "warn" && (
+          <Warn
+            fill={getStrokeColor(status)}
+            height={24}
+            stroke={getStrokeColor(status)}
+            width={24}
+          />
+        )}
       </div>
     </Flex>
   );
@@ -151,6 +161,9 @@ const containerStyle = cva({
       checkbox: {
         cursor: "default",
       },
+      warn: {
+        cursor: "default",
+      },
     },
   },
 });
diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx
@@ -6,7 +6,7 @@ import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
 import { forwardRef, useId } from "react";
 import { Check as CheckIcon } from "wowds-icons";
 
-import { useCheckedState } from "@/hooks";
+import useGroupCheckedState from "@/hooks/useGroupCheckedState";
 
 /**
  * @description 사용자가 선택하거나 선택 해제할 수 있는 체크박스 컴포넌트입니다.
@@ -74,7 +74,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       handleKeyUp,
       handleMouseDown,
       handleMouseUp,
-    } = useCheckedState({
+    } = useGroupCheckedState({
       defaultChecked,
       checked: checkedProp,
       disabled: disabledProp,
@@ -83,7 +83,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       onClick,
       onKeyDown,
     });
-
     return (
       <styled.label
         alignItems="center"

diff --git a/packages/wow-ui/src/components/DropDown/index.tsx b/packages/wow-ui/src/components/DropDown/index.tsx
@@ -12,7 +12,9 @@ import { cloneElement, isValidElement, useRef } from "react";
 import { DownArrow } from "wowds-icons";
 
 import DropDownOption from "@/components/DropDown/DropDownOption";
-import { useClickOutside, useDropDownState, useFlattenChildren } from "@/hooks";
+import useClickOutside from "@/hooks/useClickOutside";
+import useDropDownState from "@/hooks/useDropDownState";
+import useFlattenChildren from "@/hooks/useFlattenChildren";
 
 export interface DropDownWithTriggerProps extends PropsWithChildren {
   /**

diff --git a/packages/wow-ui/src/components/Switch/index.tsx b/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/useGroupCheckedState";
 
 /**
  * @description on, off 두 가지 상태로 설정할 수 있는 스위치 컴포넌트입니다.
@@ -72,7 +72,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       handleKeyUp,
       handleMouseUp,
       handleMouseDown,
-    } = useCheckedState({
+    } = useGroupCheckedState({
       defaultChecked,
       checked: checkedProp,
       disabled: disabledProp,

diff --git a/packages/wow-ui/src/hooks/index.ts b/packages/wow-ui/src/hooks/index.ts
diff --git a/packages/wow-ui/src/hooks/useCheckedState.ts b/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,43 +15,27 @@ 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 !== undefined) {
       setCheckedValue(checkedProp);
     }
-  }, [checkedProp, groupCheckedValue]);
+  }, [checkedProp]);
 
-  const toggleCheckedState = (value: string) => {
+  const toggleCheckedState = () => {
     if (disabled) return;
 
-    if (groupOnChange) {
-      groupOnChange(value);
-    } else if (onChange) {
+    if (onChange) {
       onChange();
     } else {
       setCheckedValue((prev) => !prev);
@@ -68,8 +50,8 @@ const useCheckedState = ({
     if (!disabled) setPressed(false);
   };
 
-  const handleClick = (value: string) => {
-    toggleCheckedState(value);
+  const handleClick = () => {
+    toggleCheckedState();
     onClick?.();
   };
 
@@ -83,7 +65,7 @@ const useCheckedState = ({
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       setPressed(true);
-      toggleCheckedState(value);
+      toggleCheckedState();
       onKeyDown?.();
     }
   };