merge: #154 from modorie/feat/kakaomap

[Feat] Map 컴포넌트 및 테스트 코드 구현

Author: seokzin

components/Map/Map.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react'
+
+import Map from './Map'
+import type { MapProps } from './Map.types'
+
+export default {
+  title: 'Components/Map',
+  component: Map,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta
+
+export const Default: Story<MapProps> = (args) => {
+  return <Map {...args} />
+}
+
+Default.args = {
+  latitude: 33.450701,
+  longitude: 126.570667,
+  level: 3,
+}

components/Map/Map.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const MapContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+`

components/Map/Map.test.ts

@@ -0,0 +1,7 @@
+import Map from './Map'
+
+describe('Map', () => {
+  it('should be defined', () => {
+    expect(Map).toBeDefined()
+  })
+})

components/Map/Map.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+
+import { MapContainer } from './Map.styled'
+import { MapProps } from './Map.types'
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    kakao: any
+  }
+}
+
+const Map = ({ latitude, longitude, level }: MapProps) => {
+  useEffect(() => {
+    const mapScript = document.createElement('script')
+    mapScript.async = true
+    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&autoload=false`
+    document.head.appendChild(mapScript)
+
+    mapScript.onload = () => {
+      window.kakao.maps.load(() => {
+        const container = document.getElementById('map')
+        const options = {
+          center: new window.kakao.maps.LatLng(latitude, longitude),
+          level,
+        }
+
+        const map = new window.kakao.maps.Map(container, options)
+        const marker = new window.kakao.maps.Marker({
+          position: new window.kakao.maps.LatLng(latitude, longitude),
+        })
+        marker.setMap(map)
+      })
+    }
+  }, [latitude, longitude, level])
+
+  return <MapContainer id="map" />
+}
+
+export default Map

components/Map/Map.types.ts

@@ -0,0 +1,7 @@
+import { StandardAttrProps } from '@/types/ComponentProps'
+
+export interface MapProps extends StandardAttrProps {
+  latitude: number
+  longitude: number
+  level: number
+}

components/Map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map'

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from 'next'
 
-const nextConfig = {
-  webpack: (config: NextConfig) => {
+const nextConfig: NextConfig = {
+  webpack: (config) => {
     config.module.rules.push({
       test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
       loader: 'file-loader',

package.json

@@ -17,10 +17,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.7.1",
     "file-loader": "^6.2.0",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "recoil": "^0.7.5",
     "styled-components": "^5.3.5",
     "ts-node": "^10.9.1"
   },

tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "baseUrl": ".",
     "paths": {

yarn.lock

@@ -2788,6 +2788,19 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/[email protected]":
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.7.1.tgz#e732da7d0a4f31b4caa806099fc599617753d451"
+  integrity sha512-BzFI4KdiklxfUUgNiO6E4XsSwaX5NscuIhP7aqWbS8Hqik1KohfvO+SXpftSZHOyzm0+XpycRsip/QEs3Hx3AA==
+
+"@tanstack/react-query@^4.7.1":
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.7.1.tgz#ff7d58e113b735c231138f9b9be828e1730923c4"
+  integrity sha512-/3PBXuvdlvUbSv5eqgkda4VAN14t+rpDop9LnZmEmIMW8ARrbW7Rt6PYTya33JGaeo6XoztRzEH8TaY5S+neNQ==
+  dependencies:
+    "@tanstack/query-core" "4.7.1"
+    use-sync-external-store "^1.2.0"
+
 "@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0":
   version "8.18.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.18.1.tgz#80f91be02bc171fe5a3a7003f88207be31ac2cf3"
@@ -6972,6 +6985,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@@ -10602,6 +10620,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.5.tgz#9a33a03350cfd99e08bdd5b73bfc8b8b9ee751b9"
+  integrity sha512-GVShsj5+M/2GULWBs5WBJGcsNis/d3YvDiaKjYh3mLKXftjtmk9kfaQ8jwjoIXySCwn8/RhgJ4Sshwgzj2UpFA==
+  dependencies:
+    hamt_plus "1.0.2"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -12403,7 +12428,7 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-[email protected]:
+[email protected], use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==