[Fix] LinkButton 사용할 수 있도록 as prop의 네이밍 변경 (#146)

* fix: as -> asProp 이름 변경 * fix: Chip 테스트코드 prop 변경 * fix: Button, TextButton as prop 쓰인 부분 수정 * fix: LinkButton 스토리북 prop 이름 변경 * chore: changeset 추가 * fix: pressed 속성 active 속성으로 변경 * remove: useButton 훅 삭제
GDSC-Hongik · Aug 26, 2024 · 3cc30fc · 3cc30fc
1 parent 97a0ffd
commit 3cc30fc
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 258 deletions.
diff --git a/.changeset/slow-shirts-compete.md b/.changeset/slow-shirts-compete.md
@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Button 컴포넌트가 Link로 사용될 수 있도록 합니다.
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link";
+import Button from "wowds-ui/Button";
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
 import Divider from "wowds-ui/Divider";
@@ -12,6 +14,9 @@ import Switch from "wowds-ui/Switch";
 const Home = () => {
   return (
     <>
+      <Button asProp={Link} href="/check">
+        버튼
+      </Button>
       <Checkbox value="checkbox" />
       <Chip label="Chip" />
       <Switch />

diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts
@@ -32,7 +32,4 @@ export default defineConfig({
     },
   },
   outdir: "styled-system",
-  conditions: {
-    hover: "&[aria-pressed=false]:not(:disabled):hover",
-  },
 });
diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import Link from "next/link";
 import { Help } from "wowds-icons";
 
 import Button from "@/components/Button";
@@ -25,7 +26,7 @@ const meta = {
         type: "text",
       },
     },
-    as: {
+    asProp: {
       description: "버튼을 구성할 HTML 태그의 종류를 나타냅니다.",
       table: {
         type: { summary: "ElementType" },
@@ -64,46 +65,6 @@ const meta = {
         options: ["solid", "outline"],
       },
     },
-    onKeyDown: {
-      description:
-        "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
-    onKeyUp: {
-      description:
-        "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
-    onMouseLeave: {
-      description:
-        "버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
-    onPointerDown: {
-      description:
-        "버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
-    onPointerUp: {
-      description:
-        "버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
     style: {
       description: "버튼의 커스텀 스타일을 나타냅니다.",
       table: {
@@ -138,53 +99,53 @@ export const Primary: Story = {
   },
 };
 
-export const LargeSolid: Story = {
+export const LargeSolidButton: Story = {
   args: {
     children: "버튼",
     variant: "solid",
   },
 };
 
-export const LargeOutline: Story = {
+export const LargeOutlineButton: Story = {
   args: {
     children: "버튼",
     variant: "outline",
   },
 };
 
-export const SmallSolid: Story = {
+export const SmallSolidButton: Story = {
   args: {
     children: "버튼",
     size: "sm",
     variant: "solid",
   },
 };
 
-export const SmallOutline: Story = {
+export const SmallOutlineButton: Story = {
   args: {
     children: "버튼",
     size: "sm",
     variant: "outline",
   },
 };
 
-export const SmallSub: Story = {
+export const SmallSubButton: Story = {
   args: {
     children: "버튼",
     size: "sm",
     variant: "sub",
   },
 };
 
-export const LargeWithIcon: Story = {
+export const LargeButtonWithIcon: Story = {
   args: {
     children: "버튼",
     variant: "solid",
     icon: <Help />,
   },
 };
 
-export const SmallWithIcon: Story = {
+export const SmallButtonWithIcon: Story = {
   args: {
     children: "버튼",
     size: "sm",
@@ -193,11 +154,19 @@ export const SmallWithIcon: Story = {
   },
 };
 
-export const LargeWithSubText: Story = {
+export const LargeButtonWithSubText: Story = {
   args: {
     children: "버튼",
     variant: "solid",
     subText: "최종 수정 일시 : 2024년 5월 23일 23:11",
     icon: <Help />,
   },
 };
+
+export const LinkButton: Story = {
+  args: {
+    children: "버튼",
+    asProp: Link,
+    href: "/",
+  },
+};
diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx
@@ -5,7 +5,6 @@ import { styled } from "@styled-system/jsx";
 import type { CSSProperties, ElementType, ReactNode } from "react";
 import { forwardRef } from "react";
 
-import useButton from "@/hooks/useButton";
 import type {
   PolymorphicComponentProps,
   PolymorphicComponentPropsWithRef,
@@ -21,11 +20,6 @@ import type {
  * @param {"lg" | "sm"} [size] - 버튼의 크기.
  * @param {"solid" | "outline" | "sub"} [variant] - 버튼의 종류.
  * @param {ReactNode} [icon] - 버튼의 좌측에 들어갈 아이콘.
- * @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트.
- * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
- * @param {() => void} [onMouseLeave] - 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트.
- * @param {() => void} [onPointerDown] - 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트.
- * @param {() => void} [onPointerUp] - 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트.
  * @param {CSSProperties} [style] - 버튼의 커스텀 스타일.
  * @param {string} [className] - 버튼에 전달하는 커스텀 클래스.
  * @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
@@ -60,55 +54,28 @@ type ButtonComponent = <C extends ElementType = "button">(
 const Button: ButtonComponent & { displayName?: string } = forwardRef(
   <C extends ElementType = "button">(
     {
-      as,
+      asProp,
       children,
       subText,
       disabled = false,
       size = "lg",
       variant = "solid",
       icon,
-      onKeyUp,
-      onKeyDown,
-      onMouseLeave,
-      onPointerDown,
-      onPointerUp,
       ...rest
     }: ButtonProps<C>,
     ref?: PolymorphicRef<C>
   ) => {
-    const Component = as || "button";
-
-    const {
-      pressed,
-      handleKeyDown,
-      handleKeyUp,
-      handlePointerDown,
-      handlePointerUp,
-      handleMouseLeave,
-    } = useButton({
-      disabled,
-      onMouseLeave,
-      onKeyUp,
-      onKeyDown,
-      onPointerDown,
-      onPointerUp,
-    });
+    const Component = asProp || "button";
 
     return (
       <Component
         aria-disabled={disabled}
-        aria-pressed={pressed}
         disabled={disabled}
         ref={ref}
         className={ButtonStyle({
           size: variant === "sub" ? "sm" : size,
           variant,
         })}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        onMouseLeave={handleMouseLeave}
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
         {...rest}
       >
         <styled.span className={ContentStyle({ size })}>
@@ -157,7 +124,7 @@ const ButtonStyle = cva({
         _hover: {
           shadow: "blue",
         },
-        _pressed: {
+        _active: {
           background: "bluePressed",
         },
       },
@@ -178,7 +145,7 @@ const ButtonStyle = cva({
           borderColor: "blueHover",
           color: "blueHover",
         },
-        _pressed: {
+        _active: {
           borderColor: "bluePressed",
           background: "blueBackgroundPressed",
           color: "bluePressed",
@@ -195,7 +162,7 @@ const ButtonStyle = cva({
         _hover: {
           shadow: "blue",
         },
-        _pressed: {
+        _active: {
           background: "blueDisabled",
         },
       },
@@ -213,7 +180,7 @@ const ButtonStyle = cva({
           borderColor: "textBlack",
           color: "textBlack",
         },
-        _pressed: {
+        _active: {
           borderColor: "outline",
           background: "monoBackgroundPressed",
           color: "textBlack",

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

diff --git a/packages/wow-ui/src/components/Chip/Chip.test.tsx b/packages/wow-ui/src/components/Chip/Chip.test.tsx
@@ -6,7 +6,7 @@ import Chip from "@/components/Chip";
 describe("Chip rendering Test", () => {
   let renderChip: RenderResult;
   beforeEach(() => {
-    renderChip = render(<Chip as="div" label="Chip" />);
+    renderChip = render(<Chip asProp="div" label="Chip" />);
   });
 
   it("should render Chip", () => {
@@ -24,7 +24,7 @@ describe("Chip rendering Test", () => {
 describe("Chip toggle Test", () => {
   let renderChip: RenderResult;
   beforeEach(() => {
-    renderChip = render(<Chip as="button" clickable={true} label="Chip" />);
+    renderChip = render(<Chip asProp="button" clickable={true} label="Chip" />);
   });
 
   it("should toggle state when onClick event is fired", async () => {
@@ -94,7 +94,7 @@ describe("external control and events", () => {
   });
 
   it("should fire external onKeyDown event", async () => {
-    renderChip = render(<Chip clickable as="button" label="Chip" />);
+    renderChip = render(<Chip clickable asProp="button" label="Chip" />);
     const user = userEvent.setup();
     const chipComponent = renderChip.getByRole("checkbox");
     const onKeyDownHandler = jest.fn();
@@ -112,7 +112,7 @@ describe("external control and events", () => {
     const handleChange = () => {
       checked = !checked;
     };
-    const rendered = render(<Chip clickable as="button" label="Chip" />);
+    const rendered = render(<Chip clickable asProp="button" label="Chip" />);
     const chipComponent = rendered.getByRole("checkbox");
     chipComponent.onchange = handleChange;
 

diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -66,7 +66,7 @@ const ChipLabel = ({
 const Chip: ChipComponent & { displayName?: string } = forwardRef(
   <T extends ButtonElementType = "button">(
     {
-      as,
+      asProp,
       label,
       clickable,
       onKeyDown,
@@ -78,7 +78,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
     }: ChipProps<T>,
     ref: any
   ) => {
-    const Component = (as || "button") as React.ElementType;
+    const Component = (asProp || "button") as React.ElementType;
     const [ischecked, setIsChecked] = useState(() =>
       checkedProp ? checkedProp : defaultChecked
     );