feat: TopNav 컴포넌트 구현

Author: yewonJin

frontend/public/logo.png

@@ -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="font-bold">{workspaceTitle}</h1>
+    </div>
+  );
+}

frontend/src/components/WorkspaceNav.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 justify-center gap-2">
+      <LogoBtn />
+      <VerticalDivider className="h-3" />
+      <WorkspaceNav imageUrl={logo} workspaceTitle="프로젝트 Web15" />
+    </div>
+  );
+}