Merge pull request #139 from Strong-Potato/134-feat-create-map-zoom-i…

…n-page

Feat: create map zoom in page

src/components/MapZoomIn/RouteMapBody/RouteMapBody.module.scss

@@ -0,0 +1,7 @@
+@use '@/sass' as *;
+
+.container,
+.map {
+  width: 100%;
+  height: 100vh;
+}

src/components/MapZoomIn/RouteMapBody/RouteMapBody.tsx

@@ -0,0 +1,79 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {CustomOverlayMap, Map, Polyline} from 'react-kakao-maps-sdk';
+import {SwiperRef} from 'swiper/react';
+
+import styles from './RouteMapBody.module.scss';
+
+import RouteMapSlide from '../RouteMapSlide/RouteMapSlide';
+import MapPinActive from '../../CandidatesMap/MapPins/MapPinActive';
+import MapPinNumber from '../../CandidatesMap/MapPins/MapPinNumber';
+
+import {Journeys, LatLng} from '@/types/route';
+
+const RouteMapBody = ({journeys}: Journeys) => {
+  const [centerMarker, setCenterMarker] = useState({
+    lat: journeys[0].places[0].place.latitude,
+    lng: journeys[0].places[0].place.longitude,
+  });
+
+  const [activeDay, setActiveDay] = useState(0);
+  const [selectedPinIndex, setSelectedPinIndex] = useState(0);
+  const swiperRef = useRef<SwiperRef>(null);
+
+  const latlngs = journeys[activeDay].places.map((place) => ({
+    lat: place.place.latitude,
+    lng: place.place.longitude,
+  }));
+
+  const handleMapMarkerClick = (latlng: LatLng, i: number) => {
+    setCenterMarker(latlng);
+    swiperRef.current?.swiper.slideTo(i);
+    setSelectedPinIndex(i);
+  };
+
+  const handleDayChange = (day: number) => {
+    setActiveDay(day);
+    handleMapMarkerClick(latlngs[0], 0);
+  };
+
+  useEffect(() => {
+    setCenterMarker({
+      lat: journeys[0].places[0].place.latitude,
+      lng: journeys[0].places[0].place.longitude,
+    });
+  }, []);
+
+  useEffect(() => {
+    console.log(selectedPinIndex);
+  }, [selectedPinIndex]);
+
+  return (
+    <div className={styles.container}>
+      <Map className={styles.map} center={centerMarker} level={9}>
+        {journeys[activeDay].places.map((place, i) => (
+          <React.Fragment key={`place-${i}`}>
+            <Polyline path={latlngs} strokeWeight={3} strokeColor='#3F444D' strokeOpacity={1} strokeStyle='dashed' />
+            <CustomOverlayMap key={`${place.place.title}-${latlngs[i]}-${i}`} position={latlngs[i]}>
+              <div
+                className={`pin ${selectedPinIndex === i ? 'active' : ''}`}
+                onClick={() => handleMapMarkerClick({lat: place.place.latitude, lng: place.place.latitude}, i)}
+              >
+                {selectedPinIndex === i ? <MapPinActive number={i + 1} /> : <MapPinNumber number={i + 1} />}
+              </div>
+            </CustomOverlayMap>
+          </React.Fragment>
+        ))}
+      </Map>
+      <RouteMapSlide
+        journeys={journeys}
+        setSelectedPinIndex={setSelectedPinIndex}
+        setCenterMarker={setCenterMarker}
+        swiperRef={swiperRef}
+        activeDay={activeDay}
+        onDayChange={handleDayChange}
+      />
+    </div>
+  );
+};
+
+export default RouteMapBody;

src/components/MapZoomIn/RouteMapSlide/RouteMapSlide.module.scss

@@ -0,0 +1,53 @@
+@use '@/sass' as *;
+
+.container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  max-width: 36rem;
+  max-width: 45rem;
+  height: 20.5rem;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 14px;
+  box-shadow: $shadow200;
+  z-index: 2;
+  background-color: $neutral0;
+
+  .daysButtonContainer {
+    position: absolute;
+    top: 0;
+    display: flex;
+    gap: 0.8rem;
+    width: 100%;
+    max-width: 36rem;
+    max-width: 45rem;
+    padding: 24px 20px 0 20px;
+
+    button {
+      @include typography(button);
+      display: flex;
+      padding: 8px 16px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+    }
+
+    .activeDayButton {
+      border: 1px solid $primary300;
+      background-color: $primary300;
+      color: $neutral0;
+    }
+
+    .inactiveDayButton {
+      border: 1px solid $neutral300;
+      background-color: $neutral0;
+      color: $neutral800;
+    }
+  }
+
+  .swiperSlideItem {
+    padding: 1rem 0;
+  }
+}

src/components/MapZoomIn/RouteMapSlide/RouteMapSlide.tsx

@@ -0,0 +1,67 @@
+import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
+import 'swiper/scss';
+import 'swiper/scss/navigation';
+
+import styles from './RouteMapSlide.module.scss';
+
+import PlaceCard from '@/components/Route/PlaceCard/PlaceCard';
+
+import {RouteMapSlideProps} from '@/types/route';
+
+const RouteMapSlide = ({
+  journeys,
+  setSelectedPinIndex,
+  setCenterMarker,
+  swiperRef,
+  activeDay,
+  onDayChange,
+}: RouteMapSlideProps) => {
+  const dates = journeys.map((journey) => journey.date);
+
+  const handleSlideChange = (swiper: SwiperClass) => {
+    const activeJourney = journeys[activeDay];
+    const center = {
+      lat: activeJourney.places[swiper.activeIndex].place.latitude,
+      lng: activeJourney.places[swiper.activeIndex].place.longitude,
+    };
+    setCenterMarker(center);
+    setSelectedPinIndex(swiper.activeIndex);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.daysButtonContainer}>
+        {dates.map((_, i) => (
+          <button
+            className={activeDay === i ? styles.activeDayButton : styles.inactiveDayButton}
+            onClick={() => onDayChange(i)}
+          >
+            day {i + 1}
+          </button>
+        ))}
+      </div>
+      <Swiper
+        ref={swiperRef}
+        centeredSlides={true}
+        spaceBetween={8}
+        slidesPerView={1}
+        onSlideChange={handleSlideChange}
+        breakpoints={{400: {slidesPerView: 1.2}}}
+      >
+        {journeys[activeDay].places.map((place, j) => (
+          <SwiperSlide key={`${journeys[activeDay].id}-${j}`} className={styles.swiperSlideItem}>
+            <PlaceCard
+              key={`${journeys[activeDay].id}-${place.id}-${j}`}
+              index={j + 1}
+              name={place.place.title}
+              category={place.place.category}
+              address={place.place.address}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default RouteMapSlide;

src/components/Route/RouteTabPanel/RouteTabPanel.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .panelContainer {
   -ms-overflow-style: none;
@@ -16,6 +16,13 @@
     height: 16rem;
   }
 
+  .zoomInbutton {
+    position: absolute;
+    top: 16rem;
+    right: 2rem;
+    z-index: 10;
+  }
+
   .routeContainer {
     .journeysContainer {
       display: flex;