Merge remote-tracking branch 'origin/main'

# Conflicts: # src/components/editor/title-input.tsx
Nexters · Aug 17, 2024 · d6a2470 · d6a2470
2 parents 7b6b807 + eca0702
commit d6a2470
Show file tree

Hide file tree

Showing 22 changed files with 382 additions and 64 deletions.
diff --git a/src/app/(playground)/pg/editor/page.tsx b/src/app/(playground)/pg/editor/page.tsx
@@ -1,16 +1,33 @@
 import Editor from "~/components/editor";
+import { bodyElement } from "~/components/editor/constant";
 
 export default async function Page() {
   return (
     <Editor
       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
@@ -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<EditorConfig>;
   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
@@ -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
@@ -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
@@ -106,7 +106,10 @@ export default function ElementHelper() {
               style={{ height: layerStyle.height }}
               className="absolute right-0 top-0 z-10 w-[1px] bg-primary"
             />
-            <Badge className="absolute -left-[1px] -top-[26px] z-10">
+            <Badge
+              className="absolute -left-[1px] -top-[26px] z-10"
+              onClick={(e) => e.stopPropagation()}
+            >
               {element.name}
             </Badge>
             <div className="absolute -left-[28px] -top-[1px] z-10">

diff --git 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}
     </div>

diff --git a/src/components/editor/elements/logo-banner-element.tsx 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 (
+    <ElementWrapper
+      element={element}
+      className="flex items-center justify-center"
+    >
+      <LogoTextIcon />
+    </ElementWrapper>
+  );
+}
diff --git 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 <ImageElement element={element} />;
     case "kakaoMap":
       return <KakaoMap element={element} />;
+    case "logoBanner":
+      return <LogoBannerElement element={element} />;
     default:
       return null;
   }

diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx
@@ -46,6 +46,7 @@ export default function EditorMain() {
             <EyeOff />
           </Button>
         )}
+
         {Array.isArray(editor.data) &&
           editor.data.map((childElement) => (
             <Recursive key={childElement.id} element={childElement} />

diff --git 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() {
     >
       <aside className="flex items-center gap-6">
         <Button asChild variant="ghost" size="icon">
-          <Link href={editorConfig.backLink}>
+          <Link href={editor.config.backLink}>
             <ArrowLeftIcon />
           </Link>
         </Button>

diff --git a/src/components/editor/placeholders.tsx b/src/components/editor/placeholders.tsx
@@ -1,5 +1,6 @@
 import { BoxSelectIcon, ImageIcon, MapIcon, TypeIcon } from "lucide-react";
 import type { EditorElementType } from "~/components/editor/type";
+import { LogoTextIcon } from "~/components/ui/icons";
 import { cn } from "~/lib/utils";
 
 type PlaceholderProps = {
@@ -19,7 +20,7 @@ function Placeholder({ type, children, className }: PlaceholderProps) {
       draggable
       onDragStart={handleDragStart}
       className={cn(
-        "flex h-14 w-14 cursor-grab flex-row gap-1 rounded-lg bg-muted/70 p-2 active:cursor-grabbing",
+        "flex h-14 w-14 cursor-grab items-center justify-center gap-1 rounded-lg bg-muted/70 p-2 active:cursor-grabbing",
         className,
       )}
     >
@@ -84,3 +85,11 @@ export function BlankPlaceholder() {
     </Placeholder>
   );
 }
+
+export function LogoBannerPlaceholder() {
+  return (
+    <Placeholder type="logoBanner">
+      <LogoTextIcon className="h-8 text-muted-foreground" />
+    </Placeholder>
+  );
+}
diff --git a/src/components/editor/provider.tsx b/src/components/editor/provider.tsx
@@ -14,11 +14,9 @@ import type {
 
 export const EditorContext = createContext<{
   editor: Editor;
-  editorConfig: EditorConfig;
   dispatch: Dispatch<EditorAction>;
 }>({
   editor: initialEditor,
-  editorConfig: initialEditorConfig,
   dispatch: () => undefined,
 });
 
@@ -39,16 +37,14 @@ export default function EditorProvider({
   const [editor, dispatch] = useReducer(editorReducer, {
     ...initialEditor,
     data: editorData ?? initialEditor.data,
+    config: {
+      ...initialEditorConfig,
+      ...editorConfig,
+    },
   });
 
   return (
-    <EditorContext.Provider
-      value={{
-        editor,
-        dispatch,
-        editorConfig: { ...initialEditorConfig, ...editorConfig },
-      }}
-    >
+    <EditorContext.Provider value={{ editor, dispatch }}>
       {children}
     </EditorContext.Provider>
   );

diff --git a/src/components/editor/sidebar-element-settings-tab/index.tsx b/src/components/editor/sidebar-element-settings-tab/index.tsx
@@ -6,6 +6,7 @@ import BorderSetting from "~/components/editor/sidebar-element-settings-tab/bord
 import ImageSetting from "~/components/editor/sidebar-element-settings-tab/image-setting";
 import KakaoMapSetting from "~/components/editor/sidebar-element-settings-tab/kakao-map-setting";
 import LayoutSetting from "~/components/editor/sidebar-element-settings-tab/layout-setting";
+import LogoBannerSetting from "~/components/editor/sidebar-element-settings-tab/logo-banner-setting";
 import MapSetting from "~/components/editor/sidebar-element-settings-tab/map-setting";
 import TextSetting from "~/components/editor/sidebar-element-settings-tab/text-setting";
 import { SheetHeader, SheetTitle } from "~/components/ui/sheet";
@@ -54,7 +55,8 @@ export default function SidebarElementSettingsTab(props: Props) {
           </>
         )}
 
-        {(selectedElement.type === "container" ||
+        {(selectedElement.type === "__body" ||
+          selectedElement.type === "container" ||
           selectedElement.type === "2Col") && (
           <>
             <LayoutSetting />
@@ -68,6 +70,12 @@ export default function SidebarElementSettingsTab(props: Props) {
             <LayoutSetting />
           </>
         )}
+
+        {selectedElement.type === "logoBanner" && (
+          <>
+            <LogoBannerSetting />
+          </>
+        )}
       </div>
     </div>
   );