prgrms-fe-devcourse · gd06070 · Oct 1, 2024 · Oct 2, 2024 · Oct 2, 2024 · Oct 2, 2024
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#1001 - 카카오 맵 api 활용을 위한 키 관리 .env파일 추가
+.env
diff --git a/index.html b/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WhatEats?</title>
+    <!-- 1001 추가 : 카카오 지도 세팅 -->
+    <script
+    type="text/javascript"
+    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_KEY%"
+  ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-carousel": "^4.3.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-router-dom": "^6.26.2",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1"
@@ -30,6 +31,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "kakao.maps.d.ts": "^0.1.40",
     "prettier": "^3.3.3",
     "sass-embedded": "^1.79.4",
     "typescript": "^5.5.3",

diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,17 @@
-<!DOCTYPE html>
+<!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" />
+    <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" />
+
     <title>React App</title>
   </head>
   <body>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -42,8 +42,8 @@ const Navbar = () => {
                 <li className='go_alram' data-path="/notification">
                     <Link to={'#'}></Link>
                 </li>
-                <li className='go_map' data-path="#">
-                    <Link to={'#'}></Link>
+                <li className='go_map' data-path="/map">
+                    <Link to={'/map'}></Link>
                 </li>
                 <li className='go_mypage' data-path="/mypage">
                     <Link to={'/mypage'}></Link>

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
 import { User, AuthResponse } from "../types/AuthTypes"; 
+import { response } from "express";
 
 const baseurl = 'https://kdt.frontend.5th.programmers.co.kr:5006';
 
@@ -12,6 +13,17 @@ export const useAuth = () => {
     baseURL: baseurl,
   });
 
+  // 1002 추가 - localStorage에 토큰 저장
+  useEffect(() => {
+    const savedToken = localStorage.getItem('token');
+    const savedUser = localStorage.getItem('user');
+
+    if (savedToken && savedUser) {
+      setToken(savedToken);
+      setUser(JSON.parse(savedUser));
+    }
+  }, []);
+
   // 로그인
   const login = async (email: string, password: string) => {
     try {
@@ -21,7 +33,13 @@ export const useAuth = () => {
       });
       setToken(response.data.token);
       setUser(response.data.user);
+
+      // 1002 추가 - localStorage에 토큰 저장
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+
       console.log("로그인 성공", response.data);
+      console.log(localStorage.length)
     } catch (e) {
       console.log("실패 cbcb", e);
     }
@@ -37,10 +55,27 @@ export const useAuth = () => {
       });
       setToken(response.data.token);
       setUser(response.data.user);
+
+      // 1002 추가 - localStorage에 토큰 저장
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+
       console.log("회원가입 성공", response.data);
+
     } catch (e) {
       console.log("실패ㅡㅡ", e);
     }
   };
-  return { login, signup, token, user };
+
+  // 1002 추가 - 로그아웃
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    console.log("로그아웃 성공");
+    console.log(localStorage.length)
+  };
+
+  return { login, logout, signup, token, user };
 };
diff --git a/src/hooks/useKakaoLoader.ts b/src/hooks/useKakaoLoader.ts
@@ -0,0 +1,11 @@
+import { useKakaoLoader as useKakaoLoaderOrigin } from 'react-kakao-maps-sdk';
+const useKakaoLoader = () => {
+  const [loading, error] = useKakaoLoaderOrigin({
+    appkey: import.meta.env.KAKAOMAP_KEY,
+    libraries: ['clusterer', 'drawing', 'services'], // 사용하고싶은 다른 라이브러리 추가 
+  });
+
+  return [loading, error];
+};
+
+export default useKakaoLoader;
diff --git a/src/pages/JoinPage.tsx b/src/pages/JoinPage.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import "../styles/scss/Join.scss";
 import PasswordToggle from "../components/PasswordToggle";
 import FormLayout from "../components/FormLayout";
@@ -8,6 +9,7 @@ import { AuthTypes } from "../types/AuthTypes";
 
 const JoinPage: React.FC = () => {
   const { signup } = useAuth();
+  const navigate = useNavigate();
 
   const [formState, setFormState] = useState<AuthTypes>({
     email: "",
@@ -36,8 +38,14 @@ const JoinPage: React.FC = () => {
       return;
     }
 
-    await signup(formState.email, formState.id, formState.password);
-    console.log("제출 :", formState);
+    //1002 추가 - 회원가입 성공 여부에 따라서 동작
+    try { 
+      await signup(formState.email, formState.id, formState.password);
+      console.log("제출 :", formState);
+      navigate("/"); // 회원가입 성공하면 메인으로 이동
+    } catch (error) {
+      console.error("회원가입 실패", error);
+    }
   };
 
   return (

diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -1,17 +1,20 @@
 import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import "../styles/scss/Login.scss";
 import { useAuth } from "../hooks/useAuth";
 import Input from "../components/Input";
 import PasswordToggle from "../components/PasswordToggle";
 import FormLayout from "../components/FormLayout";
 
 const LoginPage: React.FC = () => {
-  const { login } = useAuth();
+  const { logout, login } = useAuth();
   const [formState, setFormState] = useState({
     email: "",
     password: "",
   });
 
+  const navigate = useNavigate(); // 1002 추가
+
   // 업데이트 값
   const updateValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormState({
@@ -24,7 +27,13 @@ const LoginPage: React.FC = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     console.log("폼 제출 완료:", formState);
-    await login(formState.email, formState.password);
+    try {
+      await login(formState.email, formState.password);
+      navigate("/"); // 로그인 성공 시 메인 페이지로 이동
+    } catch (error) {
+      console.log("로그인 실패");
+      alert("아이디/비밀번호가 틀렸습니다");
+    }
   };
 
   return (
@@ -54,10 +63,12 @@ const LoginPage: React.FC = () => {
         <button type="submit" className="login-btn">
           로그인
         </button>
-
+        {/* <button type="button" className="login-btn" onClick={logout}>
+          로그아웃
+        </button> */}
         <div className="signup-link">
           <span>
-            계정이 없으신가요? <a href="">가입하기</a>
+            계정이 없으신가요? <Link to="/joinPage">가입하기</Link>
           </span>
         </div>
       </FormLayout>

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+import "../styles/scss/Map.scss";
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+function MapPage() {
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { kakao } = window;
+    const container = mapRef.current;
+
+    if (container) {
+      // container가 존재할 때만 지도 생성
+      const mapOptions = {
+        center: new kakao.maps.LatLng(33.450701, 126.570667),
+        level: 3,
+      };
+
+      const map = new kakao.maps.Map(container, mapOptions);
+      const markerPosition = new kakao.maps.LatLng(33.45074, 126.570667);
+
+      const iwContent =
+        '<div style="padding:15px; margin-bottom:15px;">이곳은 포스팅 썸네일이미지와 사용자 아이디가 들어가려나</div>';
+      const iwPosition = new kakao.maps.LatLng(33.450701, 126.570667);
+      const marker = new kakao.maps.Marker({
+        position: markerPosition,
+      });
+
+      const infowindow = new kakao.maps.InfoWindow({
+        position: iwPosition,
+        content: iwContent,
+      });
+
+      infowindow.open(map, marker);
+      marker.setMap(map);
+    }
+  }, []);
+
+  return (
+    <div className="map-container">
+      <div className="map" ref={mapRef} style={{ width: "500px", height: "500px" }}></div>
+      <button className="fix-button">수정하기</button>
+    </div>
+  );
+}
+
+export default MapPage;
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -8,6 +8,7 @@ import JoinPage from './pages/JoinPage'
 import NotificationPage from './pages/NotificationPage';
 import PostFormPage from './pages/PostFormPage';
 import StarredPage from './pages/StarredPage';
+import MapPage from './pages/MapPage';
 import HotPost from './pages/HotPost';
 
 const routes = [
@@ -23,8 +24,8 @@ const routes = [
       { path: '/saved', element: <StarredPage /> },
       { path: '/detailpage', element: <DetailPage /> },
       { path: '/postform', element: <PostFormPage /> },
-      { path: '/starredpage', element: <StarredPage /> },
-      { path: '/hotpost', element: <HotPost /> },
+      { path: '/map', element: <MapPage />},
+      { path: '/hotpost', element: <HotPost /> }
     ],
   },
 ];