PostWrite.js

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

const {kakao} = window;
axios.defaults.withCredentials = true;

function SearchMap({loc, setLoc}){
    // 아주대학교를 기본 위치로 설정


	/*
    const handleInput = (e) => {
        SetSearchAddress(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 }
            })
            }
        };
        geocoder.addressSearch(`${searchAddress}`, callback);

            <input  onChange={handleInput}/>
            <button onClick={SearchStart}>검색!</button>		
    }
	*/
    return (
        <div className="UserInput">
            <button onClick={()=>{console.log(loc)}}>위도경도 (디버깅)</button>
            <Map // 지도를 표시할 Container
                center={loc.center}
                isPanto={loc.isPanto}
                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,
					}}
					/>
            </Map>
        </div>
    )
}

function PostWrite(){

    // const [title, setTitle] = useState('');
    // const [content, setContent] = useState('');
    // const [imageUrls, setImageUrls] = useState([]);

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

    const [inputs, setInputs] = useState({
        title: "",
        content: "",
        imageUrls: ""
    });

    const {title, content, imageUrls} = inputs; // 비구조화 할당;
	
	//console.log(title)
	//console.log(content)
	//console.log(imageUrls)
	
    const handleSubmit= async (event) => {
        event.preventDefault();
		
        try {
			
			const response = await axios({
				url: 'http://localhost:8080/post', // 통신할 웹문서
				method: 'post', // 통신할 방식
				data: inputs
			});
			if (response.status === 200) {
				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;