From cee1bbff1276b803d8875b885608977f05d21aba Mon Sep 17 00:00:00 2001 From: HyunJong00 Date: Sun, 15 Dec 2024 13:18:13 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20[FE]=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TravelSpot.js | 2 - frontend/src/pages/NewChat.js | 79 +++++++++++++++++++-------- 2 files changed, 56 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/TravelSpot.js b/frontend/src/components/TravelSpot.js index 9d338ee7..76d0b1d2 100644 --- a/frontend/src/components/TravelSpot.js +++ b/frontend/src/components/TravelSpot.js @@ -4,8 +4,6 @@ import styles from "./TravelSpot.module.css"; function TravelSpot({ spotData }) { const { imageUrl, name, category, address } = spotData; - console.log("TravelSpot spotData:", spotData); // 디버깅용 데이터 확인 - return (
{/* 이미지 표시 */} diff --git a/frontend/src/pages/NewChat.js b/frontend/src/pages/NewChat.js index c8c5f2de..9e7f0a81 100644 --- a/frontend/src/pages/NewChat.js +++ b/frontend/src/pages/NewChat.js @@ -19,30 +19,79 @@ import GooglePlacesImageUpdater from "../api/GooglePlacesImageFetcher"; function NewChat() { const [forceRender, setForceRender] = useState(false); // 렌더링 트리거 상태 + const [places, setPlaces] = useState(() => { + try { + const storedPlaces = sessionStorage.getItem("places"); + return storedPlaces ? JSON.parse(storedPlaces) : {}; // 빈 객체 초기화 + } catch (error) { + console.error("Error parsing places from sessionStorage:", error); + return {}; + } + }); + + const isUpdatingImages = useRef(false); // 이미지 업데이트 상태 추적 + + // 장소 상태 변경 감지 및 이미지 업데이트 처리 + useEffect(() => { + if (!places || Object.keys(places).length === 0 || isUpdatingImages.current) + return; + + console.log("useEffect: Places updated, triggering handleUpdateImages."); + handleUpdateImages(); + }, [places]); const handleUpdateImages = async () => { + if (!places || Object.keys(places).length === 0) { + console.warn("handleUpdateImages: No places to update."); + return; + } + + console.log("handleUpdateImages: Updating images for places...", places); + + isUpdatingImages.current = true; // 업데이트 중 상태 설정 + if (updaterRef.current) { - await updaterRef.current.updateSessionStorageWithImages(); // 비동기 작업 완료 + try { + await updaterRef.current.updateSessionStorageWithImages(); + } catch (error) { + console.error("Error updating images:", error); + } } - // sessionStorage 데이터를 다시 상태로 업데이트 + const updatedPlaces = sessionStorage.getItem("places"); if (updatedPlaces) { - setPlaces(JSON.parse(updatedPlaces)); + try { + const parsedPlaces = JSON.parse(updatedPlaces); + if (JSON.stringify(parsedPlaces) !== JSON.stringify(places)) { + setPlaces(parsedPlaces); // 변경된 데이터만 업데이트 + } + } catch (error) { + console.error("Error parsing updated places:", error); + } } + + isUpdatingImages.current = false; // 업데이트 완료 후 상태 초기화 }; + + // 세션 스토리지 동기화 useEffect(() => { const syncPlacesFromSessionStorage = () => { const storedPlaces = sessionStorage.getItem("places"); if (storedPlaces) { - setPlaces(JSON.parse(storedPlaces)); + try { + setPlaces(JSON.parse(storedPlaces)); + } catch (error) { + console.error("Error syncing places from sessionStorage:", error); + setPlaces({}); // 오류 발생 시 빈 객체로 설정 + } + } else { + setPlaces({}); // 기본값 설정 } }; - // 변화가 있을 때 동기화 window.addEventListener("storage", syncPlacesFromSessionStorage); return () => { - // 이벤트 리스너 정리 window.removeEventListener("storage", syncPlacesFromSessionStorage); }; }, []); @@ -76,11 +125,6 @@ function NewChat() { const [selectedThemes, setSelectedThemes] = useState(() => { return JSON.parse(sessionStorage.getItem("selectedThemes")) || []; }); - const [places, setPlaces] = useState(() => { - // 초기 상태를 sessionStorage에서 로드 - const storedPlaces = sessionStorage.getItem("places"); - return storedPlaces ? JSON.parse(storedPlaces) : []; - }); const [message, setMessage] = useState(""); const [isInputDisabled, setIsInputDisabled] = useState(true); // 입력창 비활성화 상태 @@ -294,14 +338,12 @@ function NewChat() { if (location_info?.places) { const processedPlaces = processPlaces(location_info.places); - setPlaces((prevPlaces) => { const mergedPlaces = { ...prevPlaces, ...processedPlaces }; sessionStorage.setItem("places", JSON.stringify(mergedPlaces)); console.log("Merged places saved to sessionStorage:", mergedPlaces); return mergedPlaces; }); - } if (location_info?.hash_tag) { @@ -410,7 +452,7 @@ function NewChat() { setDateRange([null, null]); setSelectedCompanion(null); setSelectedThemes([]); - setPlaces(null); + setPlaces({}); setHashTags([]); setIsGenerating(false); // 초기화 시 일정 생성 상태도 리셋 setIsGreetingAccepted(false); // Greeting 초기화 @@ -652,15 +694,6 @@ function NewChat() { className={styles.sendIcon} onClick={handleSendMessage} /> -
From fa334fcd5cd7bf76ceba0d37e602d8c72085aeda Mon Sep 17 00:00:00 2001 From: HyunJong00 Date: Sun, 15 Dec 2024 15:03:52 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20mypage-=EC=83=81=EC=84=B8=EC=9D=BC?= =?UTF-8?q?=EC=A0=95=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Route.js | 7 ++++--- frontend/src/components/TravelSpot.js | 5 ++--- frontend/src/pages/NewChat.js | 1 - 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Route.js b/frontend/src/components/Route.js index daff95a2..14b1ef84 100644 --- a/frontend/src/components/Route.js +++ b/frontend/src/components/Route.js @@ -4,8 +4,9 @@ import styles from "./Route.module.css"; const Route = () => { const [activeDay, setActiveDay] = useState(1); // 현재 활성화된 날짜 const [itineraryDays, setItineraryDays] = useState([]); // 여행 일정 데이터 - const [coordinatesLog, setCoordinatesLog] = useState([]); // 좌표 확인 로그 - + const [, setCoordinatesLog] = useState([]); // 좌표 확인 로그 + const defaultImageUrl = + "https://private-user-images.githubusercontent.com/144208568/395778736-c1597f72-1208-46fd-aca1-7857fe7dbd13.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQyNDA0MzksIm5iZiI6MTczNDI0MDEzOSwicGF0aCI6Ii8xNDQyMDg1NjgvMzk1Nzc4NzM2LWMxNTk3ZjcyLTEyMDgtNDZmZC1hY2ExLTc4NTdmZTdkYmQxMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIxNVQwNTIyMTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04NTQ5YzQzYjgwMWJkZjE0N2U5MDllNDUxNGFhNjFiZTY5ZjQwNGQyOWU4MDNiZTU4NTM4YWM1ZDU3YjU1MmRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.BJ1KdTJZ05TqCkWCLGhrYBmE1HHJmw2Lt5ZxcpECteg"; useEffect(() => { // Kakao Maps API 로드 확인 if (!window.kakao || !window.kakao.maps || !window.kakao.maps.services) { @@ -23,7 +24,7 @@ const Route = () => { day: dayKey, spots: storedData[dayKey].map((spot) => ({ ...spot, - imageUrl: spot.imageUrl || "https://via.placeholder.com/150", // 기본 이미지 설정 + imageUrl: spot.imageUrl || defaultImageUrl, // 기본 이미지 설정 })), })); setItineraryDays(formattedData); diff --git a/frontend/src/components/TravelSpot.js b/frontend/src/components/TravelSpot.js index 76d0b1d2..e7e4b846 100644 --- a/frontend/src/components/TravelSpot.js +++ b/frontend/src/components/TravelSpot.js @@ -1,14 +1,13 @@ import React from "react"; import styles from "./TravelSpot.module.css"; - +import defaultImageUrl from "../assets/images/jeju.png"; function TravelSpot({ spotData }) { const { imageUrl, name, category, address } = spotData; - return (
{/* 이미지 표시 */} {name diff --git a/frontend/src/pages/NewChat.js b/frontend/src/pages/NewChat.js index 9e7f0a81..76535506 100644 --- a/frontend/src/pages/NewChat.js +++ b/frontend/src/pages/NewChat.js @@ -18,7 +18,6 @@ import ReactMarkdown from "react-markdown"; import GooglePlacesImageUpdater from "../api/GooglePlacesImageFetcher"; function NewChat() { - const [forceRender, setForceRender] = useState(false); // 렌더링 트리거 상태 const [places, setPlaces] = useState(() => { try { const storedPlaces = sessionStorage.getItem("places"); From fc539b9de0b004ced074e981de01e1e4f1012009 Mon Sep 17 00:00:00 2001 From: HyunJong00 Date: Sun, 15 Dec 2024 15:07:04 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20[FE]=20travelsummary=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TravelSummary.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/TravelSummary.js b/frontend/src/components/TravelSummary.js index 26157a13..dff09b8e 100644 --- a/frontend/src/components/TravelSummary.js +++ b/frontend/src/components/TravelSummary.js @@ -63,7 +63,7 @@ function TravelSummary() { return; } - // 이미지 매핑 데이터 + // 이미지 매핑 안될때 일부 이미지의 url const imageMapping = { 황우지해안: "https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=AdDdOWpJUNQJy-60SccLIhgElDKPvhoXgQ4heqyyP1kl9ZACLtIEQoqsuTFJmGO6TpLvfj011NF7TEA5pJWJkiABZDUrDTT7hv8y8L2D-5Yqjrk0A2AEZzzDRsEW4q76NQPGvV14x3yv_dMUtLYDObvVEStv7UWLkHxoaMoUJRyHYu8bZw0O&key=AIzaSyBenOSRj_n3bCTZcdqOmqnnBmCEsi1kOyI",