PostWrite.js

import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';

import { UserContext } from '../Usercontext.js';
import axios from 'axios';
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) => {
        setSearchKeyword(e.target.value);
    }    
	/*


	*/
    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))
          }
          console.log(markers)
          setMarkers(markers)
    
          // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
          //map.setBounds(bounds)
        }
      })
            }}>검색 (디버깅)</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={defaultCenter}
                style={{
                    // 지도의 크기
                    width: "450px",
                    height: "450px"
                    }}
                level={3}>
                {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>
    )
}

function PostWrite(){

    const userContext = useContext(UserContext);
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	}	
    useEffect(() => {
        const session = userContext.CheckSession()
        .then((response) => {
            if (!response.data) {
                alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
                MoveTo('/login')
             }
		})
		.catch((response)=>{
			console.log("error!:LogOut")
			console.log(response)
		})
      });


    const [location, setLocation] = useState({
        keyword: "",
        center: { lat: 37.28238488648025, lng: 127.04350967609274 }
    });
    const [searchAddress, SetSearchAddress] = useState(); //주소 입력

    const [inputs, setInputs] = useState({
        title: "",
        content: "",
        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 {
				return null;
			}
            
        }
        catch (error){
            console.log('Error during post creation:', error);
        }
    }

    const onChange = (e) => {
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value
        });
    }

    return(
		<div>
			<aside style={{float: "left"}}>
				<SearchMap loc={location} setLoc={setLocation}></SearchMap>
			</aside>
			<main style={{float: "right"}}>
				<form onSubmit={handleSubmit}>
					<div>
						<label>제목</label>
						<input
							type="text"
							name='title'
							//value={title}
							onChange={onChange}
							required
						/>
					</div>
					<div>
						<label>Content</label>
						<textarea
						name='content'
						//value={content}
						onChange={onChange}
						/>
					</div>
					<button style={{height:"50px"}}>wow</button>
				</form>
			</main>
		</div>
    )
}

export default PostWrite;