111 feat create add places from vote component

src/components/BottomSlide/BottomSlide.module.scss

@@ -5,7 +5,7 @@
   top: 0;
   width: 450px;
   height: 100vh;
-  background-color: rgba(20, 20, 20, 0.8);
+  background-color: rgba(0, 0, 0, 0.6);
   z-index: 100;
 
   .slide {

src/components/Route/AddPlace/AddPlace.module.scss

@@ -0,0 +1,46 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+
+  h1 {
+    @include typography(button);
+    color: $neutral700;
+    margin-top: -1.2rem;
+  }
+
+  .buttonsContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: calc((100% - 14.4rem) / 5);
+
+    .buttonContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.8rem;
+      width: 8.2rem;
+
+      button {
+        background-color: $neutral0;
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 50%;
+        box-shadow: $shadow100;
+        padding: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      p {
+        @include typography(tabLabel);
+        color: $neutral900;
+      }
+    }
+  }
+}

src/components/Route/AddPlace/AddPlace.tsx

@@ -0,0 +1,37 @@
+import { AiOutlineHeart as WishIcon } from "react-icons/ai";
+import { AiOutlineSearch as SearchIcon } from "react-icons/ai";
+import { BiTask as VoteIcon } from "react-icons/bi";
+
+import styles from "./AddPlace.module.scss";
+
+function AddPlace() {
+  return (
+    <>
+      <div className={styles.container}>
+        <h1>일정 추가하기</h1>
+        <div className={styles.buttonsContainer}>
+          <div className={styles.buttonContainer}>
+            <button>
+              <SearchIcon color="#979C9E" size="2.4rem" />
+            </button>
+            <p>장소 검색</p>
+          </div>
+          <div className={styles.buttonContainer}>
+            <button>
+              <WishIcon color="#FF85B1" size="2.4rem" />
+            </button>
+            <p>찜 목록 검색</p>
+          </div>
+          <div className={styles.buttonContainer}>
+            <button>
+              <VoteIcon color="#62AAFF" size="2.4rem" />
+            </button>
+            <p>투표 불러오기</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AddPlace;

src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.module.scss

@@ -0,0 +1,36 @@
+@use "@/sass" as *;
+
+.completedVoteContainer {
+  padding: 8px 20px 36px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+
+    div,
+    button {
+      display: flex;
+      align-items: center;
+      gap: 0.2rem;
+
+      h2 {
+        @include typography(titleMedium);
+        color: $neutral900;
+      }
+
+      span {
+        @include typography(tabLabel);
+        color: $neutral800;
+      }
+    }
+  }
+
+  .voteListContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+}

src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.tsx

@@ -0,0 +1,85 @@
+import { GiRoundStar as CompletedIcon } from "react-icons/gi";
+import { MdOutlineReplay as ResetIcon } from "react-icons/md";
+
+import styles from "./CompletedVote.module.scss";
+
+import VoteCard from "@/components/Route/AddPlace/FromVote/VoteCard/VoteCard";
+
+function CompletedVote() {
+  const voteList = [
+    {
+      voteId: 0,
+      title: "카페 어디 갈 거야?",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 1,
+      title: "숙소 어디로 할까? 여기 어때? 저기 어때?",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 2,
+      title: "둘째 날 숙소 어디서 묵을래?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 3,
+      title: "루프탑 카페 정하자~",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 4,
+      title: "여기 어때?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 5,
+      title: "저기 어때?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 6,
+      title: "요기요",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 7,
+      title: "겨울 여행",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 8,
+      title: "가자",
+      voteStatus: "VOTING",
+    },
+  ];
+
+  const handleResetButtonClick = () => {
+    console.log("리셋");
+  };
+
+  return (
+    <div className={styles.completedVoteContainer}>
+      <header>
+        <div>
+          <h2>결정 완료된 투표</h2>
+          <CompletedIcon size="2.4rem" color="#FEE500" />
+        </div>
+        <button onClick={handleResetButtonClick}>
+          <ResetIcon size="2.2rem" color="#23272F" />
+          <span>선택 초기화</span>
+        </button>
+      </header>
+      <div className={styles.voteListContainer}>
+        {voteList.map(
+          (vote) =>
+            vote.voteStatus === "COMPLETED" && (
+              <VoteCard id={vote.voteId} title={vote.title} />
+            ),
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CompletedVote;

src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.module.scss

@@ -0,0 +1,26 @@
+@use "@/sass" as *;
+
+.inProgressVoteContainer {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  margin-bottom: 12rem;
+
+  header {
+    display: flex;
+    justify-content: flex-start;
+    gap: 0.2rem;
+
+    h2 {
+      @include typography(titleMedium);
+      color: $neutral900;
+    }
+  }
+
+  .voteListContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+}

src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.tsx

@@ -0,0 +1,73 @@
+import { AiOutlineComment as InProgressIcon } from "react-icons/ai";
+
+import styles from "./InProgressVote.module.scss";
+
+import VoteCard from "@/components/Route/AddPlace/FromVote/VoteCard/VoteCard";
+function InProgressVote() {
+  const voteList = [
+    {
+      voteId: 0,
+      title: "카페 어디 갈 거야?",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 1,
+      title: "숙소 어디로 할까? 여기 어때? 저기 어때?",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 2,
+      title: "둘째 날 숙소 어디서 묵을래?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 3,
+      title: "루프탑 카페 정하자~",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 4,
+      title: "여기 어때?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 5,
+      title: "저기 어때?",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 6,
+      title: "요기요",
+      voteStatus: "COMPLETED",
+    },
+    {
+      voteId: 7,
+      title: "겨울 여행",
+      voteStatus: "VOTING",
+    },
+    {
+      voteId: 8,
+      title: "가자",
+      voteStatus: "VOTING",
+    },
+  ];
+
+  return (
+    <div className={styles.inProgressVoteContainer}>
+      <header>
+        <h2>진행 중인 투표</h2>
+        <InProgressIcon size="2.4rem" color="#979C9E" />
+      </header>
+      <div className={styles.voteListContainer}>
+        {voteList.map(
+          (vote) =>
+            vote.voteStatus === "COMPLETED" && (
+              <VoteCard id={vote.voteId} title={vote.title} />
+            ),
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default InProgressVote;

src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.module.scss

@@ -0,0 +1,66 @@
+@use "@/sass" as *;
+
+.container,
+.clickedContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 8px;
+  padding: 16px;
+  width: 100%;
+  gap: 1.2rem;
+
+  .imageContainer {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    img {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 8px;
+      object-fit: contain no-repeat;
+      background:
+        linear-gradient(
+          0deg,
+          rgba(52, 51, 48, 0.3) 0%,
+          rgba(52, 51, 48, 0.3) 100%
+        ),
+        lightgray 50%;
+    }
+
+    p {
+      @include typography(captionSmall);
+      color: $neutral0;
+      position: absolute;
+      left: calc(50% - 0.6rem);
+    }
+  }
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    h1,
+    h2 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    h1 {
+      @include typography(button);
+      color: $neutral900;
+    }
+
+    h2 {
+      @include typography(captionSmall);
+      color: $neutral400;
+    }
+  }
+}
+
+.clickedContainer {
+  background-color: $primary100;
+}