fix: tooltip hydration bug

Nexters · Aug 9, 2024 · 7d309e7 · 7d309e7
1 parent aad48a0
commit 7d309e7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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}