- {startDate && endDate
- ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format(
- endDate,
- 'MM.dd',
- { locale: ko },
- )} (${differenceInDays(endDate, startDate)}박 ${
- differenceInDays(endDate, startDate) + 1
- }일)`
- : '날짜를 선택해주세요.'}
+
+ {startDate && !endDate
+ ? `${format(startDate, 'MM.dd', { locale: ko })}`
+ : startDate && endDate
+ ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format(
+ endDate,
+ 'MM.dd',
+ { locale: ko },
+ )} (${differenceInDays(endDate, startDate)}박 ${
+ differenceInDays(endDate, startDate) + 1
+ }일)`
+ : '날짜를 선택해주세요.'}
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
index 54293bea..8838fb25 100644
--- a/src/components/Plan/TripBudget.tsx
+++ b/src/components/Plan/TripBudget.tsx
@@ -10,7 +10,13 @@ const TripBudget = () => {
const [targetBudget, setTargetBudget] = useState(0); // 예시 목표 경비
const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비
- // 프로그레스 바 값 계산
+ useEffect(() => {
+ if (budget) {
+ setTargetBudget(budget.budget || 0);
+ setCurrentSpending(budget.calculatedPrice || 0);
+ }
+ }, [budget]);
+
// 프로그레스 바 값 계산
const progress = Math.min(
currentSpending && targetBudget
@@ -19,19 +25,6 @@ const TripBudget = () => {
100,
);
- useEffect(() => {
- // 경비 수정 모달 추가 예정
- const timer = setTimeout(() => setCurrentSpending(3000), 300);
- return () => clearTimeout(timer);
- }, []);
-
- useEffect(() => {
- if (budget) {
- setTargetBudget(budget.budget || 0);
- setCurrentSpending(budget.calculatedPrice || 0);
- }
- }, [budget]);
-
// 목표 경비 설정 함수
const handleSetTargetBudget = (newTargetBudget: number) => {
setTargetBudget(newTargetBudget);
@@ -54,8 +47,12 @@ const TripBudget = () => {
}}
value={progress}>
= 100 ? 'bg-sub2' : 'bg-main2'
+ } transition-transform duration-[660ms]`}
+ style={{
+ transform: `translateX(${progress >= 100 ? 0 : -100 + progress}%)`,
+ }}
/>
diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx
index bf06dced..8c430353 100644
--- a/src/components/Plan/TripMap.tsx
+++ b/src/components/Plan/TripMap.tsx
@@ -1,4 +1,5 @@
import { Paths } from '@/@types/service';
+import { useEffect, useRef } from 'react';
import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk';
const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY;
@@ -8,6 +9,11 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
const latitude = firstPath?.fromLatitude;
const longitude = firstPath?.fromLongitude;
+ // Kakao Maps SDK 로드 상태
+ const [_] = useKakaoLoader({
+ appkey: VITE_KAKAO_MAP_API_KEY,
+ });
+
const defaultPosition = { lat: Number(latitude), lng: Number(longitude) };
const getCenterPosition = () => {
@@ -31,10 +37,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
const centerPosition = getCenterPosition();
- const [_] = useKakaoLoader({
- appkey: VITE_KAKAO_MAP_API_KEY,
- });
-
const MapStyle = {
width: '100%',
height: '180px',
@@ -58,14 +60,43 @@ const TripMap = ({ paths }: { paths: Paths[] }) => {
});
}
+ const mapRef = useRef(null);
+
+ // 지도 범위 재설정 함수
+ const setBounds = () => {
+ if (mapRef.current) {
+ const bounds = new kakao.maps.LatLngBounds();
+ paths.forEach((path) => {
+ bounds.extend(
+ new kakao.maps.LatLng(
+ Number(path.fromLatitude),
+ Number(path.fromLongitude),
+ ),
+ );
+ bounds.extend(
+ new kakao.maps.LatLng(
+ Number(path.toLatitude),
+ Number(path.toLongitude),
+ ),
+ );
+ });
+ mapRef.current.setBounds(bounds);
+ }
+ };
+
+ useEffect(() => {
+ setBounds();
+ }, [paths]);
+
return (
-
+