future9061 · future9061 · Nov 20, 2023 · Nov 23, 2023 · Nov 23, 2023 · Nov 23, 2023
diff --git a/mern_client/public/index.html b/mern_client/public/index.html
@@ -1,43 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <script type="text/javascript"
+    src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%REACT_APP_NAVER_MAPS_API_CLIENT_ID%"></script>
+  <title>React App</title>
+</head>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+
+</body>
+
+</html>
diff --git a/mern_client/src/atoms/info.ts b/mern_client/src/atoms/info.ts
@@ -0,0 +1,7 @@
+import { atom } from "jotai";
+import { Info } from "../types/info";
+
+//위치 데이터 전역으로 쓰기 위해
+export const infosAtom = atom<Info[] | null>(null);
+//선택한 마커의 데이터 가져와서 저장
+export const selectInfoAtom = atom<Info | null>(null);
diff --git a/mern_client/src/atoms/map.ts b/mern_client/src/atoms/map.ts
@@ -0,0 +1,4 @@
+import React from "react";
+import { atom } from "jotai";
+
+export const mapAtom = atom<naver.maps.Map | null>(null);
diff --git a/mern_client/src/atoms/search.ts b/mern_client/src/atoms/search.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const selectAtom = atom<boolean>(false);
diff --git a/mern_client/src/components/MapContainer.tsx b/mern_client/src/components/MapContainer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Map from "./common/Map/index";
+import { useSetAtom } from "jotai";
+import { mapAtom } from "../atoms/map";
+import { selectInfoAtom } from "../atoms/info";
+
+function MapContainer() {
+  const setMap = useSetAtom(mapAtom);
+  const setSelectInfo = useSetAtom(selectInfoAtom);
+  const initMap = (map: naver.maps.Map) => {
+    setMap(map);
+    naver.maps.Event.addListener(map, "click", () => {
+      setSelectInfo(null);
+    });
+  };
+
+  return <Map width="100vw" height="100vh" initMap={initMap} />;
+}
+
+export default MapContainer;
diff --git a/mern_client/src/components/MarkersContainer.tsx b/mern_client/src/components/MarkersContainer.tsx
@@ -0,0 +1,46 @@
+import { useAtom, useAtomValue } from "jotai";
+import React from "react";
+import { mapAtom } from "../atoms/map";
+import { infosAtom, selectInfoAtom } from "../atoms/info";
+
+import Marker from "./common/Marker";
+import { Info } from "../types/info";
+import InfoWindow from "./common/infoWindow";
+
+function MarkersContainer() {
+  const map = useAtomValue(mapAtom);
+  const infos = useAtomValue(infosAtom);
+  const [selectInfo, setSelectInfo] = useAtom(selectInfoAtom);
+
+  if (!map || !infos) return null;
+
+  return (
+    <>
+      {infos.map((info: Info) => (
+        <Marker
+          key={info.id}
+          map={map}
+          position={info.position}
+          content={"<div class='marker'>"}
+          onClick={() => {
+            setSelectInfo(info);
+          }}
+        />
+      ))}
+      {selectInfo && (
+        <Marker
+          key={selectInfo.id}
+          map={map}
+          position={selectInfo.position}
+          content={"<div class='marker select'>"}
+          onClick={() => {
+            setSelectInfo(null);
+          }}
+        />
+      )}
+      <InfoWindow map={map} selectInfo={selectInfo} />
+    </>
+  );
+}
+
+export default MarkersContainer;
diff --git a/mern_client/src/components/Navigation.tsx b/mern_client/src/components/Navigation.tsx
@@ -1,22 +1,63 @@
-import React from "react";
+import React, { useCallback } from "react";
 import ShadowBox from "./common/ShadowBox";
 import Button from "./common/Button";
 import Span from "./common/Span";
 import Divider from "./common/Divider";
 import Block from "./common/Block";
 import { GoPlus } from "react-icons/go";
+import { useAtom } from "jotai";
+import { selectAtom } from "../atoms/search";
+import { FaArrowLeft, FaSearch } from "react-icons/fa";
+import Input from "./common/Input";
+import useInput from "../hooks/useInput";
+
+interface NavigationProps {
+  type?: "home" | "upload";
+}
+
+function Navigation({ type = "home" }) {
+  const [select, setSelect] = useAtom(selectAtom);
+  const { value, onChange } = useInput("");
+
+  const onChangeSelect = useCallback(() => {
+    setSelect(!select);
+  }, [select, setSelect]);
+
+  const onSubmit = useCallback(() => {
+    console.log(value);
+  }, [value]);
 
-function Navigation() {
   return (
     <ShadowBox>
-      <Button type="link" url="/">
-        <Span size="title">Map</Span>
-      </Button>
+      {type === "upload" && select ? (
+        <Button onClick={onChangeSelect}>
+          <FaArrowLeft size={"20px"} />
+        </Button>
+      ) : (
+        <Button type="link" url="/">
+          <Span size="title">Map</Span>
+        </Button>
+      )}
+
       <Divider />
-      <Block height="28px" />
-      <Button>
-        <GoPlus size={"20px"} />
-      </Button>
+      {select ? (
+        <Input value={value} onChange={onChange} onSubmit={onSubmit} />
+      ) : (
+        <Block
+          height="28px"
+          onClick={type === "upload" ? onChangeSelect : undefined}
+        />
+      )}
+
+      {type === "upload" ? (
+        <Button onClick={select ? onSubmit : onChangeSelect}>
+          <FaSearch size={"20px"} />
+        </Button>
+      ) : (
+        <Button type="link" url="upload">
+          <GoPlus size={"20px"} />
+        </Button>
+      )}
     </ShadowBox>
   );
 }

diff --git a/mern_client/src/components/common/Block.tsx b/mern_client/src/components/common/Block.tsx
@@ -11,7 +11,6 @@ const StyledBlock = styled.div<BlockProps>`
   height: ${(props) => props.height};
   cursor: ${(props) => props.onClick && "pointer"};
 `;
-
 function Block({ height, onClick }: BlockProps) {
   return <StyledBlock height={height} onClick={onClick} />;
 }

diff --git a/mern_client/src/components/common/Button.tsx b/mern_client/src/components/common/Button.tsx
@@ -20,6 +20,7 @@ const StyledButton = styled.button<ButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
+
   background: none;
   padding: 0;
   cursor: pointer;

diff --git a/mern_client/src/components/common/Input.tsx b/mern_client/src/components/common/Input.tsx
@@ -1,12 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 
-//children
-//name
-//value
-//onChange
-//onSubmit
-
 interface InputProps {
   children?: React.ReactNode;
   name?: string;

diff --git a/mern_client/src/components/common/Map/index.tsx b/mern_client/src/components/common/Map/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useEffect } from "react";
+
+interface MapProps {
+  width: string;
+  height: string;
+  initMap?: (map: naver.maps.Map) => void;
+}
+
+function Map({ width, height, initMap }: MapProps) {
+  useEffect(() => {
+    const mapOptions = {
+      center: new naver.maps.LatLng(37.3595704, 127.105399),
+      zoom: 10,
+    };
+
+    const map = new naver.maps.Map("map", mapOptions);
+
+    if (initMap) {
+      initMap(map);
+    }
+  }, []);
+
+  return <div id="map" style={{ width, height }}></div>;
+}
+
+export default Map;
diff --git a/mern_client/src/components/common/Marker/Marker.css b/mern_client/src/components/common/Marker/Marker.css
@@ -0,0 +1,11 @@
+.marker {
+  width: 20px;
+  height: 20px;
+  background: red;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+}
+
+.marker.select {
+  background: blue;
+}
diff --git a/mern_client/src/components/common/Marker/index.tsx b/mern_client/src/components/common/Marker/index.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import "./Marker.css";
+
+interface MarkerProps {
+  map: naver.maps.Map;
+  position: {
+    lat: number;
+    lng: number;
+  };
+  content: string;
+  onClick?: () => void;
+}
+
+function Marker({ map, position, content, onClick }: MarkerProps) {
+  useEffect(() => {
+    let marker: naver.maps.Marker | null = null;
+
+    if (map) {
+      marker = new naver.maps.Marker({
+        map,
+        position: new naver.maps.LatLng(position),
+        icon: { content },
+      });
+    }
+
+    if (onClick) {
+      naver.maps.Event.addListener(marker, "click", onClick);
+      map.panTo(position);
+    }
+
+    return () => {
+      marker?.setMap(null);
+    };
+  }, [map]);
+
+  return null;
+}
+
+export default Marker;
diff --git a/mern_client/src/components/common/Span.tsx b/mern_client/src/components/common/Span.tsx
@@ -13,6 +13,7 @@ interface SpanProps {
 
 const StyledSpan = styled.span<SpanProps>`
   color: ${(props) => props.color || "black"};
+
   &.small {
     font-size: 0.8rem;
   }
@@ -26,7 +27,6 @@ const StyledSpan = styled.span<SpanProps>`
     font-weight: bold;
   }
 `;
-
 function Span({ children, size = "normal", color }: SpanProps) {
   return (
     <StyledSpan className={size} color={color}>

diff --git a/mern_client/src/components/common/infoWindow/InfoWindow.css b/mern_client/src/components/common/infoWindow/InfoWindow.css
@@ -0,0 +1,29 @@
+.infoBox {
+  padding: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background: #ffffff;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+
+.infoPlaceName {
+  font-size: 14px;
+  font-weight: bolder;
+}
+
+.infoAddressName {
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.infoSubmit {
+  font-size: 14px;
+  text-align: center;
+  font-weight: bold;
+  cursor: pointer;
+  color: #ffffff;
+  background: #0f2cc5;
+  margin-top: 6px;
+  padding: 6px 0;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from "jotai";

		export const selectAtom = atom<boolean>(false);