Merge branch 'release/0.1.6'

boostcampwm-2024 · Dec 2, 2024 · 04aa78a · 04aa78a
2 parents 167ebf6 + cb8c83b
commit 04aa78a
Show file tree

Hide file tree

Showing 21 changed files with 284 additions and 26 deletions.
diff --git a/client/index.html b/client/index.html
@@ -5,7 +5,32 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="./src/assets/icons/noctaDayIcon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터" />
   <title>Nocta</title>
+  <meta name="keywords" content="실시간,협업,에디터,노션,마크다운" />
+  <meta name="author" content="Team Glassmo" />
+
+  <meta property="og:site_name" content="Nocta" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.nocta.site/" />
+  <meta property="og:title" content="Nocta" />
+  <meta
+    property="og:description"
+    content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"
+  />
+  <meta property="og:image" content="https://www.nocta.site/images/nocta.png" />
+
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://www.nocta.site/" />
+  <meta property="twitter:title" content="Nocta" />
+  <meta
+    property="twitter:description"
+    content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"
+  />
+  <meta property="twitter:image" content="https://www.nocta.site/images/nocta.png" />
+
+  <meta name="robots" content="index, follow" />
+  <link rel="canonical" href="https://www.nocta.site/" />
 </head>
 
 <body>

diff --git a/client/package.json b/client/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && panda codegen && vite build",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "preview": "vite preview",
     "prepare": "panda codegen"

diff --git a/client/public/images/nocta.png b/client/public/images/nocta.png
diff --git a/client/public/robots.txt b/client/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://www.nocta.site/sitemap.xml
diff --git a/client/public/sitemap.xml b/client/public/sitemap.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://www.nocta.site</loc>
+    <lastmod>2024-12-02</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
diff --git a/client/src/assets/images/background.avif b/client/src/assets/images/background.avif
diff --git a/client/src/assets/images/background.webp b/client/src/assets/images/background.webp
diff --git a/client/src/components/modal/InviteModal.tsx b/client/src/components/modal/InviteModal.tsx
@@ -1,5 +1,5 @@
 // InviteModal.tsx
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { modalContentContainer, titleText, descriptionText, emailInput } from "./InviteModal.style";
 import { Modal } from "./modal";
 
@@ -11,6 +11,13 @@ interface InviteModalProps {
 
 export const InviteModal = ({ isOpen, onClose, onInvite }: InviteModalProps) => {
   const [email, setEmail] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
 
   const handleInvite = () => {
     onInvite(email);
@@ -30,6 +37,7 @@ export const InviteModal = ({ isOpen, onClose, onInvite }: InviteModalProps) =>
         <h2 className={titleText}>워크스페이스 초대</h2>
         <p className={descriptionText}>초대할 사용자의 이메일을 입력해주세요</p>
         <input
+          ref={inputRef}
           className={emailInput}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="이메일 주소 입력"

diff --git a/client/src/components/modal/modal.tsx b/client/src/components/modal/modal.tsx
@@ -53,7 +53,16 @@ export const Modal = ({
   return createPortal(
     <AnimatePresence>
       {isOpen && (
-        <div className={container}>
+        <div
+          role="dialog"
+          className={container}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              secondaryButtonOnClick?.();
+            }
+          }}
+        >
           <motion.div
             initial={overlayAnimation.initial}
             animate={overlayAnimation.animate}

diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.tsx b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
@@ -3,6 +3,7 @@ import { InviteModal } from "@src/components/modal/InviteModal";
 import { useModal } from "@src/components/modal/useModal";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { useToastStore } from "@src/stores/useToastStore";
+import { useWorkspaceStore } from "@src/stores/useWorkspaceStore";
 import { useUserInfo } from "@stores/useUserStore";
 import { menuItemWrapper, textBox, menuButtonContainer } from "./MenuButton.style";
 import { MenuIcon } from "./components/MenuIcon";
@@ -18,7 +19,7 @@ export const MenuButton = () => {
     openModal: openInviteModal,
     closeModal: closeInviteModal,
   } = useModal();
-
+  const currentRole = useWorkspaceStore((state) => state.currentRole);
   const handleMenuClick = () => {
     setIsOpen((prev) => !prev);
   };
@@ -81,6 +82,15 @@ export const MenuButton = () => {
       workspaceId: workspace.id,
     });
   };
+
+  const handleInviteModal = () => {
+    if (isInviteModalOpen) return;
+    if (currentRole === "editor") {
+      addToast("Editor 권한으로는 초대할 수 없습니다.");
+      return;
+    }
+    openInviteModal();
+  };
   return (
     <>
       <button
@@ -92,7 +102,7 @@ export const MenuButton = () => {
           <MenuIcon />
           <p className={textBox}>{name ?? "Nocta"}</p>
         </button>
-        <WorkspaceSelectModal isOpen={isOpen} userName={name} onInviteClick={openInviteModal} />
+        <WorkspaceSelectModal isOpen={isOpen} userName={name} onInviteClick={handleInviteModal} />
         <InviteModal
           isOpen={isInviteModalOpen}
           onClose={closeInviteModal}

diff --git a/...rc/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/...rc/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -2,6 +2,7 @@ import { WorkspaceListItem } from "@noctaCrdt/Interfaces"; // 이전에 만든
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { useToastStore } from "@src/stores/useToastStore";
 import { useUserInfo } from "@src/stores/useUserStore";
+import { useWorkspaceStore } from "@src/stores/useWorkspaceStore";
 import {
   itemContainer,
   itemContent,
@@ -28,10 +29,12 @@ export const WorkspaceSelectItem = ({
   const { userId } = useUserInfo();
   const { workspace, switchWorkspace } = useSocketStore();
   const { addToast } = useToastStore();
+  const setCurrentRole = useWorkspaceStore((state) => state.setCurrentRole);
   const isActive = workspace?.id === id; // 현재 워크스페이스 확인
   const handleClick = () => {
     if (!isActive) {
       switchWorkspace(userId, id);
+      setCurrentRole(role);
       addToast(`워크스페이스(${name})에 접속하였습니다.`);
     }
   };

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
@@ -158,6 +158,39 @@ export const Block: React.FC<BlockProps> = memo(
       }
     };
 
+    const handleKeyDown = (
+      e: React.KeyboardEvent<HTMLDivElement>,
+      blockRef: HTMLDivElement | null,
+      block: CRDTBlock,
+    ) => {
+      switch (e.key) {
+        case e.metaKey && "b": {
+          e.preventDefault();
+          onTextStyleUpdate("bold", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "i": {
+          e.preventDefault();
+          onTextStyleUpdate("italic", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "u": {
+          e.preventDefault();
+          onTextStyleUpdate("underline", block.id, selectedNodes);
+          break;
+        }
+        case e.metaKey && "Shift" && "s": {
+          onTextStyleUpdate("strikethrough", block.id, selectedNodes);
+          e.preventDefault();
+          break;
+        }
+        default: {
+          onKeyDown(e, blockRef, block);
+          break;
+        }
+      }
+    };
+
     const handleAnimationSelect = (animation: AnimationType) => {
       onAnimationSelect(block.id, animation);
     };
@@ -276,7 +309,7 @@ export const Block: React.FC<BlockProps> = memo(
             <IconBlock type={block.type} index={block.listIndex} indent={block.indent} />
             <div
               ref={blockRef}
-              onKeyDown={(e) => onKeyDown(e, blockRef.current, block)}
+              onKeyDown={(e) => handleKeyDown(e, blockRef.current, block)}
               onInput={handleInput}
               onClick={(e) => onClick(block.id, e)}
               onCopy={(e) => onCopy(e, blockRef.current, block)}

diff --git a/client/src/features/editor/hooks/useCopyAndPaste.ts b/client/src/features/editor/hooks/useCopyAndPaste.ts
@@ -5,6 +5,7 @@ import { useCallback } from "react";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { EditorStateProps } from "../Editor";
 import { getTextOffset } from "../utils/domSyncUtils";
+import { checkMarkdownPattern } from "../utils/markdownPatterns";
 
 interface ClipboardMetadata {
   value: string;
@@ -26,7 +27,12 @@ export const useCopyAndPaste = ({
   setEditorState,
   isLocalChange,
 }: UseCopyAndPasteProps) => {
-  const { sendCharInsertOperation, sendCharDeleteOperation } = useSocketStore();
+  const {
+    sendCharInsertOperation,
+    sendCharDeleteOperation,
+    sendBlockInsertOperation,
+    sendBlockUpdateOperation,
+  } = useSocketStore();
 
   const handleCopy = useCallback(
     (e: React.ClipboardEvent<HTMLDivElement>, blockRef: HTMLDivElement | null, block: Block) => {
@@ -123,25 +129,75 @@ export const useCopyAndPaste = ({
         editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + metadata.length;
       } else {
         const text = e.clipboardData.getData("text/plain");
-
         if (!block || text.length === 0) return;
 
         const caretPosition = block.crdt.currentCaret;
 
-        // 텍스트를 한 글자씩 순차적으로 삽입
-        text.split("").forEach((char, index) => {
-          const insertPosition = caretPosition + index;
-          const charNode = block.crdt.localInsert(insertPosition, char, block.id, pageId);
-          sendCharInsertOperation({
-            type: "charInsert",
-            node: charNode.node,
-            blockId: block.id,
-            pageId,
+        if (text.includes("\n")) {
+          let currentBlockIndex = editorCRDT.LinkedList.spread().findIndex(
+            (b) => b.id === block.id,
+          );
+          const textList = text.split("\n");
+          textList.forEach((line, index) => {
+            console.log(line);
+            if (index === 0) {
+              line.split("").forEach((char, index) => {
+                const charNode = block.crdt.localInsert(index, char, block.id, pageId);
+                sendCharInsertOperation({
+                  type: "charInsert",
+                  node: charNode.node,
+                  blockId: block.id,
+                  pageId,
+                });
+              });
+              const isMarkdownGrammer = checkMarkdownPattern(line);
+              if (isMarkdownGrammer && block.type === "p") {
+                block.type = isMarkdownGrammer.type;
+                sendBlockUpdateOperation(editorCRDT.localUpdate(block, pageId));
+                for (let i = 0; i < isMarkdownGrammer.length; i++) {
+                  sendCharDeleteOperation(block.crdt.localDelete(0, block.id, pageId));
+                }
+              }
+            } else {
+              const newBlock = editorCRDT.localInsert(currentBlockIndex, "");
+              sendBlockInsertOperation({
+                type: "blockInsert",
+                node: newBlock.node,
+                pageId,
+              });
+              line.split("").forEach((char, index) => {
+                sendCharInsertOperation(
+                  newBlock.node.crdt.localInsert(index, char, newBlock.node.id, pageId),
+                );
+              });
+              const isMarkdownGrammer = checkMarkdownPattern(line);
+              if (isMarkdownGrammer && newBlock.node.type === "p") {
+                newBlock.node.type = isMarkdownGrammer.type;
+                sendBlockUpdateOperation(editorCRDT.localUpdate(newBlock.node, pageId));
+                for (let i = 0; i < isMarkdownGrammer.length; i++) {
+                  sendCharDeleteOperation(
+                    newBlock.node.crdt.localDelete(0, newBlock.node.id, pageId),
+                  );
+                }
+              }
+            }
+            currentBlockIndex += 1;
           });
-        });
-
-        // 캐럿 위치 업데이트
-        editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + text.length;
+        } else {
+          // 텍스트를 한 글자씩 순차적으로 삽입
+          text.split("").forEach((char, index) => {
+            const insertPosition = caretPosition + index;
+            const charNode = block.crdt.localInsert(insertPosition, char, block.id, pageId);
+            sendCharInsertOperation({
+              type: "charInsert",
+              node: charNode.node,
+              blockId: block.id,
+              pageId,
+            });
+          });
+          // 캐럿 위치 업데이트
+          editorCRDT.currentBlock!.crdt.currentCaret = caretPosition + text.length;
+        }
       }
 
       setEditorState({

diff --git a/client/src/stores/useSocketStore.ts b/client/src/stores/useSocketStore.ts
@@ -15,6 +15,7 @@ import {
 } from "@noctaCrdt/Interfaces";
 import { io, Socket } from "socket.io-client";
 import { create } from "zustand";
+import { useWorkspaceStore } from "./useWorkspaceStore";
 
 class BatchProcessor {
   private batch: any[] = [];
@@ -136,7 +137,7 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
 
     socket.on("workspace", (workspace: WorkSpaceSerializedProps) => {
       const { setWorkspace } = get();
-      setWorkspace(workspace); // 수정된 부분
+      setWorkspace(workspace);
     });
 
     socket.on("workspace/connections", (connections: Record<string, number>) => {
@@ -153,12 +154,23 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
 
     socket.on("workspace/list", (workspaces: WorkspaceListItem[]) => {
       set({ availableWorkspaces: workspaces });
+      const { availableWorkspaces } = get();
+      console.log(availableWorkspaces);
+      const { workspace } = get();
+      const currentWorkspace = availableWorkspaces.find((ws) => ws.id === workspace!.id);
+      if (currentWorkspace) {
+        useWorkspaceStore.getState().setCurrentRole(currentWorkspace.role);
+      }
     });
 
     socket.on("error", (error: Error) => {
       console.error("Socket error:", error);
     });
 
+    socket.on("workspace/role", (data: { role: "owner" | "editor" }) => {
+      useWorkspaceStore.getState().setCurrentRole(data.role);
+    });
+
     socket.connect();
   },
 

diff --git a/client/src/stores/useWorkspaceStore.ts b/client/src/stores/useWorkspaceStore.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+// 워크스페이스 권한 타입 정의
+
+interface WorkspaceStore {
+  // 현재 선택된 워크스페이스의 권한
+  currentRole: string | null;
+  // 권한 설정 함수
+  setCurrentRole: (role: string | null) => void;
+}
+
+export const useWorkspaceStore = create<WorkspaceStore>((set) => ({
+  currentRole: null,
+  setCurrentRole: (role) => set({ currentRole: role }),
+}));