navbar 작업중

image-ai/src/components/hint.tsx

@@ -0,0 +1,47 @@
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export interface HintProps {
+    label: string;
+    children: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    alightOffset?: number;
+};
+
+export const Hint = ({
+    label,
+    children,
+    side,
+    align,
+    sideOffset,
+    alightOffset,
+}: HintProps) => {
+    return (
+        <TooltipProvider>
+            <Tooltip delayDuration={100}>
+                <TooltipTrigger asChild>
+                {/* asChild는 기능은 그대로 children 태그를 대신 렌더링.*/}
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent
+                    className="text-white bg-slate-800 border-slate-800"
+                    side={side}
+                    align={align}
+                    sideOffset={sideOffset}
+                    alignOffset={alightOffset}
+                >
+                    <p className="font-semibold capitalize">
+                        {label}
+                    </p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+
+    )
+};

image-ai/src/features/editor/components/navbar.tsx

@@ -1,10 +1,12 @@
 "use client";
+import {ChevronDown, MousePointerClick, Undo2} from "lucide-react";
+import {CiFileOn} from "react-icons/ci";
 
 import {Logo} from "./logo";
+import {Hint} from "@/components/hint";
 
-import {ChevronDown} from "lucide-react";
-import {CiFileOn} from "react-icons/ci";
 import {Button} from "@/components/ui/button";
+import {Separator} from "@/components/ui/separator";
 import {
     DropdownMenu,
     DropdownMenuItem,
@@ -12,6 +14,7 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
+
 export const Navbar = () => {
     return (
         <nav className="w-full flex items-center p-4 h-[68px] 
@@ -39,6 +42,27 @@ export const Navbar = () => {
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
+                <Separator orientation="vertical" className="mx-2"/>
+                <Hint label="select" side="bottom" sideOffset={10}>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={()=>{}} //TODO: Add functionality
+                        className="" //TODO: Add dynamic class
+                        >
+                        <MousePointerClick className="size-4"/>
+                    </Button>
+                </Hint>
+                <Hint label="Undo" side="bottom" sideOffset={10}>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={()=>{}} //TODO: Add functionality
+                        className="" //TODO: Add dynamic class
+                        >
+                        <Undo2 className="size-4"/>
+                    </Button>
+                </Hint>
             </div>
         </nav>
     );