Merge branch 'develop' of https://github.com/210-reverof/statrip into…

… develop
210-reverof · May 18, 2023 · 9fbbe61 · 9fbbe61
2 parents a22dd7e + 5296af2
commit 9fbbe61
Show file tree

Hide file tree

Showing 7 changed files with 378 additions and 89 deletions.
diff --git a/frontend/src/components/home/TopBlock.vue b/frontend/src/components/home/TopBlock.vue
@@ -2,7 +2,7 @@
   <div class="top-block">
     <div>
       <h1>최고의 여행지</h1>
-      <b-button :click="moveToAddPlan" class="mx-3" variant="success">여행 경로 추가하기</b-button>
+      <b-button @click="moveToAddPlan" class="mx-3" variant="success">여행 경로 추가하기</b-button>
       <b-button class="mx-3" variant="dark">내 핫스팟 인증하기</b-button>
     </div>
   </div>

diff --git a/frontend/src/components/plan/PlanAdd.vue b/frontend/src/components/plan/PlanAdd.vue
@@ -1,12 +1,64 @@
 <template>
-    <div class="plan-add">
-        경로 추가하기
+  <div class="plan-add">
+    <plan-display></plan-display>
+    <div class="map-block">
+      <kakao-map ref="kakaomap"></kakao-map>
+      <b-button v-b-toggle.sidebar-right class="search-bar-button"
+        >여행지 검색</b-button
+      >
+      <plan-search @search-click="addPointToMap"></plan-search>
     </div>
+  </div>
 </template>
 
 <script>
+import KakaoMap from "@/components/share/KakaoMap.vue";
+import PlanDisplay from "@/components/plan/side/PlanDisplay.vue";
+import PlanSearch from "@/components/plan/side/PlanSearch.vue";
+
 export default {
-    
+  name: "PlanAdd",
+  components: {
+    KakaoMap,
+    PlanDisplay,
+    PlanSearch
+  },
+  methods: {
+    addPointToMap(lat, lng) {
+      console.log("in adding board");
+      this.$refs.kakaomap.addPoint(lat, lng); // lat과 lng은 실제 좌표값으로 대체해야 합니다.
+    },
+  },
+};
+</script>
+
+<style scoped>
+.plan-add {
+  display: flex;
+  width: 100%;
+}
+
+.plan-display {
+  min-width: 200px; /* 왼쪽 컴포넌트의 최소 너비 설정 */
+}
+
+.map-block {
+  flex: 1;
+  position: relative;
+}
+
+.search-bar-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  background-color: rgb(66, 131, 77);
+  border-color: rgb(76, 136, 85);
+}
 
+.sidebar-content {
+  flex: 1; /* Make the sidebar content expand to fill the available space */
+  display: flex;
+  flex-direction: column;
 }
-</script>
+</style>
diff --git a/frontend/src/components/plan/side/PlanDisplay.vue b/frontend/src/components/plan/side/PlanDisplay.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="plan-display">
+    <div class="exp-title">현재 여행 경로</div>
+    <div class="exp-desc">
+      지도에서 바로 여행지를 추가하세요. 특정 여행지를 삭제하려면 하단에 추가된
+      칸을 더블 클릭하세요
+    </div>
+    <div class="plan-info">여행지 개수 : 1 최단 경로 : 1</div>
+    <div class="scroll-container">
+      <plan-item></plan-item>
+      <plan-item></plan-item>
+      <plan-item></plan-item>
+      <plan-item></plan-item>
+      <plan-item></plan-item>
+    </div>
+  </div>
+</template>
+
+<script>
+import PlanItem from "@/components/plan/side/PlanItem.vue";
+
+export default {
+  name: "PlanDisplay",
+  components: {
+    PlanItem,
+  },
+};
+</script>
+
+<style scoped>
+.plan-display {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.exp-title {
+  width: 80%;
+  text-align: left;
+  padding-top: 20px;
+  font-size: 20px;
+  padding-bottom: 8px;
+  font-weight: bold;
+}
+
+.exp-desc {
+  width: 80%;
+  text-align: left;
+  font-size: 14px;
+  padding-bottom: 16px;
+}
+
+.plan-info {
+  width: 80%;
+  text-align: left;
+  font-size: 14px;
+  padding-bottom: 8px;
+  color: darkgreen;
+  font-weight: 600;
+}
+.plan-items {
+  height: 80px;
+}
+
+.scroll-container {
+  width: 90%;
+  max-height: 600px;
+  overflow-y: auto;
+}
+</style>
diff --git a/frontend/src/components/plan/side/PlanItem.vue b/frontend/src/components/plan/side/PlanItem.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="plan-item">
+        <img class="place-image" src="https://via.placeholder.com/300x200">
+        <div class="place-name">장소이름</div>
+        <div class="place-addr">주소</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PlanItem",
+
+}
+</script>
+
+<style scoped>
+.plan-item {
+    width: 90%;
+    height: 200px;
+    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
+    margin-left: 10px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.place-image {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+}
+
+.place-name {
+    text-align: start;
+    margin-top: 4px;
+    margin-left: 12px;
+    font-size: 16px;
+    padding-top: 4px;
+}
+
+.place-addr{
+    text-align: start;
+    margin-left: 12px;
+    font-size: 12px;
+}
+</style>
diff --git a/frontend/src/components/plan/side/PlanSearch.vue b/frontend/src/components/plan/side/PlanSearch.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="plan-search">
+    <b-sidebar
+      id="sidebar-right"
+      bg-variant="dark"
+      text-variant="light"
+      right
+      shadow
+      v-model="sidebarVisible"
+    >
+      <div class="sidebar-content">
+        <div class="exp-title">여행지 검색</div>
+        <div class="exp-desc">
+            지역별, 유형별로 여행지를 검색하세요
+        </div>
+        <div class="plan-info">시도</div>
+        <b-form-select
+          v-model="selectedSido"
+          :options="sidos"
+          class="search-sel"
+        ></b-form-select>
+        <div class="plan-info">구군</div>
+        <b-form-select
+          v-model="selectedGugun"
+          :options="guguns"
+          class="search-sel"
+        ></b-form-select>
+        <div class="plan-info">유형</div>
+        <b-form-select
+          v-model="selectedType"
+          :options="types"
+          class="search-sel"
+        ></b-form-select>
+      </div>
+      <b-button @click="searchBtn" class="search-bar-button">검색</b-button>
+    </b-sidebar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PlanSearch",
+  data() {
+    return {
+      sidebarVisible: false,
+      selectedSido: 0,
+      sidos: [
+        { value: 0, text: "서울" },
+        { value: 1, text: "부산" },
+      ],
+      selectedGugun: 0,
+      guguns: [
+        { value: 0, text: "강남" },
+        { value: 1, text: "강동" },
+      ],
+      selectedType: 0,
+      types: [
+        { value: 0, text: "레포츠" },
+        { value: 1, text: "식당" },
+      ],
+    };
+  },
+  methods: {
+    searchBtn() {
+      console.log("here");
+      this.$emit("search-click", 127.5, 36.2);
+      this.sidebarVisible = false;
+    },
+  },
+};
+</script>
+<style scoped>
+.search-sel {
+  width: 80%;
+  margin-bottom: 20px;
+}
+
+.exp-title {
+  width: 80%;
+  text-align: left;
+  padding-top: 20px;
+  font-size: 20px;
+  padding-bottom: 8px;
+  margin-left: 35px;
+  font-weight: bold;
+}
+
+.exp-desc {
+  width: 80%;
+  text-align: left;
+  margin-left: 35px;
+  font-size: 14px;
+  padding-bottom: 16px;
+}
+
+.plan-info {
+  margin-left: 35px;
+  width: 80%;
+  text-align: left;
+  font-size: 14px;
+  padding-bottom: 8px;
+  color: rgb(160, 190, 160);
+  font-weight: 600;
+}
+
+.search-bar-button {
+    margin-top: 60px
+}
+</style>