diff --git a/src/components/Plan/PlanItemBox.tsx b/src/components/Plan/PlanItemBox.tsx index 1ff3d1ca..3244d0cc 100644 --- a/src/components/Plan/PlanItemBox.tsx +++ b/src/components/Plan/PlanItemBox.tsx @@ -122,7 +122,7 @@ const PlanItemBox = ({ {item.category}
- {item.price} 원 + {item.price.toLocaleString()} 원
diff --git a/src/components/Plan/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx index 4e96dc4f..2571a865 100644 --- a/src/components/Plan/PlanSchedule.tsx +++ b/src/components/Plan/PlanSchedule.tsx @@ -20,7 +20,8 @@ const PlanSchedule = () => { - {trip?.startDate} ~ {trip?.endDate} + {trip?.startDate?.substring(2).replace(/-/g, '.') || ''} -{' '} + {trip?.endDate?.substring(5).replace(/-/g, '.') || ''} ); diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 480ec571..fada423c 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -1,4 +1,4 @@ -import TripRealtimeEditor from '@components/Trip/TripRealtimeEditor'; +import TripRealtimeMember from '@components/Trip/TripRealtimeMember'; import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import TripBudget from './TripBudget'; @@ -92,7 +92,7 @@ const PlanSectionTop = () => { navigate(`/trip/${tripId}/share`); }} /> - + { + const DEFAULT_LATITUDE = 36.34; + const DEFAULT_LONGITUDE = 127.77; + const firstPath = paths[0]; - const latitude = firstPath?.fromLatitude; - const longitude = firstPath?.fromLongitude; + const latitude = firstPath ? firstPath.fromLatitude : DEFAULT_LATITUDE; + const longitude = firstPath ? firstPath.fromLongitude : DEFAULT_LONGITUDE; const mapRef = useRef(null); const [selectedMarker, setSelectedMarker] = useState(null); + const [maplevel, setMapLevel] = useState(4); const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; @@ -84,7 +88,13 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { }; useEffect(() => { - setBounds(); + if (paths.length > 0) { + setTimeout(() => { + setBounds(); + }, 100); + } else { + setMapLevel(15); + } }, [paths]); // 마커를 클릭할 때 호출되는 함수 @@ -186,39 +196,40 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { key={VITE_KAKAO_MAP_API_KEY} center={centerPosition} style={MapStyle} - level={4} + level={maplevel} className="relative object-fill" ref={mapRef}> - {paths.map((path, index) => ( -
- handleMarkerClick(path.toSeqNum)} - image={getSequenceIconUrl(path.toSeqNum - 1)} - /> - {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} - {index === paths.length - 1 && ( + {paths.length !== 0 && + paths.map((path, index) => ( +
handleMarkerClick(path.toSeqNum + 1)} - image={getSequenceIconUrl(path.toSeqNum)} + onClick={() => handleMarkerClick(path.toSeqNum)} + image={getSequenceIconUrl(path.toSeqNum - 1)} /> - )} - -
- ))} + {/* 마지막 항목인 경우, 목적지 위치에 마커 추가 */} + {index === paths.length - 1 && ( + handleMarkerClick(path.toSeqNum + 1)} + image={getSequenceIconUrl(path.toSeqNum)} + /> + )} + +
+ ))} ); diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx index 7d3ca648..372d5b89 100644 --- a/src/components/Trip/EditCodeModal.tsx +++ b/src/components/Trip/EditCodeModal.tsx @@ -69,7 +69,7 @@ const EditCodeModal = () => { {isEditModal && ( - + 나의 여정 diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 51570d26..3e2e3786 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -60,11 +60,17 @@ const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => { value >= total - value ? Math.round((175 * value) / total) : Math.round((175 * (total - value)) / total); + const isZeroColor = + total === 0 && value === 0 ? 'text-gray6' : `text-${color}`; + const isZeroWeight = total === 0 && value === 0 ? '' : 'font-bold'; + return (
{value >= total - value ? ( <> -
{label1}
+
+ {label1} +
@@ -85,27 +91,33 @@ const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => { ); }; -const Percentage = ({ value, total, color }: PercentageParams) => ( -
- {value >= total - value ? ( - <> -
- {calculatePercentage(value, total)}% -
-
- {calculatePercentageRemain(value, total)}% -
- - ) : ( - <> -
{calculatePercentage(value, total)}%
-
- {calculatePercentageRemain(value, total)}% -
- - )} -
-); +const Percentage = ({ value, total, color }: PercentageParams) => { + const isZeroColor = + total === 0 && value === 0 ? 'text-gray6' : `text-${color}`; + const isZeroWeight = total === 0 && value === 0 ? '' : 'font-bold'; + + return ( +
+ {value >= total - value ? ( + <> +
+ {calculatePercentage(value, total)}% +
+
+ {calculatePercentageRemain(value, total)}% +
+ + ) : ( + <> +
{calculatePercentage(value, total)}%
+
+ {calculatePercentageRemain(value, total)}% +
+ + )} +
+ ); +}; const TripPreference: React.FC = () => { const { tripId } = useGetTripsAuthority(); @@ -143,6 +155,7 @@ const TripPreference: React.FC = () => { useEffect(() => { if (tripPreference) { + console.log('tripPreference', tripPreference); setA([ tripPreference?.data?.data?.planningCount, tripPreference?.data?.data?.planningTotalCount, diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeMember.tsx similarity index 96% rename from src/components/Trip/TripRealtimeEditor.tsx rename to src/components/Trip/TripRealtimeMember.tsx index 3e47bee2..5dd0fd86 100644 --- a/src/components/Trip/TripRealtimeEditor.tsx +++ b/src/components/Trip/TripRealtimeMember.tsx @@ -4,7 +4,7 @@ import { UserIcon } from '@components/common/icons/Icons'; import { Swiper, SwiperSlide } from 'swiper/react'; import { Navigation } from 'swiper/modules'; -const TripRealtimeEditor = () => { +const TripRealtimeMember = () => { const { tripMember } = useContext(socketContext); const tripMemberData = tripMember?.data; @@ -60,4 +60,4 @@ const TripRealtimeEditor = () => { ); }; -export default TripRealtimeEditor; +export default TripRealtimeMember; diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index c75d14f2..3109b337 100644 --- a/src/components/common/tab/Tab.tsx +++ b/src/components/common/tab/Tab.tsx @@ -29,7 +29,7 @@ const Tab = ({ lists, contents }: TabProps) => { defaultValue="tab0" onValueChange={handleTabChange}> {lists.map((list, index) => { return ( diff --git a/src/utils/calculatePercentage.ts b/src/utils/calculatePercentage.ts index 8ca8e8cc..09f866b9 100644 --- a/src/utils/calculatePercentage.ts +++ b/src/utils/calculatePercentage.ts @@ -1,6 +1,9 @@ -// utils.ts export const calculatePercentage = (count: number, totalCount: number) => - ((count / totalCount) * 100).toFixed(0); + totalCount === 0 && count === 0 + ? '0' + : ((count / totalCount) * 100).toFixed(0); export const calculatePercentageRemain = (count: number, totalCount: number) => - (((totalCount - count) / totalCount) * 100).toFixed(0); + totalCount === 0 && count === 0 + ? '0' + : (((totalCount - count) / totalCount) * 100).toFixed(0);