Merge pull request #228 from boostcampwm-2024/feature-fe-#222

사이드 바, 에디터 UI/UX 수정

Author: yewonJin

apps/frontend/package.json

@@ -64,6 +64,7 @@
     "globals": "^15.11.0",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwind-scrollbar": "^3.1.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",

apps/frontend/public/logo.png

@@ -1,11 +1,9 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import Sidebar from "./components/sidebar";
-import HoverTrigger from "./components/HoverTrigger";
 import EditorView from "./components/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
 import Canvas from "./components/canvas";
-import ScrollWrapper from "./components/layout/ScrollWrapper";
 
 import { useSyncedUsers } from "./hooks/useSyncedUsers";
 
@@ -17,15 +15,13 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <div className="fixed inset-0 bg-white">
-        <SideWrapper side="right">
+        <SideWrapper side="right" className="z-50">
           <EditorView />
         </SideWrapper>
         <Canvas className="z-0 h-full w-full" />
-        <HoverTrigger className="absolute inset-0 z-20 w-64">
-          <ScrollWrapper height={"h-[720px]"} className="overflow-x-clip">
-            <Sidebar />
-          </ScrollWrapper>
-        </HoverTrigger>
+        <SideWrapper side="left" className="left-4 top-4">
+          <Sidebar />
+        </SideWrapper>
       </div>
     </QueryClientProvider>
   );

apps/frontend/src/App.tsx

@@ -1,11 +1,13 @@
 import logo from "/logo.png?url";
-
 interface LogoBtnProps {
   onClick?: () => void;
 }
 export default function LogoBtn({ onClick }: LogoBtnProps) {
   return (
-    <button className="h-8 w-8 overflow-clip rounded-md" onClick={onClick}>
+    <button
+      className="h-6 w-6 overflow-clip rounded-md bg-[#231f20] p-1"
+      onClick={onClick}
+    >
       <img src={logo} />
     </button>
   );

apps/frontend/src/components/LogoBtn.tsx

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

apps/frontend/src/components/WorkspaceNav.tsx

@@ -13,9 +13,9 @@ const EditorLayout = ({ children, saveStatus }: EditorLayoutProps) => {
   return (
     <div
       className={cn(
-        "absolute right-0 h-[720px] w-[520px] rounded-bl-lg rounded-br-lg rounded-tr-lg border bg-white shadow-lg transition-transform duration-100 ease-in-out",
+        "absolute right-4 top-4 h-[720px] w-[520px] rounded-lg border bg-white shadow-lg transition-transform duration-100 ease-in-out",
         isPanelOpen ? "transform-none" : "translate-x-full",
-        isMaximized ? "h-screen w-screen" : "w-[520px]",
+        isMaximized ? "right-0 top-0 h-screen w-screen" : "",
       )}
     >
       <EditorActionPanel saveStatus={saveStatus} />

apps/frontend/src/components/layout/EditorLayout.tsx

@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils";
+
 const sideStyle: { readonly [key in Side]: string } = {
   left: "left-0",
   right: "right-0 ",
@@ -10,8 +12,17 @@ type Side = "left" | "right" | "top" | "bottom";
 type SideWrapperProps = {
   side: Side;
   children: React.ReactNode;
+  className?: string;
 };
 
-export default function SideWrapper({ side, children }: SideWrapperProps) {
-  return <div className={`absolute z-50 ${sideStyle[side]} `}>{children}</div>;
+export default function SideWrapper({
+  side,
+  children,
+  className,
+}: SideWrapperProps) {
+  return (
+    <div className={cn(`absolute z-40 ${sideStyle[side]} `, className)}>
+      {children}
+    </div>
+  );
 }

apps/frontend/src/components/layout/SideWrapper.tsx

@@ -10,13 +10,9 @@ export default function Tools() {
   const { pages } = usePages();
   const createMutation = useCreatePage();
 
-  if (!pages) {
-    return <div>로딩중...</div>;
-  }
-
   return (
     <Button
-      className="flex flex-row items-center gap-1 rounded-sm px-2 py-1 font-medium hover:bg-neutral-100"
+      className={`${!pages && "disabled"} flex w-full flex-row items-center gap-1 rounded-sm px-2 py-1 font-medium hover:bg-neutral-100`}
       onClick={() => {
         createMutation
           .mutateAsync({

apps/frontend/src/components/sidebar/Tools.tsx

@@ -2,30 +2,44 @@ import VerticalDivider from "@/components/commons/divider/VerticalDivider";
 import WorkspaceNav from "@/components/WorkspaceNav";
 import LogoBtn from "@/components/LogoBtn";
 import ProfileModal from "./ProfileModal";
-import workspaceLogo from "@/../public/workspace-logo.svg?url";
 import { useState } from "react";
+import { Menu } from "lucide-react";
+import { X } from "lucide-react";
 
-export default function TopNav() {
+interface TopNavProps {
+  onExpand: () => void;
+  isExpanded: boolean;
+}
+export default function TopNav({ onExpand, isExpanded }: TopNavProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
-    <div className="flex items-center gap-2">
-      <LogoBtn
-        onClick={() => {
-          setIsModalOpen(true);
-        }}
-      />
-      <ProfileModal
-        isOpen={isModalOpen}
-        onCloseModal={() => {
-          setIsModalOpen(false);
-        }}
-        onConfirm={() => {
-          setIsModalOpen(false);
-        }}
-      />
-      <VerticalDivider className="h-3" />
-      <WorkspaceNav imageUrl={workspaceLogo} workspaceTitle="프로젝트 Web15" />
+    <div className="flex w-full flex-row items-center justify-between">
+      <div className="flex flex-row items-center gap-2">
+        <LogoBtn
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        />
+        <ProfileModal
+          isOpen={isModalOpen}
+          onCloseModal={() => {
+            setIsModalOpen(false);
+          }}
+          onConfirm={() => {
+            setIsModalOpen(false);
+          }}
+        />
+        <VerticalDivider className="h-3" />
+        <WorkspaceNav workspaceTitle="프로젝트 Web15" />
+      </div>
+      <button onClick={onExpand}>
+        {isExpanded ? (
+          <X color="#3F3F3F" />
+        ) : (
+          <Menu size={24} color="#3F3F3F" />
+        )}
+      </button>
     </div>
   );
 }

apps/frontend/src/components/sidebar/TopNav.tsx

@@ -1,13 +1,29 @@
 import NoteList from "./NoteList";
 import TopNav from "./TopNav";
 import Tools from "./Tools";
+import { useState } from "react";
+import ScrollWrapper from "@/components/layout/ScrollWrapper";
 
 export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
-    <div className="z-10 flex w-64 flex-col gap-4 rounded-lg border-[1px] border-neutral-200 bg-white p-4 text-black shadow-sm">
-      <TopNav />
-      <Tools />
-      <NoteList className="mx-1" />
+    <div className="z-10 flex w-64 flex-col rounded-xl border-[1px] border-neutral-200 bg-white text-black shadow-md">
+      <div className="p-4">
+        <TopNav onExpand={handleExpand} isExpanded={isExpanded} />
+      </div>
+      <div className={`${isExpanded ? "flex flex-col" : "hidden"} gap-3 pb-4`}>
+        <div className="w-full px-4">
+          <Tools />
+        </div>
+        <ScrollWrapper className="scrollbar scrollbar-thumb-[#d9d9d9] scrollbar-track-transparent max-h-[604px] overflow-x-clip">
+          <NoteList className="p-4 pb-0 pt-0" />
+        </ScrollWrapper>
+      </div>
     </div>
   );
 }