Nexters · RookieAND · Jan 18, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
diff --git a/.env.template b/.env.template
@@ -0,0 +1 @@
+VITE_TMAP_APP_KEY=
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

diff --git a/index.html b/index.html
@@ -1,13 +1,14 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>여행 지도 계획 플래너, 어디 (Audy)</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>여행 지도 계획 플래너, 어디 (Audy)</title>
+        <script src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&appKey=%VITE_TMAP_APP_KEY%"></script>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@tanstack/react-query-devtools": "^5.17.10",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.11.5",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,57 @@
-import { Route, Routes } from 'react-router-dom';
+import { useState } from 'react';
 
-import LoginPage from './pages/LoginPage';
-import RedirectionPage from './pages/RedirectionPage';
+import reactLogo from '@/assets/react.svg';
+import { useTmap } from '@/hooks/useTmap';
+
+import viteLogo from '/vite.svg';
+
+import './App.css';
 
 function App() {
-    <Routes>
-        <Route path="/" element={<LoginPage />} />
-        <Route path="/redirect" element={<RedirectionPage />} />
-    </Routes>;
+    const [count, setCount] = useState(0);
+
+    const { tmapModuleRef, mapContainerRef } = useTmap({
+        mapId: 'tmap',
+        latitude: 37.5652045,
+        longitude: 126.98702028,
+    });
+
+    const handleTestAddMarker = () => {
+        if (!tmapModuleRef.current) return;
+        console.log(tmapModuleRef.current);
+        tmapModuleRef.current.setMarker({latitude: 37.56520450, longitude:  126.98602028});
+
+    }
 
-    return <LoginPage />;
+    return (
+        <>
+            <div>
+                <div ref={mapContainerRef} />
+                <a href="https://vitejs.dev" target="_blank">
+                    <img src={viteLogo} className="logo" alt="Vite logo" />
+                </a>
+                <a href="https://react.dev" target="_blank">
+                    <img
+                        src={reactLogo}
+                        className="logo react"
+                        alt="React logo"
+                    />
+                </a>
+            </div>
+            <h1>Vite + React</h1>
+            <div className="card">
+                <button onClick={handleTestAddMarker}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/App.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the Vite and React logos to learn more
+            </p>
+        </>
+    );
 }
 
 export default App;
diff --git a/src/hooks/useTmap.ts b/src/hooks/useTmap.ts
@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import { TMapModule, type TmapConstructorType } from '@/utils/tmap';
+
+export const useTmap = ({
+    mapId = 'tmap',
+    width = 640,
+    height = 480,
+    zoom = 10,
+    latitude,
+    longitude,
+}: TmapConstructorType) => {
+    const mapContainerRef = useRef<HTMLDivElement | null>(null);
+    const tmapModuleRef = useRef<TMapModule | null>(null);
+
+    useEffect(() => {
+        if (!mapContainerRef.current) return;
+
+        mapContainerRef.current.id = mapId;
+        tmapModuleRef.current = new TMapModule({
+            mapId,
+            width,
+            height,
+            zoom,
+            latitude,
+            longitude,
+        });
+    }, [height, latitude, longitude, mapId, width, zoom]);
+
+    return { mapContainerRef, tmapModuleRef };
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,12 +1,6 @@
-import { StrictMode } from 'react';
-
 import { createRoot } from 'react-dom/client';
 
 import App from './App.tsx';
 import './index.css';
 
-createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-        <App />
-    </StrictMode>,
-);
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -1,9 +1,3 @@
-//  SVGR Plugin NameSpace
-declare module '*.svg' {
-    const svg: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    export default svg;
-}
-
 // T-MAP API NameSpace
 declare global {
     interface Window {
@@ -12,3 +6,11 @@ declare global {
         Tmapv3: any;
     }
 }
+
+//  SVGR Plugin NameSpace
+declare module '*.svg' {
+    const svg: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default svg;
+}
+
+export {};
diff --git a/src/utils/tmap.ts b/src/utils/tmap.ts
@@ -0,0 +1,46 @@
+export interface TmapConstructorType {
+    /** 지도를 렌더링할 HTMLDivElement 에 적용할 id */
+    mapId?: string;
+    /** 지도 Element 의 width (px) */
+    width?: number;
+    /** 지도 Element 의 height (px) */
+    height?: number;
+    /** 지도 Element 의 확대 정도 (1 ~ 15) */
+    zoom?: number;
+    /** 지도 의 중심점 위도 */
+    latitude: number;
+    /** 지도 의 중심점 경도 */
+    longitude: number;
+}
+
+export class TMapModule {
+    #mapInstance: typeof window.Tmapv3;
+
+    constructor({
+        mapId = 'tmap',
+        width = 640,
+        height = 480,
+        zoom = 10,
+        latitude,
+        longitude,
+    }: TmapConstructorType) {
+        if (typeof window === 'undefined') {
+            throw new Error('T Map 은 Server Side 에서 사용할 수 없습니다.');
+        }
+
+        const mapElement = document.getElementById(mapId);
+
+        if (!mapElement) {
+            throw new Error(
+                'T Map 을 렌더링하기 위해 필요한 HTMLDivElement 가 없습니다.',
+            );
+        }
+
+        this.#mapInstance = new window.Tmapv3.Map(mapId, {
+            center: new window.Tmapv3.LatLng(latitude, longitude),
+            width: `${width}px`,
+            height: `${height}px`,
+            zoom,
+        });
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "ES2020",
         "useDefineForClassFields": true,
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
         "module": "ESNext",
         "skipLibCheck": true,