Merge pull request #166 from boostcampwm-2024/feature-fe-#165

에디터에 패널 open/close 기능 추가

Author: yewonJin

frontend/src/App.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
 import Sidebar from "./components/sidebar";
 import HoverTrigger from "./components/HoverTrigger";
 import EditorView from "./components/EditorView";
@@ -12,7 +11,7 @@ const queryClient = new QueryClient();
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="h-screen bg-white">
+      <div className="fixed inset-0 bg-white">
         <SideWrapper side="right">
           <EditorView />
         </SideWrapper>

frontend/src/components/layout/EditorLayout.tsx

@@ -1,11 +1,31 @@
+import { PanelRightClose, PanelLeftClose } from "lucide-react";
+import usePageStore from "@/store/usePageStore";
+
 interface EditorLayoutProps {
   children: React.ReactNode;
 }
 
-export default function EditorLayout({ children }: EditorLayoutProps) {
+const EditorLayout = ({ children }: EditorLayoutProps) => {
+  const { isPanelOpen, togglePanel } = usePageStore();
+
   return (
-    <div className="relative h-[720px] w-[520px] overflow-auto border-muted bg-background bg-white sm:rounded-lg sm:border sm:shadow-lg">
-      {children}
+    <div
+      className={`absolute right-0 h-[720px] w-[520px] transform rounded-bl-lg rounded-br-lg rounded-tr-lg border bg-white shadow-lg transition-transform duration-100 ease-in-out ${isPanelOpen ? "translate-x-0" : "translate-x-full"}`}
+    >
+      <div className="h-full overflow-auto">{children}</div>
+
+      <button
+        onClick={togglePanel}
+        className="absolute -left-8 top-0 z-50 flex h-8 w-8 !cursor-pointer items-center justify-center rounded-l border-b border-l border-t border-[#e0e6ee] bg-[#f5f5f5]"
+      >
+        {isPanelOpen ? (
+          <PanelRightClose className="h-4 w-4" />
+        ) : (
+          <PanelLeftClose className="h-4 w-4" />
+        )}
+      </button>
     </div>
   );
-}
+};
+
+export default EditorLayout;

frontend/src/components/layout/SideWrapper.tsx

@@ -13,5 +13,5 @@ type SideWrapperProps = {
 };
 
 export default function SideWrapper({ side, children }: SideWrapperProps) {
-  return <div className={`absolute z-10 ${sideStyle[side]} `}>{children}</div>;
+  return <div className={`absolute z-50 ${sideStyle[side]} `}>{children}</div>;
 }

frontend/src/store/usePageStore.ts

@@ -2,12 +2,25 @@ import { create } from "zustand";
 
 interface PageStore {
   currentPage: number | null;
+  isPanelOpen: boolean;
   setCurrentPage: (currentPage: number | null) => void;
+  togglePanel: () => void;
+  setIsPanelOpen: (isOpen: boolean) => void;
 }
 
 const usePageStore = create<PageStore>((set) => ({
   currentPage: null,
-  setCurrentPage: (currentPage: number | null) => set({ currentPage }),
+  isPanelOpen: true,
+  setCurrentPage: (currentPage: number | null) =>
+    set((state) => ({
+      currentPage,
+      isPanelOpen:
+        currentPage === state.currentPage
+          ? !state.isPanelOpen
+          : currentPage !== null,
+    })),
+  togglePanel: () => set((state) => ({ isPanelOpen: !state.isPanelOpen })),
+  setIsPanelOpen: (isPanelOpen: boolean) => set({ isPanelOpen }),
 }));
 
 export default usePageStore;