fix: ref 타입 미정

GDSC-Hongik · Jun 7, 2024 · a2da49d · a2da49d
1 parent 323e3ef
commit a2da49d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts
@@ -1,8 +1,16 @@
-import { defineConfig } from "@pandacss/dev";
+import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
 import { semanticTokens, textStyles, tokens } from "theme";
 import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
+const globalCss = defineGlobalStyles({
+  body: {
+    div: "border-box",
+    button: "border-box",
+  },
+});
+
 export default defineConfig({
+  globalCss,
   preflight: true,
   minify: true,
   watch: true,

diff --git a/packages/wow-ui/src/components/Chip/Chip.stories.ts b/packages/wow-ui/src/components/Chip/Chip.stories.ts
@@ -103,23 +103,24 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     label: "Chip",
-    as: "button",
+    element: "button",
+    clickable: true,
   },
 };
 
 export const DivChip: Story = {
   args: {
     label: "Chip",
     clickable: false,
-    as: "div",
+    element: "div",
   },
 };
 export const DisabledChip: Story = {
   args: {
     label: "Chip",
     clickable: true,
     disabled: true,
-    as: "button",
+    element: "button",
   },
 };
 

diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -1,14 +1,15 @@
 "use client";
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import type { ElementType, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { forwardRef, useEffect, useState } from "react";
 
 import type {
+  ButtonElementType,
   PolymorphicComponentProps,
   PolymorphicRef,
   ToggleButtonProps,
-} from "@/types";
+} from "../../types";
 
 /**
  * @template T 렌더링할 요소 또는 컴포넌트 타입
@@ -30,13 +31,13 @@ export interface _ChipProps extends ToggleButtonProps {
   onDelete?: () => void;
 }
 
-export type ChipProps<C extends ElementType> = PolymorphicComponentProps<
+export type ChipProps<C extends ButtonElementType> = PolymorphicComponentProps<
   C,
   _ChipProps
 >;
 
-type ChipComponent = <T extends ElementType = "button">(
-  props: ChipProps<T>
+type ChipComponent = <T extends ButtonElementType = "button">(
+  props: ChipProps<T> & { ref?: PolymorphicRef<T> }
 ) => ReactNode;
 
 const ChipLabel = ({
@@ -49,7 +50,7 @@ const ChipLabel = ({
   disabled: boolean;
 }) => {
   return (
-    <styled.span
+    <styled.div
       data-disabled={disabled}
       data-selected={isChecked}
       textStyle="label2"
@@ -58,14 +59,14 @@ const ChipLabel = ({
       })}
     >
       {label}
-    </styled.span>
+    </styled.div>
   );
 };
 
 const Chip: ChipComponent & { displayName?: string } = forwardRef(
-  <T extends ElementType = "button">(
+  <T extends ButtonElementType = "button">(
     {
-      element,
+      as,
       label,
       clickable,
       onKeyDown,
@@ -75,9 +76,9 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
       disabled = false,
       ...rest
     }: ChipProps<T>,
-    ref: PolymorphicRef<T>
+    ref: any
   ) => {
-    const Component = element || "button";
+    const Component = as || "button";
     const [isChecked, setIsChecked] = useState(() =>
       checkedProp ? checkedProp : defaultChecked
     );
@@ -106,16 +107,16 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
 
     return (
       <Component
+        aria-label={`chip ${isChecked ? "activated" : "inactivated"}`}
+        data-selected={isChecked}
         ref={ref}
+        style={rest.customStyle}
         className={chip({
           clickable: disabled ? false : clickable,
           disabled: disabled,
         })}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
-        {...rest.customStyle}
-        aria-label={`chip ${isChecked ? "activated" : "inactivated"}`}
-        data-selected={isChecked}
       >
         <ChipLabel disabled={disabled} isChecked={isChecked} label={label} />
       </Component>
@@ -155,7 +156,8 @@ const chip = cva({
     minWidth: "3.5rem",
     height: "1.875rem",
     borderRadius: "1.25rem",
-    padding: "xs s",
+    paddingY: "xs",
+    paddingX: "sm",
   },
   variants: {
     clickable: {

diff --git a/packages/wow-ui/src/types/button.ts b/packages/wow-ui/src/types/button.ts
@@ -1,6 +1,6 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties, ElementType } from "react";
 
-export type ButtonElementType = "button" | "div" | "span";
+export type ButtonElementType = Extract<ElementType, "button" | "div" | "span">;
 
 // 버튼의 주요한 HTML Attributes를 미리 정의한 ButtonProps 타입입니다. [https://www.w3schools.com/tags/tag_button.asp]