1 files changed, 46 insertions, 0 deletions
diff --git a/components/rich-text-editor/BulletListButton.tsx b/components/rich-text-editor/BulletListButton.tsx
new file mode 100644
index 00000000..bf5b833c
--- /dev/null
+++ b/components/rich-text-editor/BulletListButton.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import React from 'react'
+import type { Editor } from '@tiptap/react'
+import { Toggle } from '@/components/ui/toggle'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { List as ListIcon } from 'lucide-react'
+
+interface BulletListButtonProps {
+  editor: Editor | null
+  disabled?: boolean
+  isActive: boolean
+  executeCommand: (command: () => void) => void
+}
+
+export function BulletListButton({ editor, disabled, isActive, executeCommand }: BulletListButtonProps) {
+
+
+  if (!editor) return null
+
+  const handleToggleBulletList = () => {
+    console.log('toggleBulletList')
+    executeCommand(() => editor.chain().focus().toggleBulletList().run())
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Toggle
+          size="sm"
+          pressed={isActive}
+          onMouseDown={e => e.preventDefault()}
+          onPressedChange={handleToggleBulletList}
+          disabled={disabled}
+        >
+          <ListIcon className="h-4 w-4" />
+        </Toggle>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>글머리 기호</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+