Tooltip 의 visible 로직 수정했다

cobaltinc · Nov 17, 2023 · c5709f1 · c5709f1
1 parent 82e27c7
commit c5709f1
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git a/packages/co-design-core/src/components/Tooltip/Tooltip.tsx b/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
@@ -12,15 +12,16 @@ export type TooltipStylesNames = ClassNames<typeof useStyles>;
 
 export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, React.ComponentPropsWithoutRef<'div'> {
   /**
+   * true일 경우 Tooltip 컴포넌트를 보여줍니다.
    * Tooltip 의 초기 visible 상태를 설정합니다
    */
-  initVisible?: boolean;
+  visible?: boolean;
 
   /**
-   * true일 경우 Tooltip 컴포넌트를 보여줍니다.
-   * Tooltip 컴포넌트를 직접 제어할 경우 사용하는 속성입니다.
+   * Tooltip 의 open 상태를 자식 컴포넌트가 제어할 때 사용합니다.
+   * 만약 자식 컴포넌트에게 제어권을 주고, 강제로 open 상태를 toggle 하고 싶다면 flag 를 사용합니다.
    */
-  visible?: boolean;
+  flag?: boolean;
 
   /** Tooltip 컴포넌트의 배경색 지정을 위한 ColorScheme 을 정합니다. */
   colorScheme?: ColorScheme;
@@ -59,7 +60,7 @@ export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, Reac
   transitionTimingFunction?: string;
 
   /** visible이 변경될 경우 실행됩니다. */
-  onChangeVisible?(visible: boolean): boolean;
+  onChangeVisible?(visible: boolean): void;
 }
 
 const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) => {
@@ -89,8 +90,8 @@ const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) =>
 
 export const Tooltip = ({
   children,
-  visible,
-  initVisible = false,
+  visible = false,
+  flag,
   colorScheme,
   title,
   label,
@@ -117,7 +118,7 @@ export const Tooltip = ({
     { overrideStyles, name: 'Tooltip' },
   );
 
-  const [currentVisible, setCurrentVisible] = useToggle(initVisible);
+  const [currentVisible, setCurrentVisible] = useToggle(visible);
   const balloonRef = useRef<HTMLDivElement>(null);
   const targetRef = useClickAway<HTMLDivElement>((e: MouseEvent) => {
     if (
@@ -145,8 +146,8 @@ export const Tooltip = ({
   const handleBlur = trigger === 'focus' ? () => setCurrentVisible(false) : undefined;
 
   useUpdateEffect(() => {
-    setCurrentVisible(visible);
-  }, [visible]);
+    setCurrentVisible((prev) => !prev);
+  }, [flag]);
 
   useUpdateEffect(() => {
     onChangeVisible?.(currentVisible);

diff --git a/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from '../Tooltip';
 import { Popover } from '../../Popover';
 import { Button } from '../../Button';
 import { Menu } from '../../Menu';
+import { useToggle } from '@co-design/hooks';
 
 export default {
   title: '@co-design/core/Tooltip',
@@ -72,24 +73,40 @@ export const WithTitle = {
 
 export const WithPopover: StoryObj = {
   render: (arg) => {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [visibleFlag, toggleVisibleFlag] = useToggle(false);
+    const [visible, setVisible] = useState(false);
 
     return (
-      <Popover
-        placement="bottom"
-        onOpen={() => setIsPopoverOpen(true)}
-        onClose={() => setIsPopoverOpen(false)}
-        content={
-          <Menu>
-            <Menu.Item>1</Menu.Item>
-            <Menu.Item>2</Menu.Item>
-          </Menu>
-        }
-      >
-        <Tooltip visible={!isPopoverOpen} label="Peek-A-Boo" {...arg}>
-          <Button>hello</Button>
-        </Tooltip>
-      </Popover>
+      <>
+        <Popover
+          placement="bottom"
+          content={
+            <Menu>
+              <Menu.Item>1</Menu.Item>
+              <Menu.Item>2</Menu.Item>
+            </Menu>
+          }
+        >
+          <Tooltip
+            flag={visibleFlag}
+            onChangeVisible={(currentVisible) => {
+              setVisible(currentVisible);
+            }}
+            label="Peek-A-Boo"
+            {...arg}
+          >
+            <Button
+              onClick={() => {
+                if (visible) {
+                  toggleVisibleFlag();
+                }
+              }}
+            >
+              hello
+            </Button>
+          </Tooltip>
+        </Popover>
+      </>
     );
   },
 };