Merge branch 'dev' into Feature/#175_캐럿_관리방식_변경

client/src/features/editor/Editor.tsx

@@ -96,6 +96,10 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
   const handleBlockInput = useCallback(
     (e: React.FormEvent<HTMLDivElement>, block: CRDTBlock) => {
       if (!block) return;
+      if ((e.nativeEvent as InputEvent).isComposing) {
+        return;
+      }
+
       let operationNode;
       const element = e.currentTarget;
       const newContent = element.textContent || "";
@@ -161,6 +165,27 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
     [sendCharInsertOperation, sendCharDeleteOperation],
   );
 
+  const handleCompositionEnd = (e: React.CompositionEvent<HTMLDivElement>, block: CRDTBlock) => {
+    const event = e.nativeEvent as CompositionEvent;
+    const characters = [...event.data];
+    const selection = window.getSelection();
+    const caretPosition = selection?.focusOffset || 0;
+    const startPosition = caretPosition - characters.length;
+
+    characters.forEach((char, index) => {
+      const insertPosition = startPosition + index;
+      const charNode = block.crdt.localInsert(insertPosition, char, block.id, pageId);
+
+      sendCharInsertOperation({
+        node: charNode.node,
+        blockId: block.id,
+        pageId,
+      });
+    });
+
+    block.crdt.currentCaret = caretPosition;
+  };
+
   const subscriptionRef = useRef(false);
 
   useLayoutEffect(() => {
@@ -289,6 +314,7 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
                 block={block}
                 isActive={block.id === editorCRDT.current.currentBlock?.id}
                 onInput={handleBlockInput}
+                onCompositionEnd={handleCompositionEnd}
                 onKeyDown={handleKeyDown}
                 onClick={handleBlockClick}
                 onAnimationSelect={handleAnimationSelect}

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

@@ -9,11 +9,9 @@ export const menuBlockStyle = css({
   width: "20px",
   height: "20px",
   marginLeft: "-20px",
+  opacity: 0,
   transition: "opacity 0.2s ease-in-out",
   cursor: "grab",
-  _groupHover: {
-    opacity: 1,
-  },
   _active: {
     cursor: "grabbing",
   },

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

@@ -71,7 +71,12 @@ export const MenuBlock = ({
   };
 
   return (
-    <div ref={menuBlockRef} className={menuBlockStyle} {...attributes} {...modifiedListeners}>
+    <div
+      ref={menuBlockRef}
+      className={`menu_block ${isOpen ? "option_modal_open" : ""} ${menuBlockStyle}`}
+      {...attributes}
+      {...modifiedListeners}
+    >
       <div className={dragHandleIconStyle}>
         <img src={DraggableIcon} alt="drag handle" width="10" height="10" />
       </div>

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

@@ -8,6 +8,9 @@ const baseBlockStyle = {
   width: "full",
   minHeight: "16px",
   backgroundColor: "transparent",
+  "&:hover .menu_block, .menu_block.option_modal_open": {
+    opacity: 1,
+  },
 };
 
 export const blockContainerStyle = cva({

client/src/features/editor/components/block/Block.tsx

@@ -16,6 +16,7 @@ interface BlockProps {
   block: CRDTBlock;
   isActive: boolean;
   onInput: (e: React.FormEvent<HTMLDivElement>, block: CRDTBlock) => void;
+  onCompositionEnd: (e: React.CompositionEvent<HTMLDivElement>, block: CRDTBlock) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
   onClick: (blockId: BlockId) => void;
   onAnimationSelect: (blockId: BlockId, animation: AnimationType) => void;
@@ -30,6 +31,7 @@ export const Block: React.FC<BlockProps> = memo(
     block,
     isActive,
     onInput,
+    onCompositionEnd,
     onKeyDown,
     onClick,
     onAnimationSelect,
@@ -102,6 +104,7 @@ export const Block: React.FC<BlockProps> = memo(
             ref={blockRef}
             onKeyDown={onKeyDown}
             onInput={handleInput}
+            onCompositionEnd={(e) => onCompositionEnd(e, block)}
             onClick={() => onClick(block.id)}
             contentEditable
             suppressContentEditableWarning

client/src/features/editor/hooks/useMarkdownGrammer.ts

@@ -75,6 +75,7 @@ export const useMarkdownGrammer = ({
 
       switch (e.key) {
         case "Enter": {
+          if (e.nativeEvent.isComposing) return;
           e.preventDefault();
           const selection = window.getSelection();
           if (!selection) return;

client/src/features/page/Page.style.ts

@@ -26,11 +26,97 @@ export const pageHeader = css({
   },
 });
 
-export const resizeHandle = css({
+const baseResizeHandle = css({
+  zIndex: 1,
   position: "absolute",
-  right: "-10px",
-  bottom: "-10px",
-  width: "32px",
-  height: "32px",
-  cursor: "se-resize",
 });
+
+export const resizeHandles = {
+  top: cx(
+    baseResizeHandle,
+    css({
+      top: "-5px",
+      left: "5px",
+      right: "5px",
+      height: "10px",
+      cursor: "n-resize",
+    }),
+  ),
+
+  bottom: cx(
+    baseResizeHandle,
+    css({
+      left: "5px",
+      right: "5px",
+      bottom: "-5px",
+      height: "10px",
+      cursor: "s-resize",
+    }),
+  ),
+
+  left: cx(
+    baseResizeHandle,
+    css({
+      top: "5px",
+      left: "-5px",
+      bottom: "5px",
+      width: "10px",
+      cursor: "w-resize",
+    }),
+  ),
+
+  right: cx(
+    baseResizeHandle,
+    css({
+      top: "5px",
+      right: "-5px",
+      bottom: "5px",
+      width: "10px",
+      cursor: "e-resize",
+    }),
+  ),
+
+  topLeft: cx(
+    baseResizeHandle,
+    css({
+      top: "-10px",
+      left: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "nw-resize",
+    }),
+  ),
+
+  topRight: cx(
+    baseResizeHandle,
+    css({
+      top: "-10px",
+      right: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "ne-resize",
+    }),
+  ),
+
+  bottomLeft: cx(
+    baseResizeHandle,
+    css({
+      left: "-10px",
+      bottom: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "sw-resize",
+    }),
+  ),
+
+  bottomRight: cx(
+    baseResizeHandle,
+    css({
+      right: "-10px",
+      bottom: "-10px",
+      width: "24px",
+      height: "24px",
+      cursor: "se-resize",
+    }),
+  ),
+};

client/src/features/page/Page.tsx

@@ -2,12 +2,10 @@ import { serializedEditorDataProps } from "@noctaCrdt/Interfaces";
 import { motion, AnimatePresence } from "framer-motion";
 import { Editor } from "@features/editor/Editor";
 import { Page as PageType } from "@src/types/page";
-import { pageAnimation, resizeHandleAnimation } from "./Page.animation";
-import { pageContainer, pageHeader, resizeHandle } from "./Page.style";
-
+import { pageContainer, pageHeader, resizeHandles } from "./Page.style";
 import { PageControlButton } from "./components/PageControlButton/PageControlButton";
 import { PageTitle } from "./components/PageTitle/PageTitle";
-import { usePage } from "./hooks/usePage";
+import { DIRECTIONS, usePage } from "./hooks/usePage";
 
 interface PageProps extends PageType {
   handlePageSelect: ({ pageId, isSidebar }: { pageId: string; isSidebar?: boolean }) => void;
@@ -45,17 +43,12 @@ export const Page = ({
 
   return (
     <AnimatePresence>
-      <motion.div
+      <div
         className={pageContainer}
-        initial={pageAnimation.initial}
-        animate={pageAnimation.animate({
-          x: position.x,
-          y: position.y,
-          isActive,
-        })}
         style={{
           width: `${size.width}px`,
           height: `${size.height}px`,
+          transform: `translate(${position.x}px, ${position.y}px)`,
           zIndex,
         }}
         onPointerDown={handlePageClick}
@@ -73,12 +66,14 @@ export const Page = ({
           pageId={id}
           serializedEditorData={serializedEditorData}
         />
-        <motion.div
-          className={resizeHandle}
-          onMouseDown={pageResize}
-          whileHover={resizeHandleAnimation.whileHover}
-        />
-      </motion.div>
+        {DIRECTIONS.map((direction) => (
+          <motion.div
+            key={direction}
+            className={resizeHandles[direction]}
+            onMouseDown={(e) => pageResize(e, direction)}
+          />
+        ))}
+      </div>
     </AnimatePresence>
   );
 };