1 files changed, 65 insertions, 0 deletions
diff --git a/components/rich-text-editor/StyleMenu.tsx b/components/rich-text-editor/StyleMenu.tsx
new file mode 100644
index 00000000..a919e639
--- /dev/null
+++ b/components/rich-text-editor/StyleMenu.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import React from 'react'
+import type { Editor } from '@tiptap/react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+interface StyleMenuProps {
+  editor: Editor | null
+  disabled?: boolean
+  executeCommand: (command: () => void) => void
+}
+
+export function StyleMenu({ editor, disabled, executeCommand }: StyleMenuProps) {
+  if (!editor) return null
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild onMouseDown={e => e.preventDefault()}>
+        <Button variant="outline" size="sm" className="h-8 px-2" disabled={disabled}>
+          스타일
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem
+          className="flex items-center"
+          onSelect={() =>
+            executeCommand(() =>
+              editor
+                .chain()
+                .focus()
+                .setMark('textStyle', { fontSize: '32px' })
+                .setBold()
+                .run()
+            )
+          }
+        >
+          제목 (굵게 + 32pt)
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="flex items-center"
+          onSelect={() =>
+            executeCommand(() =>
+              editor
+                .chain()
+                .focus()
+                .unsetBold()
+                .setParagraph()
+                .setMark('textStyle', { fontSize: null as unknown as string })
+                .run()
+            )
+          }
+        >
+          본문 (기본)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+