style: 메뉴 블록이 indent와 관계없이 텍스트 블록 옆에 있도록 수정

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

@@ -0,0 +1,36 @@
+// IconBlock.style.ts
+import { css, cva } from "@styled-system/css";
+
+export const iconContainerStyle = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: "24px",
+  marginRight: "8px",
+});
+
+export const iconStyle = cva({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "gray.600",
+    fontSize: "14px",
+  },
+  variants: {
+    type: {
+      ul: {
+        fontSize: "20px", // bullet point size
+      },
+      ol: {
+        paddingRight: "4px",
+      },
+      checkbox: {
+        borderRadius: "2px",
+        width: "16px",
+        height: "16px",
+        backgroundColor: "white",
+      },
+    },
+  },
+});

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

@@ -1,28 +1,27 @@
 import { ElementType } from "@noctaCrdt/Interfaces";
+import { iconContainerStyle, iconStyle } from "./IconBlock.style";
 
-// Fix: 서윤님 피드백 반영
 interface IconBlockProps {
   type: ElementType;
   index?: number;
 }
+
 export const IconBlock = ({ type, index = 1 }: IconBlockProps) => {
   const getIcon = () => {
     switch (type) {
       case "ul":
-        return "•";
+        return <span className={iconStyle({ type: "ul" })}>•</span>;
       case "ol":
-        return `${index}.`;
+        return <span className={iconStyle({ type: "ol" })}>{`${index}.`}</span>;
       case "checkbox":
-        return <input type="checkbox" />;
+        return <span className={iconStyle({ type: "checkbox" })} />;
       default:
         return null;
     }
   };
+
   const icon = getIcon();
   if (!icon) return null;
-  return (
-    <div style={{ marginRight: "8px" }}>
-      <span>{icon}</span>
-    </div>
-  );
+
+  return <div className={iconContainerStyle}>{icon}</div>;
 };

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

@@ -1,25 +1,18 @@
+// MenuBlock.style.ts
 import { css } from "@styled-system/css";
 
 export const menuBlockStyle = css({
   display: "flex",
-  position: "absolute",
-  top: "50%", // 세로 중앙 정렬
-  left: "-28px", // 왼쪽 여백 늘림
-  transform: "translateY(-50%)", // 세로 중앙 정렬 보정
+  zIndex: 1,
+
+  position: "relative", // absolute에서 relative로 변경
   justifyContent: "center",
   alignItems: "center",
-  borderRadius: "3px",
-
-  width: "24px",
-  height: "24px",
-  opacity: 0,
-  backgroundColor: "transparent",
+  width: "20px",
+  height: "20px",
+  marginLeft: "-20px",
   transition: "opacity 0.2s ease-in-out",
   cursor: "grab",
-  _hover: {
-    backgroundColor: "rgba(55, 53, 47, 0.08)",
-  },
-
   _groupHover: {
     opacity: 1,
   },
@@ -35,5 +28,4 @@ export const dragHandleIconStyle = css({
   alignItems: "center",
   width: "100%",
   height: "100%",
-  color: "rgba(55, 53, 47, 0.45)",
 });

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

@@ -29,6 +29,16 @@ export const blockContainerStyle = cva({
   },
 });
 
+export const contentWrapperStyle = cva({
+  base: {
+    display: "flex",
+    position: "relative",
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
 const baseTextStyle = {
   textStyle: "display-medium16",
   flex: "1 1 auto", // 변경: flex-grow: 1, flex-shrink: 1, flex-basis: auto

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

@@ -6,7 +6,7 @@ import { BlockId } from "@noctaCrdt/NodeId";
 import { memo, useEffect, useRef } from "react";
 import { IconBlock } from "../IconBlock/IconBlock";
 import { MenuBlock } from "../MenuBlock/MenuBlock";
-import { textContainerStyle, blockContainerStyle } from "./Block.style";
+import { textContainerStyle, blockContainerStyle, contentWrapperStyle } from "./Block.style";
 
 interface BlockProps {
   id: string;
@@ -30,14 +30,6 @@ export const Block: React.FC<BlockProps> = memo(
       },
     });
 
-    const style = {
-      transform: CSS.Transform.toString(transform),
-      transition,
-      paddingLeft: `${block.indent * 12}px`,
-      opacity: isDragging ? 0.5 : 1,
-      position: "relative" as const,
-    };
-
     const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
       onInput(e, block.id);
     };
@@ -69,23 +61,29 @@ export const Block: React.FC<BlockProps> = memo(
       <div
         ref={setNodeRef}
         className={blockContainerStyle({ isActive })}
-        style={style}
+        style={{
+          transform: CSS.Transform.toString(transform),
+          transition,
+          opacity: isDragging ? 0.5 : 1,
+        }}
         data-group // indent에 따른 마진
       >
-        <MenuBlock attributes={attributes} listeners={listeners} />
-        <IconBlock type={block.type} index={1} />
-        <div
-          ref={blockRef}
-          onKeyDown={onKeyDown}
-          onInput={handleInput}
-          onClick={handleClick}
-          contentEditable
-          suppressContentEditableWarning
-          className={textContainerStyle({
-            type: block.type,
-          })}
-        >
-          {block.crdt.read()}
+        <div className={contentWrapperStyle()} style={{ paddingLeft: `${block.indent * 12}px` }}>
+          <MenuBlock attributes={attributes} listeners={listeners} />
+          <IconBlock type={block.type} index={1} />
+          <div
+            ref={blockRef}
+            onKeyDown={onKeyDown}
+            onInput={handleInput}
+            onClick={handleClick}
+            contentEditable
+            suppressContentEditableWarning
+            className={textContainerStyle({
+              type: block.type,
+            })}
+          >
+            {block.crdt.read()}
+          </div>
         </div>
       </div>
     );