inv-77 사이드바 > 선택된 엘리먼트 설정 세팅 (#27)

* refactor: rename sidebar-elements-tab * feat: 문구 수정 * feat: 초대장 설정 설명 문구 적용 * refactor: split sidebar settings tab with element settings tab * feat: show sidebar while select element * feat: blur element on click playground * feat: focus on click other element * feat: use editor state handle tab value * refactor: sheet header inside tab * feat: util isValidSelectEditorElement * refactor: use tab constant * feat: edit element advance mode * feat: design filtering
Nexters · Aug 8, 2024 · 6f65dbd · 6f65dbd
1 parent abae42a
commit 6f65dbd
Show file tree

Hide file tree

Showing 10 changed files with 725 additions and 628 deletions.
diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
@@ -1,12 +1,15 @@
 import {
+  emptyElement,
   initialEditor,
   initialEditorState,
 } from "~/components/editor/constant";
 import type {
   DeviceType,
   Editor,
   EditorElement,
+  EditorTabTypeValue,
 } from "~/components/editor/type";
+import { isValidSelectEditorElement } from "~/components/editor/util";
 
 export type EditorAction =
   | {
@@ -31,15 +34,13 @@ export type EditorAction =
   | {
       type: "CHANGE_CLICKED_ELEMENT";
       payload: {
-        elementDetails?:
-          | EditorElement
-          | {
-              id: "";
-              content: [];
-              name: "";
-              styles: {};
-              type: null;
-            };
+        elementDetails?: EditorElement;
+      };
+    }
+  | {
+      type: "CHANGE_CURRENT_TAB_VALUE";
+      payload: {
+        value: EditorTabTypeValue;
       };
     }
   | {
@@ -219,17 +220,20 @@ export const editorReducer = (
       return deletedState;
 
     case "CHANGE_CLICKED_ELEMENT":
-      const clickedState = {
+      const isSelected = isValidSelectEditorElement(
+        action.payload.elementDetails,
+      );
+
+      const clickedState: Editor = {
         ...editor,
         state: {
           ...editor.state,
-          selectedElement: action.payload.elementDetails || {
-            id: "",
-            content: [],
-            name: "",
-            styles: {},
-            type: null,
-          },
+          selectedElement: action.payload.elementDetails || emptyElement,
+          currentTabValue: isSelected
+            ? "Element Settings"
+            : editor.state.currentTabValue === "Element Settings"
+              ? "Elements"
+              : editor.state.currentTabValue,
         },
         history: {
           ...editor.history,
@@ -241,6 +245,16 @@ export const editorReducer = (
         },
       };
       return clickedState;
+
+    case "CHANGE_CURRENT_TAB_VALUE":
+      return {
+        ...editor,
+        state: {
+          ...editor.state,
+          currentTabValue: action.payload.value,
+        },
+      };
+
     case "CHANGE_DEVICE":
       const changedDeviceState: Editor = {
         ...editor,

diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts
@@ -8,6 +8,20 @@ export const defaultStyles: React.CSSProperties = {
   opacity: "100%",
 };
 
+export const editorTabValue = {
+  ELEMENTS: "Elements",
+  SETTINGS: "Settings",
+  ELEMENT_SETTINGS: "Element Settings",
+} as const;
+
+export const emptyElement = {
+  id: "",
+  content: [],
+  name: "",
+  styles: {},
+  type: null,
+};
+
 export const initialEditorState: EditorState = {
   elements: [
     {
@@ -18,13 +32,8 @@ export const initialEditorState: EditorState = {
       type: "__body",
     },
   ],
-  selectedElement: {
-    id: "",
-    content: [],
-    name: "",
-    styles: {},
-    type: null,
-  },
+  selectedElement: emptyElement,
+  currentTabValue: editorTabValue.ELEMENTS,
   device: "Mobile",
   isPreviewMode: false,
   funnelPageId: "",

diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
@@ -10,9 +10,7 @@ export default function Editor(props: EditorProviderProps) {
     <EditorProvider {...props}>
       <div className="fixed bottom-0 left-0 right-0 top-0 z-[20] flex flex-col overflow-hidden bg-secondary">
         <EditorNavigation />
-        <div className="flex flex-1 items-center justify-center">
-          <EditorMain />
-        </div>
+        <EditorMain />
         <EditorSidebar />
       </div>
     </EditorProvider>

diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx
@@ -22,29 +22,34 @@ export default function EditorMain() {
 
   return (
     <div
-      className={cn(
-        "ml-[10px] mr-[392px] animate-zoom-in rounded-md bg-background transition-all",
-        editor.state.isPreviewMode && "m-0 overflow-hidden p-0",
-        editor.state.device === "Desktop" && "h-full w-full",
-        editor.state.device === "Tablet" && "h-full w-[850px]",
-        editor.state.device === "Mobile" && "h-[800px] w-[420px]",
-      )}
+      className="flex flex-1 items-center justify-center"
       onClick={handleClick}
     >
-      {editor.state.isPreviewMode && (
-        <Button
-          variant={"ghost"}
-          size={"icon"}
-          className="fixed left-0 top-0 z-[100] h-6 w-6 p-[2px]"
-          onClick={handleUnpreview}
-        >
-          <EyeOff />
-        </Button>
-      )}
-      {Array.isArray(editor.state.elements) &&
-        editor.state.elements.map((childElement) => (
-          <Recursive key={childElement.id} element={childElement} />
-        ))}
+      <div
+        id="editor-main"
+        className={cn(
+          "ml-[10px] mr-[392px] animate-zoom-in rounded-md bg-background transition-all",
+          editor.state.isPreviewMode && "m-0 overflow-hidden p-0",
+          editor.state.device === "Desktop" && "h-full w-full",
+          editor.state.device === "Tablet" && "h-full w-[850px]",
+          editor.state.device === "Mobile" && "h-[800px] w-[420px]",
+        )}
+      >
+        {editor.state.isPreviewMode && (
+          <Button
+            variant={"ghost"}
+            size={"icon"}
+            className="fixed left-0 top-0 z-[100] h-6 w-6 p-[2px]"
+            onClick={handleUnpreview}
+          >
+            <EyeOff />
+          </Button>
+        )}
+        {Array.isArray(editor.state.elements) &&
+          editor.state.elements.map((childElement) => (
+            <Recursive key={childElement.id} element={childElement} />
+          ))}
+      </div>
     </div>
   );
 }