Merge pull request #213 from boostcampwm-2024/feature-fe-#212

에디터 전체화면 기능

Author: github-actions[bot]

apps/frontend/src/components/EditorView.tsx

@@ -7,7 +7,6 @@ import { SocketIOProvider } from "y-socket.io";
 import Editor from "./editor";
 import EditorLayout from "./layout/EditorLayout";
 import EditorTitle from "./editor/EditorTitle";
-import SaveStatus from "./editor/ui/SaveStatus";
 import ActiveUser from "./commons/activeUser";
 
 import usePageStore from "@/store/usePageStore";
@@ -85,15 +84,13 @@ export default function EditorView() {
   if (!ydoc || !provider) return null;
 
   return (
-    <EditorLayout>
-      <SaveStatus saveStatus={saveStatus} />
+    <EditorLayout saveStatus={saveStatus}>
       <EditorTitle
         key={currentPage}
         currentPage={currentPage}
         pageContent={pageContent}
       />
       <ActiveUser
-        className="px-12 py-4"
         users={users.filter(
           (user) => user.currentPageId === currentPage.toString(),
         )}

apps/frontend/src/components/editor/EditorActionPanel.tsx

@@ -0,0 +1,58 @@
+import {
+  Maximize2,
+  Minimize2,
+  PanelLeftClose,
+  PanelRightClose,
+} from "lucide-react";
+
+import SaveStatus from "./ui/SaveStatus";
+import usePageStore from "@/store/usePageStore";
+import { cn } from "@/lib/utils";
+
+interface EditorActionPanelProps {
+  saveStatus: "saved" | "unsaved";
+}
+
+export default function EditorActionPanel({
+  saveStatus,
+}: EditorActionPanelProps) {
+  const { isPanelOpen, togglePanel, isMaximized, toggleMaximized } =
+    usePageStore();
+
+  return (
+    <div
+      className={cn(
+        "mx-auto mb-2 flex items-center justify-between gap-2 p-4",
+        isMaximized && "max-w-[900px] px-0",
+      )}
+    >
+      <div className="flex items-center gap-1">
+        <button
+          onClick={togglePanel}
+          className={cn(
+            "z-50 flex h-6 w-6 !cursor-pointer items-center justify-center rounded-md hover:bg-neutral-200",
+            !isPanelOpen &&
+              "absolute -left-8 top-0 h-8 w-8 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>
+        <button
+          onClick={toggleMaximized}
+          className="flex h-6 w-6 !cursor-pointer items-center justify-center rounded-md rounded-l border-b border-l border-t border-none hover:bg-neutral-200"
+        >
+          {isMaximized ? (
+            <Minimize2 className="h-4 w-4 rotate-90" />
+          ) : (
+            <Maximize2 className="h-4 w-4 rotate-90" />
+          )}
+        </button>
+      </div>
+      <SaveStatus saveStatus={saveStatus} />
+    </div>
+  );
+}

apps/frontend/src/components/editor/EditorTitle.tsx

@@ -28,7 +28,7 @@ export default function EditorTitle({
   };
 
   return (
-    <div className="p-12 pb-0">
+    <div className="pb-0">
       <input
         type="text"
         value={input as string}

apps/frontend/src/components/editor/prosemirror.css

@@ -33,10 +33,6 @@
   font-weight: 600;
 }
 
-.ProseMirror {
-  @apply p-8 sm:px-12;
-}
-
 .ProseMirror .p {
   @apply my-0;
 }

apps/frontend/src/components/editor/ui/SaveStatus.tsx

@@ -4,10 +4,8 @@ export interface SaveStatusProps {
 
 export default function SaveStatus({ saveStatus }: SaveStatusProps) {
   return (
-    <div className="absolute right-5 top-5 z-10">
-      <div className="rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
-        {saveStatus}
-      </div>
+    <div className="rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
+      {saveStatus}
     </div>
   );
 }

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

@@ -1,31 +1,32 @@
-import { PanelRightClose, PanelLeftClose } from "lucide-react";
+import { cn } from "@/lib/utils";
 import usePageStore from "@/store/usePageStore";
+import EditorActionPanel from "../editor/EditorActionPanel";
 
 interface EditorLayoutProps {
+  saveStatus: "saved" | "unsaved";
   children: React.ReactNode;
 }
 
-const EditorLayout = ({ children }: EditorLayoutProps) => {
-  const { isPanelOpen, togglePanel } = usePageStore();
+const EditorLayout = ({ children, saveStatus }: EditorLayoutProps) => {
+  const { isPanelOpen, isMaximized } = usePageStore();
 
   return (
     <div
-      className={`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 ${
-        isPanelOpen ? "transform-none" : "translate-x-full"
-      }`}
+      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",
+        isPanelOpen ? "transform-none" : "translate-x-full",
+        isMaximized ? "h-screen w-screen" : "w-[520px]",
+      )}
     >
-      <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" />
+      <EditorActionPanel saveStatus={saveStatus} />
+      <div
+        className={cn(
+          "flex h-full flex-col gap-4 overflow-auto px-12 py-4",
+          isMaximized && "mx-auto mt-8 box-content w-[800px] px-0",
         )}
-      </button>
+      >
+        {children}
+      </div>
     </div>
   );
 };

apps/frontend/src/store/usePageStore.ts

@@ -3,14 +3,17 @@ import { create } from "zustand";
 interface PageStore {
   currentPage: number | null;
   isPanelOpen: boolean;
+  isMaximized: boolean;
   setCurrentPage: (currentPage: number | null) => void;
   togglePanel: () => void;
+  toggleMaximized: () => void;
   setIsPanelOpen: (isOpen: boolean) => void;
 }
 
 const usePageStore = create<PageStore>((set) => ({
   currentPage: null,
   isPanelOpen: true,
+  isMaximized: false,
   setCurrentPage: (currentPage: number | null) =>
     set((state) => ({
       currentPage,
@@ -20,6 +23,7 @@ const usePageStore = create<PageStore>((set) => ({
           : currentPage !== null,
     })),
   togglePanel: () => set((state) => ({ isPanelOpen: !state.isPanelOpen })),
+  toggleMaximized: () => set((state) => ({ isMaximized: !state.isMaximized })),
   setIsPanelOpen: (isPanelOpen: boolean) => set({ isPanelOpen }),
 }));