Merge branch 'feature9-routeview' into develop

210-reverof · May 18, 2023 · 8b30135 · 8b30135
2 parents 9fbbe61 + 220870c
commit 8b30135
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 67 deletions.
diff --git a/frontend/src/components/share/KakaoMap.vue → frontend/src/components/plan/KakaoMap.vue b/frontend/src/components/share/KakaoMap.vue → frontend/src/components/plan/KakaoMap.vue
diff --git a/frontend/src/components/plan/PlanAdd.vue b/frontend/src/components/plan/PlanAdd.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import KakaoMap from "@/components/share/KakaoMap.vue";
+import KakaoMap from "@/components/plan/KakaoMap.vue";
 import PlanDisplay from "@/components/plan/side/PlanDisplay.vue";
 import PlanSearch from "@/components/plan/side/PlanSearch.vue";
 
@@ -26,7 +26,7 @@ export default {
   methods: {
     addPointToMap(lat, lng) {
       console.log("in adding board");
-      this.$refs.kakaomap.addPoint(lat, lng); // lat과 lng은 실제 좌표값으로 대체해야 합니다.
+      this.$refs.kakaomap.addPoint(lat, lng);
     },
   },
 };

diff --git a/frontend/src/components/plan/side/PlanItem.vue b/frontend/src/components/plan/side/PlanItem.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="plan-item">
+        <div class="place-idx">1</div>
         <img class="place-image" src="https://via.placeholder.com/300x200">
         <div class="place-name">장소이름</div>
         <div class="place-addr">주소</div>
@@ -21,6 +22,20 @@ export default {
     margin-left: 10px;
     margin-top: 10px;
     margin-bottom: 20px;
+    position: relative;
+}
+
+.place-idx {
+  position: absolute;
+  top: 10px; 
+  left: 10px; 
+  background-color: rgb(52, 114, 50);
+  border-radius: 50px;
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3);
+  color: white;
+  padding: 3px 8px; 
+  font-size: 14px; 
+  font-weight: bold;
 }
 
 .place-image {

diff --git a/frontend/src/components/plan/view/PlanDisplay.vue b/frontend/src/components/plan/view/PlanDisplay.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="plan-display">
+      <div class="exp-title">완전 예쁜 루트</div>
+      <div class="exp-desc">
+        2023.01.07, jessixas_tt
+      </div>
+      <div class="plan-info">여행지 개수 : 이동거리 : 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: 650px;
+    overflow-y: auto;
+  }
+  </style>
+
diff --git a/frontend/src/components/plan/view/PlanView.vue b/frontend/src/components/plan/view/PlanView.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="plan-view">
+    <plan-display></plan-display>
+    <div class="map-block">
+      <kakao-map ref="kakaomap"></kakao-map>
+    </div>
+  </div>
+</template>
+
+<script>
+import KakaoMap from "@/components/plan/KakaoMap.vue";
+import PlanDisplay from "@/components/plan/view/PlanDisplay.vue";
+
+export default {
+  name: "PlanView",
+  components: {
+    KakaoMap,
+    PlanDisplay
+  },
+  data() {
+    return {
+      message: "",
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.plan-view {
+  display: flex;
+  width: 100%;
+}
+
+.plan-display {
+  min-width: 200px; /* 왼쪽 컴포넌트의 최소 너비 설정 */
+}
+
+.map-block {
+  flex: 1;
+  position: relative;
+}</style>
diff --git a/frontend/src/components/share/ShareMap.vue b/frontend/src/components/share/ShareMap.vue
diff --git a/frontend/src/components/share/ViewPlan.vue b/frontend/src/components/share/ViewPlan.vue
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -25,6 +25,11 @@ const routes = [
         path: 'add',
         name: 'planAdd',
         component: () => import(/* webpackChunkName: "plan" */ '@/components/plan/PlanAdd.vue'),
+      },
+      {
+        path: 'plan',
+        name: 'viewPlan',
+        component: () => import(/* webpackChunkName: "plan" */ '@/components/plan/view/PlanView.vue'),
       }
     ]
   },
@@ -61,11 +66,6 @@ const routes = [
         path: 'detail',
         name: 'shareDetail',
         component: () => import(/* webpackChunkName: "question" */ '@/components/share/ShareDetail.vue'),
-      },
-      {
-        path: 'plan',
-        name: 'viewPlan',
-        component: () => import(/* webpackChunkName: "question" */ '@/components/share/ViewPlan.vue'),
       }
     ]
   },