feat: sidebar tooltip

Nexters · Aug 21, 2024 · 35a0afc · 35a0afc
1 parent 63b121c
commit 35a0afc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 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/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>