style: 블록별 플레이스홀더 설정

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

@@ -1,90 +1,91 @@
-import { css, cx } from "@styled-system/css";
+import { css, cva } from "@styled-system/css";
 
-// 기본 블록 스타일 정의
-const baseBlockStyle = css({
+// 기본 블록 스타일
+const baseBlockStyle = {
   textStyle: "display-medium16",
   outline: "none",
   borderRadius: "radii.xs",
   width: "full",
   minHeight: "spacing.lg",
   margin: "spacing.sm 0",
   padding: "spacing.sm",
-  color: "gray.700",
+  color: "gray.900",
   backgroundColor: "transparent",
-});
+  '&:empty::before': {
+    content: 'attr(data-placeholder)',  // data-placeholder 속성의 값을 표시
+    color: 'gray.300',
+    position: 'absolute',
+    pointerEvents: 'none'  // 텍스트 선택이나 클릭 방지
+  }
+};
 
-// 각 블록 타입별 스타일 정의
-export const blockContainer = {
+// 블록 타입별 스타일 variants
+export const blockContainerStyle = cva({
   base: baseBlockStyle,
+  variants: {
+    type: {
+      p: {
+        textStyle: "display-medium16",
+        fontWeight: "bold",
+      },
+      h1: {
+        textStyle: "display-medium24",
+        fontWeight: "bold",
+      },
+      h2: {
+        textStyle: "display-medium20",
+        fontWeight: "bold",
+      },
+      h3: {
+        textStyle: "display-medium16",
+        fontWeight: "bold",
+      },
+      ul: {
+        display: "block",
+        listStyleType: "disc",
+        listStylePosition: "inside",
+      },
+      ol: {
+        display: "block",
+        listStyleType: "decimal",
+        listStylePosition: "inside",
+      },
+      li: {
+        textStyle: "display-medium16",
+        display: "list-item",
+        outline: "none",
+        margin: "0",
+        padding: "0 0 0 spacing.md",
+      },
+      blockquote: {
+        borderLeft: "4px solid token(colors.gray.300)",
+        paddingLeft: "spacing.md",
+        color: "gray.500",
+        fontStyle: "italic",
+      },
+      input: {},
+    },
+    isActive: {
+      true: {
+        opacity: 0.9,
+      },
+      false: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+  defaultVariants: {
+    type: "p",
+    isActive: false,
+  },
+});
 
-  paragraph: baseBlockStyle,
-
-  heading1: cx(
-    baseBlockStyle,
-    css({
-      textStyle: "display-medium24",
-      color: "gray.900",
-      fontWeight: "bold",
-    }),
-  ),
-
-  heading2: cx(
-    baseBlockStyle,
-    css({
-      textStyle: "display-medium20",
-      color: "gray.900",
-      fontWeight: "bold",
-    }),
-  ),
-
-  heading3: cx(
-    baseBlockStyle,
-    css({
-      textStyle: "display-medium16",
-      color: "gray.900",
-      fontWeight: "bold",
-    }),
-  ),
-
-  unorderedList: cx(
-    baseBlockStyle,
-    css({
-      display: "block",
-      listStyleType: "disc",
-      listStylePosition: "inside",
-    }),
-  ),
-
-  orderedList: cx(
-    baseBlockStyle,
-    css({
-      display: "block",
-      listStyleType: "decimal",
-      listStylePosition: "inside",
-    }),
-  ),
-
-  listItem: css({
-    textStyle: "display-medium16",
-    display: "list-item", // 리스트 아이템으로 표시되도록 설정
-    outline: "none",
-    margin: "0",
-    padding: "0 0 0 spacing.md",
-    color: "gray.700",
-  }),
-
-  input: css({
-    textStyle: "display-medium16",
-    margin: "spacing.sm 0",
-  }),
-
-  blockquote: cx(
-    baseBlockStyle,
-    css({
-      borderLeft: "4px solid token(colors.gray.300)",
-      paddingLeft: "spacing.md",
-      color: "gray.500",
-      fontStyle: "italic",
-    }),
-  ),
-};
+// 리스트 아이템은 별도로 정의 (특수한 스타일링 때문)
+export const listItemStyle = css({
+  textStyle: "display-medium16",
+  display: "list-item",
+  outline: "none",
+  margin: "0",
+  padding: "0 0 0 spacing.md",
+  color: "gray.700",
+});

client/src/components/block/Block.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from "react";
-import { cx } from "@styled-system/css";
 import { EditorNode } from "../../types/markdown";
-import { blockContainer } from "./Block.style";
+import { blockContainerStyle, listItemStyle } from "./Block.style";
 
 interface BlockProps {
   node: EditorNode;
@@ -31,35 +30,29 @@ export const Block: React.FC<BlockProps> = memo(
       onClick(node.id);
     };
 
-    // node.type에 따른 스타일 선택
-    const getBlockStyle = (type: string) => {
+    const getPlaceholder = (type: string) => {
       switch (type) {
         case "p":
-          return blockContainer.paragraph;
+          return "텍스트를 입력하세요 ...";
         case "h1":
-          return blockContainer.heading1;
+          return "제목 1";
         case "h2":
-          return blockContainer.heading2;
+          return "제목 2";
         case "h3":
-          return blockContainer.heading3;
-        case "ul":
-          return blockContainer.unorderedList;
-        case "ol":
-          return blockContainer.orderedList;
+          return "제목 3";
         case "li":
-          return blockContainer.listItem;
+          return "리스트 항목";
         case "blockquote":
-          return blockContainer.blockquote;
-        case "input":
-          return blockContainer.input;
+          return "인용구를 입력하세요";
         default:
-          return blockContainer.base;
+          return "텍스트를 입력하세요";
       }
     };
 
     const commonProps = {
       "data-node-id": node.id,
       "data-depth": node.depth,
+      "data-placeholder": getPlaceholder(node.type),
       onKeyDown,
       onInput,
       onCompositionStart,
@@ -69,7 +62,10 @@ export const Block: React.FC<BlockProps> = memo(
       contentEditable: true,
       suppressContentEditableWarning: true,
       dangerouslySetInnerHTML: { __html: node.content },
-      className: cx(getBlockStyle(node.type)),
+      className: blockContainerStyle({ 
+        type: node.type,
+        isActive,
+      }),
     };
 
     return React.createElement(node.type, commonProps);