feat: editor tooltip (#91)

* feat: navigation tooltip + disable tooltip props * feat: sidebar tooltip
Nexters · Aug 21, 2024 · 68fa981 · 68fa981
1 parent 105f72f
commit 68fa981
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 42 deletions.
diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
@@ -1,5 +1,5 @@
 import { nanoid } from "nanoid";
-import { emptyElement } from "~/components/editor/constant";
+import { editorTabValue, emptyElement } from "~/components/editor/constant";
 import type {
   DeviceType,
   Editor,
@@ -365,9 +365,9 @@ const actionHandlers: {
     const isValidSelect = isValidSelectEditorElement(payload.elementDetails);
 
     const newTabValue = isValidSelect
-      ? "Element Settings"
-      : editor.state.currentTabValue === "Element Settings"
-        ? "Elements"
+      ? editorTabValue.ELEMENTS
+      : editor.state.currentTabValue === editorTabValue.ELEMENT_SETTINGS
+        ? editorTabValue.ELEMENT_SETTINGS
         : editor.state.currentTabValue;
 
     return {

diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts
@@ -35,10 +35,10 @@ export const kakaoMapDefaultStyles: React.CSSProperties = {
 };
 
 export const editorTabValue = {
-  ELEMENTS: "Elements",
-  SETTINGS: "Settings",
-  INVITATION_RESPONSE: "Invitation Response",
-  ELEMENT_SETTINGS: "Element Settings",
+  ELEMENTS: "도구상자",
+  SETTINGS: "초대장 설정",
+  INVITATION_RESPONSE: "초대 응답 설정",
+  ELEMENT_SETTINGS: "도구 설정",
 } as const;
 
 export const emptyElement = {

diff --git a/src/components/editor/navigation.tsx b/src/components/editor/navigation.tsx
@@ -109,11 +109,13 @@ export default function EditorNavigation() {
       )}
     >
       <aside className="flex items-center gap-6">
-        <Button asChild variant="ghost" size="icon">
-          <Link href={editor.config.backLink}>
-            <ArrowLeftIcon />
-          </Link>
-        </Button>
+        <TooltipSimple text="대시보드">
+          <Button asChild variant="ghost" size="icon">
+            <Link href={editor.config.backLink}>
+              <ArrowLeftIcon />
+            </Link>
+          </Button>
+        </TooltipSimple>
         <TitleInput />
         {/* TODO: 디바이스 미리보기 개선 */}
         {/* <Tabs 
@@ -140,27 +142,41 @@ export default function EditorNavigation() {
       </aside>
       <aside className="flex items-center gap-4">
         <div className="flex items-center gap-2">
-          <Button variant="ghost" size="icon" onClick={handlePreviewClick}>
-            <EyeIcon />
-          </Button>
-          <Button
+          <TooltipSimple text="미리보기">
+            <Button variant="ghost" size="icon" onClick={handlePreviewClick}>
+              <EyeIcon />
+            </Button>
+          </TooltipSimple>
+          <TooltipSimple
+            text="되돌리기"
             disabled={!(editor.history.currentIndex > 0)}
-            onClick={handleUndo}
-            variant="ghost"
-            size="icon"
           >
-            <Undo2 />
-          </Button>
-          <Button
+            <Button
+              disabled={!(editor.history.currentIndex > 0)}
+              onClick={handleUndo}
+              variant="ghost"
+              size="icon"
+            >
+              <Undo2 />
+            </Button>
+          </TooltipSimple>
+          <TooltipSimple
+            text="다시 실행"
             disabled={
               !(editor.history.currentIndex < editor.history.list.length - 1)
             }
-            onClick={handleRedo}
-            variant="ghost"
-            size="icon"
           >
-            <Redo2 />
-          </Button>
+            <Button
+              disabled={
+                !(editor.history.currentIndex < editor.history.list.length - 1)
+              }
+              onClick={handleRedo}
+              variant="ghost"
+              size="icon"
+            >
+              <Redo2 />
+            </Button>
+          </TooltipSimple>
         </div>
         <Button variant="secondary" onClick={handleOnSave} className="gap-1">
           <DownloadIcon className="h-4 w-4" /> 저장

diff --git a/src/components/editor/sidebar/index.tsx b/src/components/editor/sidebar/index.tsx
@@ -12,6 +12,7 @@ import type { EditorTabTypeValue } from "~/components/editor/type";
 import { isValidSelectEditorElement } from "~/components/editor/util";
 import { Button } from "~/components/ui/button";
 import { Sheet, SheetContent } from "~/components/ui/sheet";
+import TooltipSimple from "~/components/ui/tooltip-simple";
 import { cn } from "~/lib/utils";
 
 type Props = {};
@@ -69,19 +70,20 @@ export default function EditorSidebar() {
               }
 
               return (
-                <TabsTrigger
-                  key={`${tab.value}-trigger`}
-                  value={tab.value}
-                  asChild
-                >
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="data-[state=active]:bg-secondary"
-                  >
-                    {tab.icon}
-                  </Button>
-                </TabsTrigger>
+                <TooltipSimple key={`${tab.value}-trigger`} text={tab.value}>
+                  <TabsTrigger value={tab.value} asChild>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className={cn(
+                        tab.value === editor.state.currentTabValue &&
+                          "bg-secondary",
+                      )}
+                    >
+                      {tab.icon}
+                    </Button>
+                  </TabsTrigger>
+                </TooltipSimple>
               );
             })}
           </TabsList>

diff --git a/src/components/ui/tooltip-simple.tsx b/src/components/ui/tooltip-simple.tsx
@@ -11,16 +11,18 @@ export type TooltipSimpleProps = React.ComponentPropsWithoutRef<
   typeof TooltipContent
 > & {
   text: string;
+  disabled?: boolean;
 };
 
 export default function TooltipSimple({
   text,
   children,
   side = "bottom",
+  disabled,
   ...props
 }: TooltipSimpleProps) {
   return (
-    <Tooltip>
+    <Tooltip disableHoverableContent={disabled}>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
       <Portal>
         <TooltipContent side={side} {...props}>