fix(tooltip): resolve react-hook rule error

sipe-team · Jan 22, 2025 · 7ea8abd · 7ea8abd
1 parent b13476d
commit 7ea8abd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 73 deletions.
diff --git a/packages/avatar/src/Avatar.tsx b/packages/avatar/src/Avatar.tsx
@@ -1,12 +1,7 @@
-import { Slot } from "@radix-ui/react-slot";
-import { clsx as cx } from "clsx";
-import {
-  type CSSProperties,
-  type ComponentProps,
-  type ForwardedRef,
-  forwardRef,
-} from "react";
-import styles from "./Avatar.module.css";
+import { Slot } from '@radix-ui/react-slot';
+import { clsx as cx } from 'clsx';
+import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react';
+import styles from './Avatar.module.css';
 
 /**
 + * Avatar 컴포넌트의 크기 옵션
@@ -15,9 +10,8 @@ import styles from "./Avatar.module.css";
 + * - sm: 32px
 + * - md: 40px (기본값)
 + * - lg: 70px
-+ * - xl: 96px
 + */
-export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /**
 + * Avatar 컴포넌트의 모양 옵션
@@ -26,9 +20,9 @@ export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 + * - rounded: 둥근 모서리 (4px border-radius)
 + * - square: 정사각형 (0px border-radius)
 + */
-export type AvatarShape = "circle" | "rounded" | "square";
+export type AvatarShape = 'circle' | 'rounded' | 'square';
 
-export interface AvatarProps extends ComponentProps<"div"> {
+export interface AvatarProps extends ComponentProps<'div'> {
   asChild?: boolean;
   src?: string;
   alt?: string;
@@ -38,19 +32,10 @@ export interface AvatarProps extends ComponentProps<"div"> {
 }
 
 export const Avatar = forwardRef(function Avatar(
-  {
-    asChild,
-    className,
-    src,
-    alt,
-    size = "md",
-    shape = "circle",
-    fallback,
-    ...props
-  }: AvatarProps,
-  ref: ForwardedRef<any>
+  { asChild, className, src, alt, size = 'md', shape = 'circle', fallback, ...props }: AvatarProps,
+  ref: ForwardedRef<any>,
 ) {
-  const Component = asChild ? Slot : "div";
+  const Component = asChild ? Slot : 'div';
 
   const style = {
     ...props.style,
@@ -60,12 +45,7 @@ export const Avatar = forwardRef(function Avatar(
   } as CSSProperties;
 
   return (
-    <Component
-      className={cx(styles.avatar, className)}
-      ref={ref}
-      style={style}
-      {...props}
-    >
+    <Component className={cx(styles.avatar, className)} ref={ref} style={style} {...props}>
       {src ? (
         <img
           src={src}
@@ -84,28 +64,28 @@ export const Avatar = forwardRef(function Avatar(
 
 function getAvatarSize(size: AvatarSize) {
   switch (size) {
-    case "xs":
-      return "24px";
-    case "sm":
-      return "32px";
-    case "md":
-      return "40px";
-    case "lg":
-      return "70px";
-    case "xl":
-      return "96px";
+    case 'xs':
+      return '24px';
+    case 'sm':
+      return '32px';
+    case 'md':
+      return '40px';
+    case 'lg':
+      return '70px';
+    case 'xl':
+      return '96px';
     default:
-      return "40px";
+      return '40px';
   }
 }
 
 function getAvatarShape(shape: AvatarShape) {
   switch (shape) {
-    case "rounded":
-      return "4px";
-    case "square":
-      return "0px";
+    case 'rounded':
+      return '4px';
+    case 'square':
+      return '0px';
     default:
-      return "50%";
+      return '50%';
   }
 }
diff --git a/packages/tooltip/src/Tooltip.tsx b/packages/tooltip/src/Tooltip.tsx
@@ -48,37 +48,28 @@ export const Tooltip = forwardRef(function Tooltip(
   }: TooltipProps,
   ref: ForwardedRef<HTMLElement>,
 ) {
+  const { isVisible, toggleTooltip, tooltipStyles, wrapperRef, tooltipRef, handleKeyDown } = useTooltip({
+    placement,
+    gap,
+    trigger,
+  });
+
+  useImperativeHandle(ref, () => wrapperRef.current as HTMLElement);
+
   if (!tooltipContent) {
     return <>{children}</>;
   }
 
-  const {
-    isVisible,
-    toggleTooltip,
-    tooltipStyles,
-    wrapperRef,
-    tooltipRef,
-    handleKeyDown,
-  } = useTooltip({ placement, gap, trigger });
-
-  useImperativeHandle(ref, () => wrapperRef.current as HTMLElement);
-
   const Component = asChild ? Slot : 'div';
 
   return (
     <>
       <Component
         ref={wrapperRef}
         role="tooltip"
-        onMouseEnter={
-          trigger === 'hover' ? () => toggleTooltip(true) : undefined
-        }
-        onMouseLeave={
-          trigger === 'hover' ? () => toggleTooltip(false) : undefined
-        }
-        onClick={
-          trigger === 'click' ? () => toggleTooltip(!isVisible) : undefined
-        }
+        onMouseEnter={trigger === 'hover' ? () => toggleTooltip(true) : undefined}
+        onMouseLeave={trigger === 'hover' ? () => toggleTooltip(false) : undefined}
+        onClick={trigger === 'click' ? () => toggleTooltip(!isVisible) : undefined}
         onKeyDown={handleKeyDown}
         tabIndex={trigger === 'click' ? 0 : undefined}
         className={clsx(styles.trigger, { [styles.asChild]: asChild })}
@@ -89,12 +80,7 @@ export const Tooltip = forwardRef(function Tooltip(
         createPortal(
           <div
             ref={tooltipRef}
-            className={clsx(
-              styles.tooltip,
-              styles[placement],
-              tooltipClassName,
-              { [styles.visible]: isVisible },
-            )}
+            className={clsx(styles.tooltip, styles[placement], tooltipClassName, { [styles.visible]: isVisible })}
             style={{ ...tooltipStyles, ...tooltipStyle }}
           >
             {tooltipContent}