Merge branch 'release/0.1.0'

@noctaCrdt/Interfaces.ts

@@ -80,6 +80,7 @@ export interface RemotePageDeleteOperation {
   type: "pageDelete";
   clientId: number;
   workspaceId: string;
+  pageTitle: string;
   pageId: string;
 }
 

@noctaCrdt/LinkedList.ts

@@ -300,6 +300,8 @@ export class BlockLinkedList extends LinkedList<Block> {
     if (targetNode.prev) {
       const prevNode = this.getNode(targetNode.prev);
       if (prevNode) prevNode.next = targetNode.next;
+    } else {
+      this.head = targetNode.next;
     }
 
     if (targetNode.next) {

client/src/components/Toast/Toast.style.ts

@@ -0,0 +1,33 @@
+import { css } from "@styled-system/css";
+
+export const ToastWrapper = css({
+  display: "flex",
+  // position: "relative", // progress bar를 위한 position 설정
+  gap: "2",
+  alignItems: "center",
+  borderRadius: "lg",
+  width: "fit-content",
+  paddingBlock: "2",
+  paddingInline: "4",
+  color: "white",
+  backgroundColor: "gray.700",
+  boxShadow: "lg",
+  // overflow: "hidden", // progress bar가 넘치지 않도록
+  transition: "all",
+  transitionDuration: "300ms",
+});
+
+export const CloseItemBox = css({
+  width: "15px",
+  height: "15px",
+});
+
+export const ToastProgress = css({
+  position: "absolute",
+  left: "0px",
+  bottom: "0px",
+  borderRadius: "lg",
+  width: "100%",
+  height: "6px",
+  backgroundColor: "blue",
+});

client/src/components/Toast/Toast.tsx

@@ -0,0 +1,59 @@
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import CloseIcon from "@assets/icons/close.svg?react";
+import { ToastWrapper, CloseItemBox, ToastProgress } from "./Toast.style";
+
+interface ToastProps {
+  message: string;
+  duration?: number;
+  onClose: () => void;
+}
+
+export const Toast = ({ message, duration = 3000, onClose }: ToastProps) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsClosing(true);
+      setTimeout(() => {
+        setIsVisible(false);
+        onClose();
+      }, 300);
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsVisible(false);
+      onClose();
+    }, 300);
+  };
+  if (!isVisible) return null;
+  return (
+    <motion.div
+      className={ToastWrapper}
+      style={{
+        opacity: isClosing ? 0 : 1,
+        transform: isClosing ? "translateY(100%)" : "translateY(0)",
+        transition: "all 0.3s ease-in-out",
+      }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div
+        initial={{ width: "0%" }}
+        animate={{ width: "100%" }}
+        transition={{ duration: duration / 1000, ease: "easeOut" }}
+        className={ToastProgress}
+      />
+
+      <span className="text-sm">{message}</span>
+      <div className={CloseItemBox} onClick={handleClose}>
+        <CloseIcon />
+      </div>
+    </motion.div>
+  );
+};

client/src/components/Toast/ToastContainer.style.ts

@@ -0,0 +1,11 @@
+import { css } from "@styled-system/css";
+
+export const ToastContainerStyle = css({
+  display: "flex",
+  zIndex: "9999",
+  position: "fixed",
+  right: "6",
+  bottom: "6",
+  gap: "2",
+  flexDirection: "column-reverse",
+});

client/src/components/Toast/ToastContainer.tsx

@@ -0,0 +1,23 @@
+import { AnimatePresence } from "framer-motion";
+import { useToastStore } from "@stores/useToastStore";
+import { Toast } from "./Toast";
+import { ToastContainerStyle } from "./ToastContainer.style";
+
+export const ToastContainer = () => {
+  const { toasts, removeToast } = useToastStore();
+
+  return (
+    <div className={ToastContainerStyle}>
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            message={toast.message}
+            duration={toast.duration}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};

client/src/components/sidebar/Sidebar.tsx

@@ -70,6 +70,7 @@ export const Sidebar = ({
     sendPageDeleteOperation({
       type: "pageDelete",
       workspaceId: "default",
+      pageTitle: pageToDelete!.title,
       pageId,
       clientId,
     });

client/src/components/sidebar/components/pageItem/PageItem.tsx

@@ -1,5 +1,5 @@
 import { PageIconType } from "@noctaCrdt/Interfaces";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import CloseIcon from "@assets/icons/close.svg?react";
 import { useModal } from "@src/components/modal/useModal";
 import { PageIconButton } from "../pageIconButton/PageIconButton";
@@ -29,7 +29,11 @@ export const PageItem = ({
 }: PageItemProps) => {
   const { isOpen, openModal, closeModal } = useModal();
   const [pageIcon, setPageIcon] = useState<PageIconType>(icon);
-  // 삭제 버튼 클릭 핸들러
+
+  useEffect(() => {
+    setPageIcon(icon);
+  }, [icon]);
+
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation(); // 상위 요소로의 이벤트 전파 중단
     onDelete?.(id);

client/src/features/editor/Editor.tsx

@@ -1,4 +1,4 @@
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
 import { BlockLinkedList } from "@noctaCrdt/LinkedList";
@@ -44,10 +44,16 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     sendBlockUpdateOperation,
   } = useSocketStore();
   const { clientId } = useSocketStore();
+  const [displayTitle, setDisplayTitle] = useState(pageTitle);
+  const [dragBlockList, setDragBlockList] = useState<string[]>([]);
 
-  const [displayTitle, setDisplayTitle] = useState(
-    pageTitle === "새로운 페이지" || pageTitle === "" ? "" : pageTitle,
-  );
+  useEffect(() => {
+    if (pageTitle === "새로운 페이지" || pageTitle === "") {
+      setDisplayTitle("");
+    } else {
+      setDisplayTitle(pageTitle);
+    }
+  }, [pageTitle]);
 
   const editorCRDTInstance = useMemo(() => {
     let newEditorCRDT;
@@ -80,7 +86,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     addNewBlock,
   } = useEditorOperation({ editorCRDT, pageId, setEditorState });
 
-  const { sensors, handleDragEnd } = useBlockDragAndDrop({
+  const { sensors, handleDragEnd, handleDragStart } = useBlockDragAndDrop({
     editorCRDT: editorCRDT.current,
     editorState,
     setEditorState,
@@ -272,7 +278,15 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
           className={editorTitle}
         />
         <div style={{ height: "36px" }}></div>
-        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+        <DndContext
+          onDragEnd={(event: DragEndEvent) => {
+            handleDragEnd(event, dragBlockList, () => setDragBlockList([]));
+          }}
+          onDragStart={(event) => {
+            handleDragStart(event, setDragBlockList);
+          }}
+          sensors={sensors}
+        >
           <SortableContext
             items={editorState.linkedList
               .spread()
@@ -298,6 +312,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
                 onTextStyleUpdate={onTextStyleUpdate}
                 onTextColorUpdate={onTextColorUpdate}
                 onTextBackgroundColorUpdate={onTextBackgroundColorUpdate}
+                dragBlockList={dragBlockList}
               />
             ))}
           </SortableContext>

client/src/features/editor/components/IconBlock/IconBlock.style.ts

@@ -20,7 +20,7 @@ export const iconStyle = cva({
   variants: {
     type: {
       ul: {
-        fontSize: "20px", // bullet point size
+        fontSize: "6px", // bullet point size
       },
       ol: {
         paddingRight: "4px",

client/src/features/editor/components/IconBlock/IconBlock.tsx

@@ -4,13 +4,20 @@ import { iconContainerStyle, iconStyle } from "./IconBlock.style";
 interface IconBlockProps {
   type: ElementType;
   index: number | undefined;
+  indent?: number;
 }
 
-export const IconBlock = ({ type, index = 1 }: IconBlockProps) => {
+export const IconBlock = ({ type, index = 1, indent = 0 }: IconBlockProps) => {
   const getIcon = () => {
     switch (type) {
       case "ul":
-        return <span className={iconStyle({ type: "ul" })}>•</span>;
+        return (
+          <span className={iconStyle({ type: "ul" })}>
+            {indent === 0 && "●"}
+            {indent === 1 && "○"}
+            {indent === 2 && "■"}
+          </span>
+        );
       case "ol":
         return <span className={iconStyle({ type: "ol" })}>{`${index}.`}</span>;
       case "checkbox":

client/src/features/editor/components/block/Block.style.ts

@@ -142,3 +142,30 @@ export const textContainerStyle = cva({
     type: "p",
   },
 });
+
+export const dropIndicatorStyle = cva({
+  base: {
+    zIndex: "10",
+    position: "absolute",
+    height: "2px",
+  },
+  variants: {
+    indent: {
+      first: {
+        left: "0",
+        width: "100%",
+        backgroundColor: "#ADADFF",
+      },
+      second: {
+        left: "10px",
+        width: "calc(100% - 10px)",
+        backgroundColor: "#9B9BFF ",
+      },
+      third: {
+        left: "20px",
+        width: "calc(100% - 20px)",
+        backgroundColor: "#8989FF",
+      },
+    },
+  },
+});