diff --git a/src/app/(playground)/pg/editor/page.tsx b/src/app/(playground)/pg/editor/page.tsx index f24e11e..aea0286 100644 --- a/src/app/(playground)/pg/editor/page.tsx +++ b/src/app/(playground)/pg/editor/page.tsx @@ -1,4 +1,5 @@ import Editor from "~/components/editor"; +import { bodyElement } from "~/components/editor/constant"; export default async function Page() { return ( @@ -6,11 +7,27 @@ export default async function Page() { editorConfig={{ backLink: "/pg" }} editorData={[ { - id: "__body", - type: "__body", - name: "Body", - styles: {}, + ...bodyElement, content: [ + { + id: "logoBanner", + name: "Logo Banner", + type: "logoBanner", + styles: { + height: 69, + color: "#22222250", + }, + content: {}, + }, + { + id: "blank", + name: "Blank", + type: "blank", + styles: { + height: 32, + }, + content: {}, + }, { id: "container", name: "Container", diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts index d8eab16..c5621c4 100644 --- a/src/components/editor/action.ts +++ b/src/components/editor/action.ts @@ -2,6 +2,7 @@ import { emptyElement } from "~/components/editor/constant"; import type { DeviceType, Editor, + EditorConfig, EditorElement, EditorTabTypeValue, } from "~/components/editor/type"; @@ -30,7 +31,6 @@ type EditorActionMap = { UPDATE_ELEMENT: { elementDetails: EditorElement; }; - UPDATE_ELEMENT_STYLE: React.CSSProperties; DELETE_ELEMENT: { elementDetails: EditorElement; @@ -44,6 +44,7 @@ type EditorActionMap = { CHANGE_DEVICE: { device: DeviceType; }; + UPDATE_CONFIG: Partial; TOGGLE_PREVIEW_MODE: undefined; REDO: undefined; UNDO: undefined; @@ -301,9 +302,9 @@ const actionHandlers: { }, CHANGE_CLICKED_ELEMENT: (editor, payload) => { - const isSelected = isValidSelectEditorElement(payload.elementDetails); + const isValidSelect = isValidSelectEditorElement(payload.elementDetails); - const newTabValue = isSelected + const newTabValue = isValidSelect ? "Element Settings" : editor.state.currentTabValue === "Element Settings" ? "Elements" @@ -339,6 +340,16 @@ const actionHandlers: { }; }, + UPDATE_CONFIG: (editor, payload) => { + return { + ...editor, + config: { + ...editor.config, + ...payload, + }, + }; + }, + TOGGLE_PREVIEW_MODE: (editor) => { return { ...editor, diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts index e278d4a..8a6ad93 100644 --- a/src/components/editor/constant.ts +++ b/src/components/editor/constant.ts @@ -48,15 +48,18 @@ export const emptyElement = { type: "empty", } satisfies EditorElement; -export const initialEditorData: EditorData = [ - { - content: [], - id: "__body", - name: "Body", - styles: {}, - type: "__body", +export const bodyElement = { + content: [], + id: "__body", + name: "Body", + styles: { + paddingLeft: 28, + paddingRight: 28, }, -]; + type: "__body", +} satisfies EditorElement; + +export const initialEditorData: EditorData = [bodyElement]; export const initialEditorState: EditorState = { selectedElement: emptyElement, @@ -70,17 +73,20 @@ export const initialEditorHistory: EditorHistory = { currentIndex: 0, }; -export const initialEditor: Editor = { - state: initialEditorState, - history: initialEditorHistory, - data: initialEditorData, -}; - const tempId = nanoid(8); export const initialEditorConfig: EditorConfig = { backLink: "./", invitationId: tempId, invitationTitle: "제목 없음", + invitationDesc: "여기를 눌러 링크를 확인하세요.", + invitationThumbnail: "", invitationSubdomain: tempId, }; + +export const initialEditor: Editor = { + state: initialEditorState, + history: initialEditorHistory, + data: initialEditorData, + config: initialEditorConfig, +}; diff --git a/src/components/editor/elements/container.tsx b/src/components/editor/elements/container.tsx index 919e14f..67f94ef 100644 --- a/src/components/editor/elements/container.tsx +++ b/src/components/editor/elements/container.tsx @@ -182,6 +182,24 @@ export default function Container({ element }: Props) { }, }); break; + case "logoBanner": + dispatch({ + type: "ADD_ELEMENT", + payload: { + containerId: id, + elementDetails: { + type: "logoBanner", + id: nanoid(), + name: "logoBanner", + styles: { + height: 69, + color: "#22222250", + }, + content: {}, + }, + }, + }); + break; } }; diff --git a/src/components/editor/elements/element-helper.tsx b/src/components/editor/elements/element-helper.tsx index 89ef891..228e88f 100644 --- a/src/components/editor/elements/element-helper.tsx +++ b/src/components/editor/elements/element-helper.tsx @@ -106,7 +106,10 @@ export default function ElementHelper() { style={{ height: layerStyle.height }} className="absolute right-0 top-0 z-10 w-[1px] bg-primary" /> - + e.stopPropagation()} + > {element.name}
diff --git a/src/components/editor/elements/element-wrapper.tsx b/src/components/editor/elements/element-wrapper.tsx index 9e5114c..5f6786d 100644 --- a/src/components/editor/elements/element-wrapper.tsx +++ b/src/components/editor/elements/element-wrapper.tsx @@ -13,7 +13,6 @@ export default function ElementWrapper({ ...props }: Props) { const { editor, dispatch } = useEditor(); - const isRoot = element.type === "__body"; const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -36,7 +35,7 @@ export default function ElementWrapper({ !editor.state.isPreviewMode && "ring-border hover:ring-1", className, )} - onClick={(e) => !isRoot && handleClick(e)} + onClick={handleClick} > {children}
diff --git a/src/components/editor/elements/logo-banner-element.tsx b/src/components/editor/elements/logo-banner-element.tsx new file mode 100644 index 0000000..403f719 --- /dev/null +++ b/src/components/editor/elements/logo-banner-element.tsx @@ -0,0 +1,20 @@ +"use client"; + +import ElementWrapper from "~/components/editor/elements/element-wrapper"; +import type { InferEditorElement } from "~/components/editor/type"; +import { LogoTextIcon } from "~/components/ui/icons"; + +type Props = { + element: InferEditorElement<"logoBanner">; +}; + +export default function LogoBannerElement({ element }: Props) { + return ( + + + + ); +} diff --git a/src/components/editor/elements/recursive.tsx b/src/components/editor/elements/recursive.tsx index e5eb2da..ecfbf8c 100644 --- a/src/components/editor/elements/recursive.tsx +++ b/src/components/editor/elements/recursive.tsx @@ -2,6 +2,7 @@ import BlankElement from "~/components/editor/elements/blank-element"; import Container from "~/components/editor/elements/container"; import ImageElement from "~/components/editor/elements/image-element"; import KakaoMap from "~/components/editor/elements/kakao-map"; +import LogoBannerElement from "~/components/editor/elements/logo-banner-element"; import Text from "~/components/editor/elements/text"; import type { EditorElement } from "~/components/editor/type"; @@ -21,6 +22,8 @@ export default function Recursive({ element }: { element: EditorElement }) { return ; case "kakaoMap": return ; + case "logoBanner": + return ; default: return null; } diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx index c0d89f7..855259b 100644 --- a/src/components/editor/main.tsx +++ b/src/components/editor/main.tsx @@ -46,6 +46,7 @@ export default function EditorMain() { )} + {Array.isArray(editor.data) && editor.data.map((childElement) => ( diff --git a/src/components/editor/navigation.tsx b/src/components/editor/navigation.tsx index 1125d61..3bbc77e 100644 --- a/src/components/editor/navigation.tsx +++ b/src/components/editor/navigation.tsx @@ -32,7 +32,7 @@ import { updateInvitation } from "~/lib/db/schema/invitations.query"; import { cn } from "~/lib/utils"; export default function EditorNavigation() { - const { editor, editorConfig, dispatch } = useEditor(); + const { editor, dispatch } = useEditor(); const { openDialog } = useAlertDialogStore(); const params = useParams(); const subDomain = params.subdomain; @@ -83,7 +83,7 @@ export default function EditorNavigation() { >