add: mypage 세부페이지 완료 #11

frontend/src/components/home/PlanCard.vue

@@ -2,11 +2,8 @@
   <div class="plan-card">
     <div class="card-background">
       <user-tag class="user-tag"></user-tag>
-      <b-row
-        class="image-row"
-        id="my-row"
-      >
-        <b-col class="card-col" cols="3" v-for="item in plan.route" :key="item.id">
+      <b-row class="my-row">
+        <b-col class="card-col" cols="3" v-for="item in lists" :key="item.id">
           <img class="thumbnail" :src="item.img" />
         </b-col>
       </b-row>
@@ -35,19 +32,19 @@ export default {
     return {
     };
   },
+  computed: {
+    lists() {
+      const route = this.plan.route;
+      return route.slice(0,3);
+    },
+  },
 };
 </script>
 
 <style scoped>
 .plan-card {
-  width: 1800px;
-  margin-bottom: 40px;
-}
-
-.card-col {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 2%;
+  width: 1500px;
+  margin: 40px auto;
 }
 
 .card-background {
@@ -57,18 +54,24 @@ export default {
 }
 
 .user-tag {
-  padding-left: 60px;
+  padding: 30px;
   padding-top: 40px;
 }
 
-.image-row {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.my-row{
+  margin: 0 auto;
+
+}
+
+.card-col {
+  width: 450px;
+  height: 300;
+  margin: 0 auto;
 }
 
 .thumbnail {
-  padding: 60px;
+  width: 100%;
+  margin: 30px auto;
 }
 
 .content-row {

frontend/src/components/mypage/MyPageMain.vue

@@ -4,6 +4,7 @@
       <h1>마이 페이지</h1>
       <hr />
       <div><doughnut-chart-graph></doughnut-chart-graph></div>
+      <hr />
       <div>
         <div>
           <b-row class="center" id="my-row">
@@ -46,10 +47,14 @@
               @click="moveDetail(item.id)"
             >
         <!-- sharelist에 띄울 card의 모양에 들어가는 데이터의 리스트를 받아 출력 -->
-            <share-card :detail="item"></share-card>
+            <share-card class="card-size" :detail="item"></share-card>
           </b-col>
         </b-row>
-        <b-row class="center"> 더보기 버튼 </b-row>
+        <b-row class="center">
+          <h5 @click="$router.push({name: 'myShareList', params:{items:shareitems}})">
+            더보기
+          </h5>
+        </b-row>
         <hr />
       </div>
     </div>
@@ -244,6 +249,10 @@ export default {
   margin: 0 auto;
 }
 
+hr{
+  margin-bottom: 50px;
+}
+
 .center {
   justify-content: center;
 }
@@ -254,4 +263,10 @@ export default {
   justify-content: center;
   padding-bottom: 2%;
 }
+
+/* share-card */
+.card-size{
+  width: 85%;
+  margin: 60px auto;
+}
 </style>

frontend/src/components/mypage/MyShareList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="share-list">
+    <div class="contents-block">
+      <b-row>
+        <b-col>
+          <h2>마이 페이지</h2>
+          <h5>나의 공유 계획</h5>
+          <hr />
+        </b-col>
+      </b-row>
+
+      <b-row
+        id="my-row"
+        :items="items"
+        :per-page="perPage"
+        :current-page="currentPage"
+      >
+      <!-- 카드 하나씩을 출력하며 각 카드에 클릭 이벤트를 달아줌.
+       id값만 넘어가기 때문에 moveDetail로 넘어간 shareDetail에서는 별도의 get을 통해 게시글에 들어갈 plan을 받아줘야 함 -->
+        <b-col
+        class="col-margin"
+          cols="6"
+          v-for="item in lists"
+          :key="item.name"
+          @click="moveDetail(item.id)"
+        >
+        <!-- sharelist에 띄울 card의 모양에 들어가는 데이터의 리스트를 받아 출력 -->
+          <share-card class="card-size" :detail="item"></share-card>
+        </b-col>
+      </b-row>
+    </div>
+
+    <b-button class="btn-pos" squared variant="outline-info">글쓰기</b-button>
+
+    <b-pagination
+      class="center"
+      v-model="currentPage"
+      :total-rows="totalRows"
+      :per-page="perPage"
+      aria-controls="my-row"
+    ></b-pagination>
+  </div>
+</template>
+
+<script>
+import ShareCard from "@/components/home/ShareCard.vue";
+export default {
+  name: "ShareList",
+  components: {
+    ShareCard,
+  },
+  data: function () {
+    return {
+      perPage: 6,
+      currentPage: 1,
+      items: [
+      ],
+    };
+  },
+  created() {
+    this.items = this.$route.params.items;
+  },
+  computed: {
+    lists() {
+      const items = this.items;
+      // Return just page of items needed
+      return items.slice(
+        (this.currentPage - 1) * this.perPage,
+        this.currentPage * this.perPage
+      );
+    },
+    totalRows() {
+      return this.items.length;
+    },
+  },
+  methods: {
+    moveDetail(id) {
+      console.log(id);
+      this.$router.push({ name: "shareDetail", params: { id: id } });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.share-list {
+  justify-content: center;
+}
+
+.contents-block {
+  max-width: 1500px;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.center {
+  justify-content: center;
+}
+
+.card-size{
+  width: 85%;
+  margin: 60px auto;
+}
+
+.btn-pos {
+  margin-left: 80%;
+  margin-right: 2%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

frontend/src/components/share/ShareDetail.vue

@@ -63,7 +63,7 @@ export default {
 
 <style scoped>
 .contents-block {
-  max-width: 1800px;
+  max-width: 1500px;
   justify-content: center;
   margin: 0 auto;
 }

frontend/src/router/index.js

@@ -89,6 +89,11 @@ const routes = [
         path: 'myplan',
         name: 'myPlanList',
         component: () => import(/* webpackChunkName: "auth" */ '@/components/mypage/MyPlanList.vue'),
+      },
+      {
+        path: 'myshare',
+        name: 'myShareList',
+        component: () => import(/* webpackChunkName: "auth" */ '@/components/mypage/MyShareList.vue'),
       }
     ]