TravelCompass-UMC · shroqkf · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git 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
@@ -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,42 +11,46 @@ 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" }];
     }
     setMarkers(newMarkers);
   }, [location, recommendations]);
 
-  const handleMarkerClick = (marker) => {
-    onPinClick(marker.name); 
-  };
-
   return (
     <div style={{ position: "relative" }}>
-      <LoadScript googleMapsApiKey="AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk">
+      <LoadScript
+        googleMapsApiKey="AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk"
+        onLoad={() => console.log("Google Maps API loaded successfully")}
+        loadingElement={<div style={{ height: "100%" }} />}
+        libraries={["places"]}
+        region="KR"
+        language="ko"
+        id="script-loader"
+      >
         <GoogleMap
           mapContainerStyle={containerStyle}
-          onLoad={onLoad}
           center={location || defaultCenter}
           zoom={zoomLevel}
         >
@@ -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)}
             />
           ))}
         </GoogleMap>

diff --git a/src/components/OAuthCallback.js b/src/components/OAuthCallback.js
@@ -13,12 +13,15 @@ const OAuthCallback = () => {
     const fetchUserProfile = async () => {
       if (accessToken) {
         try {
-          const response = await fetch("http://dev.enble.site/me/info", {
-            method: "GET",
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          });
+          const response = await fetch(
+            "https://travel-compass.persi0815.site",
+            {
+              method: "GET",
+              headers: {
+                Authorization: `Bearer ${accessToken}`,
+              },
+            }
+          );
           const data = await response.json();
 
           if (data.isSuccess) {

diff --git 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", 
               }}
             />
             <button type="submit" onClick={handleSearch}>
@@ -102,8 +101,15 @@ const SearchComponent = ({ onSearch }) => {
           <ul className={styles.suggestionList}>
             {suggestions.map((suggestion, index) => (
               <li key={index} onClick={() => selectSuggestion(suggestion)}>
-                <div style={{ borderBottom: "1px solid gray", paddingTop: "4%" }}>{suggestion}
-                  <img src={Moving} alt="moving-button" className={styles.movingImg}/>
+                <div
+                  style={{ borderBottom: "1px solid gray", paddingTop: "4%" }}
+                >
+                  {suggestion}
+                  <img
+                    src={Moving}
+                    alt="moving-button"
+                    className={styles.movingImg}
+                  />
                 </div>
               </li>
             ))}

diff --git a/src/components/searchPlace/RecommendationCard.js b/src/components/searchPlace/RecommendationCard.js
@@ -10,7 +10,7 @@ const RecommendationCard = ({ placeDetails }) => {
       // 장소의 첫 번째 사진에 대한 레퍼런스 URL을 가져옴
       const photoReference = placeDetails.photos[0].photo_reference;
       // Google Places Photo API를 사용하여 사진의 URL 생성
-      const photoUrl = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${photoReference}&key=AIzaSyBPG58Nk2zPjucy4apqdFTrUxZl0bGpddU`;
+      const photoUrl = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${photoReference}&key=AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk`;
       setPhotoUrl(photoUrl);
     }
   }, [placeDetails]);

diff --git a/src/pages/searchplacepage/placeID.js b/src/pages/searchplacepage/placeID.js
@@ -1,8 +1,8 @@
 // API 키
-const API_KEY = 'AIzaSyBPG58Nk2zPjucy4apqdFTrUxZl0bGpddU';
+const API_KEY = 'AIzaSyBtvVmyyvzbg4OILHqlzB8eGJcP03-lSVk';
 
 // 장소명
-const placeName = '골목카페옥수';
+const placeName = '휴애리 자연생활공원';
 
 // Google Places API 호출 URL
 const apiUrl = `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=${encodeURIComponent(placeName)}&inputtype=textquery&fields=place_id&key=${API_KEY}`;

diff --git a/src/pages/searchplacepage/placeinfo1.js/placeinfo1_jeju.js b/src/pages/searchplacepage/placeinfo1.js/placeinfo1_jeju.js
@@ -31,7 +31,7 @@ const PlaceInfoJeju = () => {
   useEffect(() => {
       const fetchRecommendations = async () => {
         const data = [
-          { name: '동백포레스트', placeId: "ChIJ7Xc7U45RezURGd_To-JsF5o", lat: 33.30049, lng: 126.63630 },
+          { name: '휴애리 자연생활공원', placeId: "ChIJtZ6jupmqDTURppQwD7fxFKU", lat: 33.31656, lng: 126.63458 },
           { name: '동문재래시장', placeId: "ChIJBdEw_1PjDDUR9XxfgFpYmjw", lat: 33.51324, lng: 126.52802 },
           { name: '골목카페옥수', placeId: "ChIJ51k8cVAbDTURJkJ4eCpMv1E", lat: 33.44007, lng: 126.38002 },
         ];

diff --git a/src/pages/travelplan/travelplandestination.js b/src/pages/travelplan/travelplandestination.js
@@ -60,10 +60,11 @@ class TrvlPlan extends Component {
 
     this.setState({
       searchInput: input,
-      showSuggestions: true,
+      showSuggestions: input.length > 0 && filteredDestinations.length > 0, // 사용자 입력이 있고, 결과가 있을 때만 제안 표시
       filteredDestinations,
     });
   };
+
   selectDestination = (destination) => {
     this.setState({
       searchInput: destination,
@@ -78,7 +79,6 @@ class TrvlPlan extends Component {
   handleInvitationCodeChange = (e) => {
     this.setState({ invitationCode: e.target.value });
   };
-
   handleSubmit = (e) => {
     e.preventDefault();
     const { tripTitle, searchInput, startDate, endDate } = this.state;
@@ -88,33 +88,42 @@ class TrvlPlan extends Component {
       return;
     }
 
+    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",
+      method: "options",
       headers: {
         "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`, // Bearer 토큰을 헤더에 추가
       },
       body: JSON.stringify({ planReqDto, planLocationListDto }),
     })
       .then((response) => response.json())
       .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 || "등록에 실패했습니다.");
         }
@@ -158,7 +167,6 @@ class TrvlPlan extends Component {
 
     return null;
   };
-
   handleInvitationCodeSubmit = (e) => {
     e.preventDefault();
 
@@ -168,28 +176,38 @@ 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();
       })
       .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); // 모든 에러 캐치와 표시
       });
   };