From 7d309e72bb3f3666b3dbf3572ca7689a2d627d6a Mon Sep 17 00:00:00 2001
From: bepyan <bepyan@naver.com>
Date: Sat, 10 Aug 2024 00:43:55 +0900
Subject: [PATCH] fix: tooltip hydration bug

---
 src/components/editor/navigation.tsx          |  2 +-
 .../layout-setting.tsx                        | 54 ++++++++++++-------
 src/components/ui/tooltip-simple.tsx          |  3 +-
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/editor/navigation.tsx b/src/components/editor/navigation.tsx
index 340c5d6..27f52f7 100644
--- a/src/components/editor/navigation.tsx
+++ b/src/components/editor/navigation.tsx
@@ -139,7 +139,7 @@ export default function EditorNavigation({ backLink = "./" }: Props) {
           <Share2Icon className="h-4 w-4" /> 공유
         </Button>
         <DropdownMenu>
-          <TooltipSimple text="더보기" asChild>
+          <TooltipSimple text="더보기">
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="icon">
                 <EllipsisVerticalIcon className="h-5 w-5" />
diff --git a/src/components/editor/sidebar-element-settings-tab/layout-setting.tsx b/src/components/editor/sidebar-element-settings-tab/layout-setting.tsx
index 7a3b41b..9d2efd8 100644
--- a/src/components/editor/sidebar-element-settings-tab/layout-setting.tsx
+++ b/src/components/editor/sidebar-element-settings-tab/layout-setting.tsx
@@ -133,23 +133,33 @@ function FlexToggleGroup() {
       defaultValue="flex-col"
     >
       <TooltipSimple text="Vertical layout">
-        <ToggleGroupItem
-          size="xs"
-          value="flex-col"
-          aria-label="Vertical layout"
-        >
-          <ArrowDownIcon size={13} />
-        </ToggleGroupItem>
+        <div>
+          <ToggleGroupItem
+            size="xs"
+            value="flex-col"
+            aria-label="Vertical layout"
+          >
+            <ArrowDownIcon size={13} />
+          </ToggleGroupItem>
+        </div>
       </TooltipSimple>
       <TooltipSimple text="Horizontal layout">
-        <ToggleGroupItem size="xs" value="flex" aria-label="Horizontal layout">
-          <ArrowRightIcon size={13} />
-        </ToggleGroupItem>
+        <div>
+          <ToggleGroupItem
+            size="xs"
+            value="flex"
+            aria-label="Horizontal layout"
+          >
+            <ArrowRightIcon size={13} />
+          </ToggleGroupItem>
+        </div>
       </TooltipSimple>
       <TooltipSimple text="Wrap">
-        <ToggleGroupItem size="xs" value="flex-wrap" aria-label="Wrap">
-          <CornerDownLeftIcon size={13} />
-        </ToggleGroupItem>
+        <div>
+          <ToggleGroupItem size="xs" value="flex-wrap" aria-label="Wrap">
+            <CornerDownLeftIcon size={13} />
+          </ToggleGroupItem>
+        </div>
       </TooltipSimple>
     </ToggleGroup>
   );
@@ -216,13 +226,17 @@ export default function LayoutSetting() {
           </>
         )}
         <div className="col-span-1 row-span-1">
-          <Toggle
-            size="xs"
-            pressed={isPaddingIndividual}
-            onPressedChange={setIsPaddingIndividual}
-          >
-            <PaddingIndividualIcon />
-          </Toggle>
+          <TooltipSimple text="Individual padding">
+            <div>
+              <Toggle
+                size="xs"
+                pressed={isPaddingIndividual}
+                onPressedChange={setIsPaddingIndividual}
+              >
+                <PaddingIndividualIcon />
+              </Toggle>
+            </div>
+          </TooltipSimple>
         </div>
         {isPaddingIndividual && (
           <>
diff --git a/src/components/ui/tooltip-simple.tsx b/src/components/ui/tooltip-simple.tsx
index 450267c..a61f428 100644
--- a/src/components/ui/tooltip-simple.tsx
+++ b/src/components/ui/tooltip-simple.tsx
@@ -16,13 +16,12 @@ export type TooltipSimpleProps = React.ComponentPropsWithoutRef<
 export default function TooltipSimple({
   text,
   children,
-  asChild,
   side = "bottom",
   ...props
 }: TooltipSimpleProps) {
   return (
     <Tooltip>
-      <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
       <Portal>
         <TooltipContent side={side} {...props}>
           {text}