Merge pull request #39 from boostcampwm-2024/feature-fe-#5

HoverTrigger 컴포넌트 구현

Author: yewonJin

frontend/public/logo.png

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface HoverTriggerProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export default function HoverTrigger({
+  className,
+  children,
+}: HoverTriggerProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className={cn("h-screen", className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        className={cn(
+          "transition-transform",
+          isHovered ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/components/HoverTrigger.tsx

@@ -0,0 +1,9 @@
+import logo from "/logo.png?url";
+
+export default function LogoBtn() {
+  return (
+    <div className="h-8 w-8 rounded-md bg-slate-700 p-2">
+      <img src={logo} />
+    </div>
+  );
+}

frontend/src/components/LogoBtn.tsx

@@ -0,0 +1,18 @@
+interface WorkspaceNavProps {
+  imageUrl: string;
+  workspaceTitle: string;
+}
+
+export default function WorkspaceNav({
+  imageUrl,
+  workspaceTitle,
+}: WorkspaceNavProps) {
+  return (
+    <div className="flex flex-row items-center justify-center gap-2">
+      <div className="h-5 w-5 rounded-md">
+        <img src={imageUrl} />
+      </div>
+      <h1 className="text-lg font-bold">{workspaceTitle}</h1>
+    </div>
+  );
+}

frontend/src/components/WorkspaceNav.tsx

@@ -0,0 +1,11 @@
+const noteTitles = ["🌳 그라운드 룰", "🚩 커밋 컨벤션", "🗂️ 데일리 스크럼 "];
+
+export default function NoteList() {
+  return (
+    <div className="flex flex-col gap-2">
+      {noteTitles.map((title) => (
+        <div>{title}</div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/sidebar/NoteList.tsx

@@ -0,0 +1,15 @@
+import VerticalDivider from "@/components/commons/divider/VerticalDivider";
+import WorkspaceNav from "@/components/WorkspaceNav";
+import LogoBtn from "@/components/LogoBtn";
+
+import logo from "/logo.png?url";
+
+export default function TopNav() {
+  return (
+    <div className="flex items-center gap-2">
+      <LogoBtn />
+      <VerticalDivider className="h-3" />
+      <WorkspaceNav imageUrl={logo} workspaceTitle="프로젝트 Web15" />
+    </div>
+  );
+}

frontend/src/components/sidebar/TopNav.tsx

@@ -0,0 +1,17 @@
+import NoteList from "@/components/sidebar/NoteList";
+import TopNav from "@/components/sidebar/TopNav";
+import HorizontalDivider from "@/components/commons/divider/HorizontalDivider";
+
+export default function Sidebar() {
+  return (
+    <div className="w-64 rounded-lg bg-white p-2">
+      <div className="font-pretendard text-md flex flex-col gap-3 bg-white p-2 text-black">
+        <TopNav />
+        <HorizontalDivider />
+        <NoteList />
+      </div>
+    </div>
+  );
+}
+
+// truncate

frontend/src/components/sidebar/index.tsx

@@ -9,6 +9,7 @@ export default {
       pretendard: ["Pretendard"],
     },
     colors: {
+      ...colors,
       divider: colors.neutral["200"],
     },
     extend: {},