Skip to content

Commit

Permalink
Merge pull request #146 from HyunJong00/main
Browse files Browse the repository at this point in the history 
fix : [FE] fix error
  • Loading branch information
@HyunJong00
HyunJong00 authored Dec 15, 2024
2 parents 337e62f + eb2b78c commit a169e06
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 33 deletions.
7 changes: 4 additions & 3 deletions frontend/src/components/Route.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
Expand Down
7 changes: 2 additions & 5 deletions frontend/src/components/TravelSpot.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +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;

console.log("TravelSpot spotData:", spotData); // 디버깅용 데이터 확인

return (
<div className={styles.spotContainer}>
{/* 이미지 표시 */}
<img
src={imageUrl || "https://via.placeholder.com/150"} // 이미지가 없으면 기본 이미지
src={imageUrl || defaultImageUrl} // 이미지가 없으면 기본 이미지
alt={name || "Travel Spot"} // 대체 텍스트
className={styles.image}
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TravelSummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
80 changes: 56 additions & 24 deletions frontend/src/pages/NewChat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,79 @@ 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");
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);
};
}, []);
Expand Down Expand Up @@ -76,11 +124,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); // 입력창 비활성화 상태
Expand Down Expand Up @@ -294,14 +337,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) {
Expand Down Expand Up @@ -410,7 +451,7 @@ function NewChat() {
setDateRange([null, null]);
setSelectedCompanion(null);
setSelectedThemes([]);
setPlaces(null);
setPlaces({});
setHashTags([]);
setIsGenerating(false); // 초기화 시 일정 생성 상태도 리셋
setIsGreetingAccepted(false); // Greeting 초기화
Expand Down Expand Up @@ -652,15 +693,6 @@ function NewChat() {
className={styles.sendIcon}
onClick={handleSendMessage}
/>
<button
onClick={handleUpdateImages}
style={{
opacity: 0,
pointerEvents: "auto", // 클릭 가능 유지
}}
>
Update Images
</button>
<GooglePlacesImageUpdater ref={updaterRef} />
</div>
</div>
Expand Down

0 comments on commit a169e06

Please sign in to comment.