1 files changed, 46 insertions, 0 deletions
diff --git a/components/rich-text-editor/TextAlignMenu.tsx b/components/rich-text-editor/TextAlignMenu.tsx
new file mode 100644
index 00000000..98cc0d4c
--- /dev/null
+++ b/components/rich-text-editor/TextAlignMenu.tsx
@@ -0,0 +1,46 @@
+'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'
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from 'lucide-react'
+
+interface TextAlignMenuProps {
+  editor: Editor
+  disabled?: boolean
+  currentAlign?: 'left' | 'center' | 'right' | 'justify'
+  executeCommand: (command: () => void) => void
+}
+
+export function TextAlignMenu({ editor, disabled, executeCommand }: TextAlignMenuProps) {
+  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 onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('left').run())} className="flex items-center">
+          <AlignLeft className="mr-2 h-4 w-4" />
+          <span>왼쪽 정렬</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('center').run())} className="flex items-center">
+          <AlignCenter className="mr-2 h-4 w-4" />
+          <span>가운데 정렬</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('right').run())} className="flex items-center">
+          <AlignRight className="mr-2 h-4 w-4" />
+          <span>오른쪽 정렬</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('justify').run())} className="flex items-center">
+          <AlignJustify className="mr-2 h-4 w-4" />
+          <span>양쪽 정렬</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+