Merge pull request #110 from Strong-Potato/93-feat-create-route-tab-c…

…omponent

Feat: create route tab component

src/components/Route/DayNavigationBar/DayNavigationBar.module.scss

@@ -0,0 +1,52 @@
+@use "@/sass" as *;
+
+nav {
+  height: 7rem;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 20px;
+  position: sticky;
+  top: 25.5rem;
+  background-color: $neutral0;
+
+  .dayButtonContainer {
+    display: flex;
+    gap: 10px;
+    height: 3.8rem;
+    overflow-x: auto;
+
+    button {
+      @include typography(button);
+      border-radius: 8px;
+      padding: 8px 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: $neutral100;
+      color: $neutral800;
+      white-space: nowrap;
+    }
+
+    .activeButton {
+      background-color: $primary300;
+      color: $neutral0;
+    }
+  }
+
+  .wholeEditButtonContainer {
+    padding-left: 35px;
+    // FIXME: 그라데이션 수정
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0.2%, #fff 22.5%);
+
+    .wholeEditButton {
+      @include typography(button);
+      color: $neutral400;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 8px;
+      gap: 0.8rem;
+      white-space: nowrap;
+    }
+  }
+}

src/components/Route/DayNavigationBar/DayNavigationBar.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import styles from "./DayNavigationBar.module.scss";
+
+import { DayNavigationBarProps } from "@/types/route";
+
+function DayNavigationBar({ dateList }: DayNavigationBarProps) {
+  const [selectedDay, setSelectedDay] = useState(1);
+
+  // TODO: 클릭 시 해당 day로 스크롤 이동
+  const handleDayClick = (day: number) => {
+    setSelectedDay(day);
+  };
+
+  return (
+    <nav>
+      <div className={styles.dayButtonContainer}>
+        {dateList.map((_, index) => (
+          <button
+            key={index}
+            className={index + 1 === selectedDay ? styles.activeButton : ""}
+            onClick={() => handleDayClick(index + 1)}
+          >
+            Day {index + 1}
+          </button>
+        ))}
+      </div>
+      <div className={styles.wholeEditButtonContainer}>
+        <button className={styles.wholeEditButton}>편집</button>
+      </div>
+    </nav>
+  );
+}
+
+export default DayNavigationBar;

src/components/Route/DayRoute/DayRoute.module.scss

@@ -0,0 +1,39 @@
+@use "@/sass" as *;
+
+.dayRouteContainer {
+  .dayHeader {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.7rem;
+
+    .dayContainer {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+
+      .dayTitle {
+        @include typography(titleLarge);
+        color: $neutral900;
+      }
+
+      .dayDate {
+        @include typography(captionSmall);
+        color: $neutral400;
+      }
+    }
+  }
+
+  .optimizationButton {
+    font-size: 1.2rem;
+    font-weight: 700;
+    line-height: 1.6rem;
+    color: $primary300;
+    margin-bottom: 16px;
+  }
+
+  .placeListContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+}

src/components/Route/DayRoute/DayRoute.tsx

@@ -0,0 +1,44 @@
+import { AiOutlinePlus as PlusIcon } from "react-icons/ai";
+
+import styles from "./DayRoute.module.scss";
+
+import EmptyRoute from "../EmptyRoute/EmptyRoute";
+import PlaceCard from "../PlaceCard/PlaceCard";
+
+import { DayRouteProps } from "@/types/route";
+
+function DayRoute({ day, date, placeList }: DayRouteProps) {
+  return (
+    <div className={styles.dayRouteContainer}>
+      <header className={styles.dayHeader}>
+        <div className={styles.dayContainer}>
+          <span className={styles.dayTitle}>DAY {day}</span>
+          <span className={styles.dayDate}>{date}</span>
+        </div>
+        <button className={styles.editButton}>
+          <PlusIcon size="2.4rem" />
+        </button>
+      </header>
+      <div>
+        <button className={styles.optimizationButton}>루트 최적화</button>
+        <div className={styles.placeListContainer}>
+          {placeList.length ? (
+            placeList.map((place, index) => (
+              <PlaceCard
+                key={index}
+                index={place.Order + 1}
+                name={place.place.title}
+                category={place.place.category}
+                address={`${place.place.address}, ${place.place.addressDetail}`}
+              />
+            ))
+          ) : (
+            <EmptyRoute />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DayRoute;

src/components/Route/EmptyDate/EmptyDate.module.scss

@@ -0,0 +1,38 @@
+@use "@/sass" as *;
+
+.emptyDateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.4rem;
+  margin-top: 12.8rem;
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+
+    h1 {
+      @include typography(subTitle);
+      color: $neutral400;
+    }
+
+    p {
+      @include typography(captionSmall);
+      color: $neutral300;
+    }
+  }
+
+  button {
+    @include typography(button);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 16px;
+    border-radius: 100px;
+    border: 1px solid $primary300;
+    background-color: $primary100;
+    color: $primary300;
+  }
+}

src/components/Route/EmptyDate/EmptyDate.tsx

@@ -0,0 +1,15 @@
+import styles from "./EmptyDate.module.scss";
+
+function EmptyDate() {
+  return (
+    <div className={styles.emptyDateContainer}>
+      <div className={styles.textContainer}>
+        <h1>생성된 일정이 없습니다.</h1>
+        <p>날짜를 정하고 일정을 만들어보세요!</p>
+      </div>
+      <button>날짜 정하러 가기</button>
+    </div>
+  );
+}
+
+export default EmptyDate;

src/components/Route/EmptyRoute/EmptyRoute.module.scss

@@ -0,0 +1,25 @@
+@use "@/sass" as *;
+
+.emptyRouteContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 4rem;
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+
+    h1 {
+      @include typography(subTitle);
+      color: $neutral400;
+    }
+
+    p {
+      @include typography(captionSmall);
+      color: $neutral300;
+    }
+  }
+}

src/components/Route/EmptyRoute/EmptyRoute.tsx

@@ -0,0 +1,14 @@
+import styles from "./EmptyRoute.module.scss";
+
+function EmptyRoute() {
+  return (
+    <div className={styles.emptyRouteContainer}>
+      <div className={styles.textContainer}>
+        <h1>생성된 일정이 없습니다.</h1>
+        <p>+를 눌러 일정을 만들어보세요!</p>
+      </div>
+    </div>
+  );
+}
+
+export default EmptyRoute;

src/components/Route/MapInTrip/MapInTrip.module.scss

@@ -0,0 +1,7 @@
+.mapInTripContainer {
+  border: 1px solid black;
+  width: 100%;
+  min-width: 36rem;
+  max-width: 45rem;
+  height: 16rem;
+}

src/components/Route/MapInTrip/MapInTrip.tsx

@@ -0,0 +1,44 @@
+import { CustomOverlayMap, Map, Polyline } from "react-kakao-maps-sdk";
+
+import styles from "./MapInTrip.module.scss";
+
+import Marker1 from "@/assets/tripIcons/marker1.svg?react";
+import Marker2 from "@/assets/tripIcons/marker2.svg?react";
+import Marker3 from "@/assets/tripIcons/marker3.svg?react";
+
+function MapInTrip() {
+  const linePath = [
+    { lat: 37.76437082535426, lng: 128.87675285339355 },
+    { lat: 37.7911054, lng: 128.9149116 },
+    { lat: 37.6964635, lng: 128.890664 },
+  ];
+
+  return (
+    <>
+      <Map
+        className={styles.mapInTripContainer}
+        center={{ lat: linePath[0].lat, lng: linePath[0].lng }}
+        level={10}
+      >
+        <Polyline
+          path={linePath}
+          strokeWeight={3}
+          strokeColor="#3F444D"
+          strokeOpacity={1}
+          strokeStyle="longdash"
+        />
+        <CustomOverlayMap position={linePath[0]}>
+          <Marker1 />
+        </CustomOverlayMap>
+        <CustomOverlayMap position={linePath[1]}>
+          <Marker2 />
+        </CustomOverlayMap>
+        <CustomOverlayMap position={linePath[2]}>
+          <Marker3 />
+        </CustomOverlayMap>
+      </Map>
+    </>
+  );
+}
+
+export default MapInTrip;

src/components/Route/PlaceCard/PlaceCard.module.scss

@@ -0,0 +1,45 @@
+@use "@/sass" as *;
+
+.cardContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  // padding: 16px 20px;
+
+  .numberContainer {
+    @include typography(captionSmall);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 2rem;
+    min-height: 2rem;
+    background-color: $secondary400;
+    border-radius: 50%;
+    color: $neutral0;
+  }
+
+  .placeContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 16px 20px;
+    border-radius: 16px;
+    background-color: $neutral0;
+    box-shadow: $shadow200;
+
+    h1 {
+      @include typography(titleMedium);
+      color: $neutral900;
+    }
+
+    h2 {
+      @include typography(captionSmall);
+      color: $primary200;
+    }
+
+    p {
+      @include typography(captionSmall);
+      color: $neutral400;
+    }
+  }
+}