"use client"; import { useCallback, useState } from "react"; import { useEditorStore } from "@/features/editor/state/editorStore"; import { FilePlus2, ListChecks, Type, MousePointerClick, Image as ImageIcon, Video, Minus, List, LayoutTemplate, Pencil, FileText, ListFilter, CircleDot, SquareCheck, } from "lucide-react"; // 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트 export function BlocksSidebar() { const addTextBlock = useEditorStore((state) => state.addTextBlock); const addButtonBlock = useEditorStore((state) => state.addButtonBlock); const addImageBlock = useEditorStore((state) => state.addImageBlock); const addVideoBlock = useEditorStore((state) => (state as any).addVideoBlock); const addDividerBlock = useEditorStore((state) => state.addDividerBlock); const addListBlock = useEditorStore((state) => state.addListBlock); const addSectionBlock = useEditorStore((state) => state.addSectionBlock); const addFormBlock = useEditorStore((state) => state.addFormBlock); const addFormInputBlock = useEditorStore((state) => (state as any).addFormInputBlock); const addFormSelectBlock = useEditorStore((state) => (state as any).addFormSelectBlock); const addFormCheckboxBlock = useEditorStore((state) => (state as any).addFormCheckboxBlock); const addFormRadioBlock = useEditorStore((state) => (state as any).addFormRadioBlock); const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection); const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection); const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection); const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection); const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection); const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection); const addBlogTemplateSection = useEditorStore((state) => state.addBlogTemplateSection); const addTeamTemplateSection = useEditorStore((state) => state.addTeamTemplateSection); const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection); // 버튼 핸들러를 useCallback으로 래핑해 불필요한 재생성을 줄인다. const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]); const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]); const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]); const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]); const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]); const handleAddList = useCallback(() => addListBlock(), [addListBlock]); const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]); const handleAddFormBlock = useCallback(() => addFormBlock(), [addFormBlock]); const handleAddFormInput = useCallback(() => addFormInputBlock(), [addFormInputBlock]); const handleAddFormSelect = useCallback(() => addFormSelectBlock(), [addFormSelectBlock]); const handleAddFormRadio = useCallback(() => addFormRadioBlock(), [addFormRadioBlock]); const handleAddFormCheckbox = useCallback(() => addFormCheckboxBlock(), [addFormCheckboxBlock]); const handleAddHeroTemplate = useCallback( () => addHeroTemplateSection(), [addHeroTemplateSection], ); const handleAddFeaturesTemplate = useCallback( () => addFeaturesTemplateSection(), [addFeaturesTemplateSection], ); const handleAddCtaTemplate = useCallback(() => addCtaTemplateSection(), [addCtaTemplateSection]); const handleAddFaqTemplate = useCallback(() => addFaqTemplateSection(), [addFaqTemplateSection]); const handleAddPricingTemplate = useCallback( () => addPricingTemplateSection(), [addPricingTemplateSection], ); const handleAddTestimonialsTemplate = useCallback( () => addTestimonialsTemplateSection(), [addTestimonialsTemplateSection], ); const handleAddBlogTemplate = useCallback(() => addBlogTemplateSection(), [addBlogTemplateSection]); const handleAddTeamTemplate = useCallback(() => addTeamTemplateSection(), [addTeamTemplateSection]); const handleAddFooterTemplate = useCallback( () => addFooterTemplateSection(), [addFooterTemplateSection], ); const [isBlocksOpen, setIsBlocksOpen] = useState(true); const [isFormsOpen, setIsFormsOpen] = useState(true); const [isTemplatesOpen, setIsTemplatesOpen] = useState(true); return ( ); }