[Chore] next peerDeps 수정 및 컴포넌트 버그 수정 (#218)

SeieunYoo · web-flow · commit 92252bdd4775 · 2025-04-23T16:54:48.000+09:00
* feat: next devDeps 수정 및 컴포넌트 버그 수정

* chore: changeset 작성 및 코드리뷰 반영
diff --git a/.changeset/itchy-scissors-visit.md b/.changeset/itchy-scissors-visit.md
@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+next peerdeps 14.2.25 이상으로 수정 및 className 관련 버그 수정
diff --git a/apps/wow-docs/next-env.d.ts b/apps/wow-docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/wow-docs/package.json b/apps/wow-docs/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "next": "^14.1.1",
+    "next": "^14.2.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "wowds-icons": "workspace:^",
diff --git a/packages/wow-ui/README.md b/packages/wow-ui/README.md
@@ -19,7 +19,6 @@ yarn add wowds-ui
 
 ## 🛠️ Usage
 
-
 ```ts
 import Button from "wowds-ui/Button";
 
@@ -34,7 +33,7 @@ export default App;
 
 ```
 1. 레포 클론
-git clone https://github.com/GDSC-Hongik/wow-design-system.git
+git clone https://github.com/gdg-hongik-univ/wow-design-system.git
 
 2. 디렉토리 이동
 cd packages/wow-ui
@@ -44,11 +43,13 @@ pnpm install
 ```
 
 ## 🌐 Links
+
 - [npm](https://www.npmjs.com/package/wowds-ui)
 - [storybook](https://wow-design-system-wow-ui.vercel.app/?path=/docs/ui-avatar--docs)
-- [wow-docs](https://wow-design-system-wow-docs.vercel.app/overview)
+- [wow-docs](https://wow-ds.wawoo.dev/overview)
 
 ## 🚀 Tech Stack
+
 <div align="left">
 <div>
 <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white">
diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -216,7 +216,12 @@
       "import": "./dist/Avatar.js"
     }
   },
-  "keywords": [],
+  "keywords": [
+    "디자인시스템",
+    "wow-design-system",
+    "wowds-ui",
+    "component"
+  ],
   "license": "ISC",
   "scripts": {
     "build": "pnpm generate:build-config && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc-alias && panda cssgen --outfile dist/styles.css",
@@ -266,11 +271,11 @@
     "wowds-icons": "workspace:^"
   },
   "peerDependencies": {
-    "next": "^14.1.1",
+    "next": ">=14.2.25",
     "react": "^18.2.0"
   },
   "bugs": {
-    "url": "https://github.com/GDSC-Hongik/wow-design-system/issues"
+    "url": "https://github.com/gdg-hongik-univ/wow-design-system/issues"
   },
-  "homepage": "https://github.com/GDSC-Hongik/wow-design-system#readme"
+  "homepage": "https://github.com/gdg-hongik-univ/wow-design-system#readme"
 }
diff --git a/packages/wow-ui/src/components/Box/index.tsx b/packages/wow-ui/src/components/Box/index.tsx
@@ -2,6 +2,7 @@
 import { cva } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
 import type { ColorToken } from "@styled-system/tokens";
+import { clsx } from "clsx";
 import { RightArrow, Warn } from "wowds-icons";
 
 import Checkbox from "@/components/Checkbox";
@@ -54,6 +55,7 @@ const Box = <T extends BoxVariantType = "text">({
   onClick,
   onChange,
   checked: checkedProp,
+  className,
   ...rest
 }: BoxProps<T>) => {
   const { handleClick, checked } = useCheckedState({
@@ -86,10 +88,13 @@ const Box = <T extends BoxVariantType = "text">({
       gap={variant !== "text" ? "lg" : undefined}
       id={`box-${text}`}
       justifyContent="space-between"
-      className={containerStyle({
-        status: disabled ? "disabled" : status,
-        variant: disabled ? "disabled" : variant,
-      })}
+      className={clsx(
+        className,
+        containerStyle({
+          status: disabled ? "disabled" : status,
+          variant: disabled ? "disabled" : variant,
+        })
+      )}
       onClick={handleArrowClick}
       {...rest}
     >
diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx
@@ -2,6 +2,7 @@
 
 import { cva } from "@styled-system/css/cva";
 import { styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type { CSSProperties, ElementType, ReactNode } from "react";
 import { forwardRef } from "react";
 
@@ -56,6 +57,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
       size = "lg",
       variant = "solid",
       icon,
+      className,
       ...rest
     }: ButtonProps<C>,
     ref?: PolymorphicRef<C>
@@ -67,10 +69,13 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
         aria-disabled={disabled}
         disabled={disabled}
         ref={ref}
-        className={ButtonStyle({
-          size: variant === "sub" ? "sm" : size,
-          variant,
-        })}
+        className={clsx(
+          className,
+          ButtonStyle({
+            size: variant === "sub" ? "sm" : size,
+            variant,
+          })
+        )}
         {...rest}
       >
         <styled.span className={ContentStyle({ size })}>
diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx
@@ -87,7 +87,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <styled.label
         alignItems="center"
-        cursor={disabled ? "none" : "pointer"}
+        cursor={disabled ? "not-allowed" : "pointer"}
         display="flex"
         flexDirection={position === "vertical" ? "column-reverse" : "row"}
         gap={label ? "xs" : "0px"}
diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import type { ReactNode } from "react";
 import { forwardRef, useEffect, useState } from "react";
 
diff --git a/packages/wow-ui/src/components/Divider/index.tsx b/packages/wow-ui/src/components/Divider/index.tsx
@@ -1,5 +1,6 @@
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type { CSSProperties } from "react";
 
 /**
@@ -16,12 +17,15 @@ export interface DividerProps {
   className?: string;
 }
 
-const Divider = ({ type = "light", ...rest }: DividerProps) => {
+const Divider = ({ type = "light", className, ...rest }: DividerProps) => {
   return (
     <styled.div
-      className={dividerStyle({
-        type,
-      })}
+      className={clsx(
+        className,
+        dividerStyle({
+          type,
+        })
+      )}
       {...rest}
     />
   );
diff --git a/packages/wow-ui/src/components/Header/index.tsx b/packages/wow-ui/src/components/Header/index.tsx
@@ -1,3 +1,13 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { clsx } from "clsx";
+import { GdscLogo } from "wowds-icons";
+
+import Button from "@/components/Button";
+import type { DefaultProps } from "@/types/DefaultProps";
+
+type RightElementType = "username" | "login" | "none";
+
 /**
  * @description 헤더 컴포넌트입니다.
  * 사이트 로고와 로그인 또는 사용자 이름 표시 기능을 포함합니다.
@@ -11,15 +21,7 @@
  * @param {T extends "login" ? () => void : never} [onClick] - 로그인 버튼 클릭 시 호출되는 함수.
  */
 
-import { css } from "@styled-system/css";
-import { Flex } from "@styled-system/jsx";
-import { GdscLogo } from "wowds-icons";
-
-import Button from "@/components/Button";
-
-type RightElementType = "username" | "login" | "none";
-
-export interface HeaderProps<T extends RightElementType> {
+export interface HeaderProps<T extends RightElementType> extends DefaultProps {
   variant?: T;
   username?: T extends "username" ? string : never;
   onClick?: T extends "login" ? () => void : never;
@@ -29,9 +31,16 @@ const Header = ({
   variant = "none",
   username,
   onClick,
+  className,
+  ...rest
 }: HeaderProps<RightElementType>) => {
   return (
-    <header aria-label="header" className={headerStyle} role="banner">
+    <header
+      aria-label="header"
+      className={clsx(headerStyle, className)}
+      role="banner"
+      {...rest}
+    >
       <div className={headerContentStyle}>
         <section className={leftElementContainerStyle}>
           <GdscLogo aria-label="gdsc-logo" role="img" />
diff --git a/packages/wow-ui/src/components/SearchBar/index.tsx b/packages/wow-ui/src/components/SearchBar/index.tsx
@@ -2,6 +2,7 @@
 
 import { cva } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type { CSSProperties, InputHTMLAttributes } from "react";
 import { forwardRef, useId, useLayoutEffect, useRef } from "react";
 import { Search as SearchIcon } from "wowds-icons";
@@ -55,6 +56,7 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
       maxLength,
       inputProps,
       disabled,
+      className,
       ...rest
     },
     ref
@@ -89,7 +91,11 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
     }, [disabled, setVariant]);
 
     return (
-      <Flex className={containerStyle({ type: variant })} gap="xs" {...rest}>
+      <Flex
+        className={clsx(className, containerStyle({ type: variant }))}
+        gap="xs"
+        {...rest}
+      >
         <SearchIcon stroke={getStrokeColor(variant)} />
         <styled.input
           {...inputProps}
diff --git a/packages/wow-ui/src/components/Stepper/index.tsx b/packages/wow-ui/src/components/Stepper/index.tsx
@@ -5,6 +5,13 @@ import { useCallback, useMemo } from "react";
 
 import { calcPercent } from "@/utils/calcPercent";
 
+/**
+ * @param {number} step Stepper의 현재 스텝
+ * @param {number} [maxStep] Stepper가 가질 수 있는 최대 스텝
+ * @param {LabelType[]} [labels] Stepper에 하단에 입력할 라벨의 배열
+ * @param {number} [width] Stepper의 가로 길이를 자유롭게 정할 수 있어요. 단, 278px 이상이어야 합니다.
+ */
+
 export interface StepperProps {
   step: number;
   maxStep?: number;
@@ -23,13 +30,6 @@ const checkStepperStatus = (number: number, step: number) => {
   return "default";
 };
 
-/**
- * @param {number} step Stepper의 현재 스텝
- * @param {number} [maxStep] Stepper가 가질 수 있는 최대 스텝
- * @param {LabelType[]} [labels] Stepper에 하단에 입력할 라벨의 배열
- * @param {number} width Stepper의 가로 길이를 자유롭게 정할 수 있어요. 단, 278px 이상이어야 합니다.
- */
-
 const Stepper = ({ step = 1, maxStep = 3, labels, width }: StepperProps) => {
   const fillStepper = useCallback((maxStep: number, step: number) => {
     const ratio = (step - 1) / (maxStep - 1);
diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx
@@ -2,6 +2,7 @@
 
 import { css } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type { CSSProperties, ElementType, ReactNode } from "react";
 import { forwardRef } from "react";
 
@@ -42,15 +43,22 @@ type ButtonComponent = <C extends ElementType = "button">(
 
 const TextButton: ButtonComponent & { displayName?: string } = forwardRef(
   <C extends ElementType = "button">(
-    { asProp, text, disabled = false, size = "lg", ...rest }: ButtonProps<C>,
+    {
+      asProp,
+      text,
+      disabled = false,
+      size = "lg",
+      className,
+      ...rest
+    }: ButtonProps<C>,
     ref?: PolymorphicRef<C>
   ) => {
     const Component = asProp || "button";
 
     return (
       <Component
         aria-disabled={disabled}
-        className={TextButtonStyle}
+        className={clsx(className, TextButtonStyle)}
         disabled={disabled}
         ref={ref}
         {...rest}
diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx
@@ -2,6 +2,7 @@
 
 import { cva } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type {
   ChangeEvent,
   CSSProperties,
@@ -69,6 +70,7 @@ const TextField = forwardRef<HTMLTextAreaElement, TextFieldProps>(
       error = false,
       success = false,
       textareaProps,
+      className,
       ...rest
     },
     ref
@@ -122,7 +124,12 @@ const TextField = forwardRef<HTMLTextAreaElement, TextFieldProps>(
     };
 
     return (
-      <Flex className={containerStyle()} direction="column" gap="xs" {...rest}>
+      <Flex
+        className={clsx(className, containerStyle())}
+        direction="column"
+        gap="xs"
+        {...rest}
+      >
         <Flex alignItems="flex-end" justifyContent="space-between">
           <Label textareaId={descriptionId} variant={variant}>
             {label}
diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx
@@ -3,6 +3,7 @@
 import { css } from "@styled-system/css";
 import type { FlexProps } from "@styled-system/jsx";
 import { Flex, styled } from "@styled-system/jsx";
+import { clsx } from "clsx";
 import type { CSSProperties } from "react";
 import { forwardRef, useEffect, useState } from "react";
 import type { IconProps } from "wowds-icons";
@@ -48,6 +49,7 @@ const Toast = forwardRef(
     rightIcon = "none",
     showLeftIcon = false,
     toastDuration,
+    className,
     ...rest
   }: ToastProps) => {
     const TOAST_DURATION = toastDuration || 2000;
@@ -79,12 +81,12 @@ const Toast = forwardRef(
         clearTimeout(timeoutForRemove);
         clearTimeout(timeoutForVisible);
       };
-    }, [id, removeToast]);
+    }, [TOAST_DURATION, id, onRemove, removeToast]);
 
     return (
       <Flex
         align="center"
-        className={toastContainerStyle}
+        className={clsx(className, toastContainerStyle)}
         justify="space-between"
         style={{ opacity }}
         transition="opacity"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"wowds-ui": patch
 +---
++
 +next peerdeps 14.2.25 이상으로 수정 및 className 관련 버그 수정