getting location datas

backend/src/data/articleService.js

@@ -11,6 +11,18 @@ const articleService = {
     }
   },
 
+  async findAllArticle() {
+    try {
+      const articles = await Article
+      .find({})
+      .populate('author')
+      .populate('likes');
+      return articles;
+    } catch (err) {
+      throw err;
+    }
+  },
+
   async findArticleById(articleId) {
     try {
       const article = await Article
@@ -83,14 +95,7 @@ const articleService = {
     }
   },
 
-  async findAllArticle() {
-    try {
-      const articlelist = await Article.find({}).populate('author', 'nickname').exec();
-      return articlelist;
-    } catch (err) {
-      throw err;
-    }
-  }
+
 };
 
 export default articleService;
\ No newline at end of file

frontend/public/index.html

@@ -15,8 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_API_KEY%&libraries=services&autoload=false"
-></script>
+
+
+	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_API_KEY%&libraries=services,clusterer,drawing"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/App.js

@@ -9,7 +9,6 @@ import Search from "./pages/Search.js";
 import PostWrite from "./pages/PostWrite.js"
 
 import Header from "./components/Header.js";
-import GoogleLoginButton from "./components/GoogleLoginButton.js";
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;

frontend/src/components/Article.js

@@ -2,20 +2,7 @@ import React, {useEffect, useState} from "react";
 
 import { useParams } from 'react-router-dom';
 
-/*
- {
-    _id: new ObjectId('65675ee46aab64d2ed605e3c'),
-    title: 'ㅋ',
-    content: 'ㅋㅋ',
-    imageUrls: [],
-    author: new ObjectId('6566403f224df4126bfb3e50'),
-    comments: [],
-    likes: [],
-    createdAt: 2023-11-29T15:55:16.525Z,
-    __v: 0
-  }
 
-*/
 
 function Article(prop) {
   return (

frontend/src/components/Header.js

@@ -6,6 +6,8 @@ import { UserContext } from '../Usercontext.js';
 import React, { useEffect, useState, useContext} from 'react';
 import { Link, useNavigate, Navigate } from "react-router-dom";
 import cookie from 'react-cookies';
+import {useCookies} from 'react-cookie'
+
 
 
 
@@ -43,19 +45,14 @@ function ButtonLink({link, status, children}){
 }
 
 function Header({islogged, username}){
-	//console.log(cookie.load('name'))
-	const [currentSession, setCurrentSession] = useState({
-		IsValid : false,
-		userName : ""
-	})
-
+	const name = cookie.load('name')
     return(
         <div className="header">
 			<ButtonLink link='/'>
 				<img className="logo_image" alt="logo" src={logo}/>
 			</ButtonLink>
 			<ul>
-				<p>{islogged?`${username}님, 환영합니다`:'로그인하세요.'}</p>
+				<p>{name?`${name}님, 환영합니다`:'로그인하세요.'}</p>
 				<ul className="menu_list">
 					<li><ButtonLink link='/'>Home</ButtonLink></li>
 					<li><ButtonLink link='/search'>검색</ButtonLink></li>

frontend/src/pages/Main.js

@@ -40,7 +40,7 @@ function Main() {
       console.log(response)
       setArticleList(response.data)
     })
-  });
+  }, []);
 
   return(
     <div className="App">

frontend/src/pages/PostWrite.js

@@ -9,56 +9,90 @@ axios.defaults.withCredentials = true;
 const {kakao} = window;
 function SearchMap({loc, setLoc}){
     // 아주대학교를 기본 위치로 설정
-
-
-	/*
+    const defaultCenter = { lat: 37.28238488648025, lng: 127.04350967609274 }
+    const [info, setInfo] = useState()
+    const [markers, setMarkers] = useState([])
+    const [map, setMap] = useState()
+    const ps = new kakao.maps.services.Places()
+    const [searchKeyword, setSearchKeyword] = useState(); //주소 입력
     const handleInput = (e) => {
-        SetSearchAddress(e.target.value);
+        setSearchKeyword(e.target.value);
     }    
+	/*
 
-    const SearchStart = () => {
-        console.log('Start Search!');// action test
-        // 주소를 기반으로 한 검색 구현(제주특별자치도 제주시 첨단로 242 를 입력하면 kakao가 나온다)
-        const geocoder = new kakao.maps.services.Geocoder();
-        let callback = function(result, status) {
-            if (status === kakao.maps.services.Status.OK) {
-			console.log(result)
-            const newSearch = result[0]
 
-            setLoc({
-                center: { lat: newSearch.y, lng: newSearch.x }
+	*/
+    return (
+        <div className="UserInput">
+            <input  onChange={handleInput}/>
+            <button onClick={()=>{
+        ps.keywordSearch(searchKeyword, (data, status, _pagination) => {
+        if (status === kakao.maps.services.Status.OK) {
+          // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
+          // LatLngBounds 객체에 좌표를 추가합니다
+          const bounds = new kakao.maps.LatLngBounds()
+          let markers = []
+    
+          for (var i = 0; i < data.length; i++) {
+            // @ts-ignore
+            markers.push({
+              position: {
+                lat: data[i].y,
+                lng: data[i].x,
+              },
+              content: data[i].place_name,
             })
+            // @ts-ignore
+            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
           }
-        };
-        geocoder.addressSearch(`${searchAddress}`, callback);
+          console.log(markers)
+          setMarkers(markers)
     
-            <input  onChange={handleInput}/>
-            <button onClick={SearchStart}>검색!</button>		
+          // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
+          //map.setBounds(bounds)
         }
-	*/
-    return (
-        <div className="UserInput">
-            <button onClick={()=>{console.log(loc)}}>위도경도 (디버깅)</button>
+      })
+            }}>검색 (디버깅)</button>
+            <button onClick={()=>{console.log(loc)}}>위도경도 (디버깅)</button><br/>
+            <input readOnly={true} type="text" placeholder="장소 키워드" value={loc.keyword}/>
+            <input readOnly={true} type="text" placeholder="위도" value={loc.center.lat}/>
+            <input readOnly={true} type="text" placeholder="경도" value={loc.center.lng}/>
             <Map // 지도를 표시할 Container
-                center={loc.center}
-                isPanto={loc.isPanto}
+                center={defaultCenter}
                 style={{
                     // 지도의 크기
                     width: "450px",
                     height: "450px"
                     }}
-				onClick={(_t, mouseEvent) => setLoc({
-					        center: { lat: mouseEvent.latLng.getLat(), lng: mouseEvent.latLng.getLng() },
-							isPanto: true,
-						  })}
                 level={3}>
-				<MapMarker // 마커를 생성합니다
-					position={{
-					  // 마커가 표시될 위치입니다
-					  lat: loc.center.lat,
-					  lng: loc.center.lng,
-					}}
-					/>
+                {markers.map((marker) => (
+                        <MapMarker
+                        key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
+                        position={marker.position}
+
+                        clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
+                        // 마커에 마우스오버 이벤트를 등록합니다
+                        onMouseOver={
+                          // 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
+                          () => setInfo(marker)
+                        }
+                        // 마커에 마우스아웃 이벤트를 등록합니다
+                        onMouseOut={
+                          // 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
+                          () => setInfo(null)
+                        }
+                        onClick={() => {
+                            console.log(marker)
+                            setLoc({
+                                keyword: marker.content,
+                                center: { lat: marker.position.lat, lng: marker.position.lng }
+                            })
+                        }}>
+                        {info &&info.content === marker.content && (
+                            <div style={{color:"#000"}}>{marker.content}</div>
+                        )}
+                        </MapMarker>
+                    ))}
             </Map>
         </div>
     )
@@ -66,9 +100,6 @@ function SearchMap({loc, setLoc}){
 
 function PostWrite(){
 
-    // const [title, setTitle] = useState('');
-    // const [content, setContent] = useState('');
-    // const [imageUrls, setImageUrls] = useState([]);
     const userContext = useContext(UserContext);
 	const navigate = useNavigate();
 	function MoveTo(link){
@@ -90,30 +121,38 @@ function PostWrite(){
 
 
     const [location, setLocation] = useState({
-        center: { lat: 37.28238488648025, lng: 127.04350967609274 },
-        isPanto: true,
+        keyword: "",
+        center: { lat: 37.28238488648025, lng: 127.04350967609274 }
     });
     const [searchAddress, SetSearchAddress] = useState(); //주소 입력
 
     const [inputs, setInputs] = useState({
         title: "",
         content: "",
-        imageUrls: ""
+        imageUrls: "",
     });
 
     const {title, content, imageUrls} = inputs; // 비구조화 할당;
+/*
+ {
+    _id: new ObjectId('65675ee46aab64d2ed605e3c'),
+    title: 'ㅋ',
+    content: 'ㅋㅋ',
+    imageUrls: [],
+    author: new ObjectId('6566403f224df4126bfb3e50'),
 
+  }
+*/
     const handleSubmit= async (event) => {
         event.preventDefault();
-		
         try {
-			
 			const response = await axios({
 				url: 'http://localhost:8080/post', // 통신할 웹문서
 				method: 'post', // 통신할 방식
 				data: inputs
 			});
 			if (response.status === 200) {
+                MoveTo('/')
 				return response.data;
 			}
 			else {
@@ -164,8 +203,6 @@ function PostWrite(){
 			</main>
 		</div>
     )
-
-
 }
 
 export default PostWrite;
\ No newline at end of file

frontend/src/pages/Search.js

@@ -82,5 +82,4 @@ function Search(props) {
 }
 
 
-
 export default Search;
\ No newline at end of file