From 9d33c47cfdc4206b3dae2c29a37e7bd32736372f Mon Sep 17 00:00:00 2001 From: topeanut Date: Wed, 17 Jul 2024 20:38:24 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=EC=97=AC=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EB=B3=B4=EB=82=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/travelplan/travelplandestination.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/pages/travelplan/travelplandestination.js b/src/pages/travelplan/travelplandestination.js index f51a8d2..63fa55a 100644 --- a/src/pages/travelplan/travelplandestination.js +++ b/src/pages/travelplan/travelplandestination.js @@ -88,25 +88,35 @@ class TrvlPlan extends Component { return; } + // sessionStorage에서 토큰 읽어오기 + const accessToken = sessionStorage.getItem("accessToken"); + + if (!accessToken) { + alert("로그인 상태가 유효하지 않습니다. 다시 로그인해주세요."); + this.props.navigate("/login"); + return; + } + const planReqDto = { title: tripTitle, - vehicle: "PUBLIC", // 예시로 고정값 사용, 필요에 따라 수정하세요 + vehicle: "PUBLIC", startDate: format(startDate, "yyyy-MM-dd"), endDate: format(endDate, "yyyy-MM-dd"), region: searchInput, - adultCount: 0, // 예시로 0을 사용, 실제 값으로 변경 필요 - childCount: 0, // 예시로 0을 사용, 실제 값으로 변경 필요 - hashtags: [], // 필요에 따라 해시태그 추가 + adultCount: 0, + childCount: 0, + hashtags: [], }; const planLocationListDto = { - planLocationDtos: [], // 위치 및 일정에 따라 배열 요소 추가 + planLocationDtos: [], }; fetch("https://travel-compass.persi0815.site/plans", { method: "POST", headers: { "Content-Type": "application/json", + Authorization: `Bearer ${accessToken}`, // Bearer 토큰을 헤더에 추가 }, body: JSON.stringify({ planReqDto, planLocationListDto }), }) @@ -114,7 +124,7 @@ class TrvlPlan extends Component { .then((data) => { if (data.isSuccess) { alert("여행 계획이 성공적으로 등록되었습니다."); - this.props.navigate("/summary", { state: { planId: data.planId } }); // 성공 시 요약 페이지로 이동, 실제 경로는 확인 필요 + this.props.navigate("/summary", { state: { planId: data.planId } }); } else { throw new Error(data.message || "등록에 실패했습니다."); } From cb52c8e79c3a8117d9bd0ea30bcd8b299c4d2b6f Mon Sep 17 00:00:00 2001 From: topeanut Date: Wed, 17 Jul 2024 20:48:24 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=EC=B4=88=EB=8C=80=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EC=A0=84=EC=86=A1=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/travelplan/travelplandestination.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/pages/travelplan/travelplandestination.js b/src/pages/travelplan/travelplandestination.js index 63fa55a..c857820 100644 --- a/src/pages/travelplan/travelplandestination.js +++ b/src/pages/travelplan/travelplandestination.js @@ -168,7 +168,6 @@ class TrvlPlan extends Component { return null; }; - handleInvitationCodeSubmit = (e) => { e.preventDefault(); @@ -178,16 +177,26 @@ class TrvlPlan extends Component { return; } + // sessionStorage에서 액세스 토큰 가져오기 + const accessToken = sessionStorage.getItem("accessToken"); + if (!accessToken) { + alert("로그인이 필요합니다."); + this.props.navigate("/login"); // 사용자를 로그인 페이지로 리디렉션 + return; + } + + // API 요청 보내기 fetch(`https://travel-compass.persi0815.site/plans/${invitationCode}`, { method: "POST", headers: { "Content-Type": "application/json", + Authorization: `Bearer ${accessToken}`, // 헤더에 액세스 토큰 추가 }, body: JSON.stringify({ code: invitationCode }), }) .then((response) => { if (!response.ok) { - throw new Error("Network response was not ok"); + throw new Error("서버 응답이 올바르지 않습니다."); // 에러 메시지 명확화 } return response.json(); }) @@ -195,11 +204,11 @@ class TrvlPlan extends Component { if (data.isSuccess) { alert("초대 코드가 성공적으로 등록되었습니다."); } else { - throw new Error(data.message || "초대 코드 등록에 실패했습니다."); + throw new Error(data.message || "초대 코드 등록에 실패했습니다."); // 백엔드에서 제공하는 에러 메시지 사용 } }) .catch((error) => { - alert("에러가 발생했습니다: " + error.message); + alert("에러가 발생했습니다: " + error.message); // 모든 에러 캐치와 표시 }); }; From 123a16f1614d73ff639ff9533fe0cc8f30af166d Mon Sep 17 00:00:00 2001 From: topeanut Date: Wed, 17 Jul 2024 20:59:57 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=EC=B4=88=EB=8C=80=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/travelplan/travelplandestination.js | 37 +++++++------------ 1 file changed, 13 insertions(+), 24 deletions(-) diff --git a/src/pages/travelplan/travelplandestination.js b/src/pages/travelplan/travelplandestination.js index c857820..2c39598 100644 --- a/src/pages/travelplan/travelplandestination.js +++ b/src/pages/travelplan/travelplandestination.js @@ -17,7 +17,7 @@ class TrvlPlan extends Component { modalOpen: false, searchInput: "", tripTitle: "", - invitationCode: "", + "invite-code": "", showSuggestions: false, destinations: [], filteredDestinations: [], @@ -76,7 +76,7 @@ class TrvlPlan extends Component { }; handleInvitationCodeChange = (e) => { - this.setState({ invitationCode: e.target.value }); + this.setState({ ["invite-code"]: e.target.value }); // 접근 방식 변경 }; handleSubmit = (e) => { @@ -168,47 +168,36 @@ class TrvlPlan extends Component { return null; }; + handleInvitationCodeSubmit = (e) => { e.preventDefault(); - - const { invitationCode } = this.state; - if (!invitationCode) { + const inviteCode = this.state["invite-code"]; // 접근 방식 변경 + if (!inviteCode) { alert("초대 코드를 입력해주세요."); return; } - // sessionStorage에서 액세스 토큰 가져오기 + // API 요청 const accessToken = sessionStorage.getItem("accessToken"); - if (!accessToken) { - alert("로그인이 필요합니다."); - this.props.navigate("/login"); // 사용자를 로그인 페이지로 리디렉션 - return; - } - - // API 요청 보내기 - fetch(`https://travel-compass.persi0815.site/plans/${invitationCode}`, { + fetch(`https://travel-compass.persi0815.site/plans/${inviteCode}`, { + // 접근 방식 변경 method: "POST", headers: { "Content-Type": "application/json", - Authorization: `Bearer ${accessToken}`, // 헤더에 액세스 토큰 추가 + Authorization: `Bearer ${accessToken}`, }, - body: JSON.stringify({ code: invitationCode }), + body: JSON.stringify({ code: inviteCode }), // 접근 방식 변경 }) - .then((response) => { - if (!response.ok) { - throw new Error("서버 응답이 올바르지 않습니다."); // 에러 메시지 명확화 - } - return response.json(); - }) + .then((response) => response.json()) .then((data) => { if (data.isSuccess) { alert("초대 코드가 성공적으로 등록되었습니다."); } else { - throw new Error(data.message || "초대 코드 등록에 실패했습니다."); // 백엔드에서 제공하는 에러 메시지 사용 + throw new Error(data.message || "초대 코드 등록에 실패했습니다."); } }) .catch((error) => { - alert("에러가 발생했습니다: " + error.message); // 모든 에러 캐치와 표시 + alert("에러가 발생했습니다: " + error.message); }); }; From 43aca869c2c2d493880a5cd98ee44548e246daa7 Mon Sep 17 00:00:00 2001 From: topeanut Date: Wed, 17 Jul 2024 21:13:00 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=EC=B4=88=EB=8C=80=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EC=9B=90=EB=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/travelplan/travelplandestination.js | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/pages/travelplan/travelplandestination.js b/src/pages/travelplan/travelplandestination.js index 2c39598..c857820 100644 --- a/src/pages/travelplan/travelplandestination.js +++ b/src/pages/travelplan/travelplandestination.js @@ -17,7 +17,7 @@ class TrvlPlan extends Component { modalOpen: false, searchInput: "", tripTitle: "", - "invite-code": "", + invitationCode: "", showSuggestions: false, destinations: [], filteredDestinations: [], @@ -76,7 +76,7 @@ class TrvlPlan extends Component { }; handleInvitationCodeChange = (e) => { - this.setState({ ["invite-code"]: e.target.value }); // 접근 방식 변경 + this.setState({ invitationCode: e.target.value }); }; handleSubmit = (e) => { @@ -168,36 +168,47 @@ class TrvlPlan extends Component { return null; }; - handleInvitationCodeSubmit = (e) => { e.preventDefault(); - const inviteCode = this.state["invite-code"]; // 접근 방식 변경 - if (!inviteCode) { + + const { invitationCode } = this.state; + if (!invitationCode) { alert("초대 코드를 입력해주세요."); return; } - // API 요청 + // sessionStorage에서 액세스 토큰 가져오기 const accessToken = sessionStorage.getItem("accessToken"); - fetch(`https://travel-compass.persi0815.site/plans/${inviteCode}`, { - // 접근 방식 변경 + if (!accessToken) { + alert("로그인이 필요합니다."); + this.props.navigate("/login"); // 사용자를 로그인 페이지로 리디렉션 + return; + } + + // API 요청 보내기 + fetch(`https://travel-compass.persi0815.site/plans/${invitationCode}`, { method: "POST", headers: { "Content-Type": "application/json", - Authorization: `Bearer ${accessToken}`, + Authorization: `Bearer ${accessToken}`, // 헤더에 액세스 토큰 추가 }, - body: JSON.stringify({ code: inviteCode }), // 접근 방식 변경 + body: JSON.stringify({ code: invitationCode }), }) - .then((response) => response.json()) + .then((response) => { + if (!response.ok) { + throw new Error("서버 응답이 올바르지 않습니다."); // 에러 메시지 명확화 + } + return response.json(); + }) .then((data) => { if (data.isSuccess) { alert("초대 코드가 성공적으로 등록되었습니다."); } else { - throw new Error(data.message || "초대 코드 등록에 실패했습니다."); + throw new Error(data.message || "초대 코드 등록에 실패했습니다."); // 백엔드에서 제공하는 에러 메시지 사용 } }) .catch((error) => { - alert("에러가 발생했습니다: " + error.message); + alert("에러가 발생했습니다: " + error.message); // 모든 에러 캐치와 표시 }); }; From 765c69eb16e36d24c7376e14f754b9410a8bcc0f Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Fri, 19 Jul 2024 01:33:18 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Fix=20:=20Map=20API=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/MapDetail.js | 2 +- src/components/Map.js | 36 ++++++++++--------- src/components/Search.js | 26 ++++++++------ .../searchPlace/RecommendationCard.js | 2 +- src/pages/searchplacepage/placeID.js | 4 +-- .../placeinfo1.js/placeinfo1_jeju.js | 2 +- 6 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/api/MapDetail.js b/src/api/MapDetail.js index 503cc65..b7c2935 100644 --- a/src/api/MapDetail.js +++ b/src/api/MapDetail.js @@ -1,7 +1,7 @@ // MapDetail.js export const getPlaceDetails = async ({ placeId }) => { - const apiKey = "AIzaSyBPG58Nk2zPjucy4apqdFTrUxZl0bGpddU"; // 여기에 자신의 Google Maps API 키를 입력하세요. + const apiKey = "AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk"; // 여기에 자신의 Google Maps API 키를 입력하세요. const url = `https://maps.googleapis.com/maps/api/place/details/json?placeid=${placeId}&key=${apiKey}`; try { diff --git a/src/components/Map.js b/src/components/Map.js index a642c04..e3abaa7 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api"; -const containerStyle = { +const containerStyleDefault = { position: "absolute", top: 0, left: 0, @@ -11,25 +11,26 @@ const containerStyle = { }; const defaultCenter = { - lat: 36.32800, + lat: 36.328, lng: 128.02379, }; -const Map = ({ location, recommendations, onPinClick, zoomLevel = 7.2, containerStyle }) => { - const [map, setMap] = useState(null); +const Map = ({ + location, + recommendations, + onPinClick, + zoomLevel = 7.2, + containerStyle = containerStyleDefault, +}) => { const [markers, setMarkers] = useState([]); - const onLoad = (map) => { - setMap(map); - }; - useEffect(() => { let newMarkers = []; if (recommendations && recommendations.length > 0) { newMarkers = recommendations.map((place, index) => ({ position: { lat: place.lat, lng: place.lng }, label: `${index + 1}`, - name: place.name + name: place.name, })); } else if (location && location.lat !== null && location.lng !== null) { newMarkers = [{ position: location, label: "1" }]; @@ -37,16 +38,19 @@ const Map = ({ location, recommendations, onPinClick, zoomLevel = 7.2, container setMarkers(newMarkers); }, [location, recommendations]); - const handleMarkerClick = (marker) => { - onPinClick(marker.name); - }; - return (
- + console.log("Google Maps API loaded successfully")} + loadingElement={
} + libraries={["places"]} + region="KR" + language="ko" + id="script-loader" + > @@ -55,7 +59,7 @@ const Map = ({ location, recommendations, onPinClick, zoomLevel = 7.2, container key={index} position={marker.position} label={marker.label} - onClick={() => handleMarkerClick(marker)} // Pass marker to handleMarkerClick + onClick={() => onPinClick(marker.name)} /> ))} diff --git a/src/components/Search.js b/src/components/Search.js index c280e6a..4648f82 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -3,7 +3,6 @@ import styles from "../styles/searchplace/search.module.css"; import { Search } from "../styles/styles.jsx"; import Moving from "../assets/images/Place/Vector.svg"; - const SearchComponent = ({ onSearch }) => { const [searchQuery, setSearchQuery] = useState(""); const [showSuggestions, setShowSuggestions] = useState(false); @@ -40,18 +39,18 @@ const SearchComponent = ({ onSearch }) => { const handleSearch = async (event) => { event.preventDefault(); - + try { // Geocoding API 호출을 위한 URL - const geocodingApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchQuery}&key=AIzaSyBPG58Nk2zPjucy4apqdFTrUxZl0bGpddU`; - + const geocodingApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchQuery}&key=AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk`; + // Geocoding API 호출 const response = await fetch(geocodingApiUrl); const data = await response.json(); - + // 검색어로부터 위치 좌표 가져오기 const location = data.results[0]?.geometry?.location; - + if (location) { // 검색된 위치와 검색어를 부모 컴포넌트로 전달하여 지도를 업데이트 onSearch(location, searchQuery); @@ -87,8 +86,8 @@ const SearchComponent = ({ onSearch }) => { border: "none", borderRadius: "5px", outline: "none", - paddingLeft: "17px", // 텍스트 왼쪽 여백 조절 - marginRight: "-45px", // 버튼과 간격 조절 + paddingLeft: "17px", + marginRight: "-45px", }} />