Add kakao maps SDK to the project for displaying project locations on…

… a map.
TeamSynergyy · Oct 19, 2023 · 0947537 · 0947537
1 parent aadf81e
commit 0947537
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -9,5 +9,9 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_API_KEY%&libraries=services"
+    ></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-kakao-maps-sdk": "^1.1.21",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "vite-plugin-svgr": "^2.4.0"
@@ -40,6 +41,7 @@
     "eslint": "^8.51.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
+    "kakao.maps.d.ts": "^0.1.39",
     "msw": "^1.3.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/api.ts b/src/app/api.ts
@@ -258,13 +258,7 @@ export const api = createApi({
     // Project
     createProject: build.mutation<
       void,
-      {
-        name: string;
-        content: string;
-        field: string;
-        startAt: string;
-        endAt: string;
-      }
+      Omit<Project, "projectId" | "likes" | "teamUserIds" | "leaderId">
     >({
       query: (project) => ({
         url: "/projects",

diff --git a/src/components/project/MapInfo.tsx b/src/components/project/MapInfo.tsx
@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import { Map, MapMarker, MapTypeControl } from "react-kakao-maps-sdk";
+
+interface MapInfoProps {
+  coord: [number, number];
+  setCoord: (coord: [number, number]) => void;
+}
+
+export default function MapInfo({ coord, setCoord }: MapInfoProps) {
+  const mapRef = useRef<kakao.maps.Map>(null);
+
+  const handleStop = () => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    const center = map.getCenter();
+
+    setCoord([center.getLat(), center.getLng()]);
+  };
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "20rem" }}>
+      <Map
+        center={{ lat: 37.63346463214003, lng: 127.07804230975643 }}
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
+        level={3}
+        onDragEnd={handleStop}
+        onZoomChanged={handleStop}
+        ref={mapRef}
+      >
+        <MapTypeControl position={"TOPRIGHT"} />
+        {coord && <MapMarker position={{ lat: coord[0], lng: coord[1] }} />}
+      </Map>
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          width: "0.5rem",
+          height: "0.5rem",
+          backgroundColor: "#228BF9",
+          borderRadius: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: 2,
+        }}
+      ></div>
+    </div>
+  );
+}
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -151,6 +151,8 @@ const projects = [
     likes: 0,
     teamUserIds: ["0", "1"],
     leaderId: "0",
+    coordLat: 37.6294393535107,
+    coordLng: 127.08155702932217,
     usersCount: 2,
     applicants: ["2", "3"],
   },
@@ -164,6 +166,8 @@ const projects = [
     likes: 21,
     teamUserIds: ["0", "2", "3"],
     leaderId: "2",
+    coordLat: 37.63538335258811,
+    coordLng: 127.07861220492845,
     usersCount: 3,
     applicants: [],
   },
@@ -177,6 +181,8 @@ const projects = [
     likes: 21,
     teamUserIds: ["2", "3"],
     leaderId: "3",
+    coordLat: 37.63089076860488,
+    coordLng: 127.08035068598026,
     usersCount: 2,
     applicants: [],
   },
@@ -527,7 +533,8 @@ export const handlers = [
 
   // Project
   rest.post("/api/v1/projects", async (req, res, ctx) => {
-    const { name, content, field, startAt, endAt } = await req.json();
+    const { name, content, field, startAt, endAt, coordLat, coordLng } =
+      await req.json();
     if (name === "error") return res(ctx.status(400));
 
     const projectId = projects.at(-1)?.projectId
@@ -543,6 +550,8 @@ export const handlers = [
       likes: 0,
       teamUserIds: ["0"],
       leaderId: "0",
+      coordLat,
+      coordLng,
       usersCount: 1,
       applicants: [],
     });

diff --git a/src/pages/NewProject.tsx b/src/pages/NewProject.tsx
@@ -7,6 +7,7 @@ import {
   Text,
   MultiSelect,
   Flex,
+  Checkbox,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
@@ -15,6 +16,8 @@ import { useNavigate } from "react-router-dom";
 import { DateInput } from "@mantine/dates";
 import dayjs from "dayjs";
 import usePage from "hooks/usePage";
+import MapInfo from "components/project/MapInfo";
+import { useState } from "react";
 
 const data = [
   "기계자동차",
@@ -32,19 +35,29 @@ export default function NewProject() {
   const { initPage } = usePage();
   const navigate = useNavigate();
   const [opened, { open, close }] = useDisclosure(false);
+  const [coord, setCoord] = useState<[number, number]>([0, 0]);
   const form = useForm({
     initialValues: {
       name: "",
       content: "",
       field: [],
       startAt: "",
       endAt: "",
+      coordLat: 0,
+      coordLng: 0,
+      hasLocation: true,
     },
     validate: {
       endAt: (endAt, values) =>
         dayjs(values.startAt) > dayjs(endAt)
           ? "시작일이 종료일보다 늦습니다."
           : null,
+
+      hasLocation: (hasLocation, values) => {
+        if (hasLocation) {
+          return coord[0] === 0 ? "지도를 이동해 위치를 지정해주세요." : null;
+        }
+      },
     },
   });
 
@@ -76,6 +89,8 @@ export default function NewProject() {
               startAt,
               endAt,
               field,
+              coordLat: coord[0],
+              coordLng: coord[1],
             }).unwrap();
             initPage("recentProject");
             navigate(`/home/recent/project`);
@@ -122,6 +137,15 @@ export default function NewProject() {
           {...form.getInputProps("endAt")}
         />
 
+        <Checkbox
+          my={10}
+          label="진행 장소"
+          {...form.getInputProps("hasLocation", { type: "checkbox" })}
+        />
+        <div hidden={!form.values.hasLocation}>
+          <MapInfo coord={coord} setCoord={setCoord} />
+        </div>
+
         <Group position="right" mt="md">
           <Button type="submit">Submit</Button>
         </Group>

diff --git a/src/pages/ProjectDetail.tsx b/src/pages/ProjectDetail.tsx
@@ -25,6 +25,7 @@ import { useDisclosure } from "@mantine/hooks";
 import ProjectLike from "components/project/ProjectLike";
 import dayjs from "dayjs";
 import ApplicantBar from "components/user/ApplicantBar";
+import { StaticMap } from "react-kakao-maps-sdk";
 
 const avatars = [
   "https://avatars.githubusercontent.com/u/10353856?s=460&u=88394dfd67727327c1f7670a1764dc38a8a24831&v=4",
@@ -56,6 +57,11 @@ export default function ProjectDetail() {
   const startAt = dayjs(project?.startAt);
   const dday = Math.floor(today.diff(startAt, "day", true));
 
+  const staticMapCoords = {
+    lat: project?.coordLat || 0,
+    lng: project?.coordLng || 0,
+  };
+
   const handleDelete = async () => {
     try {
       await deleteProject({ id }).unwrap();
@@ -139,6 +145,35 @@ export default function ProjectDetail() {
           </Avatar.Group>
         </Group>
 
+        {staticMapCoords.lat !== 0 && (
+          <>
+            <Text c="dimmed" fz="sm" mt="md">
+              진행 장소
+            </Text>
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%", // This maintains a 1:1 aspect ratio
+                overflow: "hidden",
+              }}
+            >
+              <StaticMap
+                center={staticMapCoords}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                }}
+                marker={{ position: staticMapCoords }}
+                level={4}
+              />
+            </div>
+          </>
+        )}
+
         {!isTeamMember && (
           <Flex justify="right" mt={10}>
             <Button onClick={handleApply}>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -20,6 +20,8 @@ interface Project {
   likes: number;
   teamUserIds: string[];
   leaderId: string;
+  coordLat: number;
+  coordLng: number;
 }
 
 interface User {

diff --git a/tsconfig.json b/tsconfig.json
@@ -23,7 +23,7 @@
     "baseUrl": "./src",
 
     /* Types */
-    "types": ["vite-plugin-svgr/client"]
+    "types": ["vite-plugin-svgr/client", "kakao.maps.d.ts"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]