refactor: map find > navigation (#68)

src/components/editor/elements/container.tsx

@@ -162,17 +162,16 @@ export default function Container({ element }: Props) {
           },
         });
         break;
-      case "map":
+      case "navigation":
         dispatch({
           type: "ADD_ELEMENT",
           payload: {
             containerId: id,
             elementDetails: {
-              type: "map",
+              type: "navigation",
               id: nanoid(),
-              name: "map",
+              name: "navigation",
               styles: {
-                color: "black",
                 ...containerDefaultStyles,
               },
               content: {

src/components/editor/elements/kakao-map.tsx

@@ -2,7 +2,7 @@ import { KakaoAddressProvider } from "~/components/editor/elements/kakao-map-con
 import KakaoMapElement from "~/components/editor/elements/kakao-map-element";
 
 import ElementWrapper from "~/components/editor/elements/element-wrapper";
-import MapShareComponents from "~/components/editor/elements/map-share";
+import NavigationElement from "~/components/editor/elements/navigation-element";
 import type { InferEditorElement } from "~/components/editor/type";
 
 type Props = {
@@ -13,7 +13,11 @@ export default function KakaoMap({ element }: Props) {
     <ElementWrapper element={element}>
       <KakaoAddressProvider>
         {element.content.isMapUse && <KakaoMapElement element={element} />}
-        {element.content.isShareUse && <MapShareComponents element={element} />}
+        {element.content.isShareUse && (
+          <NavigationElement
+            element={element as unknown as InferEditorElement<"navigation">}
+          />
+        )}
       </KakaoAddressProvider>
     </ElementWrapper>
   );

src/components/editor/elements/map-share.tsx → src/components/editor/elements/navigation-element.tsx

@@ -7,13 +7,11 @@ type MapType = "naver" | "kakao";
 type MapUrls = Record<MapType, string>;
 
 type Props = {
-  element: InferEditorElement<"kakaoMap">;
+  element: InferEditorElement<"navigation">;
 };
 
-const MapShareComponents = ({ element }: Props) => {
-  const { content } = element;
-  const address =
-    !Array.isArray(content) && content.address ? content.address : "";
+export default function NavigationElement({ element }: Props) {
+  const { address } = element.content;
 
   const openMap = (mapType: MapType, address: string) => {
     const mapUrls: MapUrls = {
@@ -47,19 +45,15 @@ const MapShareComponents = ({ element }: Props) => {
 
   return (
     <ElementWrapper element={element}>
-      <article className="flex gap-x-3">
-        <button onClick={() => openMap("naver", address)}>
-          <Image src="/naver-map.png" alt="naver-map" width={42} height={42} />
-        </button>
-        <button onClick={() => openMap("kakao", address)}>
-          <Image src="/kakao-map.png" alt="kakao-map" width={42} height={42} />
-        </button>
-        <button onClick={() => handleCopy(address)}>
-          <Image src="/copy.png" alt="copy" width={42} height={42} />
-        </button>
-      </article>
+      <button onClick={() => openMap("naver", address)}>
+        <Image src="/naver-map.png" alt="naver-map" width={42} height={42} />
+      </button>
+      <button onClick={() => openMap("kakao", address)}>
+        <Image src="/kakao-map.png" alt="kakao-map" width={42} height={42} />
+      </button>
+      <button onClick={() => handleCopy(address)}>
+        <Image src="/copy.png" alt="copy" width={42} height={42} />
+      </button>
     </ElementWrapper>
   );
-};
-
-export default MapShareComponents;
+}

src/components/editor/elements/recursive.tsx

@@ -3,6 +3,7 @@ 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 NavigationElement from "~/components/editor/elements/navigation-element";
 import Text from "~/components/editor/elements/text";
 import type { EditorElement } from "~/components/editor/type";
 
@@ -22,6 +23,8 @@ export default function Recursive({ element }: { element: EditorElement }) {
       return <ImageElement element={element} />;
     case "kakaoMap":
       return <KakaoMap element={element} />;
+    case "navigation":
+      return <NavigationElement element={element} />;
     case "logoBanner":
       return <LogoBannerElement element={element} />;
     default:

src/components/editor/placeholders.tsx

@@ -1,4 +1,10 @@
-import { BoxSelectIcon, ImageIcon, MapIcon, TypeIcon } from "lucide-react";
+import {
+  BoxSelectIcon,
+  ImageIcon,
+  MapIcon,
+  NavigationIcon,
+  TypeIcon,
+} from "lucide-react";
 import type { EditorElementType } from "~/components/editor/type";
 import { LogoTextIcon } from "~/components/ui/icons";
 import { cn } from "~/lib/utils";
@@ -46,14 +52,6 @@ export function TwoColumnsPlaceholder() {
   );
 }
 
-export function MapPlaceholder() {
-  return (
-    <Placeholder type="map">
-      <MapIcon size={40} className="text-muted-foreground" />
-    </Placeholder>
-  );
-}
-
 export function ContainerPlaceholder() {
   return (
     <Placeholder type="container">
@@ -70,6 +68,14 @@ export function ImagePlaceholder() {
   );
 }
 
+export function NavigationPlaceholder() {
+  return (
+    <Placeholder type="navigation">
+      <NavigationIcon size={40} className="text-muted-foreground" />
+    </Placeholder>
+  );
+}
+
 export function KakaoMapPlaceholder() {
   return (
     <Placeholder type="kakaoMap">

src/components/editor/sidebar-element-settings-tab/index.tsx

@@ -24,19 +24,12 @@ export default function SidebarElementSettingsTab(props: Props) {
       </SheetHeader>
 
       <div key={selectedElement.id}>
-        {selectedElement.type === "map" && (
-          <>
-            <MapSetting element={selectedElement} />
-            <LayoutSetting />
-          </>
-        )}
         {selectedElement.type === "kakaoMap" && (
           <>
             <KakaoMapSetting />
           </>
         )}
-
-        {selectedElement.type === "map" && (
+        {selectedElement.type === "navigation" && (
           <>
             <MapSetting element={selectedElement} />
             <LayoutSetting />

src/components/editor/sidebar-element-settings-tab/map-setting.tsx

@@ -4,7 +4,7 @@ import { useEditor } from "~/components/editor/provider";
 import type { InferEditorElement } from "~/components/editor/type";
 import { Input } from "~/components/ui/input";
 
-type Props = { element: InferEditorElement<"map"> };
+type Props = { element: InferEditorElement<"navigation"> };
 
 export default function MapSetting({ element }: Props) {
   const { dispatch } = useEditor();
@@ -15,7 +15,7 @@ export default function MapSetting({ element }: Props) {
       payload: {
         elementDetails: {
           ...element,
-          type: "map",
+          type: "navigation",
           content: {
             ...element.content,
             address: e.target.value,

src/components/editor/sidebar-elements-tab.tsx

@@ -5,6 +5,7 @@ import {
   ImagePlaceholder,
   KakaoMapPlaceholder,
   LogoBannerPlaceholder,
+  NavigationPlaceholder,
   TextPlaceholder,
   TwoColumnsPlaceholder,
 } from "~/components/editor/placeholders";
@@ -66,6 +67,12 @@ export default function SidebarElementsTab(props: Props) {
       Component: <KakaoMapPlaceholder />,
       group: "elements",
     },
+    {
+      id: "navigation",
+      label: "Navigation",
+      Component: <NavigationPlaceholder />,
+      group: "elements",
+    },
     {
       id: "logoBanner",
       label: "Logo Banner",

src/components/editor/type.ts

@@ -20,7 +20,7 @@ type EditorElementContentMap = {
     isMapUse: boolean;
     isShareUse: boolean;
   };
-  map: { address: string };
+  navigation: { address: string };
   blank: {};
   empty: {};
   logoBanner: {};