From 4a2e4973ab84bfbd97b170e47df4bccd0a860082 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Tue, 18 Aug 2020 10:30:51 +0900
Subject: [PATCH 01/74] =?UTF-8?q?Fix:=20=ED=83=AD=EB=B3=84=20=EA=B2=8C?=
 =?UTF-8?q?=EC=8B=9C=EA=B8=80=20=EC=9D=BD=EC=96=B4=EC=98=A4=EA=B8=B0=20?=
 =?UTF-8?q?=ED=83=AD=EC=9D=B4=EB=A6=84=EC=97=90=20=EB=A7=9E=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index f1067f7..1d4741c 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -123,7 +123,7 @@ export default {
     }
   },
   created() {
-    this.postread('latest')
+    this.postread('최신')
   },
   components: {
     Navbar,
@@ -135,8 +135,15 @@ export default {
       this.$router.push({name: 'postdetail', params: {data: one_post}})
     },
     postread(item) {
-      let lowercase_item = item.toLowerCase()
-      axios.get(API_URL+`api/v2/${lowercase_item}`)
+      let option = ""
+      if (item === "최신") {
+        option = "latest"
+      } else if (item === '조회수') {
+        option = "hits"
+      } else if (item === '좋아요') {
+        option = "likes"
+      }
+      axios.get(API_URL+`api/v2/${option}`)
       .then(({data})=>{
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {

From 7317bd0fe9fea8a4d6daa31ec1101207fecdce1a Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Tue, 18 Aug 2020 10:37:05 +0900
Subject: [PATCH 02/74] =?UTF-8?q?Modify:=20=EA=B8=80=20=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EB=A6=84=20=EB=84=A3=EB=8A=94=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index f1f175d..2eddccc 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -21,6 +21,7 @@ import TagInputBox from './TagInputBox.vue'
 
 // const API_URL = 'http://localhost:8081/'
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+const storage = window.sessionStorage
 // const FLICKR_URL = 'https://up.flickr.com/services/upload/'
 
 export default {
@@ -46,7 +47,7 @@ export default {
             var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
             this.editorText = textdata
             axios.post(API_URL+'api/v2/', {
-                author: '유저 이름',
+                author: storage.getItem("login_user"),
                 title: this.title,
                 content: this.editorText,
                 tag: tagList,

From 6a3668cc4e38208c6845ea1ea48e65ae54c9e404 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Tue, 18 Aug 2020 14:31:35 +0900
Subject: [PATCH 03/74] =?UTF-8?q?Feature=20:=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Login.vue   |  3 +++
 frontend/src/components/Navbar.vue  | 10 ++++++----
 frontend/src/components/Setting.vue |  4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index c035692..f8387c9 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -123,6 +123,7 @@ export default {
               storage.setItem("login_user", res.data.request_body.email)
               storage.setItem("uid", res.data.request_body.uid)
               storage.setItem("google_login", false)
+              storage.setItem("profileImage", res.data.request_body.profileImage)
               this.$router.push('/')
             } else {
               this.message = "로그인해주세요."
@@ -166,6 +167,8 @@ export default {
         storage.setItem("login_user", res.data.request_body.email)
         storage.setItem("uid", res.data.request_body.uid)
         storage.setItem("google_login", true)
+        storage.setItem("profileImage", res.data.request_body.profileImage)
+        // storage.setItem("profileImage", res.data.request_body.profileImage)
         this.$router.push('/')
       })
       // .catch((err) => console.log(err))
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 9b2af99..1b4aa81 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -39,7 +39,8 @@
       </div>
       <div v-if="isLogin" class="info_blog"> 
         <div @click="profileshow">
-          <img src="https://item.kakaocdn.net/do/437998cb670b87a9a8faca156155beeb8f324a0b9c48f77dbce3a43bd11ce785" class="thumb_profile" alt>
+            <img v-bind:src=profileImage class="thumb_profile" alt>
+          <!-- <img src="https://item.kakaocdn.net/do/437998cb670b87a9a8faca156155beeb8f324a0b9c48f77dbce3a43bd11ce785" class="thumb_profile" alt> -->
         </div>
         <!--프로필 클릭시 팝업되는 드롭다운 메뉴-->
         <v-card class="shortcuts">
@@ -55,7 +56,7 @@
               로그아웃
             </v-list-item>
             <v-list-item v-if="google_login" @click="onClickLogout">
-              <GoogleLogout :params="params" :logoutButton=true>로그아웃</GoogleLogout>
+              <GoogleLogin :params="params" :logoutButton=true>로그아웃</GoogleLogin>
             </v-list-item>
           </v-list>
         </v-card>
@@ -68,12 +69,12 @@
 
 <script>
 const storage = window.sessionStorage
-import GoogleLogin from 'vue-google-login' 
+import GoogleLogin from 'vue-google-login';
 
 export default {
   name: 'Navbar',
   component: {
-    GoogleLogout: GoogleLogin,
+    GoogleLogin
   },
   data() {
     return {
@@ -81,6 +82,7 @@ export default {
       isLogin: this.$store.state.isLoggedIn,
       noticemsg: '공지입니다.',
       google_login: storage.getItem("google_login"),
+      profileImage: storage.getItem("profileImage")
     }
   },
   computed: {
diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index 029e778..1af51a7 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -221,7 +221,7 @@
 
 <script>
 import axios from 'axios'
-
+const storage = window.sessionStorage
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -357,6 +357,7 @@ export default {
 			)
 			.then(response => {
 				this.userinfo.profileImage = response.data;
+				storage.setItem("profileImage", response.data)
 			})
 			.catch((err) => {
 				console.log("프로필 이미지 업로드 실패")
@@ -374,6 +375,7 @@ export default {
 			})
 			.then(response => {
 				this.userinfo.profileImage = response.data;
+				storage.setItem("profileImage", response.data)
 			})
 			.catch( (err) => {
 				console.log("프로필 이미지 삭제 실패");

From 3acdc57d5e5a6a54605216063f78ea4412bb9f5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Tue, 18 Aug 2020 21:52:46 +0900
Subject: [PATCH 04/74] =?UTF-8?q?Feature=20:=20=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json         | 24 ++++++++++
 frontend/package.json              |  1 +
 frontend/src/App.vue               |  3 +-
 frontend/src/components/Navbar.vue | 72 +++++++++++++++++++++++++++---
 4 files changed, 93 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 364f186..f104d16 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10959,6 +10959,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-class-component": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.5.tgz",
+      "integrity": "sha512-0CSftHY0bDTD+4FbYkuFf6+iKDjZ4h2in2YYJDRMk5daZIjrgT9LjFHvP7Rzqy9/s1pij3zDtTSLRUjsPWMwqg=="
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.7.tgz",
@@ -11049,6 +11054,25 @@
         "vue": "^2.5.16"
       }
     },
+    "vue-property-decorator": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",
+      "integrity": "sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==",
+      "requires": {
+        "vue-class-component": "^7.1.0"
+      }
+    },
+    "vue-roller": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/vue-roller/-/vue-roller-1.12.3.tgz",
+      "integrity": "sha512-lN9QxU/wE0yaRvxzUEASQZy9kc8xovli3ZuFXr68HnUWRjkfuKk+gMeIDR245KBu60llSZ3C6T7FlNseFcacZQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11",
+        "vue-class-component": "^7.2.3",
+        "vue-property-decorator": "^8.4.2"
+      }
+    },
     "vue-router": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 49291cd..7b71d78 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "vue": "^2.6.11",
     "vue-google-login": "^2.0.5",
     "vue-position-sticky": "^0.2.1",
+    "vue-roller": "^1.12.3",
     "vue-router": "^3.3.4",
     "vuelidate": "^0.7.5",
     "vuetify": "^2.2.11",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 03a2176..8301141 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <router-view />
+    <router-view :key="$route.fullPath"/>
+    <!-- <router-view/> -->
   </v-app>
 </template>
 
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 1b4aa81..5c2c551 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -16,9 +16,15 @@
     <v-toolbar-items style="align-items: center">
       포럼
     </v-toolbar-items>
+
       <div class="notice">
         <v-icon small>fas fa-volume-down</v-icon>
-        <span>{{noticemsg}}</span>
+        <div id="app" class="output">
+          <p>
+            <a @click="postdetail(text)" class="text">{{ text }}</a>
+           
+          </p>
+        </div>
 			</div>
 			<v-spacer></v-spacer>
       <router-link to="/search">
@@ -40,7 +46,6 @@
       <div v-if="isLogin" class="info_blog"> 
         <div @click="profileshow">
             <img v-bind:src=profileImage class="thumb_profile" alt>
-          <!-- <img src="https://item.kakaocdn.net/do/437998cb670b87a9a8faca156155beeb8f324a0b9c48f77dbce3a43bd11ce785" class="thumb_profile" alt> -->
         </div>
         <!--프로필 클릭시 팝업되는 드롭다운 메뉴-->
         <v-card class="shortcuts">
@@ -70,19 +75,31 @@
 <script>
 const storage = window.sessionStorage
 import GoogleLogin from 'vue-google-login';
+import axios from 'axios'
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
 
 export default {
   name: 'Navbar',
   component: {
-    GoogleLogin
+    GoogleLogin,
+
   },
   data() {
+    
     return {
       profile: false,
       isLogin: this.$store.state.isLoggedIn,
-      noticemsg: '공지입니다.',
       google_login: storage.getItem("google_login"),
-      profileImage: storage.getItem("profileImage")
+      profileImage: storage.getItem("profileImage"),
+
+      list: [],
+      index: 0,
+      text: '',
+      speed: 2000
+
+
     }
   },
   computed: {
@@ -106,11 +123,54 @@ export default {
     },
     profileshow() {
       this.profile = !this.profile
-    }
+    },
+    getTextFromList() {
+      var vm = this;
+      
+      vm.text = vm.list[vm.index].title;
+      // vm.textURL = vm.list[vm.index].url;
+      vm.index += 1;
+      
+      if (vm.index >= vm.list.length) {
+        vm.index = 0;
+      }
+    },
+    postdetail(text) {
+      for(var i =0; i<this.list.length; i++){
+        if( text === this.list[i].title){
+          storage.removeItem("pid")
+          storage.setItem("pid", this.list[i].pid)
+          console.log("list[i] : "+this.list[i].pid )
+          console.log("list[i] : "+this.list[i].title)
+          // article, user -> 페이지 변경 this.$router.push
+          // this.$router.push({name: 'postdetail', params: {data: this.list[i]}});
+          this.$router.push({name: 'postdetail', params: {data: this.list[i]}}).catch(()=>{});
+          
+        }
+      }
+      
+    },
+
   },
   created() {
     this.loginChecker()
+
+    axios.get(API_URL + 'api/v2/notice')
+        .then(res => {
+          // this.post = res.data
+          // pid를 활용하여 게시글로 이동
+          for(var i=0; i<res.data.length; i++){
+            this.list[i] = res.data[i];
+          }
+
+    })
   },
+  mounted(){
+    // this.text = this.list[this.index];
+    
+    this.text = "공지사항";
+    setInterval(this.getTextFromList, this.speed);
+  }
   // computed() {
   //   this.loginChecker()
   // }

From 79956458d9d780597ceb7cc7ce41346c246e2b88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 01:01:13 +0900
Subject: [PATCH 05/74] =?UTF-8?q?feature:=ED=94=BC=EB=93=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Feed.vue       | 166 ++++++++++++++++++++++++-
 frontend/src/components/Navbar.vue     |   2 +-
 frontend/src/components/PostDetail.vue |  26 +++-
 3 files changed, 185 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 3ec745f..1514a0b 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -1,15 +1,175 @@
 <template>
   <div>
-      
+    <Navbar></Navbar>
+    <div class="doContent">
+      <div class="feature_feed">
+        <div class="inner_feature">
+          <h2 id="do_top do_feed">Feed</h2>
+          <p class="top_desc">내가 좋아요한 글을 한 눈에</p>
+          <div class="info_feed">
+            좋아요
+            <span class="feed_cnt">{{posts.length}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <v-row v-if=posts.length>
+          <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'">
+            <v-hover>
+              <template v-slot="{hover}">
+                <v-card
+                  @click="postdetail(post)"
+                  height="380px"
+                  max-width="350px"
+                  :elevation="hover ? 8 : 2"
+                >
+                  <v-img
+                    class="align-end"
+                    height="200px"
+                    :src="post.thumbnail"
+                  />
+                    <!-- 제목이 가로범위 초과시 ... -->
+                    <v-card-title><h5>{{post.title}}</h5></v-card-title>
+                    <v-card-text class="text--primary" style="height:65px">
+                    <div>{{post.content}}</div>
+                    <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    <div>{{post.publishedTime}}</div>
+                  </v-card-text>
+
+                  <v-card-actions>
+                    <v-btn
+                      color="orange"
+                      text
+                    >
+                      Share
+                    </v-btn>
+
+                    <v-btn
+                      color="orange"
+                      text
+                    >
+                      Explore
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-hover>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          게시글이 없습니다.
+        </v-row>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import Navbar from '../components/Navbar.vue'
+import axios from 'axios'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+
+AOS.init();
 
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+const storage = window.sessionStorage
+
+export default {
+  name: 'Feed',
+  components: {
+    Navbar,
+  },
+  data() {
+    return{
+      posts : {
+        pid: '',
+        title: '',
+        content: '',
+        publishedTime: '',
+        thumbnail:'',
+      }
+    }
+  },
+  created() {
+    this.postread()
+  },
+  methods: {
+    postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
+    postread() {
+      axios.get(API_URL+`api/v1/likes/${storage.getItem("uid")}`)
+      .then(({data})=>{
+        // 콘텐츠 미리보기 슬라이스
+        data.forEach(el => {
+          el.tmp = el.content
+          // console.log(el)
+          if (el.content.length > 40) {
+            // 마크다운 사진 제외
+            el.content = el.content.replace(/!\[.*\)+/, "")
+            // 최대 길이 슬라이스
+            el.content = el.content.slice(0, 40)
+          }
+          // 작성 날짜만 보이게 수정
+          let year = el.publishedTime.slice(0,4);
+          let month = el.publishedTime.slice(5,7);
+          let day = el.publishedTime.slice(8,10);
+          el.publishedTime = year+"년 "+month+"월 "+day+"일"
+          this.posts = data
+        });
+      })
+      .catch(err => console.log(err))
+    }
+  }
 }
 </script>
 
 <style>
-
+.inner_feature h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+}
+.top_desc {
+  padding:0 0;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: -0.6px;
+  font-family: Noto Sans Light, sans-serif;
+}
+.info_feed {
+  float: right;
+  margin: -39px 0 0;
+  color: #909090;
+  font-size: 13px;
+}
+.feed_cnt {
+  display: inline-block;
+  font-size: 24px;
+  vertical-align: middle;
+  padding: 0 0 0 4px;
+}
+.doContent {
+  max-width: 1150px;
+  margin: 0 auto 0;
+  padding: 0 20px;
+}
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 90px;
+  border-bottom: solid 2px black;;
+}
+.feature_main {
+  width: 100%;
+  height: 133px;
+  padding: 151px 0 0;
+}
+.content {
+  min-width: 1100px; 
+  padding: 30px 0 0;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 9b2af99..d4fa2b9 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -11,7 +11,7 @@
       <router-link to="/introduce">소개</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      피드
+      <router-link to="/feed">피드</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
       포럼
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 8ba0e52..0a1f87d 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -91,15 +91,15 @@ export default {
             title: '',
             author: '',
             content: '',
+            islike: this.$route.params.data.isLike,
           },
           content: this.$route.params.data.tmp,
           Comments: null,
           CommentInput: '',
           ChildFlag: false,
           ChildCommentInput: '',
-          FeedFlag: false,
-          like: "far fa-heart",
-          // dislike: "far fa-heart",
+          FeedFlag: '',
+          like: '',
         }
     },
     created(){
@@ -109,6 +109,15 @@ export default {
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
+          this.post.islike = res.data.isLike
+          console.log(this.post.islike)
+          if(this.post.islike===true){
+            this.like = "fas fa-heart"
+            this.FeedFlag= true
+          } else {
+            this.like = "far fa-heart"
+            this.FeedFlag = false
+          }
           console.log(this.post)
           this.Comments = res.data.comments
           // console.log(this.Comments)
@@ -181,8 +190,9 @@ export default {
         if(storage.getItem("login_user")){
           //이미 피드에 있는지 체크
           if(this.FeedFlag===false){
-            this.like="fas fa-heart"
             this.FeedFlag=true;
+            this.post.islike=true;
+            this.like="fas fa-heart"
             axios
             .put(API_URL+'api/v2/likes',{
               uid : storage.getItem("uid"),
@@ -198,9 +208,15 @@ export default {
           }
           //삭제하면 db에서 제거
           else {
+            console.log("2")
             this.like="far fa-heart"
+            this.post.islike=false;
             this.FeedFlag=false;
-            axios.delete(API_URL+'api/v2/likes')
+            axios.put(API_URL+'api/v2/likes',{
+              uid : storage.getItem("uid"),
+              pid : storage.getItem("pid"),
+              status : this.FeedFlag,
+            })
             .then(function (response){
 						console.log(response);
             })

From 65ab093f60a8cf4c81fdcb1a12e727857dcc82a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 02:58:17 +0900
Subject: [PATCH 06/74] =?UTF-8?q?fix=20:=20main,=20feed=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Feed.vue   |  89 ++++++++++++++++--------
 frontend/src/components/Home.vue   | 108 +++++++++++++++++++----------
 frontend/src/components/Navbar.vue |   2 +-
 3 files changed, 135 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 1514a0b..0de11c1 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -17,40 +17,39 @@
           <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'">
             <v-hover>
               <template v-slot="{hover}">
-                <v-card
+                <v-card 
                   @click="postdetail(post)"
-                  height="380px"
+                  height="406px"
                   max-width="350px"
                   :elevation="hover ? 8 : 2"
                 >
                   <v-img
-                    class="align-end"
-                    height="200px"
+                    class="white--text align-end"
+                    height="180px"
                     :src="post.thumbnail"
                   />
+                  <div class="inner_card">
                     <!-- 제목이 가로범위 초과시 ... -->
-                    <v-card-title><h5>{{post.title}}</h5></v-card-title>
-                    <v-card-text class="text--primary" style="height:65px">
-                    <div>{{post.content}}</div>
-                    <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
-                    <div>{{post.publishedTime}}</div>
-                  </v-card-text>
-
-                  <v-card-actions>
-                    <v-btn
-                      color="orange"
-                      text
-                    >
-                      Share
-                    </v-btn>
-
-                    <v-btn
-                      color="orange"
-                      text
-                    >
-                      Explore
-                    </v-btn>
-                  </v-card-actions>
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
                 </v-card>
               </template>
             </v-hover>
@@ -160,7 +159,7 @@ export default {
 }
 .feature_feed{
   height: 133px;
-  padding: 151px 0 90px;
+  padding: 151px 0 110px;
   border-bottom: solid 2px black;;
 }
 .feature_main {
@@ -172,4 +171,40 @@ export default {
   min-width: 1100px; 
   padding: 30px 0 0;
 }
+.inner_card {
+  padding: 1.5rem;
+}
+.card_title h5{
+  font-size: 1rem;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight: 800;
+}
+.card_content{
+  width:100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  white-space: normal;
+  line-height: 1.5;
+  height:4.5em;
+  color: rgb(73, 80, 87);
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight:400;
+
+  margin: 0 0 1.5rem;
+}
+.card_content p{
+  height: 100%
+}
+.card_date {
+  font-size:0.75rem;
+  padding: 5px 0 5px;
+  color: rgb(134, 142, 150);
+}
+.liked{
+  float:right; 
+  margin-top: -24px
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 1d4741c..c62e30a 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -40,44 +40,43 @@
         <!-- 게시글 미리보기 -->
           <v-tab-item v-for="(item) in items" :key="item">
             <v-row v-if="posts.length">
-            <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'">
+            <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'"
+              style="padding:1rem">
                 <v-hover>
                 <template v-slot="{hover}">
                 <v-card 
                   @click="postdetail(post)"
-                  height="380px"
+                  height="406px"
                   max-width="350px"
                   :elevation="hover ? 8 : 2"
                 >
                   <v-img
                     class="white--text align-end"
-                    height="200px"
+                    height="180px"
                     :src="post.thumbnail"
                   />
+                  <div class="inner_card">
                     <!-- 제목이 가로범위 초과시 ... -->
-                    <v-card-title><h5>{{post.title}}</h5></v-card-title>
-                    <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle>
-                    <v-card-text class="text--primary" style="height:65px">
-                    <div>{{post.content}}</div>
-                    <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
-                    <div>{{post.publishedTime}}</div>
-                  </v-card-text>
-
-                  <v-card-actions>
-                    <v-btn
-                      color="orange"
-                      text
-                    >
-                      Share
-                    </v-btn>
-
-                    <v-btn
-                      color="orange"
-                      text
-                    >
-                      Explore
-                    </v-btn>
-                  </v-card-actions>
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
                 </v-card>
                 </template>
                 </v-hover>
@@ -148,18 +147,19 @@ export default {
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {
           el.tmp = el.content
-          if (el.content.length > 40) {
+          if(el.title.length > 18){
+            el.title = el.title.slice(0,18)+"..."
+          }
+          if (el.content.length > 120) {
             // 마크다운 사진 제외
             el.content = el.content.replace(/!\[.*\)+/, "")
-            // 최대 길이 슬라이스
-            el.content = el.content.slice(0, 40)
-            // 작성 날짜만 보이게 수정
-            let year = el.publishedTime.slice(0,4);
-            let month = el.publishedTime.slice(5,7);
-            let day = el.publishedTime.slice(8,10);
-            // console.log(year+"년 "+month+"월 "+day+"일")
-            el.publishedTime = year+"년 "+month+"월 "+day+"일"
           }
+          // 작성 날짜만 보이게 수정
+          let year = el.publishedTime.slice(0,4);
+          let month = el.publishedTime.slice(5,7);
+          let day = el.publishedTime.slice(8,10);
+          // console.log(year+"년 "+month+"월 "+day+"일")
+          el.publishedTime = year+"년 "+month+"월 "+day+"일"
           this.posts = data
         });
       })
@@ -212,9 +212,45 @@ em {
 .v-tab {
   letter-spacing: -1px;
   font-size: 16px;
-  font-family: 'Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;;
+  font-family: 'NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
 }
 .content_area{
   min-width: 1100px; 
 }
+.inner_card {
+  padding: 1.5rem;
+}
+.card_title h5{
+  font-size: 1rem;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight: 800;
+}
+.card_content{
+  width:100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  white-space: normal;
+  line-height: 1.5;
+  height:4.5em;
+  color: rgb(73, 80, 87);
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight:400;
+
+  margin: 0 0 1.5rem;
+}
+.card_content p{
+  height: 100%
+}
+.card_date {
+  font-size:0.75rem;
+  padding: 5px 0 5px;
+  color: rgb(134, 142, 150);
+}
+.liked{
+  float:right; 
+  margin-top: -24px
+}
 </style>
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 91a0a19..7285f6c 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -158,7 +158,7 @@ div > .newpost > a >button{
 }
 div > .newpost > a >button:hover {
   background-color:#6e8af8;
-  /* color:white !important;  */
+  color:white !important; 
 }
 .logo_title{
 	display : inline-block;

From 050934ef76033f3d8a25d92cc3c82aee3d9d22ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 03:38:38 +0900
Subject: [PATCH 07/74] =?UTF-8?q?feature:=20tag=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Feed.vue  |  7 ++++
 frontend/src/components/Forum.vue | 69 +++++++++++++++++++++++++++++++
 frontend/src/components/Home.vue  | 10 +++--
 frontend/src/router/index.js      |  6 +++
 4 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Forum.vue

diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 0de11c1..542fa01 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -174,6 +174,13 @@ export default {
 .inner_card {
   padding: 1.5rem;
 }
+.card_title{
+  line-height:1.2rem;
+  height: 1.2rem;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  margin: 0 0 5px;
+}
 .card_title h5{
   font-size: 1rem;
   font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
new file mode 100644
index 0000000..add8dd2
--- /dev/null
+++ b/frontend/src/components/Forum.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Navbar></Navbar>
+		<template>
+			<v-card flat style="margin-top:130px">
+				<v-tabs
+					background-color="transparent"
+					centered
+					color="black"
+					slider-color="#6987f7"
+					slider-size="3"
+				>
+					<v-tab @click="postread(item)" v-for="item in items" :key="item">
+						{{ item }}
+					</v-tab>
+				</v-tabs>
+			</v-card>
+		</template>
+		<div class="inner">
+			<v-tabs-items v-model="tab">
+				<v-tab-item v-for="(item) in items" :key="item">
+					<v-row v-if="tags.length">
+						
+					</v-row>
+				</v-tab-item>
+			</v-tabs-items>
+		</div>
+  </div>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+// import axios from 'axios'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+
+AOS.init();
+
+// const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+// const storage = window.sessionStorage
+
+export default {
+	name: 'Forum',
+	components: {
+    Navbar,
+	},
+	data() {
+		return {
+			tab: null,
+      items: [
+        '인기순', '이름순',
+      ],
+		}
+	}
+}
+</script>
+
+<style>
+.inner {
+  min-width: 1100px;
+  max-width: 1150px;
+	padding: 130px 20px 0px 20px;
+	margin: 0 auto;
+}
+/* .v-tab {
+	margin: 0 auto;
+} */
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index c62e30a..a9d6888 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -147,9 +147,6 @@ export default {
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {
           el.tmp = el.content
-          if(el.title.length > 18){
-            el.title = el.title.slice(0,18)+"..."
-          }
           if (el.content.length > 120) {
             // 마크다운 사진 제외
             el.content = el.content.replace(/!\[.*\)+/, "")
@@ -220,6 +217,13 @@ em {
 .inner_card {
   padding: 1.5rem;
 }
+.card_title{
+  line-height:1.2rem;
+  height: 1.2rem;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  margin: 0 0 5px;
+}
 .card_title h5{
   font-size: 1rem;
   font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b31f454..d2c2534 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -12,6 +12,7 @@ import FindID from '../components/user/FindID.vue'
 import Introduce from '../components/Introduce.vue'
 import Search from '../components/Search.vue'
 import Feed from '../components/Feed.vue'
+import Forum from '../components/Forum.vue'
 
 Vue.use(VueRouter)
 import store from '../router/index.js'
@@ -88,6 +89,11 @@ export default new VueRouter({
       path:'/feed',
       name:'feed',
       component: Feed
+    },
+    {
+      path:'/forum',
+      name:'forum',
+      component: Forum
     }
   ]
 })

From 2ce21e0d870efeb6eafac58222b73d9490d58b42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 09:06:18 +0900
Subject: [PATCH 08/74] =?UTF-8?q?fix:layout=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Login.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 4fb5e07..ce9133b 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -7,7 +7,7 @@
 
     <v-container fluid fill-height>
       <div class="login_do">
-        <span><h2>DO!에 로그인하세요</h2></span>
+        <span><h2><span class="logo">DO!</span>에 로그인하세요</h2></span>
         <v-form name="form" @submit.prevent style="width:318px">
           <v-text-field
             outlined
@@ -31,8 +31,9 @@
           
           <div class="login_append">
             <v-checkbox
+              hide-details
               dense
-              label="로그인 상태 유지"
+              label="아이디/비밀번호 저장"
               color="#6e8af8"
             ></v-checkbox>
             <span>아이디/비밀번호 찾기</span> 
@@ -205,7 +206,7 @@ header {
   border-radius: 0;
 }
 .login_btn{
-  margin : 20px 0 0 0;
+  margin : 60px 0 0 0;
 }
 
 .v-input{
@@ -213,21 +214,21 @@ header {
 }
 
 .login_append {
-  margin : 12px 0 0 0;
+  /* margin : 12px 0 0 0; */
   font-size : 13px;
 }
 
 .login_append > .v-input {
-  display: inline-block;
-  /* float: left; */
+  float: left;
 }
 
 .login_append > span {
   float:right;
-  padding-top:7px;
+  padding-top:12px;
 }
 .v-input >>> label {
   font-size: 13px;
+  margin-top:7px;
 }
 .google {
   padding: 0;
@@ -236,4 +237,8 @@ header {
   margin: 0 0;
   padding: 15px 101px;
 }
+.logo {
+  font-family: 'Inter', sans-serif;
+  font-weight: 800;
+}
 </style>
\ No newline at end of file

From f34586c7756299ba5651fba844e2ca7f6276b166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 09:10:39 +0900
Subject: [PATCH 09/74] fix: font-family

---
 frontend/src/components/Login.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index ce9133b..2645a4a 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -200,7 +200,8 @@ header {
 }
 .login_do > span{
   display : inline-block;
-  margin-bottom : 30px;
+  margin-bottom : 25px;
+  font-family: 'NanumSquareR','나눔스퀘어', "나눔고딕", NanumGothic, -apple-system, BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .v-text-field{
   border-radius: 0;

From 4676f50ca24195de4803595ee48b7fc888e67d2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 12:54:04 +0900
Subject: [PATCH 10/74] =?UTF-8?q?fix:=20postdetail=20post=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD,=20setting.vue?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Feed.vue       |   1 +
 frontend/src/components/Forum.vue      |   4 +-
 frontend/src/components/PostDetail.vue |   7 +-
 frontend/src/components/Setting.vue    | 487 +++++++++++++++----------
 4 files changed, 302 insertions(+), 197 deletions(-)

diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 542fa01..7b6be50 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -154,6 +154,7 @@ export default {
 }
 .doContent {
   max-width: 1150px;
+  min-width: 1100px; 
   margin: 0 auto 0;
   padding: 0 20px;
 }
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index add8dd2..14049b0 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -19,9 +19,9 @@
 		<div class="inner">
 			<v-tabs-items v-model="tab">
 				<v-tab-item v-for="(item) in items" :key="item">
-					<v-row v-if="tags.length">
+					<!-- <v-row v-if="tags.length">
 						
-					</v-row>
+					</v-row> -->
 				</v-tab-item>
 			</v-tabs-items>
 		</div>
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 0a1f87d..395f81c 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -103,14 +103,17 @@ export default {
         }
     },
     created(){
-      axios.get(API_URL + 'api/v2/p/' + storage.getItem("pid"))
+      axios.post(API_URL + 'api/v2/p',{
+        uid : storage.getItem("uid"),
+        pid : storage.getItem("pid")
+      })
         .then(res => {
           // this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
-          console.log(this.post.islike)
+          console.log(this.post)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index 1af51a7..24fd542 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -1,225 +1,275 @@
 <template>
-  <v-container style="width:70%">
-		<v-row class="mb-10">
-
-			<v-col cols="12" md="3">
-				<div class="wrapper">
-					<div class="inner">
-						<!-- <img src="http://i3a507.p.ssafy.io/img/ssafy/30d512f96f6c55318745d4e81cd2c78428407f26491e88af88d52787f6d8f10d3d9109e433ddcda8ac4adf2c4eec9303df0d831e9e6138e6db2c7294173dab08/1e67b068654a279608f42750ac4b6596a800724fa6422f0c3a77249469294a376ef61645eb0453ed46fa1afde336bc3df53e5e788b5e978a0f77bfdd28cc6477.png" height="200" width="200"> -->
-						<!-- <img src="/home/ubuntu/vlog/ssafy/30d512f96f6c55318745d4e81cd2c78428407f26491e88af88d52787f6d8f10d3d9109e433ddcda8ac4adf2c4eec9303df0d831e9e6138e6db2c7294173dab08/777c534fd04b2cc000819eaf0a63bfa135a62b42777ea4650c2743ca297b3ac6d33c001c664485c7cb3cd3a08475cd80c434be670c01f16d61218f7f9fe0bde5.png"/> -->
-
-						<div class="circle">
-							<!-- 회원 프로필 이미지 디비에서 조회 -->
-							<!-- [추가]이미지 변화에 대한 처리 -->
+	<div>
+		<Navbar></Navbar>
+		<div class="wrap">
+			<div class="inner">
+				<div class="inner_feature">
+					<h2 id="do_top do_feed">회원정보</h2>
+          <p class="top_desc">
+						{{userinfo.nickname}}님의 회원 정보입니다.<br>
+						회원 정보는 개인정보처리방침에 따라 안전하게 보호되며, 회원님의 명백한 동의 없이 공개 또는 제 3자에게 제공되지 않습니다.	
+					</p>
+				</div>
+				<div class="inner_info">
+					<div class="profile_area">
+						<div class="imgbox">
 							<img v-bind:src="userinfo.profileImage" alt="profile">
 						</div>
-
-						<div class="my-2">
-							<!-- 모달 창으로 이미지 업로드 -->
-							<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
-							<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
-							<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
-							<!-- <div> -->
-								<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
-								<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
-							<!-- </div> -->
+						<div class="btn_group">
+							<!-- 이미지 업로드 (모달) -->
+							<div class="img_btn">
+								<v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+								<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input" class="uploadimg">
+							</div>
+							<!-- 이미지 삭제 -->
+							<div class="img_btn">
+								<v-btn depressed width="150px" @click="deleteProfileImage" text color="#6e8af8">이미지 제거</v-btn>
+							</div>
 						</div>
-
-						<div>
-							<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-							<v-btn depressed width="120px" @click="deleteProfileImage">이미지 제거</v-btn>
+					</div>
+					<div class="inner_detail">
+						<div class="blog_detail">
+							블로그이름
+						</div>
+						<div class="user_detail">
+							<div class="nickname">
+								닉네임
+								{{userinfo.nickname}}
+							</div>
+							<div class="introduce">
+								소개
+								{{userinfo.introduce}}
+							</div>
+							<div class="my-2">
+								<v-btn depressed small class="btn-success" @click="modprofile">수정</v-btn>
+							</div>
 						</div>
+
 					</div>
 				</div>
-			</v-col>
+			</div>
+		</div>
+		<v-container style="width:70%">
+			<v-row class="mb-10">
+
+				<v-col cols="12" md="3">
+					<div class="wrapper">
+						<div class="inner">
+
+							<div class="circle">
+								<!-- 회원 프로필 이미지 디비에서 조회 -->
+								<!-- [추가]이미지 변화에 대한 처리 -->
+								<img v-bind:src="userinfo.profileImage" alt="profile">
+							</div>
 
+							<div class="my-2">
+								<!-- 모달 창으로 이미지 업로드 -->
+								<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
+								<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
+								<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
+								<!-- <div> -->
+									<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
+									<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
+								<!-- </div> -->
+							</div>
 
-			<v-col v-if="!clickprofile">
-				<!-- 사용자 nickname과 introduce 가져오기 -->
-				<h2>{{userinfo.nickname}}</h2>
-				<p>{{userinfo.introduce}}</p>	
-				<div class="my-2">
-						<v-btn depressed small class="btn-success" @click="modprofile">수정</v-btn>
-				</div>
-			</v-col>
+							<div>
+								<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
+								<v-btn depressed width="120px" @click="deleteProfileImage">이미지 제거</v-btn>
+							</div>
+						</div>
+					</div>
+				</v-col>
 
 
-			<!-- 클릭 시 name, description 부분 수정 -->
-			<v-col v-if="clickprofile">
-				<v-text-field outlined v-model="userinfo.nickname" hide-details style="font-size: 2em; margin-bottom:5px;"></v-text-field>
-				<v-text-field outlined v-model="userinfo.introduce" hide-details dense></v-text-field>
-				<div class="my-2">
-					<v-btn depressed small class="btn-success" @click="updateNickname">수정완료</v-btn>
-				</div>
-			</v-col>
-
-
-		</v-row>
-					<!-- 설정 영역 -->
-		<v-flex>
-		<v-row dense>
-			<v-col cols="3">
-					<h3>Blog Title</h3>
-			</v-col>
-			<v-col cols="9" align-self>
-					<div>
-							{{accountinfo.blogtitle}}
+				<v-col v-if="!clickprofile">
+					<!-- 사용자 nickname과 introduce 가져오기 -->
+					<h2>{{userinfo.nickname}}</h2>
+					<p>{{userinfo.introduce}}</p>	
+					<div class="my-2">
+							<v-btn depressed small class="btn-success" @click="modprofile">수정</v-btn>
 					</div>
-			</v-col>
-			<v-col cols="12" class="msg">
-					개인 페이지의 좌측 상단에 나타나는 페이지 제목입니다.
-			</v-col>
-		</v-row>
-		<hr>		
-		<v-row dense>
-				<v-col cols="3">
-						<h3>SNS info</h3>
 				</v-col>
-				
-				<v-col cols="9">
-						<!-- 접었다 펴는 형식으로 SNS 입력창 뜰 수 있게 설정 -->
-						<!-- <a href="/setting">수정</a> -->
-					<v-col v-if="!clicksns">
-						<div class="my-2">
-							<v-btn depressed small class="btn-success" @click="modSNS">수정</v-btn>
-						</div>
-					</v-col>
 
 
-					<!-- 클릭 시 name, description 부분 수정 -->
-					<v-col v-if="clicksns">
-						
-						<!-- 이메일(수정불가), GitHub, Instagram, FaceBook  -->
-						<div>
-							<v-text-field 
-							prepend-icon="fab fa-github" 
-							v-model="userinfo.github"
-							hint="Github address"
-							prefix="https://github.com/"
-							></v-text-field>
-						</div>
-						<div>
-							<v-text-field 
-							prepend-icon="fab fa-instagram" 
-							v-model="userinfo.instagram"
-							hint="Instagram address"
-							prefix="https://instagram.com/"
-							></v-text-field>
-						</div>
-						<div>
-							<v-text-field 
-							prepend-icon="fab fa-facebook"
-							v-model="userinfo.facebook"
-							hint="Facebook address"
-							prefix="https://facebook.com/"
-							></v-text-field>
-						</div>
-						<!-- 자신 email로 고정 -->
-						<!-- <div>
-							<v-text-field 
-							disabled
-							prepend-icon="far fa-envelope"
-							v-model="userinfo.emailaddr"
-							></v-text-field>
-						</div> -->
-						<div class="my-2">
-							<v-btn depressed small class="btn-success" @click="updateSNS">수정완료</v-btn>
-						</div>
-					</v-col>
-
-					
+				<!-- 클릭 시 name, description 부분 수정 -->
+				<v-col v-if="clickprofile">
+					<v-text-field outlined v-model="userinfo.nickname" hide-details style="font-size: 2em; margin-bottom:5px;"></v-text-field>
+					<v-text-field outlined v-model="userinfo.introduce" hide-details dense></v-text-field>
+					<div class="my-2">
+						<v-btn depressed small class="btn-success" @click="updateNickname">수정완료</v-btn>
+					</div>
+				</v-col>
 
 
+			</v-row>
+						<!-- 설정 영역 -->
+			<v-flex>
+			<v-row dense>
+				<v-col cols="3">
+						<h3>Blog Title</h3>
+				</v-col>
+				<v-col cols="9" align-self>
+						<div>
+								{{accountinfo.blogtitle}}
+						</div>
 				</v-col>
 				<v-col cols="12" class="msg">
-						포스트 및 블로그에서 보여지는 프로필에 공개되는 소셜 정보입니다.
+						개인 페이지의 좌측 상단에 나타나는 페이지 제목입니다.
 				</v-col>
-		</v-row>
-		<hr>
-		
-					<v-row dense>
-							<v-col cols="3">
-									<h3>Donation QR 코드 업로드</h3>
-							</v-col>
-							<v-col cols="9">
-								<!-- 데이터베이스에서 QR 이미지 가져오기 -->
-								<img v-bind:src="userinfo.qrImage" alt="QR코드 생성방법" width="200px" height="200px">
-							</v-col>
-								
+			</v-row>
+			<hr>		
+			<v-row dense>
+					<v-col cols="3">
+							<h3>SNS info</h3>
+					</v-col>
+					
+					<v-col cols="9">
+							<!-- 접었다 펴는 형식으로 SNS 입력창 뜰 수 있게 설정 -->
+							<!-- <a href="/setting">수정</a> -->
+						<v-col v-if="!clicksns">
 							<div class="my-2">
-								<!-- 모달 창으로 이미지 업로드 -->
-								<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
-								<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
-								<input type="file" accept="image/*" @change="uploadQR($event)" id="file-input">
-								<!-- <div> -->
-									<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
-									<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
-								<!-- </div> -->
+								<v-btn depressed small class="btn-success" @click="modSNS">수정</v-btn>
 							</div>
+						</v-col>
+
+
+						<!-- 클릭 시 name, description 부분 수정 -->
+						<v-col v-if="clicksns">
+							
+							<!-- 이메일(수정불가), GitHub, Instagram, FaceBook  -->
 							<div>
-								<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-								<v-btn depressed width="120px" @click="deleteQRImage">이미지 제거</v-btn>
+								<v-text-field 
+								prepend-icon="fab fa-github" 
+								v-model="userinfo.github"
+								hint="Github address"
+								prefix="https://github.com/"
+								></v-text-field>
+							</div>
+							<div>
+								<v-text-field 
+								prepend-icon="fab fa-instagram" 
+								v-model="userinfo.instagram"
+								hint="Instagram address"
+								prefix="https://instagram.com/"
+								></v-text-field>
+							</div>
+							<div>
+								<v-text-field 
+								prepend-icon="fab fa-facebook"
+								v-model="userinfo.facebook"
+								hint="Facebook address"
+								prefix="https://facebook.com/"
+								></v-text-field>
+							</div>
+							<!-- 자신 email로 고정 -->
+							<!-- <div>
+								<v-text-field 
+								disabled
+								prepend-icon="far fa-envelope"
+								v-model="userinfo.emailaddr"
+								></v-text-field>
+							</div> -->
+							<div class="my-2">
+								<v-btn depressed small class="btn-success" @click="updateSNS">수정완료</v-btn>
 							</div>
-
-							<!-- <v-btn>QR 이미지 업로드</v-btn> -->
-								<v-col cols="12" class="msg">
-								후원 받을 QR코드를 이미지 파일로 등록해주세요.
 						</v-col>
-					</v-row>
-					<hr>
-					<v-row dense>
-							<v-col cols="3">
-									<h3>Email Address</h3>
-							</v-col>
-								<v-col cols="9">
-								<!-- 데이터베이스에서 email 값 가져오기 -->
-									{{userinfo.emailaddr}}
-							</v-col>
-							<v-col cols="12" class="msg">
-									회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다.
-							</v-col>
-							
 
-				
-					</v-row>
-					<hr>
-					<v-row dense>
-							<v-col cols="3">
-									<h3>Subscribe</h3>
-							</v-col>
-							<v-col cols="9">
-								<!-- 이 기능 추가할 지 상의. -->
-									<v-col cols="12">
-											<v-switch value inset color="#FF5733" v-model="commentAlarm" style="margin:0px" label="댓글 알림"></v-switch>
-											<v-switch value inset color="#FF5733" v-model="updateAlarm" style="margin:0px" label="업데이트 소식"></v-switch>
-									</v-col> 
-							</v-col>
-					</v-row>
-					<hr>
-					<v-row dense>
-							<v-col cols="3">
-									<h3>Sign Out</h3>
-							</v-col>
-							<v-col cols="9">
-								<!-- 회원탈퇴 누를 경우 delete 요청 -->
-								<!-- 회원탈퇴 모달 창 -->
-								<div>
-									<div class="mb-1">
-										<b-button @click="showMsgBoxTwo">회원 탈퇴</b-button>
+						
+
+
+					</v-col>
+					<v-col cols="12" class="msg">
+							포스트 및 블로그에서 보여지는 프로필에 공개되는 소셜 정보입니다.
+					</v-col>
+			</v-row>
+			<hr>
+			
+						<v-row dense>
+								<v-col cols="3">
+										<h3>Donation QR 코드 업로드</h3>
+								</v-col>
+								<v-col cols="9">
+									<!-- 데이터베이스에서 QR 이미지 가져오기 -->
+									<img v-bind:src="userinfo.qrImage" alt="QR코드 생성방법" width="200px" height="200px">
+								</v-col>
 									
-									</div>
+								<div class="my-2">
+									<!-- 모달 창으로 이미지 업로드 -->
+									<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
+									<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
+									<input type="file" accept="image/*" @change="uploadQR($event)" id="file-input">
+									<!-- <div> -->
+										<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
+										<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
+									<!-- </div> -->
+								</div>
+								<div>
+									<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
+									<v-btn depressed width="120px" @click="deleteQRImage">이미지 제거</v-btn>
 								</div>
-									
 
+								<!-- <v-btn>QR 이미지 업로드</v-btn> -->
+									<v-col cols="12" class="msg">
+									후원 받을 QR코드를 이미지 파일로 등록해주세요.
 							</v-col>
-							
-					</v-row>
-					<hr>
-		</v-flex>
-  </v-container>
+						</v-row>
+						<hr>
+						<v-row dense>
+								<v-col cols="3">
+										<h3>Email Address</h3>
+								</v-col>
+									<v-col cols="9">
+									<!-- 데이터베이스에서 email 값 가져오기 -->
+										{{userinfo.emailaddr}}
+								</v-col>
+								<v-col cols="12" class="msg">
+										회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다.
+								</v-col>
+								
+
+					
+						</v-row>
+						<hr>
+						<v-row dense>
+								<v-col cols="3">
+										<h3>Subscribe</h3>
+								</v-col>
+								<v-col cols="9">
+									<!-- 이 기능 추가할 지 상의. -->
+										<v-col cols="12">
+												<v-switch value inset color="#FF5733" v-model="commentAlarm" style="margin:0px" label="댓글 알림"></v-switch>
+												<v-switch value inset color="#FF5733" v-model="updateAlarm" style="margin:0px" label="업데이트 소식"></v-switch>
+										</v-col> 
+								</v-col>
+						</v-row>
+						<hr>
+						<v-row dense>
+								<v-col cols="3">
+										<h3>Sign Out</h3>
+								</v-col>
+								<v-col cols="9">
+									<!-- 회원탈퇴 누를 경우 delete 요청 -->
+									<!-- 회원탈퇴 모달 창 -->
+									<div>
+										<div class="mb-1">
+											<b-button @click="showMsgBoxTwo">회원 탈퇴</b-button>
+										
+										</div>
+									</div>
+										
+
+								</v-col>
+								
+						</v-row>
+						<hr>
+			</v-flex>
+		</v-container>
+	</div>
 </template>
 
 <script>
+import Navbar from '../components/Navbar.vue'
 import axios from 'axios'
 const storage = window.sessionStorage
 
@@ -227,6 +277,9 @@ const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
 
 export default {
+	components: {
+		Navbar,
+	},
 	props: {
 		iconName: {
 		type: String,
@@ -501,12 +554,60 @@ export default {
 </script>
 
 <style scoped>
-	.wrapper {
-		text-align: center;
+	.wrap {
+		background-color: #f2f4f7;	
 	}
 	.inner {
-		max-width:150px;
-		display: inline-block;
+		max-width:960px;
+		margin: 0 auto;
+		padding: 151px 15px 0 15px;
+	}
+	.inner_feature h2 {
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+	}
+	.inner_feature p {
+		font-size: 15px;
+		line-height: 19px;
+		color: #666;
+	}
+	.inner_info {
+		width:100%;
+		border: 1px solid #e0e5ee;
+		background-color: white;
+		margin-bottom: 15px;
+	}
+	.profile_area{
+		padding: 30px 20px 18px;
+		border-bottom: 1px solid  #e0e5ee;
+	}
+	.imgbox {
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		overflow: hidden;
+		margin: 0 auto;
+	}
+	.btn_group{
+		margin: 15px 0 0;
+	}
+	.imgbox img {
+		width : 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.img_btn{
+		font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+		width:150px;
+		margin: 5px auto 0;
+	}
+	.inner_detail{
+		width: 100%;
+		padding: 30px;
+	}
+	.uploadimg {
+		display:none;
 	}
 	.circle {
 		width:8rem;

From d08d8e97de6b3cfefc900268e4e822ee0489313f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 13:31:05 +0900
Subject: [PATCH 11/74] =?UTF-8?q?fix:postdetail=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 30 ++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 395f81c..e453c69 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -103,7 +103,12 @@ export default {
         }
     },
     created(){
-      axios.post(API_URL + 'api/v2/p',{
+      console.log(storage.getItem("uid"))
+      axios.post(API_URL + 'api/v2/p/',{
+        // headers :{
+        //   'Content-Type': 'application/json',
+        //   'Accept':'application/json'
+        // },
         uid : storage.getItem("uid"),
         pid : storage.getItem("pid")
       })
@@ -133,16 +138,19 @@ export default {
     // computed() {
     // },
     methods: {
-      fetchData() {
-        axios.get(API_URL + 'api/v2/p/' + storage.getItem("pid"))
-          .then(res => {
-            this.post = res.data
-            console.log(this.post)
-            this.Comments = res.data.comments
-            this.isCommentauthor(this.Comments)
-            this.isPostauthor(this.isPostauthor)
-          })
-      },
+      // fetchData() {
+      //   axios.post(API_URL + 'api/v2/p',{
+      //     uid : storage.getItem("uid"),
+      //     pid : storage.getItem("pid")
+      //   })
+      //     .then(res => {
+      //       this.post = res.data
+      //       console.log(this.post)
+      //       this.Comments = res.data.comments
+      //       this.isCommentauthor(this.Comments)
+      //       this.isPostauthor(this.isPostauthor)
+      //     })
+      // },
       // 글 작성자인지 확인
       isPostauthor() {
         if (this.post.author && storage.getItem("login_user") && this.post.uid && storage.getItem("uid")) {

From 6b2c7bbc76b1c8a36074b2923493db718ca65a1c Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 13:47:09 +0900
Subject: [PATCH 12/74] =?UTF-8?q?Feature:=20=EB=8C=93=EA=B8=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EA=B5=AC=ED=98=84=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue       | 40 +++++++++++++++++++----
 frontend/src/components/CommentUpdate.vue | 13 ++++++++
 frontend/src/components/PostDetail.vue    |  5 +--
 3 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/CommentUpdate.vue

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index f5de024..5830773 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -8,9 +8,20 @@
 			>삭제</v-btn>
 			<v-btn 
 				v-if="comment.isauthor"
-				@click="onCommentUpdate(comment)"
+				@click="onClickUpdateBtn(comment)"
+				@
 			>수정</v-btn>
 		</div>
+		<div v-if="UpdateFlag">
+				<v-text-field
+					:id="comment.cid"
+					v-model="CommentUpdateInput"
+					solo="true"
+					dense="true"
+					clearable="true"
+				></v-text-field>
+				<v-btn @click="onCommentUpdate(comment)">수정하기</v-btn>
+			</div>
 		<div class="comment-box">
 			<v-btn @click="onClickChildBtn" class="mx-2" fab x-small dark color="indigo">
 				<v-icon dark>mdi-plus</v-icon>
@@ -54,6 +65,8 @@ export default {
 			comment: this.$attrs.comment,
 			ChildFlag: false,
 			ChildCommentInput: '',
+			CommentUpdateInput: '',
+			UpdateFlag: false,
 		}
 	},
 	methods: {
@@ -80,7 +93,13 @@ export default {
 		// 댓글 수정(아직 수정 필요함)
 		onCommentUpdate(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
-				axios.put(API_URL + `api/v3/${one_comment.cid}`)
+				const tmp_comment = {
+					author: storage.getItem("login_user"),
+					content: this.CommentUpdateInput,
+					uid: storage.getItem("uid"),
+					pid: storage.getItem("pid")
+				}
+				axios.put(API_URL + `api/v3/${one_comment.cid}`, tmp_comment)
 					.then(() => this.$emit('Click-Update-Btn'))
 			} else {
 				alert('비정상적인 접근입니다')
@@ -88,14 +107,17 @@ export default {
 		},
 		// Comment에 Child가 있는지 없는지 체크
 		isCommentChild(one_comment_child) {
-			console.log(one_comment_child)
+			// console.log(one_comment_child)
 			if (one_comment_child.length) return true
 			return false
 		},
-		// 대댓글 보기, 숨기기 Boolean 반전 메서드
-		onClickChildBtn() {
-			this.ChildFlag = !this.ChildFlag
+		onClickUpdateBtn(one_comment) {
+			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+				this.CommentUpdateInput = one_comment.content
+				this.UpdateFlag = !this.UpdateFlag
+			}
 		},
+		
 
 		// *** Child Comment ***
 		onChildCommentCreate(pid) {
@@ -111,7 +133,11 @@ export default {
 					.then(() => this.$emit('Child-Create'))
 					.catch(err => console.log(err))
 			}
-		}
+		},
+		// 대댓글 보기, 숨기기 Boolean 반전 메서드
+		onClickChildBtn() {
+			this.ChildFlag = !this.ChildFlag
+		},
 	}
 }
 </script>
diff --git a/frontend/src/components/CommentUpdate.vue b/frontend/src/components/CommentUpdate.vue
new file mode 100644
index 0000000..6dc7a9b
--- /dev/null
+++ b/frontend/src/components/CommentUpdate.vue
@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+    name: 'CommentUpdate',
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 8ba0e52..7676407 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -105,11 +105,12 @@ export default {
     created(){
       axios.get(API_URL + 'api/v2/p/' + storage.getItem("pid"))
         .then(res => {
+          console.log(res)
           // this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
-          console.log(this.post)
+          // console.log(this.post)
           this.Comments = res.data.comments
           // console.log(this.Comments)
           this.isCommentauthor(this.Comments)
@@ -125,7 +126,7 @@ export default {
         axios.get(API_URL + 'api/v2/p/' + storage.getItem("pid"))
           .then(res => {
             this.post = res.data
-            console.log(this.post)
+            // console.log(this.post)
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
             this.isPostauthor(this.isPostauthor)

From 7b24b4ca825380c99643912e9604fd13a0db1512 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 14:09:10 +0900
Subject: [PATCH 13/74] =?UTF-8?q?Modify:=20console.log=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index a543ac3..5b2d708 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -113,13 +113,13 @@ export default {
         pid : storage.getItem("pid")
       })
         .then(res => {
-          console.log(res)
+          // console.log(res)
           // this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
-          console.log(this.post)
+          // console.log(this.post)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
@@ -127,7 +127,7 @@ export default {
             this.like = "far fa-heart"
             this.FeedFlag = false
           }
-          console.log(this.post)
+          // console.log(this.post)
           this.Comments = res.data.comments
           // console.log(this.Comments)
           this.isCommentauthor(this.Comments)
@@ -220,7 +220,6 @@ export default {
           }
           //삭제하면 db에서 제거
           else {
-            console.log("2")
             this.like="far fa-heart"
             this.post.islike=false;
             this.FeedFlag=false;

From c05dcd9c3b31d272f642ff45e08dcd485458d4e0 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 15:05:02 +0900
Subject: [PATCH 14/74] =?UTF-8?q?Feature:=20=EB=8C=93=EA=B8=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue    | 45 +++++++++++++++-----------
 frontend/src/components/PostDetail.vue | 30 +++++++++--------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index b06f1f5..4276e34 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -9,18 +9,17 @@
 			<v-btn 
 				v-if="comment.isauthor"
 				@click="onClickUpdateBtn(comment)"
-				@
 			>수정</v-btn>
 		</div>
-		<div v-if="UpdateFlag">
-				<v-text-field
-					v-model="CommentUpdateInput"
-					solo=True
-					dense="true"
-					clearable="true"
-				></v-text-field>
-				<v-btn @click="onCommentUpdate(comment)">수정하기</v-btn>
-			</div>
+		<div v-if="UpdateFlag" class="update-box">
+			<v-text-field
+				v-model="CommentUpdateInput"
+				solo
+				dense
+				clearable
+			></v-text-field>
+			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
+		</div>
 		<div class="comment-box">
 			<v-btn @click="onClickChildBtn" class="mx-2" fab x-small dark color="indigo">
 				<v-icon dark>mdi-plus</v-icon>
@@ -92,14 +91,18 @@ export default {
 		// 댓글 수정(아직 수정 필요함)
 		onCommentUpdate(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+				// console.log(one_comment)
 				const tmp_comment = {
-					author: storage.getItem("login_user"),
 					content: this.CommentUpdateInput,
-					uid: storage.getItem("uid"),
-					pid: storage.getItem("pid")
+					cid: one_comment.cid
 				}
-				axios.put(API_URL + `api/v3/${one_comment.cid}`, tmp_comment)
-					.then(() => this.$emit('Click-Update-Btn'))
+				axios.put(API_URL + `api/v3/`, tmp_comment)
+					.then(() => {
+						alert('수정되었습니다.')
+						this.$emit('Click-Update-Btn')
+						this.CommentUpdateInput = ''
+						this.UpdateFlag = !this.UpdateFlag
+					})
 			} else {
 				alert('비정상적인 접근입니다')
 			}
@@ -119,14 +122,14 @@ export default {
 		
 
 		// *** Child Comment ***
-		onChildCommentCreate(pid) {
+		onChildCommentCreate(pcid) {
 			if (storage.getItem("login_user")) {
 				const tmp_comment = {
 					author: storage.getItem("login_user"),
 					content: this.ChildCommentInput,
 					uid: storage.getItem("uid"),
 					pid: storage.getItem("pid"),
-					parent: pid
+					parent: pcid
 				}
 				axios.post(API_URL + 'api/v3/r', tmp_comment)
 					.then(() => this.$emit('Child-Create'))
@@ -143,6 +146,12 @@ export default {
 
 <style>
 .comment-box {
-  display: flex
+	display: flex;
+}
+.update-box {
+	display: flex;
+}
+.update-btn {
+	margin-left: 5px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 5b2d708..2414379 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -139,19 +139,19 @@ export default {
     // computed() {
     // },
     methods: {
-      // fetchData() {
-      //   axios.post(API_URL + 'api/v2/p',{
-      //     uid : storage.getItem("uid"),
-      //     pid : storage.getItem("pid")
-      //   })
-      //     .then(res => {
-      //       this.post = res.data
-      //       console.log(this.post)
-      //       this.Comments = res.data.comments
-      //       this.isCommentauthor(this.Comments)
-      //       this.isPostauthor(this.isPostauthor)
-      //     })
-      // },
+      fetchData() {
+        axios.post(API_URL + 'api/v2/p',{
+          uid : storage.getItem("uid"),
+          pid : storage.getItem("pid")
+        })
+          .then(res => {
+            this.post = res.data
+            console.log(this.post)
+            this.Comments = res.data.comments
+            this.isCommentauthor(this.Comments)
+            this.isPostauthor(this.isPostauthor)
+          })
+      },
       // 글 작성자인지 확인
       isPostauthor() {
         if (this.post.author && storage.getItem("login_user") && this.post.uid && storage.getItem("uid")) {
@@ -182,7 +182,9 @@ export default {
       // 해당 Post의 모든 Comment 읽어오기 & 인풋 초기화
       CommentRead() {
         axios.get(API_URL+'api/v3/'+storage.getItem("pid"))
-          .then(res => this.Comments = this.isCommentauthor(res.data))
+          .then(res => {
+            this.Comments = this.isCommentauthor(res.data)
+          })
         this.CommentInput = ""
       },
       // 작성자 비교 후 삭제 버튼 flag 설정하는 메서드

From 7f760f6ce32ed86bff50da3f58794f66d5dd309e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Wed, 19 Aug 2020 16:00:45 +0900
Subject: [PATCH 15/74] =?UTF-8?q?TEST=20:=20=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue               | 4 ++--
 frontend/src/components/Navbar.vue | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8301141..1cd57c3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
-    <router-view :key="$route.fullPath"/>
-    <!-- <router-view/> -->
+    <!-- <router-view :key="someVariableUnderYourControl"/> -->
+    <router-view/>
   </v-app>
 </template>
 
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 5c2c551..e73d661 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -140,12 +140,9 @@ export default {
         if( text === this.list[i].title){
           storage.removeItem("pid")
           storage.setItem("pid", this.list[i].pid)
-          console.log("list[i] : "+this.list[i].pid )
-          console.log("list[i] : "+this.list[i].title)
           // article, user -> 페이지 변경 this.$router.push
           // this.$router.push({name: 'postdetail', params: {data: this.list[i]}});
           this.$router.push({name: 'postdetail', params: {data: this.list[i]}}).catch(()=>{});
-          
         }
       }
       

From 40678feac80ccd2c77d1637822c05c1bc2f5df78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Wed, 19 Aug 2020 16:01:21 +0900
Subject: [PATCH 16/74] =?UTF-8?q?TEST=20:=20=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Navbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index e73d661..a4924e5 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -50,7 +50,6 @@
         <!--프로필 클릭시 팝업되는 드롭다운 메뉴-->
         <v-card class="shortcuts">
           <v-list v-if="profile">
-            무림고수
             <v-list-item>
               내블로그 
             </v-list-item>

From bbe5e538e2789e7a988159cf80a2db8f5598fa6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 16:15:59 +0900
Subject: [PATCH 17/74] feature: setting

---
 frontend/src/components/Setting.vue | 404 ++++++++++++++--------------
 1 file changed, 198 insertions(+), 206 deletions(-)

diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index 24fd542..ee624b8 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -6,13 +6,15 @@
 				<div class="inner_feature">
 					<h2 id="do_top do_feed">회원정보</h2>
           <p class="top_desc">
-						{{userinfo.nickname}}님의 회원 정보입니다.<br>
+						<span style="color:#6e8af8;">{{userinfo.nickname}}</span>님의 회원 정보입니다.<br>
 						회원 정보는 개인정보처리방침에 따라 안전하게 보호되며, 회원님의 명백한 동의 없이 공개 또는 제 3자에게 제공되지 않습니다.	
 					</p>
 				</div>
 				<div class="inner_info">
 					<div class="profile_area">
 						<div class="imgbox">
+							<!-- 회원 프로필 이미지 디비에서 조회 -->
+							<!-- [추가]이미지 변화에 대한 처리 -->
 							<img v-bind:src="userinfo.profileImage" alt="profile">
 						</div>
 						<div class="btn_group">
@@ -23,123 +25,100 @@
 							</div>
 							<!-- 이미지 삭제 -->
 							<div class="img_btn">
-								<v-btn depressed width="150px" @click="deleteProfileImage" text color="#6e8af8">이미지 제거</v-btn>
+								<v-btn depressed width="150px" @click="deleteProfileImage" outlined color="#6e8af8">이미지 제거</v-btn>
 							</div>
 						</div>
 					</div>
-					<div class="inner_detail">
-						<div class="blog_detail">
-							블로그이름
+					<div class="inner_email">
+						<div class="user_email">
+							<h4 class="cate_desc">이메일</h4>
+							<v-text-field
+								:placeholder="userinfo.emailaddr"
+								outlined 
+								dense
+								hide-details
+								disabled
+								style="border-radius:0px"
+							/>
+							<p class="caution">※ 이메일은 수정할 수 없습니다.</p>
 						</div>
-						<div class="user_detail">
-							<div class="nickname">
-								닉네임
-								{{userinfo.nickname}}
-							</div>
-							<div class="introduce">
-								소개
-								{{userinfo.introduce}}
+					</div>
+					<div class="user_detail">
+						<div class="nickname">
+							<h4 class="cate_desc">닉네임</h4>
+							<div v-if="!clickprofile">
+								<v-text-field 
+									outlined
+									dense
+									hide-details 
+									disabled
+									v-model="userinfo.nickname" 
+									style="border-radius:0px"/>
 							</div>
-							<div class="my-2">
-								<v-btn depressed small class="btn-success" @click="modprofile">수정</v-btn>
+							<div v-else>
+								<v-text-field 
+									outlined
+									dense
+									v-model="userinfo.nickname" 
+									hide-details 
+									style="border-radius:0px"/>
 							</div>
 						</div>
-
-					</div>
-				</div>
-			</div>
-		</div>
-		<v-container style="width:70%">
-			<v-row class="mb-10">
-
-				<v-col cols="12" md="3">
-					<div class="wrapper">
-						<div class="inner">
-
-							<div class="circle">
-								<!-- 회원 프로필 이미지 디비에서 조회 -->
-								<!-- [추가]이미지 변화에 대한 처리 -->
-								<img v-bind:src="userinfo.profileImage" alt="profile">
+						<div class="introduce">
+							<h4 class="cate_desc">소개</h4>
+							<div v-if="!clickprofile">
+								<v-textarea
+									rows="3"
+									outlined
+									dense
+									hide-details 
+									disabled
+									v-model="userinfo.introduce" 
+									style="border-radius:0px"
+								/>
 							</div>
-
-							<div class="my-2">
-								<!-- 모달 창으로 이미지 업로드 -->
-								<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
-								<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
-								<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
-								<!-- <div> -->
-									<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
-									<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
-								<!-- </div> -->
+							<div v-else>
+								<v-textarea 
+									rows="3"
+									outlined
+									dense 
+									hide-details 
+									v-model="userinfo.introduce" 
+									style="border-radius:0px"
+								/>
 							</div>
-
-							<div>
-								<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-								<v-btn depressed width="120px" @click="deleteProfileImage">이미지 제거</v-btn>
+						</div>
+						<div class="mod_btn">
+							<div v-if="!clickprofile" class="btn_mod">
+								<v-btn color="#6e8af8" depressed tile outlined @click="modprofile">수정</v-btn>
+							</div>
+							<div v-else class="btn_mod">
+								<v-btn color="#6e8af8" depressed tile outlined @click="updateNickname">수정완료</v-btn>
 							</div>
 						</div>
 					</div>
-				</v-col>
-
-
-				<v-col v-if="!clickprofile">
-					<!-- 사용자 nickname과 introduce 가져오기 -->
-					<h2>{{userinfo.nickname}}</h2>
-					<p>{{userinfo.introduce}}</p>	
-					<div class="my-2">
-							<v-btn depressed small class="btn-success" @click="modprofile">수정</v-btn>
-					</div>
-				</v-col>
-
-
-				<!-- 클릭 시 name, description 부분 수정 -->
-				<v-col v-if="clickprofile">
-					<v-text-field outlined v-model="userinfo.nickname" hide-details style="font-size: 2em; margin-bottom:5px;"></v-text-field>
-					<v-text-field outlined v-model="userinfo.introduce" hide-details dense></v-text-field>
-					<div class="my-2">
-						<v-btn depressed small class="btn-success" @click="updateNickname">수정완료</v-btn>
-					</div>
-				</v-col>
-
-
-			</v-row>
-						<!-- 설정 영역 -->
-			<v-flex>
-			<v-row dense>
-				<v-col cols="3">
-						<h3>Blog Title</h3>
-				</v-col>
-				<v-col cols="9" align-self>
-						<div>
-								{{accountinfo.blogtitle}}
-						</div>
-				</v-col>
-				<v-col cols="12" class="msg">
-						개인 페이지의 좌측 상단에 나타나는 페이지 제목입니다.
-				</v-col>
-			</v-row>
-			<hr>		
-			<v-row dense>
-					<v-col cols="3">
-							<h3>SNS info</h3>
-					</v-col>
-					
-					<v-col cols="9">
-							<!-- 접었다 펴는 형식으로 SNS 입력창 뜰 수 있게 설정 -->
-							<!-- <a href="/setting">수정</a> -->
-						<v-col v-if="!clicksns">
-							<div class="my-2">
-								<v-btn depressed small class="btn-success" @click="modSNS">수정</v-btn>
+					<div class="user_sns">
+						<h4 class="cate_desc">소셜 정보</h4>
+						<div class="user_sns_detail" v-if="!clicksns">
+							<div v-if="userinfo.github" class="sns_addr">
+								<v-icon style="padding-right:5px" small>fab fa-github</v-icon>
+								https://github.com/{{userinfo.github}}
 							</div>
-						</v-col>
-
-
-						<!-- 클릭 시 name, description 부분 수정 -->
-						<v-col v-if="clicksns">
-							
-							<!-- 이메일(수정불가), GitHub, Instagram, FaceBook  -->
+							<div v-if="userinfo.instagram" class="sns_addr">
+								<v-icon style="padding-right:5px" small>fab fa-instagram</v-icon>
+								https://instagram.com/{{userinfo.instagram}}
+							</div>
+							<div v-if="userinfo.facebook" class="sns_addr">
+								<v-icon style="padding-right:5px" small>fab fa-facebook</v-icon>
+								https://facebook.com/{{userinfo.facebook}}
+							</div>
+						</div>
+						<div class="user_sns_detail" v-else>
 							<div>
 								<v-text-field 
+								outlined
+								dense
+								style="border-radius:0px"
 								prepend-icon="fab fa-github" 
 								v-model="userinfo.github"
 								hint="Github address"
@@ -148,6 +127,9 @@
 							</div>
 							<div>
 								<v-text-field 
+								outlined
+								dense
+								style="border-radius:0px"
 								prepend-icon="fab fa-instagram" 
 								v-model="userinfo.instagram"
 								hint="Instagram address"
@@ -156,115 +138,52 @@
 							</div>
 							<div>
 								<v-text-field 
+								outlined
+								dense
+								style="border-radius:0px"
 								prepend-icon="fab fa-facebook"
 								v-model="userinfo.facebook"
 								hint="Facebook address"
 								prefix="https://facebook.com/"
 								></v-text-field>
 							</div>
-							<!-- 자신 email로 고정 -->
-							<!-- <div>
-								<v-text-field 
-								disabled
-								prepend-icon="far fa-envelope"
-								v-model="userinfo.emailaddr"
-								></v-text-field>
-							</div> -->
-							<div class="my-2">
-								<v-btn depressed small class="btn-success" @click="updateSNS">수정완료</v-btn>
+						</div>
+						<div class="mod_btn">
+							<div v-if="!clicksns">
+								<v-btn color="#6e8af8" depressed tile outlined @click="modSNS">수정</v-btn>
 							</div>
-						</v-col>
-
+							<div v-else>
+								<v-btn color="#6e8af8" depressed tile outlined @click="updateSNS">수정완료</v-btn>
+							</div>
+						</div>
+					</div>
+					<div class="inner_detail">
 						
-
-
-					</v-col>
-					<v-col cols="12" class="msg">
-							포스트 및 블로그에서 보여지는 프로필에 공개되는 소셜 정보입니다.
-					</v-col>
-			</v-row>
-			<hr>
-			
-						<v-row dense>
-								<v-col cols="3">
-										<h3>Donation QR 코드 업로드</h3>
-								</v-col>
-								<v-col cols="9">
-									<!-- 데이터베이스에서 QR 이미지 가져오기 -->
-									<img v-bind:src="userinfo.qrImage" alt="QR코드 생성방법" width="200px" height="200px">
-								</v-col>
-									
-								<div class="my-2">
-									<!-- 모달 창으로 이미지 업로드 -->
-									<!-- <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> -->
-									<!-- <v-file-input width="120px" type="file" accept="image/*" @change="onChange">이미지 변경</v-file-input> -->
-									<input type="file" accept="image/*" @change="uploadQR($event)" id="file-input">
-									<!-- <div> -->
-										<!-- <img v-bind:src="userinfo.profileImage" class="uploading-image"/> -->
-										<!-- <input type="file" accept="image/jpeg" @change=uploadImage> -->
-									<!-- </div> -->
+						
+						<div class="dona_info">
+							<h4 class="cate_desc">후원 QR</h4>
+							<div class="qrbox">
+								<div class="qrbox_img">
+									<img v-bind:src="userinfo.qrImage" alt="QR코드 생성방법">
 								</div>
-								<div>
-									<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-									<v-btn depressed width="120px" @click="deleteQRImage">이미지 제거</v-btn>
+							</div>
+							<div class="btn_grp">
+								<div class="img_btn">
+									<v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="qr-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+									<input type="file" accept="image/*" @change="uploadQR($event)" id="qr-input" class="uploadimg">
 								</div>
-
-								<!-- <v-btn>QR 이미지 업로드</v-btn> -->
-									<v-col cols="12" class="msg">
-									후원 받을 QR코드를 이미지 파일로 등록해주세요.
-							</v-col>
-						</v-row>
-						<hr>
-						<v-row dense>
-								<v-col cols="3">
-										<h3>Email Address</h3>
-								</v-col>
-									<v-col cols="9">
-									<!-- 데이터베이스에서 email 값 가져오기 -->
-										{{userinfo.emailaddr}}
-								</v-col>
-								<v-col cols="12" class="msg">
-										회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다.
-								</v-col>
-								
-
-					
-						</v-row>
-						<hr>
-						<v-row dense>
-								<v-col cols="3">
-										<h3>Subscribe</h3>
-								</v-col>
-								<v-col cols="9">
-									<!-- 이 기능 추가할 지 상의. -->
-										<v-col cols="12">
-												<v-switch value inset color="#FF5733" v-model="commentAlarm" style="margin:0px" label="댓글 알림"></v-switch>
-												<v-switch value inset color="#FF5733" v-model="updateAlarm" style="margin:0px" label="업데이트 소식"></v-switch>
-										</v-col> 
-								</v-col>
-						</v-row>
-						<hr>
-						<v-row dense>
-								<v-col cols="3">
-										<h3>Sign Out</h3>
-								</v-col>
-								<v-col cols="9">
-									<!-- 회원탈퇴 누를 경우 delete 요청 -->
-									<!-- 회원탈퇴 모달 창 -->
-									<div>
-										<div class="mb-1">
-											<b-button @click="showMsgBoxTwo">회원 탈퇴</b-button>
-										
-										</div>
-									</div>
-										
-
-								</v-col>
-								
-						</v-row>
-						<hr>
-			</v-flex>
-		</v-container>
+								<div class="img_btn">
+									<v-btn depressed outlined width="150px" @click="deleteQRImage" color="#6e8af8">이미지 제거</v-btn>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="signout">
+					<a @click="showMsgBoxTwo">DO!에서 <span class="signout_btn">탈퇴하기</span></a>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -558,6 +477,7 @@ export default {
 		background-color: #f2f4f7;	
 	}
 	.inner {
+		min-height:1600px;
 		max-width:960px;
 		margin: 0 auto;
 		padding: 151px 15px 0 15px;
@@ -576,7 +496,24 @@ export default {
 		width:100%;
 		border: 1px solid #e0e5ee;
 		background-color: white;
-		margin-bottom: 15px;
+		margin-bottom: 10px;
+	}
+	.inner_email{
+		width:100%;
+		padding: 30px;
+		border-bottom: 1px solid #e0e5ee;
+	}
+	.user_detail{
+		width:100%;
+		height:340px;
+		padding:30px;
+		border-bottom: 1px solid #e0e5ee;
+	}
+	.user_sns{
+		width:100%;
+		height:100%;
+		padding:30px 30px 65px 30px;
+		border-bottom: 1px solid #e0e5ee;
 	}
 	.profile_area{
 		padding: 30px 20px 18px;
@@ -589,14 +526,26 @@ export default {
 		overflow: hidden;
 		margin: 0 auto;
 	}
-	.btn_group{
-		margin: 15px 0 0;
-	}
 	.imgbox img {
 		width : 100%;
 		height: 100%;
 		object-fit: cover;
 	}
+	.qrbox{
+		width:200px;
+		height:200px;
+		overflow: hidden;
+		margin: 0 auto;
+	}
+
+	.qrbox_img img {
+		width: 100%;
+		height: 100%;
+	}
+	.btn_group{
+		margin: 15px 0 0;
+	}
+	
 	.img_btn{
 		font-family: 'NanumSquare', Noto Sans Light, sans-serif;
 		width:150px;
@@ -606,6 +555,33 @@ export default {
 		width: 100%;
 		padding: 30px;
 	}
+	.cate_desc{
+		font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+		font-weight: 600;
+		font-size: 1rem;
+	}
+	.caution{
+		font-weight:400;
+		font-size:0.8rem;
+		margin: 5px 0 0 0;
+	}
+	.nickname {
+		margin-bottom: 40px;
+	}
+	.introduce {
+		margin-bottom: 20px;
+	}
+	button:hover{
+		background-color:#6e8af8;
+		color:white !important; 
+	}
+	.sns_addr{
+		padding-bottom: 10px;
+	}
+	.user_sns_detail{
+		margin-top:15px;
+	}
+
 	.uploadimg {
 		display:none;
 	}
@@ -620,4 +596,20 @@ export default {
 		margin: 0 auto;
 		max-height: 100%
 	}
+	.mod_btn{
+		float:right;
+	}
+	.btn_grp{
+		margin-top:15px;
+	}
+	.signout {
+		float: right;
+		font-family: Noto Sans Light, sans-serif;
+		font-size: 13px;
+		color: gray;
+	}
+	.signout_btn{
+		text-decoration: underline;
+		padding-right: 5px;
+	}
 </style>
\ No newline at end of file

From c8218d883585ef09d9eca93fe5833c3b863984c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Wed, 19 Aug 2020 16:19:27 +0900
Subject: [PATCH 18/74] =?UTF-8?q?fix=20:=20=ED=9A=8C=EC=9B=90=ED=83=88?=
 =?UTF-8?q?=ED=87=B4=20=EC=8B=9C=20=ED=99=88=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Setting.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index ee624b8..331eca1 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -430,6 +430,7 @@ export default {
 						console.log(error);
 					});
 				}
+				this.$router.push('/')
 			})
 			.catch(err => {
 			// An error occurred

From 3fd86c3750261c317cfff521156f2fb7837042ed Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 16:36:20 +0900
Subject: [PATCH 19/74] =?UTF-8?q?Fix:=20=EC=88=98=EC=A0=95=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9C=BC=EB=A1=9C=20comment=20=EC=97=85=EB=8E=83=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EB=8A=94=20=ED=98=84=EC=83=81=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChildComment.vue  | 20 ++++++++++++++++++++
 frontend/src/components/Comment.vue       | 13 ++++++++-----
 frontend/src/components/CommentUpdate.vue | 13 -------------
 frontend/src/components/PostDetail.vue    | 21 +++++++++++++++++----
 4 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/ChildComment.vue
 delete mode 100644 frontend/src/components/CommentUpdate.vue

diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
new file mode 100644
index 0000000..ba53bb9
--- /dev/null
+++ b/frontend/src/components/ChildComment.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ChildComment',
+    data() {
+      return {
+        child: this.$attrs.child
+      }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 4276e34..b1f1cb9 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -29,15 +29,16 @@
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
 				<div v-if="ChildFlag">
 					<div v-for="child in comment.child" :key=child.cid>
-						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
+						<ChildComment 
+							:child="child"
+						/>
 					</div>
 					<div>
 					<v-text-field
-						:id="comment.cid"
 						v-model="ChildCommentInput"
-						solo="true"
-						dense="true"
-						clearable="true"
+						solo
+						dense
+						clearable
 					></v-text-field>
 					<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
 					</div>
@@ -49,6 +50,7 @@
 
 <script>
 import axios from 'axios'
+import ChildComment from './ChildComment.vue'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -57,6 +59,7 @@ const storage = window.sessionStorage
 export default {
 	name: 'Comment',
 	components: {
+		ChildComment,
 	},
 	data() {
 		return {
diff --git a/frontend/src/components/CommentUpdate.vue b/frontend/src/components/CommentUpdate.vue
deleted file mode 100644
index 6dc7a9b..0000000
--- a/frontend/src/components/CommentUpdate.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-    name: 'CommentUpdate',
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 2414379..55bdf93 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -21,7 +21,7 @@
 
           <!-- TextEditor 미리보기만(마크다운) -->
           <div class="col-lg-12">
-            <Viewer :initialValue="this.content"/>
+            <Viewer :initialValue="this.post.content"/>
           </div>
           <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
           <div></div>
@@ -45,8 +45,8 @@
         <!-- 댓글 목록 -->
         <h1>댓글창</h1>
         <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-        <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
-          <div>
+        <div v-if="renderComponent">
+          <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
             <Comment 
               :comment="comment"
               @Click-Delete-Btn="CommentRead"
@@ -100,10 +100,11 @@ export default {
           ChildCommentInput: '',
           FeedFlag: '',
           like: '',
+          renderComponent: true,
         }
     },
     created(){
-      console.log(storage.getItem("uid"))
+      console.log(this.post.content)
       axios.post(API_URL + 'api/v2/p/',{
         // headers :{
         //   'Content-Type': 'application/json',
@@ -135,10 +136,20 @@ export default {
       })
     },
     mounted() {
+      this.fetchData()
     },
     // computed() {
     // },
     methods: {
+      forceRerender() {
+        // Remove my-component from the DOM
+        this.renderComponent = false;
+
+        this.$nextTick(() => {
+          // Add the component back in
+          this.renderComponent = true;
+        })
+      },
       fetchData() {
         axios.post(API_URL + 'api/v2/p',{
           uid : storage.getItem("uid"),
@@ -184,6 +195,8 @@ export default {
         axios.get(API_URL+'api/v3/'+storage.getItem("pid"))
           .then(res => {
             this.Comments = this.isCommentauthor(res.data)
+            this.forceRerender()
+            console.log('Comment Read')
           })
         this.CommentInput = ""
       },

From f5602ce9299f2a67475415584a1ef196c21f134a Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 17:38:34 +0900
Subject: [PATCH 20/74] =?UTF-8?q?Test:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Login.vue       |  2 +-
 frontend/src/components/TagInputBox.vue | 12 +++-
 frontend/src/components/TextEditor.vue  | 84 ++++++++++++++++++++++++-
 3 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 2645a4a..3005d6c 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -121,7 +121,7 @@ export default {
             if (res.data.status) {
               this.message = res.data.request_body.email + "로 로그인 되었습니다."
               storage.setItem("jwt-auth-token", res.data["jwt-auth-token"])
-              storage.setItem("login_user", res.data.request_body.email)
+              storage.setItem("login_user", res.data.request_body.nickname)
               storage.setItem("uid", res.data.request_body.uid)
               storage.setItem("google_login", false)
               storage.setItem("profileImage", res.data.request_body.profileImage)
diff --git a/frontend/src/components/TagInputBox.vue b/frontend/src/components/TagInputBox.vue
index 92210e7..9379112 100644
--- a/frontend/src/components/TagInputBox.vue
+++ b/frontend/src/components/TagInputBox.vue
@@ -77,7 +77,12 @@
 		<v-btn 
 			@click="onSubmitButton"
 			color="success"
-		>저장하기</v-btn>
+		>출간하기</v-btn>
+		<v-btn
+			class="ml-2"
+			@click="onSaveButton"
+			color="info"
+		>임시저장</v-btn>
 	</div>
 </template>
 
@@ -150,7 +155,10 @@ export default {
 			.indexOf(query.toString().toLowerCase()) > -1
 		},
 		onSubmitButton() {
-			this.$emit('event-data', this.model)
+			this.$emit('submit-post', this.model)
+		},
+		onSaveButton() {
+			this.$emit('save-post')
 		}
 	},
 }
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 2eddccc..813873c 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -7,8 +7,30 @@
             required
         ></v-text-field>
         <editor ref="toastuiEditor" height="500px"/>
+        <h3>썸네일 이미지</h3>
+        <div class="profile_area">
+            <div class="imgbox">
+                <!-- 회원 프로필 이미지 디비에서 조회 -->
+                <!-- [추가]이미지 변화에 대한 처리 -->
+                <img v-bind:src="profileImage" alt="profile">
+            </div>
+            <div class="btn_group">
+                <!-- 이미지 업로드 (모달) -->
+                <div class="img_btn">
+                    <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+                    <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input" class="uploadimg">
+                </div>
+                <!-- 이미지 삭제 -->
+                <div class="img_btn">
+                    <v-btn depressed width="150px" @click="deleteProfileImage" outlined color="#6e8af8">이미지 제거</v-btn>
+                </div>
+            </div>
+        </div>
         <h3>태그 입력칸</h3>        
-        <TagInputBox @event-data="createAction"/>
+        <TagInputBox 
+            @submit-post="createAction"
+            @save-post="saveAction"
+        />
     </v-container>
 </template>
 <script>
@@ -34,6 +56,7 @@ export default {
         return {
             editorText: '',
             title: '',
+            profileImage: '',
         }
     },
     methods: {
@@ -51,16 +74,73 @@ export default {
                 title: this.title,
                 content: this.editorText,
                 tag: tagList,
+                thumbnail: storage.getItem("profileImage")
             })
             .then(() => this.$router.push('/'))
             .catch(err => console.log(err))
         },
+        saveAction() {
+        
+        },
+
+        // 업로드 이미지
+        uploadImage(e){
+            console.log('tttttttttttttttttttt')
+            var file = new FormData();
+            const image = e.target.files[0];
+            file.append("file", image);
+
+            // 미리보기용
+            const reader = new FileReader();
+            reader.readAsDataURL(image); 
+            reader.onload = e =>{
+                this.profileImage = e.target.result; // profileImage 설정
+            };
+
+            // **추가** POST문으로 서버에 이미지 파일 전송
+            axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
+                file,
+                {
+                    headers:{
+                        'Content-Type': 'multipart/form-data',
+                        'Accept': 'application/json'
+                    }	
+                }
+                )
+                .then(response => {
+                    this.profileImage = response.data;
+                    storage.setItem("profileImage", response.data)
+                })
+                .catch((err) => {
+                    console.log("프로필 이미지 업로드 실패")
+                    console.log(err);
+                })
+        },
+        // 기본 이미지로 수정
+		deleteProfileImage(){
+	
+			
+			// **추가** POST문으로 서버에 기본 이미지 파일 전송
+			axios.put(API_URL+'api/v1/img/'+this.userinfo.uid,{
+				url : "http://i3a507.p.ssafy.io/img/common/emptyProfile.png",
+			})
+			.then(response => {
+				this.userinfo.profileImage = response.data;
+				storage.setItem("profileImage", response.data)
+			})
+			.catch( (err) => {
+				console.log("프로필 이미지 삭제 실패");
+				console.log(err)
+			})
+
+		},
     },
 }
 </script>
 
 <style scoped>
 h3 {
-    margin: 0.5rem auto;
+    margin-top: 20px;
+    margin-bottom: 5px;
 }
 </style>
\ No newline at end of file

From eeba550e8f37e0be1c17ca17fdd64372eea157cb Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 17:44:57 +0900
Subject: [PATCH 21/74] =?UTF-8?q?Fix:=20storage=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 813873c..e4e0c41 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -59,6 +59,9 @@ export default {
             profileImage: '',
         }
     },
+    mounted() {
+        storage.removeItem("profileImage")
+    },
     methods: {
         createAction(tagData) {
             // 태그 데이터 정리해서 보내기
@@ -76,7 +79,10 @@ export default {
                 tag: tagList,
                 thumbnail: storage.getItem("profileImage")
             })
-            .then(() => this.$router.push('/'))
+            .then(() => {
+                storage.removeItem("profileImage")
+                this.$router.push('/')
+            })
             .catch(err => console.log(err))
         },
         saveAction() {

From 78eec908ed942b389037649e0f9b7948086f0d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Wed, 19 Aug 2020 18:59:42 +0900
Subject: [PATCH 22/74] FIX : ThumbNail

---
 frontend/src/components/PostDetail.vue |  1 +
 frontend/src/components/TextEditor.vue | 72 ++++++++++++++------------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 2414379..d1bb339 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -258,4 +258,5 @@ export default {
 .post-box {
   margin-top: 130px;
 }
+
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index e4e0c41..e27003f 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -12,19 +12,15 @@
             <div class="imgbox">
                 <!-- 회원 프로필 이미지 디비에서 조회 -->
                 <!-- [추가]이미지 변화에 대한 처리 -->
-                <img v-bind:src="profileImage" alt="profile">
+                <img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
             </div>
             <div class="btn_group">
                 <!-- 이미지 업로드 (모달) -->
                 <div class="img_btn">
                     <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
-                    <input type="file" accept="image/*" @change="uploadImage($event)" id="file-input" class="uploadimg">
+                    <input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
                 </div>
-                <!-- 이미지 삭제 -->
-                <div class="img_btn">
-                    <v-btn depressed width="150px" @click="deleteProfileImage" outlined color="#6e8af8">이미지 제거</v-btn>
-                </div>
-            </div>
+              </div>
         </div>
         <h3>태그 입력칸</h3>        
         <TagInputBox 
@@ -56,11 +52,12 @@ export default {
         return {
             editorText: '',
             title: '',
-            profileImage: '',
+            thumbImage: '',
+            uid: '',
         }
     },
     mounted() {
-        storage.removeItem("profileImage")
+        storage.removeItem("thumbImage")
     },
     methods: {
         createAction(tagData) {
@@ -77,10 +74,10 @@ export default {
                 title: this.title,
                 content: this.editorText,
                 tag: tagList,
-                thumbnail: storage.getItem("profileImage")
+                thumbnail: storage.getItem("thumbImage")
             })
             .then(() => {
-                storage.removeItem("profileImage")
+                storage.removeItem("thumbImage")
                 this.$router.push('/')
             })
             .catch(err => console.log(err))
@@ -90,7 +87,7 @@ export default {
         },
 
         // 업로드 이미지
-        uploadImage(e){
+        uploadthumbImage(e){
             console.log('tttttttttttttttttttt')
             var file = new FormData();
             const image = e.target.files[0];
@@ -100,7 +97,7 @@ export default {
             const reader = new FileReader();
             reader.readAsDataURL(image); 
             reader.onload = e =>{
-                this.profileImage = e.target.result; // profileImage 설정
+                this.thumbImage = e.target.result; // profileImage 설정
             };
 
             // **추가** POST문으로 서버에 이미지 파일 전송
@@ -114,32 +111,14 @@ export default {
                 }
                 )
                 .then(response => {
-                    this.profileImage = response.data;
-                    storage.setItem("profileImage", response.data)
+                    this.thumbImage = response.data;
+                    storage.setItem("thumbImage", response.data)
                 })
                 .catch((err) => {
                     console.log("프로필 이미지 업로드 실패")
                     console.log(err);
                 })
         },
-        // 기본 이미지로 수정
-		deleteProfileImage(){
-	
-			
-			// **추가** POST문으로 서버에 기본 이미지 파일 전송
-			axios.put(API_URL+'api/v1/img/'+this.userinfo.uid,{
-				url : "http://i3a507.p.ssafy.io/img/common/emptyProfile.png",
-			})
-			.then(response => {
-				this.userinfo.profileImage = response.data;
-				storage.setItem("profileImage", response.data)
-			})
-			.catch( (err) => {
-				console.log("프로필 이미지 삭제 실패");
-				console.log(err)
-			})
-
-		},
     },
 }
 </script>
@@ -149,4 +128,31 @@ h3 {
     margin-top: 20px;
     margin-bottom: 5px;
 }
+
+.uploadimg {
+		display:none;
+	}
+.profile_area{
+		padding: 30px 20px 18px;
+		border-bottom: 1px solid  #e0e5ee;
+	}
+.img_btn{
+    font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+    width:150px;
+    margin: 5px 0;
+}
+.imgbox {
+		width: 300px;
+		height: 300px;
+		border-radius: 10%;
+		overflow: hidden;
+		margin: 0 auto;
+	}
+.imgbox> img {
+    width: 100%;
+    height: 100%;
+}
+.btn_group{
+    margin: 15px 0 0;
+}
 </style>
\ No newline at end of file

From 3bf7801f29122b40415e5ab07ccb619da4768d64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Wed, 19 Aug 2020 19:20:51 +0900
Subject: [PATCH 23/74] =?UTF-8?q?TEST=20:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C#1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index e27003f..b7a2e12 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -88,7 +88,7 @@ export default {
 
         // 업로드 이미지
         uploadthumbImage(e){
-            console.log('tttttttttttttttttttt')
+
             var file = new FormData();
             const image = e.target.files[0];
             file.append("file", image);
@@ -111,6 +111,7 @@ export default {
                 }
                 )
                 .then(response => {
+                    console.log(response.data);
                     this.thumbImage = response.data;
                     storage.setItem("thumbImage", response.data)
                 })
@@ -142,8 +143,8 @@ h3 {
     margin: 5px 0;
 }
 .imgbox {
-		width: 300px;
-		height: 300px;
+		width: 400px;
+		height: 250px;
 		border-radius: 10%;
 		overflow: hidden;
 		margin: 0 auto;

From d6e6bcbece8d108ea30f9659a04cb25a607509ea Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 20:00:07 +0900
Subject: [PATCH 24/74] =?UTF-8?q?Modify:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 2414379..d391cec 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -24,7 +24,10 @@
             <Viewer :initialValue="this.content"/>
           </div>
           <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-          <div></div>
+          <div>
+            <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
+            <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
+          </div>
           <!-- 블로그 작성자 Thumnail -->
 
           <!-- 짧은 자기 소개 -->
@@ -103,7 +106,6 @@ export default {
         }
     },
     created(){
-      console.log(storage.getItem("uid"))
       axios.post(API_URL + 'api/v2/p/',{
         // headers :{
         //   'Content-Type': 'application/json',
@@ -160,6 +162,22 @@ export default {
           return false
         }
       },
+      // 게시글 수정 페이지로 보내는 버튼
+      onPostUpdateBtn() {
+        if (this.isPostauthor()) {
+          console.log('수정버튼 눌림')
+          // this.$router.push()
+        }
+      },
+
+      // 게시글 삭제 버튼
+      onPostDeleteBtn() {
+        if (this.isPostauthor()) {
+          axios.delete(API_URL + 'api/v3' + this.post.pid)
+            .then(() => alert('게시글이 삭제되었습니다.'))
+        }
+      },
+      
       // 댓글 Create 메서드
       onCommentCreate() {
         if (storage.getItem("login_user")) {

From 0829fbe8f716fe195c6f0484c64c4e158a385068 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Wed, 19 Aug 2020 20:23:31 +0900
Subject: [PATCH 25/74] =?UTF-8?q?Feature:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 10 +++++++---
 frontend/src/components/TextEditor.vue |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index d391cec..62fd0df 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -115,12 +115,13 @@ export default {
         pid : storage.getItem("pid")
       })
         .then(res => {
-          // console.log(res)
+          console.log(res)
           // this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
+          this.post.uid = res.data.uid
           // console.log(this.post)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
@@ -148,7 +149,7 @@ export default {
         })
           .then(res => {
             this.post = res.data
-            console.log(this.post)
+            // console.log(this.post)
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
             this.isPostauthor(this.isPostauthor)
@@ -164,8 +165,11 @@ export default {
       },
       // 게시글 수정 페이지로 보내는 버튼
       onPostUpdateBtn() {
+        console.log('수정버튼 눌림')
+        console.log(this.post.author)
+        console.log(this.post.uid)
         if (this.isPostauthor()) {
-          console.log('수정버튼 눌림')
+          console.log('검증 통과')
           // this.$router.push()
         }
       },
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index e4e0c41..997b2b9 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -77,7 +77,8 @@ export default {
                 title: this.title,
                 content: this.editorText,
                 tag: tagList,
-                thumbnail: storage.getItem("profileImage")
+                thumbnail: storage.getItem("profileImage"),
+                uid: storage.getItem("uid")
             })
             .then(() => {
                 storage.removeItem("profileImage")

From b8c20aed4dc1136823be4ce3f9bd5b797ec8fbc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 01:16:53 +0900
Subject: [PATCH 26/74] =?UTF-8?q?feature:=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EB=B3=80=EA=B2=BD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Setting.vue | 54 +++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index 331eca1..3afb420 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -42,6 +42,23 @@
 							/>
 							<p class="caution">※ 이메일은 수정할 수 없습니다.</p>
 						</div>
+						<div class="user_pwd">
+							<h4 class="cate_desc">비밀번호</h4>
+							<div v-if="pwdCheck">
+								<v-text-field 
+									v-model="userinfo.password"
+									type="password"
+									outlined 
+									dense
+									hide-details
+									style="border-radius:0px"
+									class="mb-3"
+								/>
+							</div>
+							<v-btn color="#6e8af8" depressed tile outlined class="mb-3" @click="modpwd">
+								비밀번호 변경
+							</v-btn>
+						</div>
 					</div>
 					<div class="user_detail">
 						<div class="nickname">
@@ -178,9 +195,9 @@
 							</div>
 						</div>
 					</div>
-				</div>
-				<div class="signout">
-					<a @click="showMsgBoxTwo">DO!에서 <span class="signout_btn">탈퇴하기</span></a>
+					<div class="signout">
+						<a @click="showMsgBoxTwo">DO!에서 <span class="signout_btn">탈퇴하기</span></a>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -219,6 +236,7 @@ export default {
 	},
 	data() {
 		return {
+			pwdCheck: false,
 			clickprofile : false,
 			clicksns : false,
 			mandatory : false,
@@ -227,6 +245,7 @@ export default {
 			boxTwo: '', // 회원 탈퇴
 			userinfo : {
 				uid : '',
+				password: '',
 				profileImage : '',
 				nickname : '',
 				introduce : '',
@@ -251,7 +270,7 @@ export default {
 		}
 	},
 	methods: {
-
+		
 		modprofile() {
 			if(this.clickprofile===false){
 				this.clickprofile = true;
@@ -262,7 +281,22 @@ export default {
 				this.clicksns = true;
 			}
 		},
-
+		modpwd(){
+			if(this.pwdCheck===false){
+				this.pwdCheck=true;
+			}
+			else if(this.pwdCheck===true){
+				this.pwdCheck=false;
+				axios.put(API_URL+'api/v1/'+this.userinfo.uid,{
+					password : this.userinfo.password,
+					updateType : "1"
+				}).then(function(response){
+					console.log(response);
+				}).catch(function(error){
+					console.log(error);
+				})
+			}
+		},
 
 		// nickname, introduce 수정
 		updateNickname() {
@@ -466,7 +500,7 @@ export default {
 			this.userinfo.instagram = data.instagram,
 			this.userinfo.emailaddr = data.email,
 			this.userinfo.qrImage = data.qrImage
-
+			this.userinfo.password = data.password
 		})
 	},
 	
@@ -478,7 +512,7 @@ export default {
 		background-color: #f2f4f7;	
 	}
 	.inner {
-		min-height:1600px;
+		min-height:1850px;
 		max-width:960px;
 		margin: 0 auto;
 		padding: 151px 15px 0 15px;
@@ -504,6 +538,9 @@ export default {
 		padding: 30px;
 		border-bottom: 1px solid #e0e5ee;
 	}
+	.user_email{
+		padding-bottom: 40px;
+	}
 	.user_detail{
 		width:100%;
 		height:340px;
@@ -572,6 +609,9 @@ export default {
 	.introduce {
 		margin-bottom: 20px;
 	}
+	button {
+		border-radius: 0px;
+	}
 	button:hover{
 		background-color:#6e8af8;
 		color:white !important; 

From 4756223ce1037b9a4fc38e676f592ccf8239c5a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 08:56:07 +0900
Subject: [PATCH 27/74] =?UTF-8?q?feature:=EB=B8=94=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=84=B1,=20navbar=20?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    | 23 +++++
 frontend/package.json                         |  2 +
 .../{Sidebar/PostContents.vue => Myblog.vue}  |  6 +-
 frontend/src/components/Navbar.vue            | 94 +++++++++++++------
 4 files changed, 94 insertions(+), 31 deletions(-)
 rename frontend/src/components/{Sidebar/PostContents.vue => Myblog.vue} (66%)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f104d16..b737807 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4952,6 +4952,29 @@
         }
       }
     },
+    "expose-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/expose-loader/-/expose-loader-1.0.0.tgz",
+      "integrity": "sha512-xgt47+pEQrlCyCoO09cMKWf5qiurK6qMtvjUPm8+Uso5WwkNHeD47P0Zb3R9Kvk5zUcJWLax95xaaXDJCmoNjw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.6"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "express": {
       "version": "4.17.1",
       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7b71d78..1181a07 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
+    "jquery": "^3.5.1",
     "tui-editor": "^1.4.10",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
@@ -40,6 +41,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "expose-loader": "^1.0.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
diff --git a/frontend/src/components/Sidebar/PostContents.vue b/frontend/src/components/Myblog.vue
similarity index 66%
rename from frontend/src/components/Sidebar/PostContents.vue
rename to frontend/src/components/Myblog.vue
index f25de49..3ec745f 100644
--- a/frontend/src/components/Sidebar/PostContents.vue
+++ b/frontend/src/components/Myblog.vue
@@ -1,10 +1,12 @@
 <template>
-  <div></div>
+  <div>
+      
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'postcontents',
+
 }
 </script>
 
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 60a478a..e38e4e2 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -14,7 +14,7 @@
       <router-link to="/feed">피드</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      포럼
+      <router-link to="/forum">포럼</router-link>
     </v-toolbar-items>
 
       <div class="notice">
@@ -48,25 +48,31 @@
             <img v-bind:src=profileImage class="thumb_profile" alt>
         </div>
         <!--프로필 클릭시 팝업되는 드롭다운 메뉴-->
-        <v-card class="shortcuts">
-          <v-list v-if="profile">
-            <v-list-item>
-              내블로그 
-            </v-list-item>
-            <v-list-item>
-              <router-link to="/setting">설정</router-link>
-            </v-list-item>
-            <v-list-item v-if="!google_login" @click="onClickLogout">
-              로그아웃
-            </v-list-item>
-            <v-list-item v-if="google_login" @click="onClickLogout">
-              <GoogleLogin :params="params" :logoutButton=true>로그아웃</GoogleLogin>
-            </v-list-item>
-          </v-list>
-        </v-card>
+        <div class="shortcuts" id="shortcuts" v-if="profile">
+          <div class="inner_shortcuts">
+            <div class="info_profile">
+              <span class="user_nickname">{{nickname}}</span>
+              <span class="user_email">{{userEmail}}</span>
+            </div>
+            <div class="list_menu">
+              <div class="myblog">
+                내 블로그 
+              </div>
+              <div class="setting">
+                <router-link to="/setting">설정</router-link>
+              </div>
+              <div class="logout" v-if="!google_login" @click="onClickLogout">
+                로그아웃
+              </div>
+              <div class="logout" v-if="google_login" @click="onClickLogout">
+                <GoogleLogin :params="params" :logoutButton=true>로그아웃</GoogleLogin>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div v-if="isLogin" class="info_blog" @click="profileshow"> 
-        <v-icon small color="black" style="margin: 20px 4px 0px 0px">fas fa-angle-down</v-icon>
+        <v-icon small color="black" style="margin: 20px 4px 0px 5px">fas fa-angle-down</v-icon>
       </div>
   </v-app-bar>
 </template>
@@ -88,6 +94,8 @@ export default {
   data() {
     
     return {
+      nickname: storage.getItem("login_user"),
+      userEmail: "사용자메일@가져오기.com",
       profile: false,
       isLogin: this.$store.state.isLoggedIn,
       google_login: storage.getItem("google_login"),
@@ -148,13 +156,10 @@ export default {
           this.$router.push({name: 'postdetail', params: {data: this.list[i]}}).catch(()=>{});
         }
       }
-      
     },
-
   },
   created() {
     this.loginChecker()
-
     axios.get(API_URL + 'api/v2/notice')
         .then(res => {
           // this.post = res.data
@@ -162,16 +167,13 @@ export default {
           for(var i=0; i<res.data.length; i++){
             this.list[i] = res.data[i];
           }
-
     })
   },
-
   mounted(){
     // this.text = this.list[this.index];
     this.loginChecker();
     this.text = "공지사항";
     setInterval(this.getTextFromList, this.speed);
-    
   },
 
   // watch: {
@@ -257,11 +259,45 @@ div > .newpost > a >button:hover {
   border-radius:50%;
 }
 .shortcuts{
-  position : fixed;
-  top: 80px;
-  width: 150px;
-  right: 10%;
-  background-color: aqua;
+  position : absolute;
+  top: 85px;
+  width: 230px;
+  right: 15px;
+  border-radius: 3px;
+  background-color: white;
+  box-sizing: content-box;
+  box-shadow: 0 2px 5px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3)
+}
+.inner_shortcuts{
+  padding: 20px 0 15px 25px
+}
+.info_profile{
+  padding-bottom: 20px;
+}
+.user_nickname{
+  font-size:16px;
+  display: block;
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user_email{
+  font-family: Noto Sans Light, sans-serif;
+  overflow: hidden;
+  padding: 2px 0 0;
+  text-overflow: ellipsis;
+  white-space:nowrap;
+  color:#909090;
+  font-size:14px;
+}
+.list_menu{
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+  font-size: 14px;
+}
+.myblog, .setting, .logout {
+  padding: 3px 0 8px ;
+  cursor: pointer;
 }
 .newpost {
   margin-right:20px;

From 2c43f250ce575c97133d0e2fbbbeeb89f4c01d16 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 11:10:37 +0900
Subject: [PATCH 28/74] =?UTF-8?q?Modify:=20=EC=A4=91=EC=B2=A9=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EA=B5=AC=ED=98=84=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                   | 3 +--
 frontend/src/components/Home.vue       | 4 +++-
 frontend/src/components/PostDetail.vue | 7 ++-----
 frontend/src/router/index.js           | 3 ++-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1cd57c3..9c9d67e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <!-- <router-view :key="someVariableUnderYourControl"/> -->
-    <router-view/>
+    <router-view :key="$route.fullPath"/>
   </v-app>
 </template>
 
@@ -15,7 +15,6 @@ export default {
 
     }
   },
-  
 }
 </script>
 
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index a9d6888..03b7402 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -131,7 +131,9 @@ export default {
     postdetail(one_post) {
       storage.removeItem("pid")
       storage.setItem("pid", one_post.pid)
-      this.$router.push({name: 'postdetail', params: {data: one_post}})
+      console.log(one_post.title)
+      // this.$router.push({name: 'postdetail', params: {data: one_post}})
+      this.$router.push({name: 'postdetail', path:`${one_post.author}/${one_post.title}`,  params: {data: one_post}})
     },
     postread(item) {
       let option = ""
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 21fdab6..140c53c 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -165,12 +165,9 @@ export default {
       },
       // 게시글 수정 페이지로 보내는 버튼
       onPostUpdateBtn() {
-        console.log('수정버튼 눌림')
-        console.log(this.post.author)
-        console.log(this.post.uid)
         if (this.isPostauthor()) {
-          console.log('검증 통과')
-          // this.$router.push()
+          console.log()
+          // this.$router.push({path:`/${}/${}`})
         }
       },
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d2c2534..0cd71e2 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -71,7 +71,8 @@ export default new VueRouter({
       component: Post
     },
     {
-      path: '/:username/:title',
+      // path: '/:username/:title',
+      path: '/postdetail',
       name: 'postdetail',
       component: PostDetail
     },

From 4b9b0c2f3e6d18b247200ac5d94a76dc0b950f3d Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 11:27:50 +0900
Subject: [PATCH 29/74] =?UTF-8?q?Modify:=20=EC=BB=A8=EB=B2=A4=EC=85=98=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index f828c19..78f59cc 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -20,7 +20,7 @@
                     <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
                     <input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
                 </div>
-              </div>
+            </div>
         </div>
         <h3>태그 입력칸</h3>        
         <TagInputBox 

From 24975c871f778883c61d468ae33141a5869c368d Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 11:28:13 +0900
Subject: [PATCH 30/74] =?UTF-8?q?Fix:=20=EC=A4=91=EC=B2=A9=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EC=A0=81=EC=9A=A9=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 03b7402..dbb9c88 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -131,9 +131,8 @@ export default {
     postdetail(one_post) {
       storage.removeItem("pid")
       storage.setItem("pid", one_post.pid)
-      console.log(one_post.title)
       // this.$router.push({name: 'postdetail', params: {data: one_post}})
-      this.$router.push({name: 'postdetail', path:`${one_post.author}/${one_post.title}`,  params: {data: one_post}})
+      this.$router.push({name: 'postdetail',  params: {data: one_post}})
     },
     postread(item) {
       let option = ""

From c62636adcefe46d4e3e4d614ae668a80933395c5 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 12:19:21 +0900
Subject: [PATCH 31/74] =?UTF-8?q?Feature:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue    | 26 +++++++++++++++++++-------
 frontend/src/components/PostDetail.vue |  1 +
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 4276e34..982c294 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -27,17 +27,25 @@
 			<div class="my-auto">
 				<p class="" v-if="!isCommentChild(comment.child)">대댓글이 없습니다 ㅠㅠ</p>
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
+				<!-- 대댓글 부분 -->
 				<div v-if="ChildFlag">
-					<div v-for="child in comment.child" :key=child.cid>
+					<div v-for="child in comment.child" :key=child.cid class="comment-box">
 						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
+						<v-btn 
+							v-if="child.isauthor"
+							@click="onCommentDelete(child)"
+						>삭제</v-btn>
+						<v-btn 
+							v-if="child.isauthor"
+							@click="onClickUpdateBtn(child)"
+						>수정</v-btn>
 					</div>
 					<div>
 					<v-text-field
-						:id="comment.cid"
 						v-model="ChildCommentInput"
-						solo="true"
-						dense="true"
-						clearable="true"
+						solo
+						dense
+						clearable
 					></v-text-field>
 					<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
 					</div>
@@ -67,6 +75,8 @@ export default {
 			UpdateFlag: false,
 		}
 	},
+	created() {
+	},
 	methods: {
 		// *** Parent Comment ***
 		isCommentauthor(Comments) {
@@ -109,8 +119,10 @@ export default {
 		},
 		// Comment에 Child가 있는지 없는지 체크
 		isCommentChild(one_comment_child) {
-			// console.log(one_comment_child)
-			if (one_comment_child.length) return true
+			if (one_comment_child.length) {
+				this.isCommentauthor(one_comment_child)
+				return true
+			}
 			return false
 		},
 		onClickUpdateBtn(one_comment) {
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index d1bb339..8d26e66 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -183,6 +183,7 @@ export default {
       CommentRead() {
         axios.get(API_URL+'api/v3/'+storage.getItem("pid"))
           .then(res => {
+            console.log('Comment Reset')
             this.Comments = this.isCommentauthor(res.data)
           })
         this.CommentInput = ""

From 424415a6d17309acf90c1f4af73e16503030e6ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 12:27:18 +0900
Subject: [PATCH 32/74] =?UTF-8?q?feature=20:=20=ED=86=A0=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=97=90=EB=94=94=ED=84=B0=EC=97=90=20=EA=B8=80=20=EB=B6=88?=
 =?UTF-8?q?=EB=9F=AC=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json             | 14 ++++++-------
 frontend/package.json                  |  2 +-
 frontend/src/components/TextEditor.vue | 27 ++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f104d16..1a8fe28 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1235,17 +1235,17 @@
       }
     },
     "@toast-ui/vue-editor": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-2.3.0.tgz",
-      "integrity": "sha512-oXuy4YqaF9RHBqYutNg8xI9XvcrWQv9xRKQJLSPtR3wh9/5AeTuXm/b8qkJdoccCsJl5lUq/Qh7l/+o8zcbvFA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-2.3.1.tgz",
+      "integrity": "sha512-vEElTwJ3CwUL2da2y3gxKVK7bRWC+d6SrUyOQNeCDtN95vEs/7MUNK4cUAxAGDZuDYg1KB2ZpBtc/dV1LkO9XQ==",
       "requires": {
-        "@toast-ui/editor": "^2.3.0"
+        "@toast-ui/editor": "^2.3.1"
       },
       "dependencies": {
         "@toast-ui/editor": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.3.0.tgz",
-          "integrity": "sha512-rCb35CMxYS6U2aiwWhdLZMzbgzoVHm2YxGrlmH4OdNQNfzAM03DHl4lTwq7EP7E4MG0FEMgMyn0Ovo5DI7G8+w==",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.3.1.tgz",
+          "integrity": "sha512-0akQUnyCg24SBBb+weRX6VJ6ZjltxYEivBWOHft0birkrPF0YQgKjebPtFGPB9THBSUY+0qyr6k/KIN2rZqUog==",
           "requires": {
             "@types/codemirror": "0.0.71",
             "codemirror": "^5.48.4"
diff --git a/frontend/package.json b/frontend/package.json
index 7b71d78..03f8c10 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@toast-ui/editor": "^2.3.1-alpha",
-    "@toast-ui/vue-editor": "^2.3.0",
+    "@toast-ui/vue-editor": "^2.3.1",
     "aos": "^3.0.0-beta.6",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index b7a2e12..e2b2776 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -6,7 +6,7 @@
             label="글 제목을 입력해주세요"
             required
         ></v-text-field>
-        <editor ref="toastuiEditor" height="500px"/>
+        <editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
         <h3>썸네일 이미지</h3>
         <div class="profile_area">
             <div class="imgbox">
@@ -20,7 +20,7 @@
                     <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
                     <input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
                 </div>
-              </div>
+            </div>
         </div>
         <h3>태그 입력칸</h3>        
         <TagInputBox 
@@ -54,12 +54,16 @@ export default {
             title: '',
             thumbImage: '',
             uid: '',
+            tempText: ''
+
+
         }
     },
     mounted() {
         storage.removeItem("thumbImage")
     },
     methods: {
+
         createAction(tagData) {
             // 태그 데이터 정리해서 보내기
             let tagList = new Array()
@@ -83,7 +87,21 @@ export default {
             .catch(err => console.log(err))
         },
         saveAction() {
-        
+
+            var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
+            this.editorText = textdata
+            axios.put(API_URL+"api/v2/temp",{
+                pid : `${storage.getItem("pid")}`,
+                uid : `${storage.getItem("uid")}`,
+                author : `${storage.getItem("login_user")}`,
+                title: this.title,
+                content: this.editorText,
+            })
+            .then(() => {
+                storage.removeItem("thumbImage")
+                this.$router.push('/')
+            })
+            .catch(err => console.log(err))
         },
 
         // 업로드 이미지
@@ -111,9 +129,10 @@ export default {
                 }
                 )
                 .then(response => {
-                    console.log(response.data);
+                    console.log("썸네일 업로드 데이터 URL: "+response.data);
                     this.thumbImage = response.data;
                     storage.setItem("thumbImage", response.data)
+                    console.log("썸네일 스토리지 저장 완료")
                 })
                 .catch((err) => {
                     console.log("프로필 이미지 업로드 실패")

From dfcea1cadaae5a9fc1aa42a328da45ff2f18794d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 12:44:32 +0900
Subject: [PATCH 33/74] =?UTF-8?q?Test=20:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 264 +++++++++++++------------
 1 file changed, 136 insertions(+), 128 deletions(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index e2b2776..fa3953b 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -1,33 +1,33 @@
 <template>
-    <v-container>
-        <v-text-field
-            v-model="title"
-            :counter="20"
-            label="글 제목을 입력해주세요"
-            required
-        ></v-text-field>
-        <editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
-        <h3>썸네일 이미지</h3>
-        <div class="profile_area">
-            <div class="imgbox">
-                <!-- 회원 프로필 이미지 디비에서 조회 -->
-                <!-- [추가]이미지 변화에 대한 처리 -->
-                <img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
-            </div>
-            <div class="btn_group">
-                <!-- 이미지 업로드 (모달) -->
-                <div class="img_btn">
-                    <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
-                    <input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
-                </div>
-            </div>
-        </div>
-        <h3>태그 입력칸</h3>        
-        <TagInputBox 
-            @submit-post="createAction"
-            @save-post="saveAction"
-        />
-    </v-container>
+	<v-container>
+		<v-text-field
+			v-model="title"
+			:counter="20"
+			label="글 제목을 입력해주세요"
+			required
+		></v-text-field>
+		<editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
+		<h3>썸네일 이미지</h3>
+		<div class="profile_area">
+			<div class="imgbox">
+				<!-- 회원 프로필 이미지 디비에서 조회 -->
+				<!-- [추가]이미지 변화에 대한 처리 -->
+				<img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
+			</div>
+			<div class="btn_group">
+				<!-- 이미지 업로드 (모달) -->
+				<div class="img_btn">
+					<v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+					<input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
+				</div>
+			</div>
+		</div>
+		<h3>태그 입력칸</h3>        
+		<TagInputBox 
+			@submit-post="createAction"
+			@save-post="saveAction"
+		/>
+	</v-container>
 </template>
 <script>
 import 'tui-editor/dist/tui-editor.css';
@@ -43,110 +43,118 @@ const storage = window.sessionStorage
 // const FLICKR_URL = 'https://up.flickr.com/services/upload/'
 
 export default {
-    name: 'TextEditor',
-    components: {
-        Editor,
-        TagInputBox
-    },
-    data(){
-        return {
-            editorText: '',
-            title: '',
-            thumbImage: '',
-            uid: '',
-            tempText: ''
+	name: 'TextEditor',
+	components: {
+		Editor,
+		TagInputBox
+	},
+	data(){
+		return {
+			editorText: '',
+			title: '',
+			thumbImage: '',
+			uid: '',
+			tempText: ''
+		}
+	},
+	created(){
+		this.title = storage.getItem("title")
+		this.tempText = storage.getItem("content")
+	},
+	mounted() {
+		storage.removeItem("thumbImage")
+	},
+	methods: {
 
+		createAction(tagData) {
+			// 태그 데이터 정리해서 보내기
+			let tagList = new Array()
+			tagData.forEach(tag => {
+				tagList.push(tag["text"])
+			})
+			// console.log(tagList)
+			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
+			this.editorText = textdata
+			axios.post(API_URL+'api/v2/', {
+				author: storage.getItem("login_user"),
+				title: this.title,
+				content: this.editorText,
+				tag: tagList,
+				thumbnail: storage.getItem("thumbImage")
+			})
+			.then(() => {
+				storage.removeItem("thumbImage")
+				// 임시 저장 storage 삭제
+				storage.removeItem("title")
+				storage.removeItem("content")
+				this.$router.push('/')
+			})
+			.catch(err => console.log(err))
+		},
+		saveAction() {
 
-        }
-    },
-    mounted() {
-        storage.removeItem("thumbImage")
-    },
-    methods: {
+			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
+			this.editorText = textdata
+			axios.put(API_URL+"api/v2/temp",{
+				pid : `${storage.getItem("pid")}`,
+				uid : `${storage.getItem("uid")}`,
+				author : `${storage.getItem("login_user")}`,
+				title: this.title,
+				content: this.editorText,
+			})
+			.then(() => {
+				storage.removeItem("thumbImage")
+				// 임시 저장 storage 삭제
+				storage.removeItem("title")
+				storage.removeItem("content")
+				this.$router.push('/')
+			})
+			.catch(err => console.log(err))
+		},
 
-        createAction(tagData) {
-            // 태그 데이터 정리해서 보내기
-            let tagList = new Array()
-            tagData.forEach(tag => {
-                tagList.push(tag["text"])
-            })
-            // console.log(tagList)
-            var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
-            this.editorText = textdata
-            axios.post(API_URL+'api/v2/', {
-                author: storage.getItem("login_user"),
-                title: this.title,
-                content: this.editorText,
-                tag: tagList,
-                thumbnail: storage.getItem("thumbImage")
-            })
-            .then(() => {
-                storage.removeItem("thumbImage")
-                this.$router.push('/')
-            })
-            .catch(err => console.log(err))
-        },
-        saveAction() {
+		// 업로드 이미지
+		uploadthumbImage(e){
 
-            var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
-            this.editorText = textdata
-            axios.put(API_URL+"api/v2/temp",{
-                pid : `${storage.getItem("pid")}`,
-                uid : `${storage.getItem("uid")}`,
-                author : `${storage.getItem("login_user")}`,
-                title: this.title,
-                content: this.editorText,
-            })
-            .then(() => {
-                storage.removeItem("thumbImage")
-                this.$router.push('/')
-            })
-            .catch(err => console.log(err))
-        },
+			var file = new FormData();
+			const image = e.target.files[0];
+			file.append("file", image);
 
-        // 업로드 이미지
-        uploadthumbImage(e){
+			// 미리보기용
+			const reader = new FileReader();
+			reader.readAsDataURL(image); 
+			reader.onload = e =>{
+				this.thumbImage = e.target.result; // profileImage 설정
+			};
 
-            var file = new FormData();
-            const image = e.target.files[0];
-            file.append("file", image);
-
-            // 미리보기용
-            const reader = new FileReader();
-            reader.readAsDataURL(image); 
-            reader.onload = e =>{
-                this.thumbImage = e.target.result; // profileImage 설정
-            };
-
-            // **추가** POST문으로 서버에 이미지 파일 전송
-            axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
-                file,
-                {
-                    headers:{
-                        'Content-Type': 'multipart/form-data',
-                        'Accept': 'application/json'
-                    }	
-                }
-                )
-                .then(response => {
-                    console.log("썸네일 업로드 데이터 URL: "+response.data);
-                    this.thumbImage = response.data;
-                    storage.setItem("thumbImage", response.data)
-                    console.log("썸네일 스토리지 저장 완료")
-                })
-                .catch((err) => {
-                    console.log("프로필 이미지 업로드 실패")
-                    console.log(err);
-                })
-        },
-    },
+			// **추가** POST문으로 서버에 이미지 파일 전송
+			axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
+				file,
+				{
+					headers:{
+						'Content-Type': 'multipart/form-data',
+						'Accept': 'application/json'
+					}	
+				}
+				)
+				.then(response => {
+					console.log("썸네일 업로드 데이터 URL: "+response.data);
+					this.thumbImage = response.data;
+					storage.setItem("thumbImage", response.data)
+					console.log("썸네일 스토리지 저장 완료")
+				})
+				.catch((err) => {
+					console.log("프로필 이미지 업로드 실패")
+					console.log(err);
+				})
+		},
+	},
 }
 </script>
 
 <style scoped>
 h3 {
-    margin-top: 20px;
-    margin-bottom: 5px;
+	margin-top: 20px;
+	margin-bottom: 5px;
 }
 
 .uploadimg {
@@ -157,9 +165,9 @@ h3 {
 		border-bottom: 1px solid  #e0e5ee;
 	}
 .img_btn{
-    font-family: 'NanumSquare', Noto Sans Light, sans-serif;
-    width:150px;
-    margin: 5px 0;
+	font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+	width:150px;
+	margin: 5px 0;
 }
 .imgbox {
 		width: 400px;
@@ -169,10 +177,10 @@ h3 {
 		margin: 0 auto;
 	}
 .imgbox> img {
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 }
 .btn_group{
-    margin: 15px 0 0;
+	margin: 15px 0 0;
 }
 </style>
\ No newline at end of file

From b9ae40c864537b5c1f8d6747b846846388ca4e66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 14:30:20 +0900
Subject: [PATCH 34/74] =?UTF-8?q?feature=20:=20=EA=B2=8C=EC=8B=9C=EA=B8=80?=
 =?UTF-8?q?=20=EC=9E=84=EC=8B=9C=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index fa3953b..fa7a4f0 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -104,7 +104,7 @@ export default {
 			})
 			.then(() => {
 				storage.removeItem("thumbImage")
-				// 임시 저장 storage 삭제
+						// 임시 저장 storage 삭제
 				storage.removeItem("title")
 				storage.removeItem("content")
 				this.$router.push('/')

From 35997c1320f08e136ecf06f86805338da218bc3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 14:35:49 +0900
Subject: [PATCH 35/74] =?UTF-8?q?feature:=EB=82=B4=20=EB=B8=94=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Myblog.vue     | 239 ++++++++++++++++++++++++-
 frontend/src/components/Navbar.vue     |   2 +-
 frontend/src/components/PostDetail.vue |  30 ++--
 frontend/src/router/index.js           |   8 +-
 4 files changed, 260 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
index 3ec745f..75fa37a 100644
--- a/frontend/src/components/Myblog.vue
+++ b/frontend/src/components/Myblog.vue
@@ -1,15 +1,250 @@
 <template>
   <div>
-      
+    <Navbar></Navbar>
+    <div class="inner">
+      <div class="blog_info">
+        <div class="profile_img">
+          <img v-bind:src=profileImage class="thumb_profile" alt>
+        </div>
+        <div class="profile_user">
+          {{nickname}}
+          <p>
+            {{introduce}}
+          </p>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="sns_link">
+        <div v-if="github" class="sns_addr">
+          <a :href="github"><v-icon style="padding-right:5px" large>fab fa-github</v-icon></a>
+        </div>
+        <div v-if="instagram" class="sns_addr">
+          <a :href="instagram"><v-icon style="padding-right:5px" large>fab fa-instagram</v-icon></a>
+        </div>
+        <div v-if="facebook" class="sns_addr">
+          <a :href="facebook"><v-icon style="padding-right:5px" large>fab fa-facebook</v-icon></a>
+        </div>
+      </div>
+      <div class="toptab">
+        <v-tabs
+          v-model="tab"
+					background-color="transparent"
+					centered
+					color="black"
+					slider-color="#6987f7"
+					slider-size="3"
+				>
+					<v-tab @click="postread(item)" v-for="item in items" :key="item">
+						{{ item }}
+					</v-tab>
+				</v-tabs>
+    </div>
+    <div class="contain">
+      <div class="content_area">
+        <!-- 게시글 탭 -->
+        <v-tabs-items v-model="tab">
+        <!-- 게시글 미리보기 -->
+          <v-tab-item v-for="(item) in items" :key="item">
+            <v-row v-if="posts.length">
+            <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'"
+              style="padding:1rem">
+                <v-hover>
+                <template v-slot="{hover}">
+                <v-card 
+                  @click="postdetail(post)"
+                  height="406px"
+                  max-width="350px"
+                  :elevation="hover ? 8 : 2"
+                >
+                  <v-img
+                    class="white--text align-end"
+                    height="180px"
+                    :src="post.thumbnail"
+                  />
+                  <div class="inner_card">
+                    <!-- 제목이 가로범위 초과시 ... -->
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
+                </v-card>
+                </template>
+                </v-hover>
+              </v-col>
+            </v-row>
+            <v-row v-else>
+              게시글이 없습니다.
+              </v-row>
+          </v-tab-item>
+        </v-tabs-items>
+      </div>
+    </div>
+    </div>
   </div>
 </template>
 
 <script>
+
+const storage = window.sessionStorage
+import Navbar from '../components/Navbar.vue'
+import axios from 'axios'
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+
 export default {
+  name: 'Myblog',
+  components: {
+		Navbar,
+  },
+  data(){
+    return{
+      profileImage: storage.getItem("profileImage"),
+      nickname: storage.getItem("login_user"),
+      introduce : '',
+      github: '',
+      facebook: '',
+      instagram: '',
+      tab: null,
+      items: [
+        '내글', '임시저장',
+      ],
+      posts : {
+        pid: '',
+        title: '',
+        content: '',
+        publishedTime: '',
+        thumbnail:'',
+      }
+    }
+  },
+  created(){
+    var uid = sessionStorage.uid;
+		axios
+		.get(API_URL+'api/v1/'+uid)
+		.then(({data})=>{
+      // console.log(data);
+      this.introduce = data.introduce
+      this.github = 'https://github.com/'+data.github
+			this.facebook = 'https://facebook.com/'+data.facebook
+			this.instagram = 'https://instagram.com/'+data.instagram
+    })
+    this.postread("내글")
+  },
+  methods: {
+    postread(item){
+      var uid = sessionStorage.uid;
+      if (item === "내글") {
+        console.log("a")
+        axios.get(API_URL+'api/v2/u/'+uid)
+          .then(({data})=>{
+            console.log(data)
+            data.forEach(el => {
+            el.tmp = el.content
+            if (el.content.length > 120) {
+              // 마크다운 사진 제외
+              el.content = el.content.replace(/!\[.*\)+/, "")
+            }
+            // 작성 날짜만 보이게 수정
+            let year = el.publishedTime.slice(0,4);
+            let month = el.publishedTime.slice(5,7);
+            let day = el.publishedTime.slice(8,10);
+            // console.log(year+"년 "+month+"월 "+day+"일")
+            el.publishedTime = year+"년 "+month+"월 "+day+"일"
+            this.posts = data
+            });
+          })
+      } else if (item === '임시저장') {
+        axios.get(API_URL+'api/v2/temp/'+uid)
+          .then(({data})=>{
+          // 콘텐츠 미리보기 슬라이스
+            data.forEach(el => {
+              el.tmp = el.content
+              if (el.content.length > 120) {
+                // 마크다운 사진 제외
+                el.content = el.content.replace(/!\[.*\)+/, "")
+              }
+              // 작성 날짜만 보이게 수정
+              let year = el.publishedTime.slice(0,4);
+              let month = el.publishedTime.slice(5,7);
+              let day = el.publishedTime.slice(8,10);
+              // console.log(year+"년 "+month+"월 "+day+"일")
+              el.publishedTime = year+"년 "+month+"월 "+day+"일"
+              this.posts = data
 
+            });
+            console.log(this.posts)
+          }).catch(err => console.log(err))
+      }
+    },
+    postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      storage.setItem("title", one_post.title)
+      storage.setItem("content", one_post.content)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
+  }
 }
 </script>
 
 <style>
-
+.inner {
+  min-width: 1100px;
+  max-width: 1150px;
+  padding: 130px 20px 0px 20px;
+  margin: 0 auto;
+}
+.blog_info{
+  display: flex;
+  align-items: center;
+}
+.profile_img{
+  box-sizing: border-box;
+}
+.profile_img img{
+  display: block;
+  width: 8rem;
+  height: 8rem;
+  object-fit: cover;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 4px 0px;
+  border-radius: 50%;
+  
+}
+.profile_user{
+  display: flex;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  justify-content: center;
+  margin-left: 1rem;
+}
+.line {
+  width: 100%;
+  height: 1px;
+  margin-top: 2rem;
+  margin-bottom: 1.5rem;
+  background: rgb(233, 236, 239);
+}
+.sns_link {
+  display: flex;
+}
+.sns_addr a i {
+  margin: 0 10px 0 0;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index e38e4e2..c581ed9 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -56,7 +56,7 @@
             </div>
             <div class="list_menu">
               <div class="myblog">
-                내 블로그 
+                <router-link :to="{path: `/doblog/${this.nickname}`}">내 블로그</router-link>
               </div>
               <div class="setting">
                 <router-link to="/setting">설정</router-link>
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index d1bb339..52788d6 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -86,21 +86,21 @@ export default {
       Comment,
     },
     data() {
-        return {
-          post: {
-            title: '',
-            author: '',
-            content: '',
-            islike: this.$route.params.data.isLike,
-          },
-          content: this.$route.params.data.tmp,
-          Comments: null,
-          CommentInput: '',
-          ChildFlag: false,
-          ChildCommentInput: '',
-          FeedFlag: '',
-          like: '',
-        }
+      return {
+        post: {
+          title: '',
+          author: '',
+          content: '',
+          islike: this.$route.params.data.isLike,
+        },
+        content: this.$route.params.data.tmp,
+        Comments: null,
+        CommentInput: '',
+        ChildFlag: false,
+        ChildCommentInput: '',
+        FeedFlag: '',
+        like: '',
+      }
     },
     created(){
       console.log(storage.getItem("uid"))
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d2c2534..8561227 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -13,6 +13,7 @@ import Introduce from '../components/Introduce.vue'
 import Search from '../components/Search.vue'
 import Feed from '../components/Feed.vue'
 import Forum from '../components/Forum.vue'
+import Myblog from '../components/Myblog.vue'
 
 Vue.use(VueRouter)
 import store from '../router/index.js'
@@ -71,7 +72,7 @@ export default new VueRouter({
       component: Post
     },
     {
-      path: '/:username/:title',
+      path: '/postdetail',
       name: 'postdetail',
       component: PostDetail
     },
@@ -94,6 +95,11 @@ export default new VueRouter({
       path:'/forum',
       name:'forum',
       component: Forum
+    },
+    {
+      path:'/doblog/:username',
+      name:'myblog',
+      component: Myblog,
     }
   ]
 })

From f193f4daf2f457402b9331b5ff1efcd5b683487b Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 14:51:31 +0900
Subject: [PATCH 36/74] =?UTF-8?q?Fix:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=95=88=EB=82=98=EC=98=A4=EB=8A=94=20?=
 =?UTF-8?q?=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 23 +++++++++++++++--------
 frontend/src/router/index.js           |  2 +-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index bf29145..e03fbef 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -17,11 +17,16 @@
           <div class="title-area">
             <h1>글 제목 : {{ post.title }}</h1>
             <h6>작성자: {{ post.author }}</h6>
+            <h1>test: {{ this.post.content }}</h1>
           </div>
 
           <!-- TextEditor 미리보기만(마크다운) -->
           <div class="col-lg-12">
-            <Viewer :initialValue="this.post.content"/>
+            <!-- <Viewer :initialValue="this.post.content"/> -->
+            <Viewer 
+              :initialValue="this.content"
+              @change="onEditorChange"
+            />
           </div>
           <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
           <div></div>
@@ -52,6 +57,7 @@
               @Click-Delete-Btn="CommentRead"
               @Click-Update-Btn="CommentRead"
               @Child-Create="CommentRead"
+              @Click-Child-Update-Btn="CommentRead"
             />
           </div>
         </div>
@@ -93,10 +99,9 @@ export default {
             content: '',
             islike: this.$route.params.data.isLike,
           },
-          content: this.$route.params.data.tmp,
+          content: this.$route.params.data.content,
           Comments: null,
           CommentInput: '',
-          ChildFlag: false,
           ChildCommentInput: '',
           FeedFlag: '',
           like: '',
@@ -120,7 +125,7 @@ export default {
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
-          // console.log(this.post)
+          console.log(this.post.content)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
@@ -128,9 +133,7 @@ export default {
             this.like = "far fa-heart"
             this.FeedFlag = false
           }
-          // console.log(this.post)
           this.Comments = res.data.comments
-          // console.log(this.Comments)
           this.isCommentauthor(this.Comments)
           this.isPostauthor(this.isPostauthor)
       })
@@ -144,18 +147,19 @@ export default {
       forceRerender() {
         // Remove my-component from the DOM
         this.renderComponent = false;
-
         this.$nextTick(() => {
           // Add the component back in
           this.renderComponent = true;
         })
+        console.log("rerender Complete")
       },
       fetchData() {
-        axios.post(API_URL + 'api/v2/p',{
+        axios.post(API_URL + 'api/v2/p/',{
           uid : storage.getItem("uid"),
           pid : storage.getItem("pid")
         })
           .then(res => {
+            console.log('fetchData')
             this.post = res.data
             console.log(this.post)
             this.Comments = res.data.comments
@@ -163,6 +167,9 @@ export default {
             this.isPostauthor(this.isPostauthor)
           })
       },
+      onEditorChange() {
+        this.fetchData()
+      },
       // 글 작성자인지 확인
       isPostauthor() {
         if (this.post.author && storage.getItem("login_user") && this.post.uid && storage.getItem("uid")) {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d2c2534..d1f2564 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -71,7 +71,7 @@ export default new VueRouter({
       component: Post
     },
     {
-      path: '/:username/:title',
+      path: '/postdetail',
       name: 'postdetail',
       component: PostDetail
     },

From 16d6c1f3094a3894ab459c3bd667bf7a2285e54c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 15:20:34 +0900
Subject: [PATCH 37/74] =?UTF-8?q?fix:search.vue=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83,=20=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Search.vue | 92 +++++++++++++++++++++---------
 1 file changed, 66 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 05afd69..f4d9902 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -13,6 +13,7 @@
 							item-value="abbr"
 							menu-props="auto"
 							hide-details
+							dense
 							label="Solo field"
 							solo
 							flat
@@ -22,6 +23,7 @@
 						<v-text-field
 							v-model="kword"
 							hide-details
+							dense
 							flat
 							solo
 							autofocus
@@ -45,14 +47,18 @@
 				<h3><span>{{kword}}</span>에 대한 검색 결과는 <strong>{{postcnt}}</strong>개입니다.</h3>
 			</div>
 			<div v-if="posts.length>0">
-				<div v-for="post in posts" :key="post.pid" class="post_list">
+				<div v-for="post in posts" :key="post.pid" class="post_list" @click="postdetail(post)">
 					<div class="profile">
 						<!-- 작성자 프로필 이미지. 클릭 시 개인 블로그로 이동-->
-						<a><img :src="post.thumbnail"></a>
+						<a><img :src="profileImg"></a>
 						<div class="nickname">
 							{{post.author}}
 						</div>
 					</div>
+					<!-- 기본섬네일로 지정되어 있으면 검색 시 표시 안 함 -->
+					<div class="post_thumbnail" v-if="post.thumbnail!=basicthumb">
+						<img :src="post.thumbnail">
+					</div>
 					<div class="post_info">
 						<h2>{{post.title}}</h2>
 						<p class="post_content">{{post.content}}</p>
@@ -72,6 +78,7 @@ import axios from 'axios'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
+const storage = window.sessionStorage
 
 export default {
 	name: 'Introduce',
@@ -80,25 +87,27 @@ export default {
 	},
 	data() {
 		return{
-			select: { name: '키워드', abbr: 't'},
-			options: [{name: '태그', abbr: 'a'}
-							, {name: '작성자', abbr: 'u'}
-							, {name: '키워드', abbr: 't'},],
-			kword:'',
-			posts : {
-				pid: '',
-				author: '',
+		select: { name: '키워드', abbr: 't'},
+		options: [{name: '태그', abbr: 'a'}
+						, {name: '작성자', abbr: 'u'}
+						, {name: '키워드', abbr: 't'},],
+		kword:'',
+		posts : {
+			pid: '',
+			author: '',
         title: '',
         content: '',
         publishedTime: '',
         thumbnail:'',
 			},
-			postcnt:-1,
-			date: '',
+		postcnt:-1,
+		date: '',
+		profileImg: '',
+		basicthumb: 'http://i3a507.p.ssafy.io/img/default/thumbnail.jpg'
 		}
 	},
-	mounted(){
-		console.log(this.posts);
+	created(){
+		this.profileImg = storage.profileImage;
 	},
 	methods: {
 		postList(){
@@ -107,17 +116,24 @@ export default {
 			axios
 				.get(API_URL+`api/v2/find/${this.select.abbr}/${this.kword}`)
 				.then(({data})=>{
-					this.posts = data;
 					this.postcnt = data.length;
+					console.log(data);
+					data.forEach(el => {
+						let year = el.publishedTime.slice(0,4);
+						let month = el.publishedTime.slice(5,7);
+						let day = el.publishedTime.slice(8,10);
+						// console.log(year+"년 "+month+"월 "+day+"일")
+						el.publishedTime = year+"년 "+month+"월 "+day+"일"
+						this.posts = data;
+					})
 				});
 			// console.log(this.getFormatDate(this.posts.publishedTime));
 		},
-		// getFormatDate(date){
-		// 	let year = date.getFullYear();
-		// 	let month = (1+date.getMonth());
-		// 	let day = date.getDate();
-		// 	return year+"년 "+month+"월 "+day+"일" 
-		// }
+		postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
 	}
 }
 </script>
@@ -142,25 +158,28 @@ span {
 	padding: 0 92px;
 	margin: 0 auto;
 	min-width: 530px;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.inner_box h2{
+	font-weight: 800;
 }
-
 /* 검색결과 */
 .content_list {
-	width: 65%;
+	width: 768px;
 	padding: 0 15px;
 	margin : 0 auto;
 	min-width: 712px;
 }
 .postcount{
 	font-size: 1.125rem;
-	margin-top: 1rem;
+	margin-top: 3rem;
 }
 .post_list {
 	margin : 0 auto;
-	padding: 4rem 0;
+	padding: 2rem 0 64px 0;
 	border-bottom : 1px solid #ddd;
+	cursor:pointer;
 }
-
 .profile {
 	display : flex;
 	align-items: center;
@@ -176,7 +195,28 @@ span {
 	height: 3rem;
 	border-radius: 1.5rem;
 }
+.post_info h2{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight: 800;
+	font-size: 1.5rem;
+}
 .post_content {
 	margin : 0.5rem 0 2rem 0;
+	line-height: 1.3rem;
+	max-height: 3.9rem;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.post_thumbnail{
+	width:100%;
+	margin-bottom: 1rem;
+	height: 350px;
+	overflow: hidden;
+}
+.post_thumbnail img{
+	width:100%;
+	height: 100%;
+	object-fit: cover;
 }
 </style>
\ No newline at end of file

From 3cb6b405c755213825331314b3df7a232fa65f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 15:31:53 +0900
Subject: [PATCH 38/74] =?UTF-8?q?feature:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Search.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index f4d9902..1cec0e8 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -174,6 +174,14 @@ span {
 	font-size: 1.125rem;
 	margin-top: 3rem;
 }
+.postcount h3{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight:600;
+}
+.postcount strong {
+	font-weight: 800;
+	font-size:2rem;
+}
 .post_list {
 	margin : 0 auto;
 	padding: 2rem 0 64px 0;

From 4eecedb56ca12e68aa6ded97d203b6783a18eee4 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 15:39:07 +0900
Subject: [PATCH 39/74] =?UTF-8?q?Feature:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChildComment.vue | 77 ++++++++++++++++++++++--
 frontend/src/components/Comment.vue      | 35 ++++-------
 frontend/src/components/PostDetail.vue   | 10 ++-
 3 files changed, 93 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
index ba53bb9..c347c2a 100644
--- a/frontend/src/components/ChildComment.vue
+++ b/frontend/src/components/ChildComment.vue
@@ -1,17 +1,82 @@
 <template>
   <div>
-    <p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
+    <!-- <h2>Child Comment 자리</h2> -->
+    <!-- <v-btn 
+      v-if="child.isauthor"
+      @click="onCommentDelete(child)"
+    >삭제</v-btn>
+    <v-btn 
+      v-if="child.isauthor"
+      @click="onClickChildUpdateBtn(child)"
+    >수정</v-btn> -->
+    <!-- <div v-if="ChildUpdateFlag" class="update-box">
+			<v-text-field
+				v-model="CommentUpdateInput"
+				solo
+				dense
+				clearable
+			></v-text-field>
+			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
+		</div> -->
   </div>
 </template>
 
 <script>
+import axios from 'axios'
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+const storage = window.sessionStorage
+
 export default {
-    name: 'ChildComment',
-    data() {
-      return {
-        child: this.$attrs.child
-      }
+  name: 'ChildComment',
+  data() {
+    return {
+      Child: this.$attrs.child,
+      ChildUpdateFlag: false,
     }
+  },
+  mounted() {
+  },
+  methods: {
+    isCommentauthor(one_comment) {
+      if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+        one_comment.isauthor = true
+      } else {
+        one_comment.isauthor = false
+      }
+    },
+    // onCommentDelete(one_comment) {
+    //   if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+    //     axios.delete(API_URL + `api/v3/${one_comment.cid}`)
+    //       .then(() => this.$emit('Click-Delete-Btn'))
+    //   } else {
+    //     alert('비정상적인 접근입니다')
+    //   }
+    // },
+		onChildCommentUpdate(one_comment) {
+			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+				const tmp_comment = {
+					content: this.CommentUpdateInput,
+					cid: one_comment.cid
+				}
+				axios.put(API_URL + `api/v3/`, tmp_comment)
+					.then(() => {
+						alert('수정되었습니다.')
+						this.$emit('Click-Child-Update-Btn')
+						this.CommentUpdateInput = ''
+						this.UpdateFlag = !this.UpdateFlag
+					})
+			} else {
+				alert('비정상적인 접근입니다')
+			}
+    },
+    ChildUpdateBtn(one_comment) {
+			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
+				this.CommentUpdateInput = one_comment.content
+				this.ChildUpdateFlag = !this.ChildUpdateFlag
+			}
+		},
+  }
 }
 </script>
 
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 876e32b..8685861 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -8,7 +8,7 @@
 			>삭제</v-btn>
 			<v-btn 
 				v-if="comment.isauthor"
-				@click="onClickUpdateBtn(comment)"
+				@click="ClickUpdateBtn(comment)"
 			>수정</v-btn>
 		</div>
 		<div v-if="UpdateFlag" class="update-box">
@@ -29,7 +29,7 @@
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
 				<!-- 대댓글 부분 -->
 				<div v-if="ChildFlag">
-					<div v-for="child in comment.child" :key=child.cid class="comment-box">
+					<div v-for="child in comment.child" :key="child.cid" class="comment-box">
 						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
 						<v-btn 
 							v-if="child.isauthor"
@@ -39,11 +39,9 @@
 							v-if="child.isauthor"
 							@click="onClickUpdateBtn(child)"
 						>수정</v-btn>
-						<!-- <div v-for="child in comment.child" :key=child.cid>
-							<ChildComment 
-								:child="child"
-							/>
-						</div> -->
+						<ChildComment 
+							:child="child"
+						/>
 					</div>
 					<div>
 					<v-text-field
@@ -62,7 +60,7 @@
 
 <script>
 import axios from 'axios'
-// import ChildComment from './ChildComment.vue'
+import ChildComment from './ChildComment.vue'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -71,7 +69,7 @@ const storage = window.sessionStorage
 export default {
 	name: 'Comment',
 	components: {
-		// ChildComment,
+		ChildComment,
 	},
 	data() {
 		return {
@@ -86,16 +84,6 @@ export default {
 	},
 	methods: {
 		// *** Parent Comment ***
-		isCommentauthor(Comments) {
-			Comments.forEach(one_comment => {
-				if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
-					one_comment.isauthor = true
-				} else {
-					one_comment.isauthor = false
-				}
-			})
-			return Comments
-		},
 		// 댓글 Delete 메서드
 		onCommentDelete(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
@@ -105,7 +93,7 @@ export default {
 				alert('비정상적인 접근입니다')
 			}
 		},
-		// 댓글 수정(아직 수정 필요함)
+		// 댓글 수정
 		onCommentUpdate(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
 				// console.log(one_comment)
@@ -127,12 +115,14 @@ export default {
 		// Comment에 Child가 있는지 없는지 체크
 		isCommentChild(one_comment_child) {
 			if (one_comment_child.length) {
-				this.isCommentauthor(one_comment_child)
+				// one_comment_child.forEach(element => {
+				// 	this.isCommentauthor(element)
+				// })
 				return true
 			}
 			return false
 		},
-		onClickUpdateBtn(one_comment) {
+		ClickUpdateBtn(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
 				this.CommentUpdateInput = one_comment.content
 				this.UpdateFlag = !this.UpdateFlag
@@ -158,6 +148,7 @@ export default {
 		// 대댓글 보기, 숨기기 Boolean 반전 메서드
 		onClickChildBtn() {
 			this.ChildFlag = !this.ChildFlag
+			this.$nextTick()
 		},
 	}
 }
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index e03fbef..e4fd677 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -17,7 +17,6 @@
           <div class="title-area">
             <h1>글 제목 : {{ post.title }}</h1>
             <h6>작성자: {{ post.author }}</h6>
-            <h1>test: {{ this.post.content }}</h1>
           </div>
 
           <!-- TextEditor 미리보기만(마크다운) -->
@@ -216,6 +215,15 @@ export default {
           } else {
             one_comment.isauthor = false
           }
+          if (one_comment.child.length) {
+            one_comment["child"].forEach(one_child => {
+              if (one_child.author === storage.getItem("login_user") && one_child.uid === Number(storage.getItem("uid"))) {
+                one_child.isauthor = true
+              } else {
+                one_child.isauthor = false
+              }
+            })
+          }
         })
         return Comments
       },

From 987dd4e22401e9b98c1d16920f08f0abdf748a33 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 16:49:05 +0900
Subject: [PATCH 40/74] =?UTF-8?q?Feature:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EA=B5=AC=ED=98=84=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 8685861..9656bd8 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -5,11 +5,11 @@
 			<v-btn 
 				v-if="comment.isauthor"
 				@click="onCommentDelete(comment)"
-			>삭제</v-btn>
+			>댓글 삭제</v-btn>
 			<v-btn 
 				v-if="comment.isauthor"
 				@click="ClickUpdateBtn(comment)"
-			>수정</v-btn>
+			>댓글 수정</v-btn>
 		</div>
 		<div v-if="UpdateFlag" class="update-box">
 			<v-text-field
@@ -34,11 +34,11 @@
 						<v-btn 
 							v-if="child.isauthor"
 							@click="onCommentDelete(child)"
-						>삭제</v-btn>
+						>대댓글 삭제</v-btn>
 						<v-btn 
 							v-if="child.isauthor"
-							@click="onClickUpdateBtn(child)"
-						>수정</v-btn>
+							@click="ClickUpdateBtn(child)"
+						>대댓글 수정</v-btn>
 						<ChildComment 
 							:child="child"
 						/>

From 00139d53cbf315bdc760224f473c51bd8691c4fd Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 16:49:27 +0900
Subject: [PATCH 41/74] =?UTF-8?q?Style:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=88=A8=EA=B8=B0=EA=B8=B0=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue | 35 ++++++++++++++++-------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 9656bd8..ad203a3 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -17,12 +17,14 @@
 				solo
 				dense
 				clearable
+				required
 			></v-text-field>
 			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
 		</div>
 		<div class="comment-box">
-			<v-btn @click="onClickChildBtn" class="mx-2" fab x-small dark color="indigo">
-				<v-icon dark>mdi-plus</v-icon>
+			<v-btn @click="ClickChildBtn" class="mx-2" fab x-small dark color="indigo">
+				<v-icon v-if="!ChildFlag" dark>mdi-plus</v-icon>
+				<v-icon v-if="ChildFlag">mdi-minus</v-icon>
 			</v-btn>
 			<div class="my-auto">
 				<p class="" v-if="!isCommentChild(comment.child)">대댓글이 없습니다 ㅠㅠ</p>
@@ -39,18 +41,17 @@
 							v-if="child.isauthor"
 							@click="ClickUpdateBtn(child)"
 						>대댓글 수정</v-btn>
-						<ChildComment 
+						<!-- <ChildComment 
 							:child="child"
-						/>
+						/> -->
 					</div>
 					<div>
-					<v-text-field
-						v-model="ChildCommentInput"
-						solo
-						dense
-						clearable
-					></v-text-field>
-					<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
+						<v-text-field
+							v-model="ChildUpdateInput"
+							clearable
+							required
+						></v-text-field>
+						<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
 					</div>
 				</div>
 			</div>
@@ -60,7 +61,7 @@
 
 <script>
 import axios from 'axios'
-import ChildComment from './ChildComment.vue'
+// import ChildComment from './ChildComment.vue'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -69,15 +70,17 @@ const storage = window.sessionStorage
 export default {
 	name: 'Comment',
 	components: {
-		ChildComment,
+		// ChildComment,
 	},
 	data() {
 		return {
 			comment: this.$attrs.comment,
-			ChildFlag: false,
-			ChildCommentInput: '',
 			CommentUpdateInput: '',
 			UpdateFlag: false,
+			ChildFlag: false,
+			ChildCommentInput: '',
+			ChildUpdateInput: '',
+			ChildUpdateFlag: false,
 		}
 	},
 	created() {
@@ -146,7 +149,7 @@ export default {
 			}
 		},
 		// 대댓글 보기, 숨기기 Boolean 반전 메서드
-		onClickChildBtn() {
+		ClickChildBtn() {
 			this.ChildFlag = !this.ChildFlag
 			this.$nextTick()
 		},

From 37a7184fa6339eb4f90fb7100ea221f5edf4b908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 17:24:26 +0900
Subject: [PATCH 42/74] =?UTF-8?q?feature:=20=ED=83=9C=EA=B7=B8=20=ED=81=B4?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json        | 294 +++++++++++++++++++++++++++++-
 frontend/package.json             |   1 +
 frontend/src/components/Feed.vue  |   2 +-
 frontend/src/components/Forum.vue | 123 +++++++++----
 4 files changed, 382 insertions(+), 38 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b737807..1d95ada 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3360,8 +3360,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -3959,6 +3958,278 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d3": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+      "requires": {
+        "d3-array": "1",
+        "d3-axis": "1",
+        "d3-brush": "1",
+        "d3-chord": "1",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-contour": "1",
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-dsv": "1",
+        "d3-ease": "1",
+        "d3-fetch": "1",
+        "d3-force": "1",
+        "d3-format": "1",
+        "d3-geo": "1",
+        "d3-hierarchy": "1",
+        "d3-interpolate": "1",
+        "d3-path": "1",
+        "d3-polygon": "1",
+        "d3-quadtree": "1",
+        "d3-random": "1",
+        "d3-scale": "2",
+        "d3-scale-chromatic": "1",
+        "d3-selection": "1",
+        "d3-shape": "1",
+        "d3-time": "1",
+        "d3-time-format": "2",
+        "d3-timer": "1",
+        "d3-transition": "1",
+        "d3-voronoi": "1",
+        "d3-zoom": "1"
+      }
+    },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+    },
+    "d3-brush": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "d3-chord": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+      "requires": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==",
+      "requires": {
+        "d3-dispatch": "^1.0.3"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "requires": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "d3-fetch": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+      "requires": {
+        "d3-dsv": "1"
+      }
+    },
+    "d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "requires": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "d3-format": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
+      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+    },
+    "d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+    },
+    "d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
+    },
+    "d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+      "requires": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6000,7 +6271,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -9316,6 +9586,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rxjs": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.0.tgz",
@@ -9343,8 +9618,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
       "version": "1.26.10",
@@ -11006,6 +11280,16 @@
         }
       }
     },
+    "vue-d3-cloud": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/vue-d3-cloud/-/vue-d3-cloud-0.2.0.tgz",
+      "integrity": "sha512-ALLN5RXXfb31J9w0CySZOcg8B57fkvHWFVg6ZlHXe6O3xKq+qsUNZkMYIe4LpsAy5BRgz+bG7NtAjQFydAhIfQ==",
+      "requires": {
+        "d3": "^5.7.0",
+        "d3-cloud": "^1.2.5",
+        "vue": "^2.5.17"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1181a07..e025f0b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "tui-editor": "^1.4.10",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
+    "vue-d3-cloud": "^0.2.0",
     "vue-google-login": "^2.0.5",
     "vue-position-sticky": "^0.2.1",
     "vue-roller": "^1.12.3",
diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 7b6be50..e228004 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -135,7 +135,7 @@ export default {
 }
 .top_desc {
   padding:0 0;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 1;
   letter-spacing: -0.6px;
   font-family: Noto Sans Light, sans-serif;
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 14049b0..3691aaa 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -1,69 +1,128 @@
 <template>
   <div>
     <Navbar></Navbar>
-		<template>
-			<v-card flat style="margin-top:130px">
-				<v-tabs
-					background-color="transparent"
-					centered
-					color="black"
-					slider-color="#6987f7"
-					slider-size="3"
-				>
-					<v-tab @click="postread(item)" v-for="item in items" :key="item">
-						{{ item }}
-					</v-tab>
-				</v-tabs>
-			</v-card>
-		</template>
-		<div class="inner">
-			<v-tabs-items v-model="tab">
-				<v-tab-item v-for="(item) in items" :key="item">
-					<!-- <v-row v-if="tags.length">
-						
-					</v-row> -->
-				</v-tab-item>
-			</v-tabs-items>
+		<div class="doContent">
+			<div class="feature_feed">
+				<div class="inner_feature">
+					<h2 id="do_top do_feed">Forum</h2>
+					<p class="top_desc"><span style="font-style:'Inter', sans-serif; font-weight:800">DO!</span>의 모든 태그들을 만나보세요</p>
+				</div>
+			</div>
+			<div id="app" class="innner">
+				<cloud 
+					:data="words" 
+					:fontSizeMapper="fontSizeMapper"
+					:colors="colors"
+				/>
+			</div>
 		</div>
   </div>
 </template>
 
 <script>
 import Navbar from '../components/Navbar.vue'
-// import axios from 'axios'
+import axios from 'axios'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
+import Cloud from 'vue-d3-cloud'
 
 AOS.init();
 
-// const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
 // const storage = window.sessionStorage
 
 export default {
 	name: 'Forum',
 	components: {
-    Navbar,
+		Navbar,
+		Cloud
+	},
+	props: {
+		onWordClick: {
+			type: Function,
+			default: (word) => { 
+					window.alert(`You clicked 1 ${word.text}`) 
+			},
+		},
 	},
 	data() {
 		return {
 			tab: null,
       items: [
         '인기순', '이름순',
-      ],
+			],
+
+			words: [],
+			colors:["ffbe0b","628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6","fb5607","ff006e","8338ec","3a86ff","11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+			// ["11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+			// ["11D9C3","23C7CF","35B6DB","47A4E6","5993F2"
+			// ,"628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6"],
+			fontSizeMapper: word => Math.log2(word.value) * 3.5,
+			spiral: "archimedean",
 		}
+	},
+	created(){
+		var vm = this;
+      axios.get(API_URL+"api/v4")
+      .then(function(response) {
+        console.log(response);
+        vm.words = response.data;
+      })
+      .catch(function(err) {
+        console.log(err);
+      })
+	},
+	computed: {
+	
 	}
 }
 </script>
 
 <style>
-.inner {
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.inner_feature h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+}
+.top_desc {
+  padding:0 0;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: -0.6px;
+  font-family: Noto Sans Light, sans-serif;
+}
+.doContent {
+  max-width: 1150px;
+  min-width: 1100px; 
+  margin: 0 auto 0;
+  padding: 0 20px;
+}
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.feature_main {
+  width: 100%;
+  height: 133px;
+  padding: 151px 0 0;
+}
+.innner {
+	padding-top:20px;
   min-width: 1100px;
   max-width: 1150px;
-	padding: 130px 20px 0px 20px;
 	margin: 0 auto;
 }
-/* .v-tab {
-	margin: 0 auto;
-} */
+.wordCloud{
+	text-align: center;
+}
+.wordCloud text{
+  font-family: 'Inter','NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif !important;
+}
 </style>
\ No newline at end of file

From e347bb1e86da840969ca0e8139b7f0989b5b888f Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 17:34:15 +0900
Subject: [PATCH 43/74] =?UTF-8?q?Modify:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=B0=B0=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue    | 23 ++++++++++++--------
 frontend/src/components/PostDetail.vue | 29 +++++++++++++++-----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index ad203a3..d0f9e9d 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -31,6 +31,14 @@
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
 				<!-- 대댓글 부분 -->
 				<div v-if="ChildFlag">
+					<div class="comment-box">
+						<v-text-field
+							v-model="ChildCommentInput"
+							clearable
+							solo
+						></v-text-field>
+						<v-btn class="ml-2" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
+					</div>
 					<div v-for="child in comment.child" :key="child.cid" class="comment-box">
 						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
 						<v-btn 
@@ -39,20 +47,12 @@
 						>대댓글 삭제</v-btn>
 						<v-btn 
 							v-if="child.isauthor"
-							@click="ClickUpdateBtn(child)"
+							@click="ClickChildUpdateBtn(child)"
 						>대댓글 수정</v-btn>
 						<!-- <ChildComment 
 							:child="child"
 						/> -->
 					</div>
-					<div>
-						<v-text-field
-							v-model="ChildUpdateInput"
-							clearable
-							required
-						></v-text-field>
-						<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
-					</div>
 				</div>
 			</div>
 		</div>
@@ -153,6 +153,11 @@ export default {
 			this.ChildFlag = !this.ChildFlag
 			this.$nextTick()
 		},
+		// 대댓글 수정 버튼
+		ClickChildUpdateBtn() {
+			this.ChildUpdateFlag = !this.ChildUpdateFlag
+		}
+
 	}
 }
 </script>
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index e4fd677..fa4c4bf 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -38,8 +38,9 @@
           <v-textarea
             clearable
             label="댓글 작성"
-            placeholder="댓글을 작성하세요"
+            placeholder="댓글 내용을 작성하세요"
             v-model="CommentInput"
+            solo
           ></v-textarea>
           <v-btn
             @click="onCommentCreate"
@@ -180,18 +181,22 @@ export default {
       // 댓글 Create 메서드
       onCommentCreate() {
         if (storage.getItem("login_user")) {
-          const tmp_comment = {
-            author: storage.getItem("login_user"),
-            content: this.CommentInput,
-            uid: storage.getItem("uid"),
-            pid: storage.getItem("pid")
+          if (this.CommentInput.trim()) {
+            const tmp_comment = {
+              author: storage.getItem("login_user"),
+              content: this.CommentInput,
+              uid: storage.getItem("uid"),
+              pid: storage.getItem("pid")
+            }
+            // 서버에 댓글 작성 요청 보냄
+            axios.post(API_URL + 'api/v3/', tmp_comment)
+              .then(() => {
+                // 댓글 작성 완료 후 새로 댓글 받아옴
+                this.CommentRead()
+              })
+          } else {
+            alert('빈 댓글은 작성할 수 없습니다.')
           }
-          // 서버에 댓글 작성 요청 보냄
-          axios.post(API_URL + 'api/v3/', tmp_comment)
-            .then(() => {
-              // 댓글 작성 완료 후 새로 댓글 받아옴
-              this.CommentRead()
-            })
         } else {
           alert('로그인한 유저만 댓글을 달 수 있습니다.')
         }

From 3d1425732555cf2ffd7e3ea22f1fa977e425868b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 17:58:16 +0900
Subject: [PATCH 44/74] =?UTF-8?q?feature=20:=20=EA=B2=8C=EC=8B=9C=EA=B8=80?=
 =?UTF-8?q?=20&=20=EC=9E=84=EC=8B=9C=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Myblog.vue      | 14 +++++--
 frontend/src/components/PostDetail.vue  |  2 +-
 frontend/src/components/TagInputBox.vue | 35 +++++++++++++++--
 frontend/src/components/TextEditor.vue  | 51 +++++++++++++++++--------
 4 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
index 75fa37a..78da467 100644
--- a/frontend/src/components/Myblog.vue
+++ b/frontend/src/components/Myblog.vue
@@ -150,6 +150,7 @@ export default {
   methods: {
     postread(item){
       var uid = sessionStorage.uid;
+      this.posts=[]
       if (item === "내글") {
         console.log("a")
         axios.get(API_URL+'api/v2/u/'+uid)
@@ -195,10 +196,15 @@ export default {
     },
     postdetail(one_post) {
       storage.removeItem("pid")
-      storage.setItem("pid", one_post.pid)
-      storage.setItem("title", one_post.title)
-      storage.setItem("content", one_post.content)
-      this.$router.push({name: 'postdetail', params: {data: one_post}})
+      console.log(one_post)
+      console.log("one_post pid : "+one_post.pid)
+      console.log("one_post uid : "+one_post.uid)
+      // 임시 저장
+      if(one_post.isTemp){
+        this.$router.push({name: 'texteditor', params: {data: one_post}})
+      }else if(!one_post.isTemp){
+        this.$router.push({name: 'postdetail', params: {data: one_post}})
+      }
     },
   }
 }
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index d04c667..29c803b 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -21,7 +21,7 @@
 
           <!-- TextEditor 미리보기만(마크다운) -->
           <div class="col-lg-12">
-            <Viewer :initialValue="this.post.content"/>
+            <Viewer :initialValue="this.content"/>
           </div>
           <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
           <div></div>
diff --git a/frontend/src/components/TagInputBox.vue b/frontend/src/components/TagInputBox.vue
index 9379112..64951c2 100644
--- a/frontend/src/components/TagInputBox.vue
+++ b/frontend/src/components/TagInputBox.vue
@@ -87,6 +87,8 @@
 </template>
 
 <script>
+import axios from 'axios'
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 
 export default {
 	name:'TagInputBox',
@@ -103,14 +105,41 @@ export default {
 			],
 			nonce: 0,
 			menu: false,
-			model: [
-			],
+			model: [],
 			x: 0,
 			search: null,
 			y: 0,
 		}
 	},
+	created() {
+		// tag
+		console.log(this.$attrs)
+			axios.post(API_URL+'api/v2/p/',
+				{
+					"pid" : this.$attrs.pid,
+					"uid" :	this.$attrs.uid
+				})
+				.then(response => {
+					console.log("A")
+					console.log(response.data)
+					// console.log("tag 데이터 URL: "+response.data.tag);
+					// "안녕" , "taglist"
+					response.data.tag.forEach(el => {
+						this.model.push(
+						{"color": "green",
+							"text" : el}
+					);
+					})
+					
+					// console.log(this.taglist)
+				})
+				.catch((err) => {
+					console.log("tag 데이터 불러오기 실패")
+					console.log(err);
+				})
+			// this.tag =
 
+	},
 	watch: {
 		// 태그 글자수 20자 미만으로 제한 두기
 		// 태그 빈칸은 안받기, 빈칸 넣어두면 없애기
@@ -158,7 +187,7 @@ export default {
 			this.$emit('submit-post', this.model)
 		},
 		onSaveButton() {
-			this.$emit('save-post')
+			this.$emit('save-post', this.model)
 		}
 	},
 }
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index fa7a4f0..97c8105 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -24,6 +24,8 @@
 		</div>
 		<h3>태그 입력칸</h3>        
 		<TagInputBox 
+			:pid ="TagInputBoxPID"
+			:uid ="TagInputBoxUID"
 			@submit-post="createAction"
 			@save-post="saveAction"
 		/>
@@ -38,8 +40,8 @@ import axios from 'axios'
 import TagInputBox from './TagInputBox.vue'
 
 // const API_URL = 'http://localhost:8081/'
-const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 const storage = window.sessionStorage
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const FLICKR_URL = 'https://up.flickr.com/services/upload/'
 
 export default {
@@ -54,45 +56,65 @@ export default {
 			title: '',
 			thumbImage: '',
 			uid: '',
-			tempText: ''
+			tempText: '',
+			taglist: [],
+			TagInputBoxPID : '',
+			TagInputBoxUID : ''
 		}
 	},
 	created(){
-		this.title = storage.getItem("title")
-		this.tempText = storage.getItem("content")
-	},
-	mounted() {
-		storage.removeItem("thumbImage")
+		console.log("A")
+		console.log(this.$route.params.data.title)
+		if(this.$route.params.data.title != null){
+			this.title = this.$route.params.data.title
+			this.tempText = this.$route.params.data.content
+			if(this.$route.params.data.thumbnail != null){
+				this.thumbImage = this.$route.params.data.thumbnail
+			}
+		}else{
+			console.log("HIHI")
+		}
+		
+		if(this.$route.params.data.pid != null){
+			this.TagInputBoxPID = this.$route.params.data.pid
+		}
+		if(this.$route.params.data.uid != null){
+			this.TagInputBoxPID = this.$route.params.data.uid
+		}
 	},
 	methods: {
 
 		createAction(tagData) {
 			// 태그 데이터 정리해서 보내기
 			let tagList = new Array()
+			
 			tagData.forEach(tag => {
 				tagList.push(tag["text"])
 			})
-			// console.log(tagList)
 			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
 			this.editorText = textdata
+
 			axios.post(API_URL+'api/v2/', {
 				author: storage.getItem("login_user"),
 				title: this.title,
 				content: this.editorText,
 				tag: tagList,
+				uid: `${storage.getItem("uid")}`,
 				thumbnail: storage.getItem("thumbImage")
 			})
 			.then(() => {
 				storage.removeItem("thumbImage")
-				// 임시 저장 storage 삭제
-				storage.removeItem("title")
-				storage.removeItem("content")
 				this.$router.push('/')
 			})
 			.catch(err => console.log(err))
 		},
-		saveAction() {
+		saveAction(tagData) {
 
+			//	 태그 데이터 정리해서 보내기
+			let tagList = new Array()
+			tagData.forEach(tag => {
+				tagList.push(tag["text"])
+			})
 			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
 			this.editorText = textdata
 			axios.put(API_URL+"api/v2/temp",{
@@ -101,12 +123,11 @@ export default {
 				author : `${storage.getItem("login_user")}`,
 				title: this.title,
 				content: this.editorText,
+				tag: tagList,
+				thumbnail: storage.getItem("thumbImage")
 			})
 			.then(() => {
 				storage.removeItem("thumbImage")
-						// 임시 저장 storage 삭제
-				storage.removeItem("title")
-				storage.removeItem("content")
 				this.$router.push('/')
 			})
 			.catch(err => console.log(err))

From 930239a2b5664ec1605bb8f158d41c091435016a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 19:35:13 +0900
Subject: [PATCH 45/74] =?UTF-8?q?feature=20:=20=EC=BD=98=EC=86=94=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Myblog.vue      |  7 -----
 frontend/src/components/PostDetail.vue  |  7 +----
 frontend/src/components/Setting.vue     | 13 ---------
 frontend/src/components/TagInputBox.vue | 37 +++++++++----------------
 frontend/src/components/TextEditor.vue  |  6 ----
 5 files changed, 14 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
index 78da467..a9ee156 100644
--- a/frontend/src/components/Myblog.vue
+++ b/frontend/src/components/Myblog.vue
@@ -139,7 +139,6 @@ export default {
 		axios
 		.get(API_URL+'api/v1/'+uid)
 		.then(({data})=>{
-      // console.log(data);
       this.introduce = data.introduce
       this.github = 'https://github.com/'+data.github
 			this.facebook = 'https://facebook.com/'+data.facebook
@@ -152,10 +151,8 @@ export default {
       var uid = sessionStorage.uid;
       this.posts=[]
       if (item === "내글") {
-        console.log("a")
         axios.get(API_URL+'api/v2/u/'+uid)
           .then(({data})=>{
-            console.log(data)
             data.forEach(el => {
             el.tmp = el.content
             if (el.content.length > 120) {
@@ -190,15 +187,11 @@ export default {
               this.posts = data
 
             });
-            console.log(this.posts)
           }).catch(err => console.log(err))
       }
     },
     postdetail(one_post) {
       storage.removeItem("pid")
-      console.log(one_post)
-      console.log("one_post pid : "+one_post.pid)
-      console.log("one_post uid : "+one_post.uid)
       // 임시 저장
       if(one_post.isTemp){
         this.$router.push({name: 'texteditor', params: {data: one_post}})
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index d9db807..0470d14 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -105,7 +105,6 @@ export default {
         }
     },
     created(){
-      console.log(this.post.content)
       axios.post(API_URL + 'api/v2/p/',{
         // headers :{
         //   'Content-Type': 'application/json',
@@ -115,13 +114,10 @@ export default {
         pid : storage.getItem("pid")
       })
         .then(res => {
-          // console.log(res)
-          // this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
-          console.log(this.post.content)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
@@ -157,7 +153,6 @@ export default {
           .then(res => {
             console.log('fetchData')
             this.post = res.data
-            console.log(this.post)
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
             this.isPostauthor(this.isPostauthor)
@@ -261,7 +256,7 @@ export default {
               status : this.FeedFlag,
             })
             .then(function (response){
-						console.log(response);
+              console.log(response);
             })
             .catch(function(error){
               console.log(error);
diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index 3afb420..c5b1d26 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -478,19 +478,6 @@ export default {
 		axios
 		.get(API_URL+'api/v1/'+uid)
 		.then(({data})=>{
-			console.log("들어오는 Data 확인 : "+data.uid);
-			console.log("들어오는 Data 확인 : "+data.nickname);
-			console.log("들어오는 Data 확인 : "+data.email);
-			console.log("들어오는 Data 확인 : "+data.password);
-			console.log("들어오는 Data 확인 : "+data.profileImage);
-			console.log("들어오는 Data 확인 : "+data.qrImage);
-			console.log("들어오는 Data 확인 : "+data.admin);
-			console.log("들어오는 Data 확인 : "+data.facebook);
-			console.log("들어오는 Data 확인 : "+data.instagram);
-			console.log("들어오는 Data 확인 : "+data.github);
-			console.log("들어오는 Data 확인 : "+data.introduce);
-			console.log("들어오는 Data 확인 : "+data.updateType);
-			console.log("=======================================");
 			this.userinfo.uid = data.uid;
 			this.userinfo.profileImage = data.profileImage;
 			this.userinfo.nickname = data.nickname;
diff --git a/frontend/src/components/TagInputBox.vue b/frontend/src/components/TagInputBox.vue
index 64951c2..f446e04 100644
--- a/frontend/src/components/TagInputBox.vue
+++ b/frontend/src/components/TagInputBox.vue
@@ -113,31 +113,20 @@ export default {
 	},
 	created() {
 		// tag
-		console.log(this.$attrs)
-			axios.post(API_URL+'api/v2/p/',
-				{
-					"pid" : this.$attrs.pid,
-					"uid" :	this.$attrs.uid
-				})
-				.then(response => {
-					console.log("A")
-					console.log(response.data)
-					// console.log("tag 데이터 URL: "+response.data.tag);
-					// "안녕" , "taglist"
-					response.data.tag.forEach(el => {
-						this.model.push(
-						{"color": "green",
-							"text" : el}
-					);
-					})
-					
-					// console.log(this.taglist)
-				})
-				.catch((err) => {
-					console.log("tag 데이터 불러오기 실패")
-					console.log(err);
+		axios.post(API_URL+'api/v2/p/',
+			{
+				"pid" : this.$attrs.pid,
+				"uid" :	this.$attrs.uid
+			})
+			.then(response => {
+				response.data.tag.forEach(el => {
+					this.model.push(
+					{"color": "green",
+						"text" : el}
+				);
 				})
-			// this.tag =
+				
+			})
 
 	},
 	watch: {
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 97c8105..609e413 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -63,16 +63,12 @@ export default {
 		}
 	},
 	created(){
-		console.log("A")
-		console.log(this.$route.params.data.title)
 		if(this.$route.params.data.title != null){
 			this.title = this.$route.params.data.title
 			this.tempText = this.$route.params.data.content
 			if(this.$route.params.data.thumbnail != null){
 				this.thumbImage = this.$route.params.data.thumbnail
 			}
-		}else{
-			console.log("HIHI")
 		}
 		
 		if(this.$route.params.data.pid != null){
@@ -158,10 +154,8 @@ export default {
 				}
 				)
 				.then(response => {
-					console.log("썸네일 업로드 데이터 URL: "+response.data);
 					this.thumbImage = response.data;
 					storage.setItem("thumbImage", response.data)
-					console.log("썸네일 스토리지 저장 완료")
 				})
 				.catch((err) => {
 					console.log("프로필 이미지 업로드 실패")

From 0b54f16a46dd0a84340b29ec1aaa233d0093eb3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Thu, 20 Aug 2020 19:41:07 +0900
Subject: [PATCH 46/74] =?UTF-8?q?feature:=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json         | 437 ++++++++++++++++++++++-------
 frontend/package.json              |   7 +-
 frontend/src/components/Navbar.vue |  61 ++--
 frontend/src/components/Notice.vue |  74 +++++
 frontend/src/router/index.js       |   6 +
 5 files changed, 459 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/components/Notice.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1d95ada..e19abef 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1974,6 +1974,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abab": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.4.tgz",
+      "integrity": "sha512-Eu9ELJWCz/c1e9gTiCY+FceWxcqzjYEbqMgtndnuSqZSUCOL73TWNK2mHfIj4Cw2E/ongOp+JISVNCmovt2KYQ=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1990,6 +1995,22 @@
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
+    "acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w=="
+        }
+      }
+    },
     "acorn-jsx": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
@@ -1999,8 +2020,7 @@
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
     "address": {
       "version": "1.1.2",
@@ -2022,7 +2042,6 @@
       "version": "6.12.3",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
       "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2186,7 +2205,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -2240,8 +2258,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -2279,8 +2296,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -2306,14 +2322,12 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
-      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
-      "dev": true
+      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
     "axios": {
       "version": "0.19.2",
@@ -2459,7 +2473,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -2631,6 +2644,11 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -2988,8 +3006,7 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
     "chalk": {
       "version": "2.4.2",
@@ -3352,7 +3369,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -3645,8 +3661,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -3952,6 +3967,26 @@
         }
       }
     },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+        }
+      }
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -4234,11 +4269,20 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
     },
+    "data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "requires": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      }
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -4260,6 +4304,11 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "decimal.js": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.0.tgz",
+      "integrity": "sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -4283,8 +4332,7 @@
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
     "deepmerge": {
       "version": "1.5.2",
@@ -4513,8 +4561,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
       "version": "1.1.2",
@@ -4651,6 +4698,21 @@
       "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
+    "domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "requires": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
+        }
+      }
+    },
     "domhandler": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
@@ -4719,7 +4781,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -4896,6 +4957,26 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
+    "escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
     "eslint": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
@@ -5070,8 +5151,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.3.1",
@@ -5102,14 +5182,12 @@
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "etag": {
       "version": "1.8.1",
@@ -5310,8 +5388,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -5413,14 +5490,12 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5462,14 +5537,12 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -5657,14 +5730,12 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -5790,7 +5861,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -5871,14 +5941,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
       "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
       "requires": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -6069,6 +6137,14 @@
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
       "dev": true
     },
+    "html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "requires": {
+        "whatwg-encoding": "^1.0.5"
+      }
+    },
     "html-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
@@ -6248,7 +6324,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -6533,8 +6608,7 @@
     "ip-regex": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
-      "dev": true
+      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
     },
     "ipaddr.js": {
       "version": "1.9.1",
@@ -6773,6 +6847,11 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-potential-custom-element-name": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz",
+      "integrity": "sha1-DFLlS8yjkbssSUsh6GJtczbG45c="
+    },
     "is-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
@@ -6815,8 +6894,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6851,8 +6929,12 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "jQuery": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/jQuery/-/jQuery-1.7.4.tgz",
+      "integrity": "sha1-8y3FyFpwRO6GS0RDue5F+UeLoTc="
     },
     "javascript-stringify": {
       "version": "2.0.1",
@@ -6926,8 +7008,62 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "jsdom": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.4.0.tgz",
+      "integrity": "sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==",
+      "requires": {
+        "abab": "^2.0.3",
+        "acorn": "^7.1.1",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.2.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.0",
+        "domexception": "^2.0.1",
+        "escodegen": "^1.14.1",
+        "html-encoding-sniffer": "^2.0.1",
+        "is-potential-custom-element-name": "^1.0.0",
+        "nwsapi": "^2.2.0",
+        "parse5": "5.1.1",
+        "request": "^2.88.2",
+        "request-promise-native": "^1.0.8",
+        "saxes": "^5.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^3.0.1",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0",
+        "ws": "^7.2.3",
+        "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w=="
+        },
+        "tough-cookie": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
+          "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
+          "requires": {
+            "ip-regex": "^2.1.0",
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
+        "ws": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
+          "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
+        }
+      }
     },
     "jsesc": {
       "version": "2.5.2",
@@ -6944,14 +7080,12 @@
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6962,8 +7096,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
       "version": "3.3.3",
@@ -6993,7 +7126,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
       "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -7051,7 +7183,6 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -7160,11 +7291,15 @@
         "path-exists": "^3.0.0"
       }
     },
+    "location": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/location/-/location-0.0.1.tgz",
+      "integrity": "sha1-+gcdITZd12Zh4ica3oyhMU3G9YA="
+    },
     "lodash": {
       "version": "4.17.19",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
-      "dev": true
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -7195,6 +7330,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -7422,14 +7562,12 @@
     "mime-db": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
     },
     "mime-types": {
       "version": "2.1.27",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
       "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
       "requires": {
         "mime-db": "1.44.0"
       }
@@ -7674,6 +7812,11 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "navigator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/navigator/-/navigator-1.0.1.tgz",
+      "integrity": "sha1-umnBkpo5qbUOt+n1wRF4eJyveQ8="
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -7845,11 +7988,15 @@
       "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
       "dev": true
     },
+    "nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
+    },
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -8035,7 +8182,6 @@
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
       "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dev": true,
       "requires": {
         "deep-is": "~0.1.3",
         "fast-levenshtein": "~2.0.6",
@@ -8211,8 +8357,7 @@
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
-      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
-      "dev": true
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
     "parse5-htmlparser2-tree-adapter": {
       "version": "5.1.1",
@@ -8316,8 +8461,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.2.2",
@@ -8994,8 +9138,7 @@
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
     "prepend-http": {
       "version": "1.0.4",
@@ -9069,8 +9212,7 @@
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-      "dev": true
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -9130,8 +9272,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.5.1",
@@ -9142,8 +9283,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "query-string": {
       "version": "4.3.4",
@@ -9441,7 +9581,6 @@
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -9465,6 +9604,24 @@
         "uuid": "^3.3.2"
       }
     },
+    "request-promise-core": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
+      "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
+      "requires": {
+        "lodash": "^4.17.19"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
+      "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
+      "requires": {
+        "request-promise-core": "1.1.4",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -9603,8 +9760,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9656,6 +9812,14 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "requires": {
+        "xmlchars": "^2.2.0"
+      }
+    },
     "schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -10276,7 +10440,6 @@
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
       "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -10337,6 +10500,11 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -10522,6 +10690,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -10785,12 +10958,19 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
       "requires": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
       }
     },
+    "tr46": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz",
+      "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==",
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -10877,7 +11057,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -10885,14 +11064,12 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -11092,7 +11269,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -11198,8 +11374,7 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "v8-compile-cache": {
       "version": "2.1.1",
@@ -11238,7 +11413,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -11444,6 +11618,22 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
       "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
     },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "requires": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "requires": {
+        "xml-name-validator": "^3.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
@@ -11589,6 +11779,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
+    },
     "webpack": {
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
@@ -12046,6 +12241,36 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "whatwg-url": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.1.0.tgz",
+      "integrity": "sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==",
+      "requires": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^2.0.2",
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
+        }
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -12064,8 +12289,7 @@
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
     "worker-farm": {
       "version": "1.7.0",
@@ -12138,6 +12362,21 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e025f0b..53ef3d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,11 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
+    "jQuery": "^1.7.4",
     "jquery": "^3.5.1",
+    "jsdom": "^16.4.0",
+    "location": "0.0.1",
+    "navigator": "^1.0.1",
     "tui-editor": "^1.4.10",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
@@ -29,7 +33,8 @@
     "vue-router": "^3.3.4",
     "vuelidate": "^0.7.5",
     "vuetify": "^2.2.11",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "xmlhttprequest": "^1.8.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index c581ed9..7faf249 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -19,11 +19,8 @@
 
       <div class="notice">
         <v-icon small>fas fa-volume-down</v-icon>
-        <div id="app" class="output">
-          <p>
-            <a @click="postdetail(text)" class="text">{{ text }}</a>
-           
-          </p>
+        <div class="banner" @click="gotonotice">
+          {{list[0].title}}
         </div>
 			</div>
 			<v-spacer></v-spacer>
@@ -56,7 +53,7 @@
             </div>
             <div class="list_menu">
               <div class="myblog">
-                <router-link :to="{path: `/doblog/${this.nickname}`}">내 블로그</router-link>
+                <router-link :to="{path: `/doblog/${this.uid}`}">내 블로그</router-link>
               </div>
               <div class="setting">
                 <router-link to="/setting">설정</router-link>
@@ -80,7 +77,7 @@
 <script>
 const storage = window.sessionStorage
 import GoogleLogin from 'vue-google-login';
-import axios from 'axios'
+import axios from 'axios';
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -92,8 +89,8 @@ export default {
 
   },
   data() {
-    
     return {
+      uid: storage.getItem("uid"),
       nickname: storage.getItem("login_user"),
       userEmail: "사용자메일@가져오기.com",
       profile: false,
@@ -101,12 +98,10 @@ export default {
       google_login: storage.getItem("google_login"),
       profileImage: storage.getItem("profileImage"),
 
-      list: [],
+      list: '',
       index: 0,
       text: '',
       speed: 2000
-
-
     }
   },
   computed: {
@@ -135,17 +130,6 @@ export default {
     profileshow() {
       this.profile = !this.profile
     },
-    getTextFromList() {
-      var vm = this;
-      
-      vm.text = vm.list[vm.index].title;
-      // vm.textURL = vm.list[vm.index].url;
-      vm.index += 1;
-      
-      if (vm.index >= vm.list.length) {
-        vm.index = 0;
-      }
-    },
     postdetail(text) {
       for(var i =0; i<this.list.length; i++){
         if( text === this.list[i].title){
@@ -157,17 +141,20 @@ export default {
         }
       }
     },
+    gotonotice(){
+      this.$router.push({name:'doblog',params:{data:'1'}})
+    }
   },
   created() {
     this.loginChecker()
+    //공지사항 받아옴
     axios.get(API_URL + 'api/v2/notice')
         .then(res => {
           // this.post = res.data
           // pid를 활용하여 게시글로 이동
-          for(var i=0; i<res.data.length; i++){
-            this.list[i] = res.data[i];
-          }
+          this.list = res.data
     })
+    sessionStorage.setItem("noticelist",this.list)
   },
   mounted(){
     // this.text = this.list[this.index];
@@ -233,8 +220,30 @@ div > .newpost > a >button:hover {
 	text-decoration: none;
 }
 .notice {
+  display: flex;
   margin : 0px 0px 0px 54px ;
-	padding: 0px 0px 0px 0px;
+	/* padding: 0px 0px 0px 0px; */
+
+}
+.banner {
+  width: 100%;
+  height: 1.5rem;
+  overflow: hidden;
+  margin:0 auto; 
+  padding-left:8px; 
+}
+.rolling {
+  position: relative;
+  width: 100%;
+  height: auto;
+  margin: 0px; 
+  padding:0; 
+  list-style: none; 
+}
+.rolling li {
+  margin:0; 
+  padding:0;
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
 }
 .notice::before {
   content:'|';
diff --git a/frontend/src/components/Notice.vue b/frontend/src/components/Notice.vue
new file mode 100644
index 0000000..af143ad
--- /dev/null
+++ b/frontend/src/components/Notice.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+    <Navbar></Navbar>
+    <div class="doContent">
+      <div class="feature_feed">
+        <div class="inner_feature">
+          <h2 id="do_top do_feed">Feed</h2>
+          <p class="top_desc">내가 좋아요한 글을 한 눈에</p>
+          <div class="info_feed">
+            좋아요
+            <span class="feed_cnt">{{posts.length}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <v-row v-if=posts.length>
+          <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'">
+            <v-hover>
+              <template v-slot="{hover}">
+                <v-card 
+                  @click="postdetail(post)"
+                  height="406px"
+                  max-width="350px"
+                  :elevation="hover ? 8 : 2"
+                >
+                  <v-img
+                    class="white--text align-end"
+                    height="180px"
+                    :src="post.thumbnail"
+                  />
+                  <div class="inner_card">
+                    <!-- 제목이 가로범위 초과시 ... -->
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
+                </v-card>
+              </template>
+            </v-hover>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          게시글이 없습니다.
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8561227..e68dd5c 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -14,6 +14,7 @@ import Search from '../components/Search.vue'
 import Feed from '../components/Feed.vue'
 import Forum from '../components/Forum.vue'
 import Myblog from '../components/Myblog.vue'
+import Notice from '../components/Notice.vue'
 
 Vue.use(VueRouter)
 import store from '../router/index.js'
@@ -100,6 +101,11 @@ export default new VueRouter({
       path:'/doblog/:username',
       name:'myblog',
       component: Myblog,
+    },
+    {
+      path:'/notice',
+      name:'notice',
+      component: Notice,
     }
   ]
 })

From 281773e8fe189b3dbb490a305a756f6174ae1579 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 19:53:18 +0900
Subject: [PATCH 47/74] =?UTF-8?q?feature:=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Navbar.vue |   2 +-
 frontend/src/components/Notice.vue | 154 +++++++++++++++++++++++++++--
 2 files changed, 148 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 7faf249..e483422 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -142,7 +142,7 @@ export default {
       }
     },
     gotonotice(){
-      this.$router.push({name:'doblog',params:{data:'1'}})
+      this.$router.push({path:'notice'})
     }
   },
   created() {
diff --git a/frontend/src/components/Notice.vue b/frontend/src/components/Notice.vue
index af143ad..ca51489 100644
--- a/frontend/src/components/Notice.vue
+++ b/frontend/src/components/Notice.vue
@@ -4,12 +4,8 @@
     <div class="doContent">
       <div class="feature_feed">
         <div class="inner_feature">
-          <h2 id="do_top do_feed">Feed</h2>
-          <p class="top_desc">내가 좋아요한 글을 한 눈에</p>
-          <div class="info_feed">
-            좋아요
-            <span class="feed_cnt">{{posts.length}}</span>
-          </div>
+          <h2 id="do_top do_feed">Notice</h2>
+          <p class="top_desc">공지사항과 새로운 업데이트 소식을 게시합니다</p>
         </div>
       </div>
       <div class="content">
@@ -64,11 +60,155 @@
 </template>
 
 <script>
-export default {
+import Navbar from '../components/Navbar.vue'
+import axios from 'axios'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+
+AOS.init();
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+const storage = window.sessionStorage
 
+export default {
+  name: 'Notice',
+  components: {
+    Navbar,
+  },
+  data() {
+    return{
+      posts : {
+        pid: '',
+        title: '',
+        content: '',
+        publishedTime: '',
+        thumbnail:'',
+      }
+    }
+  },
+  created() {
+    this.postread()
+  },
+  methods: {
+    postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
+    postread() {
+      axios.get(API_URL+`/api/v2/notice`)
+      .then(({data})=>{
+        // 콘텐츠 미리보기 슬라이스
+        data.forEach(el => {
+          el.tmp = el.content
+          // console.log(el)
+          if (el.content.length > 40) {
+            // 마크다운 사진 제외
+            el.content = el.content.replace(/!\[.*\)+/, "")
+            // 최대 길이 슬라이스
+            el.content = el.content.slice(0, 40)
+          }
+          // 작성 날짜만 보이게 수정
+          let year = el.publishedTime.slice(0,4);
+          let month = el.publishedTime.slice(5,7);
+          let day = el.publishedTime.slice(8,10);
+          el.publishedTime = year+"년 "+month+"월 "+day+"일"
+          this.posts = data
+        });
+      })
+      .catch(err => console.log(err))
+    }
+  }
 }
 </script>
 
 <style>
+.inner_feature h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+}
+.top_desc {
+  padding:0 0;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: -0.6px;
+  font-family: Noto Sans Light, sans-serif;
+}
+.info_feed {
+  float: right;
+  margin: -39px 0 0;
+  color: #909090;
+  font-size: 13px;
+}
+.feed_cnt {
+  display: inline-block;
+  font-size: 24px;
+  vertical-align: middle;
+  padding: 0 0 0 4px;
+}
+.doContent {
+  max-width: 1150px;
+  min-width: 1100px; 
+  margin: 0 auto 0;
+  padding: 0 20px;
+}
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.feature_main {
+  width: 100%;
+  height: 133px;
+  padding: 151px 0 0;
+}
+.content {
+  min-width: 1100px; 
+  padding: 30px 0 0;
+}
+.inner_card {
+  padding: 1.5rem;
+}
+.card_title{
+  line-height:1.2rem;
+  height: 1.2rem;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  margin: 0 0 5px;
+}
+.card_title h5{
+  font-size: 1rem;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight: 800;
+}
+.card_content{
+  width:100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
+  white-space: normal;
+  line-height: 1.5;
+  height:4.5em;
+  color: rgb(73, 80, 87);
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight:400;
+
+  margin: 0 0 1.5rem;
+}
+.card_content p{
+  height: 100%
+}
+.card_date {
+  font-size:0.75rem;
+  padding: 5px 0 5px;
+  color: rgb(134, 142, 150);
+}
+.liked{
+  float:right; 
+  margin-top: -24px
+}
 </style>
\ No newline at end of file

From d105067f509a247e96d6567965b30908945135c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Thu, 20 Aug 2020 20:04:37 +0900
Subject: [PATCH 48/74] =?UTF-8?q?mod:=EB=84=A4=EB=B8=8C=EB=B0=94=EC=88=9C?=
 =?UTF-8?q?=EC=84=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue   | 2 +-
 frontend/src/components/Navbar.vue | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index a9d6888..1ef4be7 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -110,7 +110,7 @@ export default {
     return {
       tab: null,
       items: [
-        '최신', '조회수', '좋아요'
+        '조회수', '좋아요', '최신'
       ],
       posts : {
         pid: '',
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index e483422..ffd8f47 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -11,12 +11,13 @@
       <router-link to="/introduce">소개</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      <router-link to="/feed">피드</router-link>
+      <router-link to="/forum">포럼</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      <router-link to="/forum">포럼</router-link>
+      <router-link to="/feed">피드</router-link>
     </v-toolbar-items>
 
+
       <div class="notice">
         <v-icon small>fas fa-volume-down</v-icon>
         <div class="banner" @click="gotonotice">

From dd3648f36c00c647e99a4020a8771cc695e24777 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 20:40:21 +0900
Subject: [PATCH 49/74] Style: postdetail css

---
 frontend/src/components/Comment.vue    |  92 ++++++++----
 frontend/src/components/PostDetail.vue | 193 +++++++++++++++----------
 2 files changed, 179 insertions(+), 106 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index d0f9e9d..4135d04 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -1,23 +1,30 @@
 <template>
-	<div class="">
-		<div class="comment-box">
-			<p class="mr-3">작성자: {{ comment.author }} 내용:{{ comment.content }}</p>
-			<v-btn 
-				v-if="comment.isauthor"
-				@click="onCommentDelete(comment)"
-			>댓글 삭제</v-btn>
-			<v-btn 
-				v-if="comment.isauthor"
-				@click="ClickUpdateBtn(comment)"
-			>댓글 수정</v-btn>
+	<div>
+		<div class="comment-box justify-content-between">
+			<div>
+				<h5>{{ comment.author }}</h5>
+				<p class="mr-3">{{ comment.content }}</p>
+			</div>
+			<div>
+				<v-btn
+					class="mx-2 red accent-3"
+					color="white"
+					v-if="comment.isauthor"
+					@click="onCommentDelete(comment)"
+				>삭제</v-btn>
+				<v-btn
+					class="green accent-4"
+					v-if="comment.isauthor"
+					@click="ClickUpdateBtn(comment)"
+				>수정</v-btn>
+			</div>
 		</div>
 		<div v-if="UpdateFlag" class="update-box">
 			<v-text-field
 				v-model="CommentUpdateInput"
 				solo
-				dense
+				rows="2"
 				clearable
-				required
 			></v-text-field>
 			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
 		</div>
@@ -29,33 +36,42 @@
 			<div class="my-auto">
 				<p class="" v-if="!isCommentChild(comment.child)">대댓글이 없습니다 ㅠㅠ</p>
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
+			</div>
+		</div>
+			
 				<!-- 대댓글 부분 -->
 				<div v-if="ChildFlag">
-					<div class="comment-box">
+					<div class="child-box">
 						<v-text-field
 							v-model="ChildCommentInput"
+							flat
+							outlined
 							clearable
-							solo
+							rows="2"
 						></v-text-field>
-						<v-btn class="ml-2" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
+						<v-btn class="Child-Create-Btn" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
 					</div>
-					<div v-for="child in comment.child" :key="child.cid" class="comment-box">
-						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
-						<v-btn 
-							v-if="child.isauthor"
-							@click="onCommentDelete(child)"
-						>대댓글 삭제</v-btn>
-						<v-btn 
-							v-if="child.isauthor"
-							@click="ClickChildUpdateBtn(child)"
-						>대댓글 수정</v-btn>
-						<!-- <ChildComment 
-							:child="child"
-						/> -->
+					<div v-for="child in comment.child" :key="child.cid" class="child-comment justify-content-between">
+						<div>
+							<h5>{{ child.author }}</h5>
+							<p>{{ child.content }}</p>
+						</div>
+						<div>
+							<v-btn
+								class="mx-2 red accent-3 text-white"
+								color="white"
+								v-if="child.isauthor"
+								@click="onCommentDelete(child)"
+							>삭제</v-btn>
+							<v-btn 
+								class="green accent-4"
+								color="white"
+								v-if="child.isauthor"
+								@click="ClickChildUpdateBtn(child)"
+							>수정</v-btn>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
 	</div>
 </template>
 
@@ -162,14 +178,26 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .comment-box {
 	display: flex;
 }
+.child-box {
+	display: inline;
+}
 .update-box {
 	display: flex;
 }
 .update-btn {
 	margin-left: 5px;
 }
+.Child-Create-Btn {
+	margin-bottom: 2rem;
+}
+.child-comment {
+	display: flex;
+	margin: 2rem 0 2rem 0;
+  padding: 0 0 0.5rem 0;
+  border-bottom: 1px solid #888888
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index fa4c4bf..ef720ef 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -1,75 +1,99 @@
 <template>
   <div id="app">
   <!-- navbar(로고에 개인 블로그 이름 추가되야함) -->
-  <Navbar/>
-  <v-container class="post-box">
-    <v-row>
-      <!-- 왼쪽 사이드바(좋아요, 공유버튼) -->
-      <v-col cols="1" class="pa-0">
-      <v-btn icon depressed small @click="addToFeed" color="pink">
-        <v-icon :class="like"></v-icon>
-      </v-btn>
-      </v-col>
-      <!-- 게시글, 댓글  -->
-      <v-col class="pa-0">  
-        <v-layout column="12">
-          <!-- 게시글 제목 -->
-          <div class="title-area">
-            <h1>글 제목 : {{ post.title }}</h1>
-            <h6>작성자: {{ post.author }}</h6>
-          </div>
+    <Navbar/>
+    <v-container class="post-box">
+      <!-- {{ this.post }} -->
+      <v-row>
+        <!-- 왼쪽 사이드바(좋아요, 공유버튼) -->
+        <v-col cols="1" class="pa-0">
+        <v-btn icon depressed small @click="addToFeed" color="pink">
+          <v-icon :class="like"></v-icon>
+        </v-btn>
+        </v-col>
+        <!-- 게시글, 댓글 큰틀  -->
+        <v-col cols="10" class="pa-0">  
+          <v-layout column="12">
+            <!-- 게시글 헤더 -->
+            <h1 class="post-title">{{ post.title }}</h1>
+            <h4 class="post-author">· {{ post.author }} </h4>
+            <div class="title-area">
+              
+            </div>
+            <!-- TextEditor 미리보기만(마크다운) -->
+            <v-col cols="12" class="post-content">
+              <!-- <Viewer :initialValue="this.post.content"/> -->
+              <Viewer 
+                :initialValue="this.content"
+                @change="onEditorChange"
+              />
+            </v-col>
+            <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+            <v-col cols="12"></v-col>
+            <!-- 블로그 작성자 Thumnail -->
 
-          <!-- TextEditor 미리보기만(마크다운) -->
-          <div class="col-lg-12">
-            <!-- <Viewer :initialValue="this.post.content"/> -->
-            <Viewer 
-              :initialValue="this.content"
-              @change="onEditorChange"
-            />
-          </div>
-          <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-          <div></div>
-          <!-- 블로그 작성자 Thumnail -->
-
-          <!-- 짧은 자기 소개 -->
-
-        <!-- 댓글 작성창 -->
-        <div class="col-lg-9">          
-          <v-textarea
-            clearable
-            label="댓글 작성"
-            placeholder="댓글 내용을 작성하세요"
-            v-model="CommentInput"
-            solo
-          ></v-textarea>
-          <v-btn
-            @click="onCommentCreate"
-          >댓글 작성
-          </v-btn>
-        </div>
-        <!-- 댓글 목록 -->
-        <h1>댓글창</h1>
-        <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-        <div v-if="renderComponent">
-          <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
-            <Comment 
-              :comment="comment"
-              @Click-Delete-Btn="CommentRead"
-              @Click-Update-Btn="CommentRead"
-              @Child-Create="CommentRead"
-              @Click-Child-Update-Btn="CommentRead"
-            />
-          </div>
-        </div>
-        </v-layout>
-      </v-col>
-
-      <!-- 오른쪽 사이드바 -->
-      <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
-        <h3> 게시글 목차 </h3>
-      </v-col>
-    </v-row>
-  </v-container>
+            <!-- 작성자 Thumnail, 자기 소개, 후원버튼 & 후원QR -->
+            <v-row>
+              <v-col cols="3">
+                <v-img aspect-ratio="1.2" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
+                <p v-else>{{ post.author }}</p>
+              </v-col>
+              <v-col cols="4" v-if="post.authorInfo.introduce">
+                {{ post.authorInfo.introduce }}
+              </v-col>
+              <v-col cols="3" v-else>
+                안녕하세요, {{ post.author }}입니다.
+              </v-col>
+              <v-col cols="5">
+                <v-btn @click="ClickQrBtn" v-if="post.authorInfo.qrImage&&qrflag">글쓴이에게 후원하기</v-btn>
+                <div class="qrimage-resize">
+                  <v-img v-if="!qrflag" :src="post.authorInfo.qrImage"></v-img>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- 소셜 로그인 버튼 -->
+            <v-row class="social-login">
+              <i v-if="post.authorInfo.github" class="fab fa-github fa-3x" href=""></i>
+              <i v-if="post.authorInfo.instagram" class="fab fa-instagram fa-3x" href=""></i>
+              <i v-if="post.authorInfo.facebook" class="fab fa-facebook fa-3x" href=""></i>
+            </v-row>
+            <h3 class="comment-header">댓글</h3>
+            <!-- 댓글 작성창 -->
+            <div class="col-lg-12 mb-2">          
+              <v-textarea
+                clearable
+                label="댓글 내용을 작성하세요"
+                rows="3"
+                v-model="CommentInput"
+                solo
+              ></v-textarea>
+              <v-btn
+                @click="onCommentCreate"
+              >댓글 작성
+              </v-btn>
+            </div>
+            <!-- 댓글 목록 -->
+            <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+            <div v-if="renderComponent">
+              <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
+                <Comment 
+                  :comment="comment"
+                  @Click-Delete-Btn="CommentRead"
+                  @Click-Update-Btn="CommentRead"
+                  @Child-Create="CommentRead"
+                  @Click-Child-Update-Btn="CommentRead"
+                />
+              </div>
+            </div>
+          </v-layout>
+        </v-col>
+        <v-col cols="1"></v-col>
+        <!-- 오른쪽 사이드바 -->
+        <!-- <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
+          <h3> 게시글 목차 </h3>
+        </v-col> -->
+      </v-row>
+    </v-container>
   </div>
 </template>
 
@@ -106,6 +130,7 @@ export default {
           FeedFlag: '',
           like: '',
           renderComponent: true,
+          qrflag: true,
         }
     },
     created(){
@@ -120,7 +145,8 @@ export default {
       })
         .then(res => {
           // console.log(res)
-          // this.post = res.data
+          this.post = res.data
+          console.dir(this.post)
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
@@ -141,14 +167,10 @@ export default {
     mounted() {
       this.fetchData()
     },
-    // computed() {
-    // },
     methods: {
       forceRerender() {
-        // Remove my-component from the DOM
         this.renderComponent = false;
         this.$nextTick(() => {
-          // Add the component back in
           this.renderComponent = true;
         })
         console.log("rerender Complete")
@@ -275,6 +297,9 @@ export default {
         else {
           alert('로그인 후 이용해주세요.')
         }
+      },
+      ClickQrBtn() {
+        this.qrflag = !this.qrflag
       }
     }
 }
@@ -292,5 +317,25 @@ export default {
 .post-box {
   margin-top: 130px;
 }
-
+.social-login{
+  margin: 1rem 0;
+}
+.post-title {
+  margin: 0 0 2rem 0;
+  border-bottom: 1px solid black;
+}
+.post-content {
+  margin: 2rem 0 2rem 0;
+  padding: 0 0 1rem 0;
+  border-bottom: 1.5px solid #888888
+}
+.comment-header {
+  margin: 2rem 0 2rem 0;
+  padding: 0 0 1rem 0;
+  border-bottom: 1.5px solid #888888
+}
+.qrimage-resize {
+  width: 10rem;
+  height: 15rem;
+}
 </style>
\ No newline at end of file

From 0d1f6dd7a8c685b1a6419c39ad0cf287f75b464c Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 21:17:20 +0900
Subject: [PATCH 50/74] =?UTF-8?q?Style:=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20text=20color=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 4135d04..34ae75a 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="comment-body">
 		<div class="comment-box justify-content-between">
 			<div>
 				<h5>{{ comment.author }}</h5>
@@ -7,7 +7,7 @@
 			</div>
 			<div>
 				<v-btn
-					class="mx-2 red accent-3"
+					class="mx-2 red accent-3 text-white"
 					color="white"
 					v-if="comment.isauthor"
 					@click="onCommentDelete(comment)"
@@ -28,7 +28,7 @@
 			></v-text-field>
 			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
 		</div>
-		<div class="comment-box">
+		<div class="child-comment-btn">
 			<v-btn @click="ClickChildBtn" class="mx-2" fab x-small dark color="indigo">
 				<v-icon v-if="!ChildFlag" dark>mdi-plus</v-icon>
 				<v-icon v-if="ChildFlag">mdi-minus</v-icon>
@@ -51,7 +51,7 @@
 						></v-text-field>
 						<v-btn class="Child-Create-Btn" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
 					</div>
-					<div v-for="child in comment.child" :key="child.cid" class="child-comment justify-content-between">
+					<div v-for="child in comment.child" :key="child.cid" class="child-comment">
 						<div>
 							<h5>{{ child.author }}</h5>
 							<p>{{ child.content }}</p>
@@ -59,7 +59,6 @@
 						<div>
 							<v-btn
 								class="mx-2 red accent-3 text-white"
-								color="white"
 								v-if="child.isauthor"
 								@click="onCommentDelete(child)"
 							>삭제</v-btn>
@@ -179,12 +178,19 @@ export default {
 </script>
 
 <style scoped>
+.comment-body {
+	margin: 1rem 0 1rem 1rem;
+  padding: 0 0 0.5rem 0;
+}
 .comment-box {
 	display: flex;
 }
 .child-box {
 	display: inline;
 }
+.child-comment-btn {
+	display: flex;
+}
 .update-box {
 	display: flex;
 }
@@ -196,7 +202,8 @@ export default {
 }
 .child-comment {
 	display: flex;
-	margin: 2rem 0 2rem 0;
+	justify-content: space-between;
+	margin: 0.5rem 0 1rem 2rem;
   padding: 0 0 0.5rem 0;
   border-bottom: 1px solid #888888
 }

From b5b473160aacf48c414940d8cd08759fbad38b0c Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Thu, 20 Aug 2020 23:29:20 +0900
Subject: [PATCH 51/74] =?UTF-8?q?Feature:=20=EC=9B=8C=EB=93=9C=ED=81=B4?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EB=93=9C=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Cloud.vue | 165 ++++++++++++++++++++++++++++++
 frontend/src/components/Forum.vue | 146 ++++++++++++++++----------
 2 files changed, 256 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/components/Cloud.vue

diff --git a/frontend/src/components/Cloud.vue b/frontend/src/components/Cloud.vue
new file mode 100644
index 0000000..99d3eca
--- /dev/null
+++ b/frontend/src/components/Cloud.vue
@@ -0,0 +1,165 @@
+<template>
+   <div>
+      <div class="wordCloud" ref="wordCloud"></div>
+      <div>
+         {{onWordClick}}
+      </div>
+   </div>
+</template>
+
+<script>
+import * as d3 from "d3";
+import * as cloud from 'd3-cloud';
+// const storage = window.sessionStorage;
+
+export default {
+    data() {
+        return {
+            layout: {},
+            chart: {},
+                  fill: null,
+                  test: ''
+        }
+    },
+
+    props: {
+        data: {
+            type: Array,
+            required: true,
+        },
+        fontSizeMapper: {
+            type: Function,
+            required: true,
+        },
+        onWordClick: {
+               type: Function,
+               default: (word) => { 
+                  window.alert(`You clicked hi ${word.text}`) 
+                  // storage.setItem("tag",word.text)
+                  // console.log(storage.getItem("tag"))
+               }
+        },
+        rotate: {
+            type: [Function, String, Number],
+            default: 0,
+        },
+        font: {
+            type: [String, Function],
+            default: 'Serif'
+        },
+        width: {
+            type: [Number, String],
+            default: 960,
+        },
+        height: {
+            type: [Number, String],
+            default: 500,
+        },
+        padding: {
+            type: [Number, String],
+            default: 0,
+        },
+        spiral: {
+            type: String,
+            default: "archimedean",
+        },
+        coloring: {
+            type: String,
+            default: "random",
+        },
+        colors: {
+            type: Array,
+        }
+    },
+
+    mounted() {
+        this.createCanvas()
+    },
+
+    watch: {
+        data() {
+            this.createCanvas()
+        },
+        rotate() {
+            this.createCanvas()
+        },
+        font() {
+            this.createCanvas()
+        },
+        padding() {
+            this.createCanvas()
+        },
+        spiral() {
+            this.createCanvas()
+        },
+        colors() {
+            this.createCanvas()
+        },
+        coloring() {
+            this.createCanvas()
+        }
+    },
+
+    methods: {
+        createCanvas: function() {
+            const wordCounts = this.data.map(
+                text => ({ ...text })
+            );
+
+            d3.select(this.$el).selectAll('*').remove();
+
+            const layout = cloud()
+            .size([this.width, this.height])
+            .words(wordCounts)
+            .padding(this.padding)
+            .spiral(this.spiral)
+            .rotate(this.rotate)
+            .font(this.font)
+            .fontSize(this.fontSizeMapper)
+            .on('end', this.end);
+            
+            if(this.colors)
+                this.fill = d3.scaleOrdinal().range(this.colors)
+            else
+                this.fill = d3.scaleOrdinal(d3.schemeCategory10)
+
+            layout.start();
+        },
+        end: function(words) {
+            let _fill;
+            switch(this.coloring){
+                case "random":
+                    _fill = (d, i) => this.fill(i);
+                    break;
+                case "size":
+                    _fill = (d) => this.fill(d.size);
+                    break;
+                default:
+                    _fill = (d, i) => this.fill(i);
+            }
+
+            d3.select(this.$el)
+            .append('svg')
+            .attr('width', this.width)
+            .attr('height', this.height)
+            .append('g')
+            .attr('transform', `translate(${this.width / 2},${this.height / 2})`)
+            .selectAll('text')
+            .data(words)
+            .enter()
+            .append('text')
+            .style('font-family', d => d.font)
+            .style('font-size', d => {
+                return `${d.size}px`
+            })
+            .style('fill', _fill)
+            .attr('text-anchor', 'middle')
+            .attr('transform',d => { 
+                return `translate(${[d.x, d.y]})rotate(${d.rotate})`
+            })
+            .text(d => d.text)
+            .on('click', d => this.$emit("submit-tagname", d));
+        },
+    }
+ }
+</script>
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 3691aaa..41314d5 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -1,30 +1,33 @@
 <template>
   <div>
     <Navbar></Navbar>
-		<div class="doContent">
-			<div class="feature_feed">
-				<div class="inner_feature">
-					<h2 id="do_top do_feed">Forum</h2>
-					<p class="top_desc"><span style="font-style:'Inter', sans-serif; font-weight:800">DO!</span>의 모든 태그들을 만나보세요</p>
-				</div>
-			</div>
-			<div id="app" class="innner">
-				<cloud 
-					:data="words" 
-					:fontSizeMapper="fontSizeMapper"
-					:colors="colors"
-				/>
-			</div>
-		</div>
+      <div class="doContent">
+         <div class="feature_feed">
+            <div class="inner_feature">
+               <h2 id="do_top do_feed">Forum</h2>
+               <p class="top_desc"><span style="font-style:'Inter', sans-serif; font-weight:800">DO!</span>의 모든 태그들을 만나보세요</p>
+            </div>
+         </div>
+         <div id="app" class="innner">
+            <cloud 
+               :data="words" 
+               :fontSizeMapper="fontSizeMapper"
+               :colors="colors"
+               @submit-tagname="searchtagname"
+            />
+         </div>
+         
+      </div>
   </div>
 </template>
 
 <script>
 import Navbar from '../components/Navbar.vue'
+import Cloud from '../components/Cloud.vue'
 import axios from 'axios'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
-import Cloud from 'vue-d3-cloud'
+// import Cloud from 'vue-d3-cloud'
 
 AOS.init();
 
@@ -33,49 +36,82 @@ const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const storage = window.sessionStorage
 
 export default {
-	name: 'Forum',
-	components: {
-		Navbar,
-		Cloud
-	},
-	props: {
-		onWordClick: {
-			type: Function,
-			default: (word) => { 
-					window.alert(`You clicked 1 ${word.text}`) 
-			},
-		},
-	},
-	data() {
-		return {
-			tab: null,
-      items: [
-        '인기순', '이름순',
-			],
-
-			words: [],
-			colors:["ffbe0b","628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6","fb5607","ff006e","8338ec","3a86ff","11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
-			// ["11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
-			// ["11D9C3","23C7CF","35B6DB","47A4E6","5993F2"
-			// ,"628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6"],
-			fontSizeMapper: word => Math.log2(word.value) * 3.5,
-			spiral: "archimedean",
-		}
-	},
-	created(){
-		var vm = this;
+   name: 'Forum',
+   components: {
+      Navbar,
+      Cloud
+   },
+   props: {
+      onWordClick: {
+         type: Function,
+         default: (word) => { 
+            axios.get(API_URL+'api/v4/'+word.text)
+               .then(({data})=>{
+                  // 콘텐츠 미리보기 슬라이스
+                  data.forEach(el => {
+                  el.tmp = el.content
+                  // console.log(el)
+                  if (el.content.length > 40) {
+                     // 마크다운 사진 제외
+                     el.content = el.content.replace(/!\[.*\)+/, "")
+                     // 최대 길이 슬라이스
+                     el.content = el.content.slice(0, 40)
+                  }
+                  // 작성 날짜만 보이게 수정
+                  let year = el.publishedTime.slice(0,4);
+                  let month = el.publishedTime.slice(5,7);
+                  let day = el.publishedTime.slice(8,10);
+                  el.publishedTime = year+"년 "+month+"월 "+day+"일"
+                  // this.posts = data
+                  });
+                  console.log(data);
+                  return {test:data}
+               })
+         },
+      },
+   },
+   data() {
+      return {
+         tab: null,
+         words: [],
+         colors:["ffbe0b","628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6","fb5607","ff006e","8338ec","3a86ff","11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+         // ["11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+         // ["11D9C3","23C7CF","35B6DB","47A4E6","5993F2"
+         // ,"628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6"],
+         fontSizeMapper: word => Math.log2(word.value) * 3,
+         spiral: "archimedean",
+         tag: '',
+         posts : {
+            pid: '',
+            title: '',
+            content: '',
+            publishedTime: '',
+            thumbnail:'',
+         },
+      }
+   },
+   created(){
+      var vm = this;
       axios.get(API_URL+"api/v4")
       .then(function(response) {
-        console.log(response);
+        // console.log(response);
         vm.words = response.data;
       })
       .catch(function(err) {
         console.log(err);
       })
-	},
-	computed: {
-	
-	}
+   },
+   computed: {
+      
+   },
+   mounted(){
+      this.onWordClick();
+   },
+   methods: {
+      searchtagname(name){
+         console.log(name);
+      }
+   },
 }
 </script>
 
@@ -114,13 +150,13 @@ export default {
   padding: 151px 0 0;
 }
 .innner {
-	padding-top:20px;
+   padding-top:20px;
   min-width: 1100px;
   max-width: 1150px;
-	margin: 0 auto;
+   margin: 0 auto;
 }
 .wordCloud{
-	text-align: center;
+   text-align: center;
 }
 .wordCloud text{
   font-family: 'Inter','NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif !important;

From c2760496fceda840cb6892f4ad0d462892416838 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 00:41:17 +0900
Subject: [PATCH 52/74] =?UTF-8?q?Feautre:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Comment.vue       | 146 ++++++++-----
 frontend/src/components/CommentUpdate.vue |  13 --
 frontend/src/components/PostDetail.vue    | 255 ++++++++++++++--------
 3 files changed, 261 insertions(+), 153 deletions(-)
 delete mode 100644 frontend/src/components/CommentUpdate.vue

diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 4276e34..870a1a0 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -1,47 +1,71 @@
 <template>
-	<div class="">
-		<div class="comment-box">
-			<p class="mr-3">작성자: {{ comment.author }} 내용:{{ comment.content }}</p>
-			<v-btn 
-				v-if="comment.isauthor"
-				@click="onCommentDelete(comment)"
-			>삭제</v-btn>
-			<v-btn 
-				v-if="comment.isauthor"
-				@click="onClickUpdateBtn(comment)"
-			>수정</v-btn>
+	<!-- 댓글(comment)+대댓글(comment.child) -->
+	<div class="comment-body">
+		<!-- 댓글 하나 -->
+		<div class="comment-box justify-content-between">
+			<!-- 댓글 작성자, 내용 -->
+			<div>
+				<h5>{{ comment.author }}</h5>
+				<p class="mr-3">{{ comment.content }}</p>
+			</div>
+			<!-- 댓글 삭제, 수정 버튼 -->
+			<div>
+				<v-btn
+					class="mx-2 red accent-3 text-white"
+					color="white"
+					v-if="comment.isauthor"
+					@click="onCommentDelete(comment)"
+				>삭제</v-btn>
+				<v-btn
+					class="green accent-4"
+					v-if="comment.isauthor"
+					@click="ClickUpdateBtn(comment)"
+				>수정</v-btn>
+			</div>
 		</div>
+		<!-- 댓글 수정 버튼 누를 시 인풋 -->
 		<div v-if="UpdateFlag" class="update-box">
 			<v-text-field
 				v-model="CommentUpdateInput"
 				solo
-				dense
+				rows="2"
 				clearable
 			></v-text-field>
 			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
 		</div>
-		<div class="comment-box">
-			<v-btn @click="onClickChildBtn" class="mx-2" fab x-small dark color="indigo">
-				<v-icon dark>mdi-plus</v-icon>
+		<!-- 대댓글 버튼 & 갯수 -->
+		<div class="child-comment-btn">
+			<!-- 대댓글 보이기/숨기기 버튼 -->
+			<v-btn @click="ClickChildBtn" class="mx-2" fab x-small dark color="indigo">
+				<v-icon v-if="!ChildFlag" dark>mdi-plus</v-icon>
+				<v-icon v-if="ChildFlag">mdi-minus</v-icon>
 			</v-btn>
+			<!-- 대댓글 갯수 따라서 다른 설명 -->
 			<div class="my-auto">
 				<p class="" v-if="!isCommentChild(comment.child)">대댓글이 없습니다 ㅠㅠ</p>
 				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
-				<div v-if="ChildFlag">
-					<div v-for="child in comment.child" :key=child.cid>
-						<p>작성자: {{ child.author }} | 내용: {{ child.content }}</p>
-					</div>
-					<div>
-					<v-text-field
-						:id="comment.cid"
-						v-model="ChildCommentInput"
-						solo="true"
-						dense="true"
-						clearable="true"
-					></v-text-field>
-					<v-btn @click="onChildCommentCreate(comment.cid)">답글 작성하기</v-btn>
-					</div>
-				</div>
+			</div>
+		</div>
+		<!-- 대댓글 -->
+		<div v-if="ChildFlag">
+			<!-- 대댓글 작성 인풋 -->
+			<div class="child-box">
+				<v-text-field
+					v-model="ChildCommentInput"
+					flat
+					outlined
+					clearable
+					rows="2"
+				></v-text-field>
+				<v-btn class="Child-Create-Btn" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
+			</div>
+			<!-- 대댓글 리스트 -->
+			<div v-for="child in comment.child" :key="child.cid" class="child-comment">
+				<ChildComment
+					:child="child"
+					@Click-Child-Update-Btn="ChildChange"
+					@Click-Child-Delete-Btn="ChildChange"
+				/>
 			</div>
 		</div>
 	</div>
@@ -49,36 +73,28 @@
 
 <script>
 import axios from 'axios'
+import ChildComment from './ChildComment.vue'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
-// const API_URL = 'http://localhost:8081/'
 const storage = window.sessionStorage
 
 export default {
 	name: 'Comment',
 	components: {
+		ChildComment,
 	},
 	data() {
 		return {
 			comment: this.$attrs.comment,
-			ChildFlag: false,
-			ChildCommentInput: '',
 			CommentUpdateInput: '',
 			UpdateFlag: false,
+			ChildFlag: false,
 		}
 	},
+	created() {
+	},
 	methods: {
 		// *** Parent Comment ***
-		isCommentauthor(Comments) {
-			Comments.forEach(one_comment => {
-				if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
-					one_comment.isauthor = true
-				} else {
-					one_comment.isauthor = false
-				}
-			})
-			return Comments
-		},
 		// 댓글 Delete 메서드
 		onCommentDelete(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
@@ -88,7 +104,7 @@ export default {
 				alert('비정상적인 접근입니다')
 			}
 		},
-		// 댓글 수정(아직 수정 필요함)
+		// 댓글 Update 메서드
 		onCommentUpdate(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
 				// console.log(one_comment)
@@ -109,11 +125,15 @@ export default {
 		},
 		// Comment에 Child가 있는지 없는지 체크
 		isCommentChild(one_comment_child) {
-			// console.log(one_comment_child)
-			if (one_comment_child.length) return true
+			if (one_comment_child.length) {
+				// one_comment_child.forEach(element => {
+				// 	this.isCommentauthor(element)
+				// })
+				return true
+			}
 			return false
 		},
-		onClickUpdateBtn(one_comment) {
+		ClickUpdateBtn(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
 				this.CommentUpdateInput = one_comment.content
 				this.UpdateFlag = !this.UpdateFlag
@@ -122,6 +142,7 @@ export default {
 		
 
 		// *** Child Comment ***
+		// 대댓글 Create 메서드
 		onChildCommentCreate(pcid) {
 			if (storage.getItem("login_user")) {
 				const tmp_comment = {
@@ -136,22 +157,47 @@ export default {
 					.catch(err => console.log(err))
 			}
 		},
-		// 대댓글 보기, 숨기기 Boolean 반전 메서드
-		onClickChildBtn() {
+		// 대댓글 보기, 숨기기 버튼 - ChildFlag 토글 메서드
+		ClickChildBtn() {
 			this.ChildFlag = !this.ChildFlag
+			this.$nextTick()
 		},
+		// ChildComment의 이벤트 발생 듣고 PostDetail로 올림
+		ChildChange() {
+			this.$emit("Click-Child-Change-Btn")
+		}
 	}
 }
 </script>
 
-<style>
+<style scoped>
+.comment-body {
+	margin: 1rem 0 1rem 1rem;
+  padding: 0 0 0.5rem 0;
+}
 .comment-box {
 	display: flex;
 }
+.child-box {
+	display: inline;
+}
+.child-comment-btn {
+	display: flex;
+}
 .update-box {
 	display: flex;
 }
 .update-btn {
 	margin-left: 5px;
 }
+.Child-Create-Btn {
+	margin-bottom: 2rem;
+}
+.child-comment {
+	display: flex;
+	justify-content: space-between;
+	margin: 0.5rem 0 1rem 2rem;
+  padding: 0 0 0.5rem 0;
+  border-bottom: 1px solid #888888
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/CommentUpdate.vue b/frontend/src/components/CommentUpdate.vue
deleted file mode 100644
index 6dc7a9b..0000000
--- a/frontend/src/components/CommentUpdate.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-    name: 'CommentUpdate',
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 140c53c..e49f8b9 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -1,72 +1,102 @@
 <template>
   <div id="app">
   <!-- navbar(로고에 개인 블로그 이름 추가되야함) -->
-  <Navbar/>
-  <v-container class="post-box">
-    <v-row>
-      <!-- 왼쪽 사이드바(좋아요, 공유버튼) -->
-      <v-col cols="1" class="pa-0">
-      <v-btn icon depressed small @click="addToFeed" color="pink">
-        <v-icon :class="like"></v-icon>
-      </v-btn>
-      </v-col>
-      <!-- 게시글, 댓글  -->
-      <v-col class="pa-0">  
-        <v-layout column="12">
-          <!-- 게시글 제목 -->
-          <div class="title-area">
-            <h1>글 제목 : {{ post.title }}</h1>
-            <h6>작성자: {{ post.author }}</h6>
-          </div>
+    <Navbar/>
+    <v-container class="post-box">
+      <!-- {{ this.post }} -->
+      <v-row>
+        <!-- 왼쪽 사이드바(좋아요, 공유버튼) -->
+        <v-col cols="1" class="pa-0">
+        <v-btn icon depressed small @click="addToFeed" color="pink">
+          <v-icon :class="like"></v-icon>
+        </v-btn>
+        </v-col>
+        <!-- 게시글, 댓글 큰틀  -->
+        <v-col cols="10" class="pa-0">  
+          <v-layout column="12">
+            <!-- 게시글 헤더 -->
+            <h1 class="post-title">{{ post.title }}</h1>
+            <h4 class="post-author">· {{ post.author }} </h4>
+            <div class="title-area">
+              
+            </div>
+            <!-- TextEditor 미리보기만(마크다운) -->
+            <v-col cols="12" class="post-content">
+              <!-- <Viewer :initialValue="this.post.content"/> -->
+              <Viewer 
+                :initialValue="this.content"
+                @change="onEditorChange"
+              />
+            </v-col>
+            <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+            <v-col cols="12">
+              <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
+              <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
+            </v-col>
+            <!-- 블로그 작성자 Thumnail -->
 
-          <!-- TextEditor 미리보기만(마크다운) -->
-          <div class="col-lg-12">
-            <Viewer :initialValue="this.content"/>
-          </div>
-          <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-          <div>
-            <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
-            <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
-          </div>
-          <!-- 블로그 작성자 Thumnail -->
-
-          <!-- 짧은 자기 소개 -->
-
-        <!-- 댓글 작성창 -->
-        <div class="col-lg-9">          
-          <v-textarea
-            clearable
-            label="댓글 작성"
-            placeholder="댓글을 작성하세요"
-            v-model="CommentInput"
-          ></v-textarea>
-          <v-btn
-            @click="onCommentCreate"
-          >댓글 작성
-          </v-btn>
-        </div>
-        <!-- 댓글 목록 -->
-        <h1>댓글창</h1>
-        <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-        <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
-          <div>
-            <Comment 
-              :comment="comment"
-              @Click-Delete-Btn="CommentRead"
-              @Click-Update-Btn="CommentRead"
-              @Child-Create="CommentRead"
-            />
-          </div>
-        </div>
-        </v-layout>
-      </v-col>
-
-      <!-- 오른쪽 사이드바 -->
-      <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
-        <h3> 게시글 목차 </h3>
-      </v-col>
-    </v-row>
-  </v-container>
+            <!-- 작성자 Thumnail, 자기 소개, 후원버튼 & 후원QR -->
+            <v-row>
+              <v-col cols="3">
+                <v-img aspect-ratio="1.2" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
+                <p v-else>{{ post.author }}</p>
+              </v-col>
+              <v-col cols="4" v-if="post.authorInfo.introduce">
+                {{ post.authorInfo.introduce }}
+              </v-col>
+              <v-col cols="3" v-else>
+                안녕하세요, {{ post.author }}입니다.
+              </v-col>
+              <v-col cols="5">
+                <v-btn @click="ClickQrBtn" v-if="post.authorInfo.qrImage&&qrflag">글쓴이에게 후원하기</v-btn>
+                <div class="qrimage-resize">
+                  <v-img v-if="!qrflag" :src="post.authorInfo.qrImage"></v-img>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- 소셜 로그인 버튼 -->
+            <v-row class="social-login">
+              <i v-if="post.authorInfo.github" class="fab fa-github fa-3x" href=""></i>
+              <i v-if="post.authorInfo.instagram" class="fab fa-instagram fa-3x" href=""></i>
+              <i v-if="post.authorInfo.facebook" class="fab fa-facebook fa-3x" href=""></i>
+            </v-row>
+            <h3 class="comment-header">댓글</h3>
+            <!-- 댓글 작성창 -->
+            <div class="col-lg-12 mb-2">          
+              <v-textarea
+                clearable
+                label="댓글 내용을 작성하세요"
+                rows="3"
+                v-model="CommentInput"
+                solo
+              ></v-textarea>
+              <v-btn
+                @click="onCommentCreate"
+              >댓글 작성
+              </v-btn>
+            </div>
+            <!-- 댓글 목록 -->
+            <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+            <div v-if="renderComponent">
+              <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
+                <Comment 
+                  :comment="comment"
+                  @Click-Delete-Btn="CommentRead"
+                  @Click-Update-Btn="CommentRead"
+                  @Child-Create="CommentRead"
+                  @Click-Child-Change-Btn="CommentRead"
+                />
+              </div>
+            </div>
+          </v-layout>
+        </v-col>
+        <v-col cols="1"></v-col>
+        <!-- 오른쪽 사이드바 -->
+        <!-- <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
+          <h3> 게시글 목차 </h3>
+        </v-col> -->
+      </v-row>
+    </v-container>
   </div>
 </template>
 
@@ -96,13 +126,14 @@ export default {
             content: '',
             islike: this.$route.params.data.isLike,
           },
-          content: this.$route.params.data.tmp,
+          content: this.$route.params.data.content,
           Comments: null,
           CommentInput: '',
-          ChildFlag: false,
           ChildCommentInput: '',
           FeedFlag: '',
           like: '',
+          renderComponent: true,
+          qrflag: true,
         }
     },
     created(){
@@ -115,14 +146,12 @@ export default {
         pid : storage.getItem("pid")
       })
         .then(res => {
-          console.log(res)
-          // this.post = res.data
+          // console.log(res)
+          this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
-          this.post.uid = res.data.uid
-          // console.log(this.post)
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
@@ -130,31 +159,38 @@ export default {
             this.like = "far fa-heart"
             this.FeedFlag = false
           }
-          // console.log(this.post)
           this.Comments = res.data.comments
-          // console.log(this.Comments)
           this.isCommentauthor(this.Comments)
           this.isPostauthor(this.isPostauthor)
       })
     },
     mounted() {
+      this.fetchData()
     },
-    // computed() {
-    // },
     methods: {
+      forceRerender() {
+        this.renderComponent = false;
+        this.$nextTick(() => {
+          this.renderComponent = true;
+        })
+        console.log("rerender Complete")
+      },
       fetchData() {
-        axios.post(API_URL + 'api/v2/p',{
+        axios.post(API_URL + 'api/v2/p/',{
           uid : storage.getItem("uid"),
           pid : storage.getItem("pid")
         })
           .then(res => {
+            console.log('fetchData')
             this.post = res.data
-            // console.log(this.post)
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
             this.isPostauthor(this.isPostauthor)
           })
       },
+      onEditorChange() {
+        this.fetchData()
+      },
       // 글 작성자인지 확인
       isPostauthor() {
         if (this.post.author && storage.getItem("login_user") && this.post.uid && storage.getItem("uid")) {
@@ -182,18 +218,22 @@ export default {
       // 댓글 Create 메서드
       onCommentCreate() {
         if (storage.getItem("login_user")) {
-          const tmp_comment = {
-            author: storage.getItem("login_user"),
-            content: this.CommentInput,
-            uid: storage.getItem("uid"),
-            pid: storage.getItem("pid")
+          if (this.CommentInput.trim()) {
+            const tmp_comment = {
+              author: storage.getItem("login_user"),
+              content: this.CommentInput,
+              uid: storage.getItem("uid"),
+              pid: storage.getItem("pid")
+            }
+            // 서버에 댓글 작성 요청 보냄
+            axios.post(API_URL + 'api/v3/', tmp_comment)
+              .then(() => {
+                // 댓글 작성 완료 후 새로 댓글 받아옴
+                this.CommentRead()
+              })
+          } else {
+            alert('빈 댓글은 작성할 수 없습니다.')
           }
-          // 서버에 댓글 작성 요청 보냄
-          axios.post(API_URL + 'api/v3/', tmp_comment)
-            .then(() => {
-              // 댓글 작성 완료 후 새로 댓글 받아옴
-              this.CommentRead()
-            })
         } else {
           alert('로그인한 유저만 댓글을 달 수 있습니다.')
         }
@@ -202,7 +242,10 @@ export default {
       CommentRead() {
         axios.get(API_URL+'api/v3/'+storage.getItem("pid"))
           .then(res => {
+            console.log('Comment Reset')
             this.Comments = this.isCommentauthor(res.data)
+            this.forceRerender()
+            console.log('Comment Read')
           })
         this.CommentInput = ""
       },
@@ -214,6 +257,15 @@ export default {
           } else {
             one_comment.isauthor = false
           }
+          if (one_comment.child.length) {
+            one_comment["child"].forEach(one_child => {
+              if (one_child.author === storage.getItem("login_user") && one_child.uid === Number(storage.getItem("uid"))) {
+                one_child.isauthor = true
+              } else {
+                one_child.isauthor = false
+              }
+            })
+          }
         })
         return Comments
       },
@@ -250,7 +302,7 @@ export default {
               status : this.FeedFlag,
             })
             .then(function (response){
-						console.log(response);
+              console.log(response);
             })
             .catch(function(error){
               console.log(error);
@@ -260,6 +312,9 @@ export default {
         else {
           alert('로그인 후 이용해주세요.')
         }
+      },
+      ClickQrBtn() {
+        this.qrflag = !this.qrflag
       }
     }
 }
@@ -277,5 +332,25 @@ export default {
 .post-box {
   margin-top: 130px;
 }
-
+.social-login{
+  margin: 1rem 0;
+}
+.post-title {
+  margin: 0 0 2rem 0;
+  border-bottom: 1px solid black;
+}
+.post-content {
+  margin: 2rem 0 2rem 0;
+  padding: 0 0 1rem 0;
+  border-bottom: 1.5px solid #888888
+}
+.comment-header {
+  margin: 2rem 0 2rem 0;
+  padding: 0 0 1rem 0;
+  border-bottom: 1.5px solid #888888
+}
+.qrimage-resize {
+  width: 10rem;
+  height: 15rem;
+}
 </style>
\ No newline at end of file

From dc547bf849870b0f99a615519d79879e41cf6fe4 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 00:43:14 +0900
Subject: [PATCH 53/74] Pull frontend branch

---
 frontend/package-lock.json                    | 773 +++++++++++++++---
 frontend/package.json                         |  13 +-
 frontend/src/components/ChildComment.vue      |  88 ++
 frontend/src/components/Cloud.vue             | 165 ++++
 frontend/src/components/Feed.vue              |   2 +-
 frontend/src/components/Forum.vue             | 183 ++++-
 frontend/src/components/Home.vue              | 121 ++-
 frontend/src/components/Myblog.vue            | 249 ++++++
 frontend/src/components/Navbar.vue            | 156 ++--
 frontend/src/components/Notice.vue            | 214 +++++
 frontend/src/components/Search.vue            | 100 ++-
 .../src/components/Sidebar/PostContents.vue   |  13 -
 frontend/src/components/TagInputBox.vue       |  24 +-
 frontend/src/components/TextEditor.vue        | 267 +++---
 frontend/src/router/index.js                  |  13 +-
 15 files changed, 1974 insertions(+), 407 deletions(-)
 create mode 100644 frontend/src/components/ChildComment.vue
 create mode 100644 frontend/src/components/Cloud.vue
 create mode 100644 frontend/src/components/Myblog.vue
 create mode 100644 frontend/src/components/Notice.vue
 delete mode 100644 frontend/src/components/Sidebar/PostContents.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f104d16..ca49570 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1235,17 +1235,17 @@
       }
     },
     "@toast-ui/vue-editor": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-2.3.0.tgz",
-      "integrity": "sha512-oXuy4YqaF9RHBqYutNg8xI9XvcrWQv9xRKQJLSPtR3wh9/5AeTuXm/b8qkJdoccCsJl5lUq/Qh7l/+o8zcbvFA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-2.3.1.tgz",
+      "integrity": "sha512-vEElTwJ3CwUL2da2y3gxKVK7bRWC+d6SrUyOQNeCDtN95vEs/7MUNK4cUAxAGDZuDYg1KB2ZpBtc/dV1LkO9XQ==",
       "requires": {
-        "@toast-ui/editor": "^2.3.0"
+        "@toast-ui/editor": "^2.3.1"
       },
       "dependencies": {
         "@toast-ui/editor": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.3.0.tgz",
-          "integrity": "sha512-rCb35CMxYS6U2aiwWhdLZMzbgzoVHm2YxGrlmH4OdNQNfzAM03DHl4lTwq7EP7E4MG0FEMgMyn0Ovo5DI7G8+w==",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.3.1.tgz",
+          "integrity": "sha512-0akQUnyCg24SBBb+weRX6VJ6ZjltxYEivBWOHft0birkrPF0YQgKjebPtFGPB9THBSUY+0qyr6k/KIN2rZqUog==",
           "requires": {
             "@types/codemirror": "0.0.71",
             "codemirror": "^5.48.4"
@@ -1974,6 +1974,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abab": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.4.tgz",
+      "integrity": "sha512-Eu9ELJWCz/c1e9gTiCY+FceWxcqzjYEbqMgtndnuSqZSUCOL73TWNK2mHfIj4Cw2E/ongOp+JISVNCmovt2KYQ=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1990,6 +1995,22 @@
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
+    "acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w=="
+        }
+      }
+    },
     "acorn-jsx": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
@@ -1999,8 +2020,7 @@
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
     "address": {
       "version": "1.1.2",
@@ -2022,7 +2042,6 @@
       "version": "6.12.3",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
       "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2186,7 +2205,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -2240,8 +2258,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -2279,8 +2296,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -2306,14 +2322,12 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
-      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
-      "dev": true
+      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
     "axios": {
       "version": "0.19.2",
@@ -2459,7 +2473,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -2631,6 +2644,11 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -2988,8 +3006,7 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
     "chalk": {
       "version": "2.4.2",
@@ -3352,7 +3369,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -3360,8 +3376,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -3646,8 +3661,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -3953,21 +3967,322 @@
         }
       }
     },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+        }
+      }
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d3": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+      "requires": {
+        "d3-array": "1",
+        "d3-axis": "1",
+        "d3-brush": "1",
+        "d3-chord": "1",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-contour": "1",
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-dsv": "1",
+        "d3-ease": "1",
+        "d3-fetch": "1",
+        "d3-force": "1",
+        "d3-format": "1",
+        "d3-geo": "1",
+        "d3-hierarchy": "1",
+        "d3-interpolate": "1",
+        "d3-path": "1",
+        "d3-polygon": "1",
+        "d3-quadtree": "1",
+        "d3-random": "1",
+        "d3-scale": "2",
+        "d3-scale-chromatic": "1",
+        "d3-selection": "1",
+        "d3-shape": "1",
+        "d3-time": "1",
+        "d3-time-format": "2",
+        "d3-timer": "1",
+        "d3-transition": "1",
+        "d3-voronoi": "1",
+        "d3-zoom": "1"
+      }
+    },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+    },
+    "d3-brush": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
+      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "d3-chord": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+      "requires": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==",
+      "requires": {
+        "d3-dispatch": "^1.0.3"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "requires": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "d3-fetch": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
+      "requires": {
+        "d3-dsv": "1"
+      }
+    },
+    "d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "requires": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "d3-format": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
+      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+    },
+    "d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+    },
+    "d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
+    },
+    "d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+      "requires": {
+        "d3-color": "1",
+        "d3-interpolate": "1"
+      }
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
     },
+    "data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "requires": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      }
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -3989,6 +4304,11 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "decimal.js": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.0.tgz",
+      "integrity": "sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -4012,8 +4332,7 @@
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
     "deepmerge": {
       "version": "1.5.2",
@@ -4242,8 +4561,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
       "version": "1.1.2",
@@ -4380,6 +4698,21 @@
       "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
+    "domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "requires": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
+        }
+      }
+    },
     "domhandler": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
@@ -4448,7 +4781,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -4625,6 +4957,26 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
+    "escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
     "eslint": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
@@ -4799,8 +5151,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.3.1",
@@ -4831,14 +5182,12 @@
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "etag": {
       "version": "1.8.1",
@@ -4952,6 +5301,29 @@
         }
       }
     },
+    "expose-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/expose-loader/-/expose-loader-1.0.0.tgz",
+      "integrity": "sha512-xgt47+pEQrlCyCoO09cMKWf5qiurK6qMtvjUPm8+Uso5WwkNHeD47P0Zb3R9Kvk5zUcJWLax95xaaXDJCmoNjw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.6"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "express": {
       "version": "4.17.1",
       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
@@ -5016,8 +5388,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -5119,14 +5490,12 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5168,14 +5537,12 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -5363,14 +5730,12 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -5496,7 +5861,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -5577,14 +5941,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
       "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
       "requires": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -5775,6 +6137,14 @@
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
       "dev": true
     },
+    "html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "requires": {
+        "whatwg-encoding": "^1.0.5"
+      }
+    },
     "html-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
@@ -5954,7 +6324,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -5977,7 +6346,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -6240,8 +6608,7 @@
     "ip-regex": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
-      "dev": true
+      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
     },
     "ipaddr.js": {
       "version": "1.9.1",
@@ -6480,6 +6847,11 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-potential-custom-element-name": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz",
+      "integrity": "sha1-DFLlS8yjkbssSUsh6GJtczbG45c="
+    },
     "is-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
@@ -6522,8 +6894,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6558,8 +6929,12 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "jQuery": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/jQuery/-/jQuery-1.7.4.tgz",
+      "integrity": "sha1-8y3FyFpwRO6GS0RDue5F+UeLoTc="
     },
     "javascript-stringify": {
       "version": "2.0.1",
@@ -6633,8 +7008,62 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "jsdom": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.4.0.tgz",
+      "integrity": "sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==",
+      "requires": {
+        "abab": "^2.0.3",
+        "acorn": "^7.1.1",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.2.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.0",
+        "domexception": "^2.0.1",
+        "escodegen": "^1.14.1",
+        "html-encoding-sniffer": "^2.0.1",
+        "is-potential-custom-element-name": "^1.0.0",
+        "nwsapi": "^2.2.0",
+        "parse5": "5.1.1",
+        "request": "^2.88.2",
+        "request-promise-native": "^1.0.8",
+        "saxes": "^5.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^3.0.1",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0",
+        "ws": "^7.2.3",
+        "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w=="
+        },
+        "tough-cookie": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
+          "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
+          "requires": {
+            "ip-regex": "^2.1.0",
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
+        "ws": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
+          "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
+        }
+      }
     },
     "jsesc": {
       "version": "2.5.2",
@@ -6651,14 +7080,12 @@
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6669,8 +7096,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
       "version": "3.3.3",
@@ -6700,7 +7126,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
       "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -6758,7 +7183,6 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -6867,11 +7291,15 @@
         "path-exists": "^3.0.0"
       }
     },
+    "location": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/location/-/location-0.0.1.tgz",
+      "integrity": "sha1-+gcdITZd12Zh4ica3oyhMU3G9YA="
+    },
     "lodash": {
       "version": "4.17.19",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
-      "dev": true
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -6902,6 +7330,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -7129,14 +7562,12 @@
     "mime-db": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
     },
     "mime-types": {
       "version": "2.1.27",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
       "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
       "requires": {
         "mime-db": "1.44.0"
       }
@@ -7381,6 +7812,11 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "navigator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/navigator/-/navigator-1.0.1.tgz",
+      "integrity": "sha1-umnBkpo5qbUOt+n1wRF4eJyveQ8="
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -7552,11 +7988,15 @@
       "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
       "dev": true
     },
+    "nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
+    },
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -7742,7 +8182,6 @@
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
       "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dev": true,
       "requires": {
         "deep-is": "~0.1.3",
         "fast-levenshtein": "~2.0.6",
@@ -7918,8 +8357,7 @@
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
-      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
-      "dev": true
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
     "parse5-htmlparser2-tree-adapter": {
       "version": "5.1.1",
@@ -8023,8 +8461,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.2.2",
@@ -8701,8 +9138,7 @@
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
     "prepend-http": {
       "version": "1.0.4",
@@ -8776,8 +9212,7 @@
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-      "dev": true
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -8837,8 +9272,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.5.1",
@@ -8849,8 +9283,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "query-string": {
       "version": "4.3.4",
@@ -9148,7 +9581,6 @@
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -9172,6 +9604,24 @@
         "uuid": "^3.3.2"
       }
     },
+    "request-promise-core": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
+      "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
+      "requires": {
+        "lodash": "^4.17.19"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
+      "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
+      "requires": {
+        "request-promise-core": "1.1.4",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -9293,6 +9743,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rxjs": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.0.tgz",
@@ -9305,8 +9760,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9320,8 +9774,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
       "version": "1.26.10",
@@ -9359,6 +9812,14 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "requires": {
+        "xmlchars": "^2.2.0"
+      }
+    },
     "schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -9979,7 +10440,6 @@
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
       "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -10040,6 +10500,11 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -10225,6 +10690,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -10488,12 +10958,19 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
       "requires": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
       }
     },
+    "tr46": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz",
+      "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==",
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -10580,7 +11057,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -10588,14 +11064,12 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -10795,7 +11269,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -10901,8 +11374,7 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "v8-compile-cache": {
       "version": "2.1.1",
@@ -10941,7 +11413,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -10983,6 +11454,16 @@
         }
       }
     },
+    "vue-d3-cloud": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/vue-d3-cloud/-/vue-d3-cloud-0.2.0.tgz",
+      "integrity": "sha512-ALLN5RXXfb31J9w0CySZOcg8B57fkvHWFVg6ZlHXe6O3xKq+qsUNZkMYIe4LpsAy5BRgz+bG7NtAjQFydAhIfQ==",
+      "requires": {
+        "d3": "^5.7.0",
+        "d3-cloud": "^1.2.5",
+        "vue": "^2.5.17"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
@@ -11025,6 +11506,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-infinite-loading": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
+      "integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g=="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz",
@@ -11137,6 +11623,22 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
       "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
     },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "requires": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "requires": {
+        "xml-name-validator": "^3.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
@@ -11282,6 +11784,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
+    },
     "webpack": {
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
@@ -11739,6 +12246,36 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "whatwg-url": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.1.0.tgz",
+      "integrity": "sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==",
+      "requires": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^2.0.2",
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
+        }
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -11757,8 +12294,7 @@
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
     "worker-farm": {
       "version": "1.7.0",
@@ -11831,6 +12367,21 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7b71d78..57f31a3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,22 +12,30 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@toast-ui/editor": "^2.3.1-alpha",
-    "@toast-ui/vue-editor": "^2.3.0",
+    "@toast-ui/vue-editor": "^2.3.1",
     "aos": "^3.0.0-beta.6",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
+    "jQuery": "^1.7.4",
+    "jquery": "^3.5.1",
+    "jsdom": "^16.4.0",
+    "location": "0.0.1",
+    "navigator": "^1.0.1",
     "tui-editor": "^1.4.10",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
+    "vue-d3-cloud": "^0.2.0",
     "vue-google-login": "^2.0.5",
+    "vue-infinite-loading": "^2.4.5",
     "vue-position-sticky": "^0.2.1",
     "vue-roller": "^1.12.3",
     "vue-router": "^3.3.4",
     "vuelidate": "^0.7.5",
     "vuetify": "^2.2.11",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "xmlhttprequest": "^1.8.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.14.0",
@@ -40,6 +48,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "expose-loader": "^1.0.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
new file mode 100644
index 0000000..ad6d8af
--- /dev/null
+++ b/frontend/src/components/ChildComment.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div>
+      <h5>{{ child.author }}</h5>
+      <p>{{ child.content }}</p>
+    </div>
+    <div>
+      <v-btn
+        class="mx-2 red accent-3 text-white"
+        v-if="child.isauthor"
+        @click="onCommentDelete(child)"
+      >삭제</v-btn>
+      <v-btn 
+        class="green accent-4"
+        color="white"
+        v-if="child.isauthor"
+        @click="ClickChildUpdateBtn(child)"
+      >수정</v-btn>
+      <div v-if="ChildUpdateFlag" class="update-box">
+				<v-text-field
+					v-model="ChildUpdateInput"
+					solo
+					rows="2"
+					clearable
+				></v-text-field>
+				<v-btn @click="onChildUpdate(child)" class="update-btn">수정하기</v-btn>
+			</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+const storage = window.sessionStorage
+
+export default {
+  name: 'ChildComment',
+  data() {
+    return {
+      child: this.$attrs.child,
+      ChildCommentInput: '',
+			ChildUpdateInput: '',
+			ChildUpdateFlag: false,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // *** Child Comment ***
+		// 대댓글 수정 버튼 - ChildUpdateFlag 토글
+		ClickChildUpdateBtn(one_child) {
+      this.ChildUpdateInput = one_child.content
+			this.ChildUpdateFlag = !this.ChildUpdateFlag
+		},
+		onChildUpdate(one_child) {
+			if (one_child.author === storage.getItem("login_user") && one_child.uid === Number(storage.getItem("uid"))) {
+				const tmp_comment = {
+					content: this.ChildUpdateInput,
+					cid: one_child.cid
+				}
+				axios.put(API_URL + `api/v3/`, tmp_comment)
+					.then(() => {
+						alert('수정되었습니다.')
+						this.$emit('Click-Child-Update-Btn')
+						this.ChildUpdateInput = ''
+						this.ChildUpdateFlag = !this.ChildUpdateFlag
+					})
+			} else {
+				alert('비정상적인 접근입니다')
+			}
+    },
+    onCommentDelete(one_child) {
+			if (one_child.author === storage.getItem("login_user") && one_child.uid === Number(storage.getItem("uid"))) {
+				axios.delete(API_URL + `api/v3/${one_child.cid}`)
+					.then(() => this.$emit('Click-Child-Delete-Btn'))
+			} else {
+				alert('비정상적인 접근입니다')
+			}
+		},
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Cloud.vue b/frontend/src/components/Cloud.vue
new file mode 100644
index 0000000..99d3eca
--- /dev/null
+++ b/frontend/src/components/Cloud.vue
@@ -0,0 +1,165 @@
+<template>
+   <div>
+      <div class="wordCloud" ref="wordCloud"></div>
+      <div>
+         {{onWordClick}}
+      </div>
+   </div>
+</template>
+
+<script>
+import * as d3 from "d3";
+import * as cloud from 'd3-cloud';
+// const storage = window.sessionStorage;
+
+export default {
+    data() {
+        return {
+            layout: {},
+            chart: {},
+                  fill: null,
+                  test: ''
+        }
+    },
+
+    props: {
+        data: {
+            type: Array,
+            required: true,
+        },
+        fontSizeMapper: {
+            type: Function,
+            required: true,
+        },
+        onWordClick: {
+               type: Function,
+               default: (word) => { 
+                  window.alert(`You clicked hi ${word.text}`) 
+                  // storage.setItem("tag",word.text)
+                  // console.log(storage.getItem("tag"))
+               }
+        },
+        rotate: {
+            type: [Function, String, Number],
+            default: 0,
+        },
+        font: {
+            type: [String, Function],
+            default: 'Serif'
+        },
+        width: {
+            type: [Number, String],
+            default: 960,
+        },
+        height: {
+            type: [Number, String],
+            default: 500,
+        },
+        padding: {
+            type: [Number, String],
+            default: 0,
+        },
+        spiral: {
+            type: String,
+            default: "archimedean",
+        },
+        coloring: {
+            type: String,
+            default: "random",
+        },
+        colors: {
+            type: Array,
+        }
+    },
+
+    mounted() {
+        this.createCanvas()
+    },
+
+    watch: {
+        data() {
+            this.createCanvas()
+        },
+        rotate() {
+            this.createCanvas()
+        },
+        font() {
+            this.createCanvas()
+        },
+        padding() {
+            this.createCanvas()
+        },
+        spiral() {
+            this.createCanvas()
+        },
+        colors() {
+            this.createCanvas()
+        },
+        coloring() {
+            this.createCanvas()
+        }
+    },
+
+    methods: {
+        createCanvas: function() {
+            const wordCounts = this.data.map(
+                text => ({ ...text })
+            );
+
+            d3.select(this.$el).selectAll('*').remove();
+
+            const layout = cloud()
+            .size([this.width, this.height])
+            .words(wordCounts)
+            .padding(this.padding)
+            .spiral(this.spiral)
+            .rotate(this.rotate)
+            .font(this.font)
+            .fontSize(this.fontSizeMapper)
+            .on('end', this.end);
+            
+            if(this.colors)
+                this.fill = d3.scaleOrdinal().range(this.colors)
+            else
+                this.fill = d3.scaleOrdinal(d3.schemeCategory10)
+
+            layout.start();
+        },
+        end: function(words) {
+            let _fill;
+            switch(this.coloring){
+                case "random":
+                    _fill = (d, i) => this.fill(i);
+                    break;
+                case "size":
+                    _fill = (d) => this.fill(d.size);
+                    break;
+                default:
+                    _fill = (d, i) => this.fill(i);
+            }
+
+            d3.select(this.$el)
+            .append('svg')
+            .attr('width', this.width)
+            .attr('height', this.height)
+            .append('g')
+            .attr('transform', `translate(${this.width / 2},${this.height / 2})`)
+            .selectAll('text')
+            .data(words)
+            .enter()
+            .append('text')
+            .style('font-family', d => d.font)
+            .style('font-size', d => {
+                return `${d.size}px`
+            })
+            .style('fill', _fill)
+            .attr('text-anchor', 'middle')
+            .attr('transform',d => { 
+                return `translate(${[d.x, d.y]})rotate(${d.rotate})`
+            })
+            .text(d => d.text)
+            .on('click', d => this.$emit("submit-tagname", d));
+        },
+    }
+ }
+</script>
diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 7b6be50..e228004 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -135,7 +135,7 @@ export default {
 }
 .top_desc {
   padding:0 0;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 1;
   letter-spacing: -0.6px;
   font-family: Noto Sans Light, sans-serif;
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 14049b0..41314d5 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -1,69 +1,164 @@
 <template>
   <div>
     <Navbar></Navbar>
-		<template>
-			<v-card flat style="margin-top:130px">
-				<v-tabs
-					background-color="transparent"
-					centered
-					color="black"
-					slider-color="#6987f7"
-					slider-size="3"
-				>
-					<v-tab @click="postread(item)" v-for="item in items" :key="item">
-						{{ item }}
-					</v-tab>
-				</v-tabs>
-			</v-card>
-		</template>
-		<div class="inner">
-			<v-tabs-items v-model="tab">
-				<v-tab-item v-for="(item) in items" :key="item">
-					<!-- <v-row v-if="tags.length">
-						
-					</v-row> -->
-				</v-tab-item>
-			</v-tabs-items>
-		</div>
+      <div class="doContent">
+         <div class="feature_feed">
+            <div class="inner_feature">
+               <h2 id="do_top do_feed">Forum</h2>
+               <p class="top_desc"><span style="font-style:'Inter', sans-serif; font-weight:800">DO!</span>의 모든 태그들을 만나보세요</p>
+            </div>
+         </div>
+         <div id="app" class="innner">
+            <cloud 
+               :data="words" 
+               :fontSizeMapper="fontSizeMapper"
+               :colors="colors"
+               @submit-tagname="searchtagname"
+            />
+         </div>
+         
+      </div>
   </div>
 </template>
 
 <script>
 import Navbar from '../components/Navbar.vue'
-// import axios from 'axios'
+import Cloud from '../components/Cloud.vue'
+import axios from 'axios'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
+// import Cloud from 'vue-d3-cloud'
 
 AOS.init();
 
-// const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
 // const storage = window.sessionStorage
 
 export default {
-	name: 'Forum',
-	components: {
-    Navbar,
-	},
-	data() {
-		return {
-			tab: null,
-      items: [
-        '인기순', '이름순',
-      ],
-		}
-	}
+   name: 'Forum',
+   components: {
+      Navbar,
+      Cloud
+   },
+   props: {
+      onWordClick: {
+         type: Function,
+         default: (word) => { 
+            axios.get(API_URL+'api/v4/'+word.text)
+               .then(({data})=>{
+                  // 콘텐츠 미리보기 슬라이스
+                  data.forEach(el => {
+                  el.tmp = el.content
+                  // console.log(el)
+                  if (el.content.length > 40) {
+                     // 마크다운 사진 제외
+                     el.content = el.content.replace(/!\[.*\)+/, "")
+                     // 최대 길이 슬라이스
+                     el.content = el.content.slice(0, 40)
+                  }
+                  // 작성 날짜만 보이게 수정
+                  let year = el.publishedTime.slice(0,4);
+                  let month = el.publishedTime.slice(5,7);
+                  let day = el.publishedTime.slice(8,10);
+                  el.publishedTime = year+"년 "+month+"월 "+day+"일"
+                  // this.posts = data
+                  });
+                  console.log(data);
+                  return {test:data}
+               })
+         },
+      },
+   },
+   data() {
+      return {
+         tab: null,
+         words: [],
+         colors:["ffbe0b","628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6","fb5607","ff006e","8338ec","3a86ff","11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+         // ["11D9C3","23C7CF","f8961e","f9c74f","90be6d","43aa8b","EE67AF","FF63A6","11D9C3","23C7CF","35B6DB","47A4E6"],
+         // ["11D9C3","23C7CF","35B6DB","47A4E6","5993F2"
+         // ,"628AF8","8581E6","A879D4","CB70C1","EE67AF","FF63A6"],
+         fontSizeMapper: word => Math.log2(word.value) * 3,
+         spiral: "archimedean",
+         tag: '',
+         posts : {
+            pid: '',
+            title: '',
+            content: '',
+            publishedTime: '',
+            thumbnail:'',
+         },
+      }
+   },
+   created(){
+      var vm = this;
+      axios.get(API_URL+"api/v4")
+      .then(function(response) {
+        // console.log(response);
+        vm.words = response.data;
+      })
+      .catch(function(err) {
+        console.log(err);
+      })
+   },
+   computed: {
+      
+   },
+   mounted(){
+      this.onWordClick();
+   },
+   methods: {
+      searchtagname(name){
+         console.log(name);
+      }
+   },
 }
 </script>
 
 <style>
-.inner {
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.inner_feature h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+}
+.top_desc {
+  padding:0 0;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: -0.6px;
+  font-family: Noto Sans Light, sans-serif;
+}
+.doContent {
+  max-width: 1150px;
+  min-width: 1100px; 
+  margin: 0 auto 0;
+  padding: 0 20px;
+}
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.feature_main {
+  width: 100%;
+  height: 133px;
+  padding: 151px 0 0;
+}
+.innner {
+   padding-top:20px;
   min-width: 1100px;
   max-width: 1150px;
-	padding: 130px 20px 0px 20px;
-	margin: 0 auto;
+   margin: 0 auto;
+}
+.wordCloud{
+   text-align: center;
+}
+.wordCloud text{
+  font-family: 'Inter','NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif !important;
 }
-/* .v-tab {
-	margin: 0 auto;
-} */
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index dbb9c88..fe9f85c 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -37,54 +37,56 @@
       <div class="content_area">
         <!-- 게시글 탭 -->
         <v-tabs-items v-model="tab">
-        <!-- 게시글 미리보기 -->
+          <!-- 게시글 미리보기 -->
           <v-tab-item v-for="(item) in items" :key="item">
             <v-row v-if="posts.length">
-            <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'"
-              style="padding:1rem">
+              <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'"
+                style="padding:1rem">
                 <v-hover>
-                <template v-slot="{hover}">
-                <v-card 
-                  @click="postdetail(post)"
-                  height="406px"
-                  max-width="350px"
-                  :elevation="hover ? 8 : 2"
-                >
-                  <v-img
-                    class="white--text align-end"
-                    height="180px"
-                    :src="post.thumbnail"
-                  />
-                  <div class="inner_card">
-                    <!-- 제목이 가로범위 초과시 ... -->
-                    <div class="card_title"><h5>{{post.title}}</h5></div>
-                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
-                    <!-- 내용 -->
-                    <div class="card_content">
-                      <p>{{post.content}}</p>
-                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
-                    </div>
-                    <!-- 날짜 -->
-                    <div class="card_date">{{post.publishedTime}}</div>
-                    <!-- 작성자, 좋아요 -->
-                    <div class="card_info">
-                      <div class="author">
-                        {{post.author}}
+                  <template v-slot="{hover}">
+                  <v-card 
+                    @click="postdetail(post)"
+                    height="406px"
+                    max-width="350px"
+                    :elevation="hover ? 8 : 2"
+                  >
+                    <v-img
+                      class="white--text align-end"
+                      height="180px"
+                      :src="post.thumbnail"
+                    />
+                    <div class="inner_card">
+                      <!-- 제목이 가로범위 초과시 ... -->
+                      <div class="card_title"><h5>{{post.title}}</h5></div>
+                      <!-- 내용 -->
+                      <div class="card_content">
+                        <p>{{post.content}}</p>
+                        <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
                       </div>
-                      <div class="liked">
-                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
-                        {{post.likes}}
+                      <!-- 날짜 -->
+                      <div class="card_date">{{post.publishedTime}}</div>
+                      <!-- 작성자, 좋아요 -->
+                      <div class="card_info">
+                        <div class="author">
+                          {{post.author}}
+                        </div>
+                        <div class="liked">
+                          <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                          {{post.likes}}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </v-card>
+                  </v-card>
                 </template>
                 </v-hover>
               </v-col>
             </v-row>
             <v-row v-else>
               게시글이 없습니다.
-              </v-row>
+            </v-row>
+            <infinite-loading @infinite="infiniteHandler" spinner="waveDots">
+              <div slot="no-more" style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px;">목록의 끝입니다 :)</div>
+            </infinite-loading>
           </v-tab-item>
         </v-tabs-items>
       </div>
@@ -94,9 +96,11 @@
 
 <script>
 import Navbar from '../components/Navbar.vue'
+
 import axios from 'axios'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
+import InfiniteLoading from 'vue-infinite-loading';
 
 AOS.init();
 
@@ -110,7 +114,7 @@ export default {
     return {
       tab: null,
       items: [
-        '최신', '조회수', '좋아요'
+        '조회수', '좋아요', '최신'
       ],
       posts : {
         pid: '',
@@ -118,13 +122,29 @@ export default {
         content: '',
         publishedTime: '',
         thumbnail:'',
-      }
+      },
+      limit: 1
     }
   },
   created() {
     this.postread('최신')
+    // 무한 스크롤
+    async function getTopicFromApi() {
+          try {
+              const init = await fetch(`/api/idol/uwasa/pages/0`, {method: "GET"})
+              const data = await init.json()
+              return data
+          } catch(exc) {
+              console.error(exc)
+          }
+      }
+      getTopicFromApi().then(data => {
+          console.log("fromAPI", data)
+          this.topicData = data
+      })
   },
   components: {
+    InfiniteLoading,
     Navbar,
   },
   methods: {
@@ -162,6 +182,31 @@ export default {
         });
       })
       .catch(err => console.log(err))
+    },
+    // 무한스크롤 핸들러
+    infiniteHandler($state) {
+      const EACH_LEN = 30
+      fetch("/api/idol/uwasa/pages/" + (this.limit), {method: "get"}).then(resp => {
+        return resp.json()
+      }).then(data => {
+        setTimeout(() => {
+          if(data.length) {
+            this.topicData = this.topicData.concat(data)
+            $state.loaded()
+            this.limit += 1
+            console.log("after", this.topicData.length, this.limit)
+            // 끝 지정(No more data) - 데이터가 EACH_LEN개 미만이면 
+            if(data.length / EACH_LEN < 1) {
+              $state.complete()
+            }
+          } else {
+            // 끝 지정(No more data)
+            $state.complete()
+          }
+        }, 1000)
+      }).catch(err => {
+        console.error(err);
+      })
     }
   }
 }
diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
new file mode 100644
index 0000000..a9ee156
--- /dev/null
+++ b/frontend/src/components/Myblog.vue
@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <Navbar></Navbar>
+    <div class="inner">
+      <div class="blog_info">
+        <div class="profile_img">
+          <img v-bind:src=profileImage class="thumb_profile" alt>
+        </div>
+        <div class="profile_user">
+          {{nickname}}
+          <p>
+            {{introduce}}
+          </p>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="sns_link">
+        <div v-if="github" class="sns_addr">
+          <a :href="github"><v-icon style="padding-right:5px" large>fab fa-github</v-icon></a>
+        </div>
+        <div v-if="instagram" class="sns_addr">
+          <a :href="instagram"><v-icon style="padding-right:5px" large>fab fa-instagram</v-icon></a>
+        </div>
+        <div v-if="facebook" class="sns_addr">
+          <a :href="facebook"><v-icon style="padding-right:5px" large>fab fa-facebook</v-icon></a>
+        </div>
+      </div>
+      <div class="toptab">
+        <v-tabs
+          v-model="tab"
+					background-color="transparent"
+					centered
+					color="black"
+					slider-color="#6987f7"
+					slider-size="3"
+				>
+					<v-tab @click="postread(item)" v-for="item in items" :key="item">
+						{{ item }}
+					</v-tab>
+				</v-tabs>
+    </div>
+    <div class="contain">
+      <div class="content_area">
+        <!-- 게시글 탭 -->
+        <v-tabs-items v-model="tab">
+        <!-- 게시글 미리보기 -->
+          <v-tab-item v-for="(item) in items" :key="item">
+            <v-row v-if="posts.length">
+            <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'"
+              style="padding:1rem">
+                <v-hover>
+                <template v-slot="{hover}">
+                <v-card 
+                  @click="postdetail(post)"
+                  height="406px"
+                  max-width="350px"
+                  :elevation="hover ? 8 : 2"
+                >
+                  <v-img
+                    class="white--text align-end"
+                    height="180px"
+                    :src="post.thumbnail"
+                  />
+                  <div class="inner_card">
+                    <!-- 제목이 가로범위 초과시 ... -->
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
+                </v-card>
+                </template>
+                </v-hover>
+              </v-col>
+            </v-row>
+            <v-row v-else>
+              게시글이 없습니다.
+              </v-row>
+          </v-tab-item>
+        </v-tabs-items>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const storage = window.sessionStorage
+import Navbar from '../components/Navbar.vue'
+import axios from 'axios'
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+
+export default {
+  name: 'Myblog',
+  components: {
+		Navbar,
+  },
+  data(){
+    return{
+      profileImage: storage.getItem("profileImage"),
+      nickname: storage.getItem("login_user"),
+      introduce : '',
+      github: '',
+      facebook: '',
+      instagram: '',
+      tab: null,
+      items: [
+        '내글', '임시저장',
+      ],
+      posts : {
+        pid: '',
+        title: '',
+        content: '',
+        publishedTime: '',
+        thumbnail:'',
+      }
+    }
+  },
+  created(){
+    var uid = sessionStorage.uid;
+		axios
+		.get(API_URL+'api/v1/'+uid)
+		.then(({data})=>{
+      this.introduce = data.introduce
+      this.github = 'https://github.com/'+data.github
+			this.facebook = 'https://facebook.com/'+data.facebook
+			this.instagram = 'https://instagram.com/'+data.instagram
+    })
+    this.postread("내글")
+  },
+  methods: {
+    postread(item){
+      var uid = sessionStorage.uid;
+      this.posts=[]
+      if (item === "내글") {
+        axios.get(API_URL+'api/v2/u/'+uid)
+          .then(({data})=>{
+            data.forEach(el => {
+            el.tmp = el.content
+            if (el.content.length > 120) {
+              // 마크다운 사진 제외
+              el.content = el.content.replace(/!\[.*\)+/, "")
+            }
+            // 작성 날짜만 보이게 수정
+            let year = el.publishedTime.slice(0,4);
+            let month = el.publishedTime.slice(5,7);
+            let day = el.publishedTime.slice(8,10);
+            // console.log(year+"년 "+month+"월 "+day+"일")
+            el.publishedTime = year+"년 "+month+"월 "+day+"일"
+            this.posts = data
+            });
+          })
+      } else if (item === '임시저장') {
+        axios.get(API_URL+'api/v2/temp/'+uid)
+          .then(({data})=>{
+          // 콘텐츠 미리보기 슬라이스
+            data.forEach(el => {
+              el.tmp = el.content
+              if (el.content.length > 120) {
+                // 마크다운 사진 제외
+                el.content = el.content.replace(/!\[.*\)+/, "")
+              }
+              // 작성 날짜만 보이게 수정
+              let year = el.publishedTime.slice(0,4);
+              let month = el.publishedTime.slice(5,7);
+              let day = el.publishedTime.slice(8,10);
+              // console.log(year+"년 "+month+"월 "+day+"일")
+              el.publishedTime = year+"년 "+month+"월 "+day+"일"
+              this.posts = data
+
+            });
+          }).catch(err => console.log(err))
+      }
+    },
+    postdetail(one_post) {
+      storage.removeItem("pid")
+      // 임시 저장
+      if(one_post.isTemp){
+        this.$router.push({name: 'texteditor', params: {data: one_post}})
+      }else if(!one_post.isTemp){
+        this.$router.push({name: 'postdetail', params: {data: one_post}})
+      }
+    },
+  }
+}
+</script>
+
+<style>
+.inner {
+  min-width: 1100px;
+  max-width: 1150px;
+  padding: 130px 20px 0px 20px;
+  margin: 0 auto;
+}
+.blog_info{
+  display: flex;
+  align-items: center;
+}
+.profile_img{
+  box-sizing: border-box;
+}
+.profile_img img{
+  display: block;
+  width: 8rem;
+  height: 8rem;
+  object-fit: cover;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 4px 0px;
+  border-radius: 50%;
+  
+}
+.profile_user{
+  display: flex;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  justify-content: center;
+  margin-left: 1rem;
+}
+.line {
+  width: 100%;
+  height: 1px;
+  margin-top: 2rem;
+  margin-bottom: 1.5rem;
+  background: rgb(233, 236, 239);
+}
+.sns_link {
+  display: flex;
+}
+.sns_addr a i {
+  margin: 0 10px 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 60a478a..ffd8f47 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -11,19 +11,17 @@
       <router-link to="/introduce">소개</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      <router-link to="/feed">피드</router-link>
+      <router-link to="/forum">포럼</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      포럼
+      <router-link to="/feed">피드</router-link>
     </v-toolbar-items>
 
+
       <div class="notice">
         <v-icon small>fas fa-volume-down</v-icon>
-        <div id="app" class="output">
-          <p>
-            <a @click="postdetail(text)" class="text">{{ text }}</a>
-           
-          </p>
+        <div class="banner" @click="gotonotice">
+          {{list[0].title}}
         </div>
 			</div>
 			<v-spacer></v-spacer>
@@ -48,25 +46,31 @@
             <img v-bind:src=profileImage class="thumb_profile" alt>
         </div>
         <!--프로필 클릭시 팝업되는 드롭다운 메뉴-->
-        <v-card class="shortcuts">
-          <v-list v-if="profile">
-            <v-list-item>
-              내블로그 
-            </v-list-item>
-            <v-list-item>
-              <router-link to="/setting">설정</router-link>
-            </v-list-item>
-            <v-list-item v-if="!google_login" @click="onClickLogout">
-              로그아웃
-            </v-list-item>
-            <v-list-item v-if="google_login" @click="onClickLogout">
-              <GoogleLogin :params="params" :logoutButton=true>로그아웃</GoogleLogin>
-            </v-list-item>
-          </v-list>
-        </v-card>
+        <div class="shortcuts" id="shortcuts" v-if="profile">
+          <div class="inner_shortcuts">
+            <div class="info_profile">
+              <span class="user_nickname">{{nickname}}</span>
+              <span class="user_email">{{userEmail}}</span>
+            </div>
+            <div class="list_menu">
+              <div class="myblog">
+                <router-link :to="{path: `/doblog/${this.uid}`}">내 블로그</router-link>
+              </div>
+              <div class="setting">
+                <router-link to="/setting">설정</router-link>
+              </div>
+              <div class="logout" v-if="!google_login" @click="onClickLogout">
+                로그아웃
+              </div>
+              <div class="logout" v-if="google_login" @click="onClickLogout">
+                <GoogleLogin :params="params" :logoutButton=true>로그아웃</GoogleLogin>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div v-if="isLogin" class="info_blog" @click="profileshow"> 
-        <v-icon small color="black" style="margin: 20px 4px 0px 0px">fas fa-angle-down</v-icon>
+        <v-icon small color="black" style="margin: 20px 4px 0px 5px">fas fa-angle-down</v-icon>
       </div>
   </v-app-bar>
 </template>
@@ -74,7 +78,7 @@
 <script>
 const storage = window.sessionStorage
 import GoogleLogin from 'vue-google-login';
-import axios from 'axios'
+import axios from 'axios';
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
@@ -86,19 +90,19 @@ export default {
 
   },
   data() {
-    
     return {
+      uid: storage.getItem("uid"),
+      nickname: storage.getItem("login_user"),
+      userEmail: "사용자메일@가져오기.com",
       profile: false,
       isLogin: this.$store.state.isLoggedIn,
       google_login: storage.getItem("google_login"),
       profileImage: storage.getItem("profileImage"),
 
-      list: [],
+      list: '',
       index: 0,
       text: '',
       speed: 2000
-
-
     }
   },
   computed: {
@@ -127,17 +131,6 @@ export default {
     profileshow() {
       this.profile = !this.profile
     },
-    getTextFromList() {
-      var vm = this;
-      
-      vm.text = vm.list[vm.index].title;
-      // vm.textURL = vm.list[vm.index].url;
-      vm.index += 1;
-      
-      if (vm.index >= vm.list.length) {
-        vm.index = 0;
-      }
-    },
     postdetail(text) {
       for(var i =0; i<this.list.length; i++){
         if( text === this.list[i].title){
@@ -148,30 +141,27 @@ export default {
           this.$router.push({name: 'postdetail', params: {data: this.list[i]}}).catch(()=>{});
         }
       }
-      
     },
-
+    gotonotice(){
+      this.$router.push({path:'notice'})
+    }
   },
   created() {
     this.loginChecker()
-
+    //공지사항 받아옴
     axios.get(API_URL + 'api/v2/notice')
         .then(res => {
           // this.post = res.data
           // pid를 활용하여 게시글로 이동
-          for(var i=0; i<res.data.length; i++){
-            this.list[i] = res.data[i];
-          }
-
+          this.list = res.data
     })
+    sessionStorage.setItem("noticelist",this.list)
   },
-
   mounted(){
     // this.text = this.list[this.index];
     this.loginChecker();
     this.text = "공지사항";
     setInterval(this.getTextFromList, this.speed);
-    
   },
 
   // watch: {
@@ -231,8 +221,30 @@ div > .newpost > a >button:hover {
 	text-decoration: none;
 }
 .notice {
+  display: flex;
   margin : 0px 0px 0px 54px ;
-	padding: 0px 0px 0px 0px;
+	/* padding: 0px 0px 0px 0px; */
+
+}
+.banner {
+  width: 100%;
+  height: 1.5rem;
+  overflow: hidden;
+  margin:0 auto; 
+  padding-left:8px; 
+}
+.rolling {
+  position: relative;
+  width: 100%;
+  height: auto;
+  margin: 0px; 
+  padding:0; 
+  list-style: none; 
+}
+.rolling li {
+  margin:0; 
+  padding:0;
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
 }
 .notice::before {
   content:'|';
@@ -257,11 +269,45 @@ div > .newpost > a >button:hover {
   border-radius:50%;
 }
 .shortcuts{
-  position : fixed;
-  top: 80px;
-  width: 150px;
-  right: 10%;
-  background-color: aqua;
+  position : absolute;
+  top: 85px;
+  width: 230px;
+  right: 15px;
+  border-radius: 3px;
+  background-color: white;
+  box-sizing: content-box;
+  box-shadow: 0 2px 5px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3)
+}
+.inner_shortcuts{
+  padding: 20px 0 15px 25px
+}
+.info_profile{
+  padding-bottom: 20px;
+}
+.user_nickname{
+  font-size:16px;
+  display: block;
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user_email{
+  font-family: Noto Sans Light, sans-serif;
+  overflow: hidden;
+  padding: 2px 0 0;
+  text-overflow: ellipsis;
+  white-space:nowrap;
+  color:#909090;
+  font-size:14px;
+}
+.list_menu{
+  font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+  font-size: 14px;
+}
+.myblog, .setting, .logout {
+  padding: 3px 0 8px ;
+  cursor: pointer;
 }
 .newpost {
   margin-right:20px;
diff --git a/frontend/src/components/Notice.vue b/frontend/src/components/Notice.vue
new file mode 100644
index 0000000..ca51489
--- /dev/null
+++ b/frontend/src/components/Notice.vue
@@ -0,0 +1,214 @@
+<template>
+    <div>
+    <Navbar></Navbar>
+    <div class="doContent">
+      <div class="feature_feed">
+        <div class="inner_feature">
+          <h2 id="do_top do_feed">Notice</h2>
+          <p class="top_desc">공지사항과 새로운 업데이트 소식을 게시합니다</p>
+        </div>
+      </div>
+      <div class="content">
+        <v-row v-if=posts.length>
+          <v-col cols="4" v-for="(post, index) in posts" :key="index+'_posts'">
+            <v-hover>
+              <template v-slot="{hover}">
+                <v-card 
+                  @click="postdetail(post)"
+                  height="406px"
+                  max-width="350px"
+                  :elevation="hover ? 8 : 2"
+                >
+                  <v-img
+                    class="white--text align-end"
+                    height="180px"
+                    :src="post.thumbnail"
+                  />
+                  <div class="inner_card">
+                    <!-- 제목이 가로범위 초과시 ... -->
+                    <div class="card_title"><h5>{{post.title}}</h5></div>
+                    <!-- <v-card-subtitle class="pb-0">{{ item }}</v-card-subtitle> -->
+                    <!-- 내용 -->
+                    <div class="card_content">
+                      <p>{{post.content}}</p>
+                      <div v-if="!post.content">게시글 내용이 비어있습니다.</div>
+                    </div>
+                    <!-- 날짜 -->
+                    <div class="card_date">{{post.publishedTime}}</div>
+                    <!-- 작성자, 좋아요 -->
+                    <div class="card_info">
+                      <div class="author">
+                        {{post.author}}
+                      </div>
+                      <div class="liked">
+                        <v-icon x-small style="margin-top:-2px" color="black">fas fa-heart</v-icon>
+                        {{post.likes}}
+                      </div>
+                    </div>
+                  </div>
+                </v-card>
+              </template>
+            </v-hover>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          게시글이 없습니다.
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+import axios from 'axios'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+
+AOS.init();
+
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
+// const API_URL = 'http://localhost:8081/'
+const storage = window.sessionStorage
+
+export default {
+  name: 'Notice',
+  components: {
+    Navbar,
+  },
+  data() {
+    return{
+      posts : {
+        pid: '',
+        title: '',
+        content: '',
+        publishedTime: '',
+        thumbnail:'',
+      }
+    }
+  },
+  created() {
+    this.postread()
+  },
+  methods: {
+    postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
+    postread() {
+      axios.get(API_URL+`/api/v2/notice`)
+      .then(({data})=>{
+        // 콘텐츠 미리보기 슬라이스
+        data.forEach(el => {
+          el.tmp = el.content
+          // console.log(el)
+          if (el.content.length > 40) {
+            // 마크다운 사진 제외
+            el.content = el.content.replace(/!\[.*\)+/, "")
+            // 최대 길이 슬라이스
+            el.content = el.content.slice(0, 40)
+          }
+          // 작성 날짜만 보이게 수정
+          let year = el.publishedTime.slice(0,4);
+          let month = el.publishedTime.slice(5,7);
+          let day = el.publishedTime.slice(8,10);
+          el.publishedTime = year+"년 "+month+"월 "+day+"일"
+          this.posts = data
+        });
+      })
+      .catch(err => console.log(err))
+    }
+  }
+}
+</script>
+
+<style>
+.inner_feature h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+}
+.top_desc {
+  padding:0 0;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: -0.6px;
+  font-family: Noto Sans Light, sans-serif;
+}
+.info_feed {
+  float: right;
+  margin: -39px 0 0;
+  color: #909090;
+  font-size: 13px;
+}
+.feed_cnt {
+  display: inline-block;
+  font-size: 24px;
+  vertical-align: middle;
+  padding: 0 0 0 4px;
+}
+.doContent {
+  max-width: 1150px;
+  min-width: 1100px; 
+  margin: 0 auto 0;
+  padding: 0 20px;
+}
+.feature_feed{
+  height: 133px;
+  padding: 151px 0 110px;
+  border-bottom: solid 2px black;;
+}
+.feature_main {
+  width: 100%;
+  height: 133px;
+  padding: 151px 0 0;
+}
+.content {
+  min-width: 1100px; 
+  padding: 30px 0 0;
+}
+.inner_card {
+  padding: 1.5rem;
+}
+.card_title{
+  line-height:1.2rem;
+  height: 1.2rem;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  margin: 0 0 5px;
+}
+.card_title h5{
+  font-size: 1rem;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight: 800;
+}
+.card_content{
+  width:100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  white-space: normal;
+  line-height: 1.5;
+  height:4.5em;
+  color: rgb(73, 80, 87);
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif;
+  font-weight:400;
+
+  margin: 0 0 1.5rem;
+}
+.card_content p{
+  height: 100%
+}
+.card_date {
+  font-size:0.75rem;
+  padding: 5px 0 5px;
+  color: rgb(134, 142, 150);
+}
+.liked{
+  float:right; 
+  margin-top: -24px
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 05afd69..1cec0e8 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -13,6 +13,7 @@
 							item-value="abbr"
 							menu-props="auto"
 							hide-details
+							dense
 							label="Solo field"
 							solo
 							flat
@@ -22,6 +23,7 @@
 						<v-text-field
 							v-model="kword"
 							hide-details
+							dense
 							flat
 							solo
 							autofocus
@@ -45,14 +47,18 @@
 				<h3><span>{{kword}}</span>에 대한 검색 결과는 <strong>{{postcnt}}</strong>개입니다.</h3>
 			</div>
 			<div v-if="posts.length>0">
-				<div v-for="post in posts" :key="post.pid" class="post_list">
+				<div v-for="post in posts" :key="post.pid" class="post_list" @click="postdetail(post)">
 					<div class="profile">
 						<!-- 작성자 프로필 이미지. 클릭 시 개인 블로그로 이동-->
-						<a><img :src="post.thumbnail"></a>
+						<a><img :src="profileImg"></a>
 						<div class="nickname">
 							{{post.author}}
 						</div>
 					</div>
+					<!-- 기본섬네일로 지정되어 있으면 검색 시 표시 안 함 -->
+					<div class="post_thumbnail" v-if="post.thumbnail!=basicthumb">
+						<img :src="post.thumbnail">
+					</div>
 					<div class="post_info">
 						<h2>{{post.title}}</h2>
 						<p class="post_content">{{post.content}}</p>
@@ -72,6 +78,7 @@ import axios from 'axios'
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
+const storage = window.sessionStorage
 
 export default {
 	name: 'Introduce',
@@ -80,25 +87,27 @@ export default {
 	},
 	data() {
 		return{
-			select: { name: '키워드', abbr: 't'},
-			options: [{name: '태그', abbr: 'a'}
-							, {name: '작성자', abbr: 'u'}
-							, {name: '키워드', abbr: 't'},],
-			kword:'',
-			posts : {
-				pid: '',
-				author: '',
+		select: { name: '키워드', abbr: 't'},
+		options: [{name: '태그', abbr: 'a'}
+						, {name: '작성자', abbr: 'u'}
+						, {name: '키워드', abbr: 't'},],
+		kword:'',
+		posts : {
+			pid: '',
+			author: '',
         title: '',
         content: '',
         publishedTime: '',
         thumbnail:'',
 			},
-			postcnt:-1,
-			date: '',
+		postcnt:-1,
+		date: '',
+		profileImg: '',
+		basicthumb: 'http://i3a507.p.ssafy.io/img/default/thumbnail.jpg'
 		}
 	},
-	mounted(){
-		console.log(this.posts);
+	created(){
+		this.profileImg = storage.profileImage;
 	},
 	methods: {
 		postList(){
@@ -107,17 +116,24 @@ export default {
 			axios
 				.get(API_URL+`api/v2/find/${this.select.abbr}/${this.kword}`)
 				.then(({data})=>{
-					this.posts = data;
 					this.postcnt = data.length;
+					console.log(data);
+					data.forEach(el => {
+						let year = el.publishedTime.slice(0,4);
+						let month = el.publishedTime.slice(5,7);
+						let day = el.publishedTime.slice(8,10);
+						// console.log(year+"년 "+month+"월 "+day+"일")
+						el.publishedTime = year+"년 "+month+"월 "+day+"일"
+						this.posts = data;
+					})
 				});
 			// console.log(this.getFormatDate(this.posts.publishedTime));
 		},
-		// getFormatDate(date){
-		// 	let year = date.getFullYear();
-		// 	let month = (1+date.getMonth());
-		// 	let day = date.getDate();
-		// 	return year+"년 "+month+"월 "+day+"일" 
-		// }
+		postdetail(one_post) {
+      storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
+      this.$router.push({name: 'postdetail', params: {data: one_post}})
+    },
 	}
 }
 </script>
@@ -142,25 +158,36 @@ span {
 	padding: 0 92px;
 	margin: 0 auto;
 	min-width: 530px;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.inner_box h2{
+	font-weight: 800;
 }
-
 /* 검색결과 */
 .content_list {
-	width: 65%;
+	width: 768px;
 	padding: 0 15px;
 	margin : 0 auto;
 	min-width: 712px;
 }
 .postcount{
 	font-size: 1.125rem;
-	margin-top: 1rem;
+	margin-top: 3rem;
+}
+.postcount h3{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight:600;
+}
+.postcount strong {
+	font-weight: 800;
+	font-size:2rem;
 }
 .post_list {
 	margin : 0 auto;
-	padding: 4rem 0;
+	padding: 2rem 0 64px 0;
 	border-bottom : 1px solid #ddd;
+	cursor:pointer;
 }
-
 .profile {
 	display : flex;
 	align-items: center;
@@ -176,7 +203,28 @@ span {
 	height: 3rem;
 	border-radius: 1.5rem;
 }
+.post_info h2{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight: 800;
+	font-size: 1.5rem;
+}
 .post_content {
 	margin : 0.5rem 0 2rem 0;
+	line-height: 1.3rem;
+	max-height: 3.9rem;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.post_thumbnail{
+	width:100%;
+	margin-bottom: 1rem;
+	height: 350px;
+	overflow: hidden;
+}
+.post_thumbnail img{
+	width:100%;
+	height: 100%;
+	object-fit: cover;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/PostContents.vue b/frontend/src/components/Sidebar/PostContents.vue
deleted file mode 100644
index f25de49..0000000
--- a/frontend/src/components/Sidebar/PostContents.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-    name: 'postcontents',
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/TagInputBox.vue b/frontend/src/components/TagInputBox.vue
index 9379112..f446e04 100644
--- a/frontend/src/components/TagInputBox.vue
+++ b/frontend/src/components/TagInputBox.vue
@@ -87,6 +87,8 @@
 </template>
 
 <script>
+import axios from 'axios'
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 
 export default {
 	name:'TagInputBox',
@@ -103,14 +105,30 @@ export default {
 			],
 			nonce: 0,
 			menu: false,
-			model: [
-			],
+			model: [],
 			x: 0,
 			search: null,
 			y: 0,
 		}
 	},
+	created() {
+		// tag
+		axios.post(API_URL+'api/v2/p/',
+			{
+				"pid" : this.$attrs.pid,
+				"uid" :	this.$attrs.uid
+			})
+			.then(response => {
+				response.data.tag.forEach(el => {
+					this.model.push(
+					{"color": "green",
+						"text" : el}
+				);
+				})
+				
+			})
 
+	},
 	watch: {
 		// 태그 글자수 20자 미만으로 제한 두기
 		// 태그 빈칸은 안받기, 빈칸 넣어두면 없애기
@@ -158,7 +176,7 @@ export default {
 			this.$emit('submit-post', this.model)
 		},
 		onSaveButton() {
-			this.$emit('save-post')
+			this.$emit('save-post', this.model)
 		}
 	},
 }
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 78f59cc..609e413 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -1,33 +1,35 @@
 <template>
-    <v-container>
-        <v-text-field
-            v-model="title"
-            :counter="20"
-            label="글 제목을 입력해주세요"
-            required
-        ></v-text-field>
-        <editor ref="toastuiEditor" height="500px"/>
-        <h3>썸네일 이미지</h3>
-        <div class="profile_area">
-            <div class="imgbox">
-                <!-- 회원 프로필 이미지 디비에서 조회 -->
-                <!-- [추가]이미지 변화에 대한 처리 -->
-                <img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
-            </div>
-            <div class="btn_group">
-                <!-- 이미지 업로드 (모달) -->
-                <div class="img_btn">
-                    <v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
-                    <input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
-                </div>
-            </div>
-        </div>
-        <h3>태그 입력칸</h3>        
-        <TagInputBox 
-            @submit-post="createAction"
-            @save-post="saveAction"
-        />
-    </v-container>
+	<v-container>
+		<v-text-field
+			v-model="title"
+			:counter="20"
+			label="글 제목을 입력해주세요"
+			required
+		></v-text-field>
+		<editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
+		<h3>썸네일 이미지</h3>
+		<div class="profile_area">
+			<div class="imgbox">
+				<!-- 회원 프로필 이미지 디비에서 조회 -->
+				<!-- [추가]이미지 변화에 대한 처리 -->
+				<img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
+			</div>
+			<div class="btn_group">
+				<!-- 이미지 업로드 (모달) -->
+				<div class="img_btn">
+					<v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+					<input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
+				</div>
+			</div>
+		</div>
+		<h3>태그 입력칸</h3>        
+		<TagInputBox 
+			:pid ="TagInputBoxPID"
+			:uid ="TagInputBoxUID"
+			@submit-post="createAction"
+			@save-post="saveAction"
+		/>
+	</v-container>
 </template>
 <script>
 import 'tui-editor/dist/tui-editor.css';
@@ -38,97 +40,136 @@ import axios from 'axios'
 import TagInputBox from './TagInputBox.vue'
 
 // const API_URL = 'http://localhost:8081/'
-const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 const storage = window.sessionStorage
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const FLICKR_URL = 'https://up.flickr.com/services/upload/'
 
 export default {
-    name: 'TextEditor',
-    components: {
-        Editor,
-        TagInputBox
-    },
-    data(){
-        return {
-            editorText: '',
-            title: '',
-            thumbImage: '',
-            uid: '',
-        }
-    },
-    mounted() {
-        storage.removeItem("thumbImage")
-    },
-    methods: {
-        createAction(tagData) {
-            // 태그 데이터 정리해서 보내기
-            let tagList = new Array()
-            tagData.forEach(tag => {
-                tagList.push(tag["text"])
-            })
-            // console.log(tagList)
-            var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
-            this.editorText = textdata
-            axios.post(API_URL+'api/v2/', {
-                author: storage.getItem("login_user"),
-                title: this.title,
-                content: this.editorText,
-                tag: tagList,
-                thumbnail: storage.getItem("thumbImage"),
-                uid: storage.getItem("uid")                
-            })
-            .then(() => {
-                storage.removeItem("thumbImage")
-                this.$router.push('/')
-            })
-            .catch(err => console.log(err))
-        },
-        saveAction() {
-        
-        },
+	name: 'TextEditor',
+	components: {
+		Editor,
+		TagInputBox
+	},
+	data(){
+		return {
+			editorText: '',
+			title: '',
+			thumbImage: '',
+			uid: '',
+			tempText: '',
+			taglist: [],
+			TagInputBoxPID : '',
+			TagInputBoxUID : ''
+		}
+	},
+	created(){
+		if(this.$route.params.data.title != null){
+			this.title = this.$route.params.data.title
+			this.tempText = this.$route.params.data.content
+			if(this.$route.params.data.thumbnail != null){
+				this.thumbImage = this.$route.params.data.thumbnail
+			}
+		}
+		
+		if(this.$route.params.data.pid != null){
+			this.TagInputBoxPID = this.$route.params.data.pid
+		}
+		if(this.$route.params.data.uid != null){
+			this.TagInputBoxPID = this.$route.params.data.uid
+		}
+	},
+	methods: {
+
+		createAction(tagData) {
+			// 태그 데이터 정리해서 보내기
+			let tagList = new Array()
+			
+			tagData.forEach(tag => {
+				tagList.push(tag["text"])
+			})
+			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
+			this.editorText = textdata
+
+			axios.post(API_URL+'api/v2/', {
+				author: storage.getItem("login_user"),
+				title: this.title,
+				content: this.editorText,
+				tag: tagList,
+				uid: `${storage.getItem("uid")}`,
+				thumbnail: storage.getItem("thumbImage")
+			})
+			.then(() => {
+				storage.removeItem("thumbImage")
+				this.$router.push('/')
+			})
+			.catch(err => console.log(err))
+		},
+		saveAction(tagData) {
+
+			//	 태그 데이터 정리해서 보내기
+			let tagList = new Array()
+			tagData.forEach(tag => {
+				tagList.push(tag["text"])
+			})
+			var textdata = this.$refs.toastuiEditor.invoke("getMarkdown"); // content를 저장하는 액션 처리
+			this.editorText = textdata
+			axios.put(API_URL+"api/v2/temp",{
+				pid : `${storage.getItem("pid")}`,
+				uid : `${storage.getItem("uid")}`,
+				author : `${storage.getItem("login_user")}`,
+				title: this.title,
+				content: this.editorText,
+				tag: tagList,
+				thumbnail: storage.getItem("thumbImage")
+			})
+			.then(() => {
+				storage.removeItem("thumbImage")
+				this.$router.push('/')
+			})
+			.catch(err => console.log(err))
+		},
 
-        // 업로드 이미지
-        uploadthumbImage(e){
+		// 업로드 이미지
+		uploadthumbImage(e){
 
-            var file = new FormData();
-            const image = e.target.files[0];
-            file.append("file", image);
+			var file = new FormData();
+			const image = e.target.files[0];
+			file.append("file", image);
 
-            // 미리보기용
-            const reader = new FileReader();
-            reader.readAsDataURL(image); 
-            reader.onload = e =>{
-                this.thumbImage = e.target.result; // profileImage 설정
-            };
+			// 미리보기용
+			const reader = new FileReader();
+			reader.readAsDataURL(image); 
+			reader.onload = e =>{
+				this.thumbImage = e.target.result; // profileImage 설정
+			};
 
-            // **추가** POST문으로 서버에 이미지 파일 전송
-            axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
-                file,
-                {
-                    headers:{
-                        'Content-Type': 'multipart/form-data',
-                        'Accept': 'application/json'
-                    }	
-                }
-                )
-                .then(response => {
-                    console.log(response.data);
-                    this.thumbImage = response.data;
-                    storage.setItem("thumbImage", response.data)
-                })
-                .catch((err) => {
-                    console.log("프로필 이미지 업로드 실패")
-                    console.log(err);
-                })
-        },
-    },
+			// **추가** POST문으로 서버에 이미지 파일 전송
+			axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
+				file,
+				{
+					headers:{
+						'Content-Type': 'multipart/form-data',
+						'Accept': 'application/json'
+					}	
+				}
+				)
+				.then(response => {
+					this.thumbImage = response.data;
+					storage.setItem("thumbImage", response.data)
+				})
+				.catch((err) => {
+					console.log("프로필 이미지 업로드 실패")
+					console.log(err);
+				})
+		},
+	},
 }
 </script>
 
 <style scoped>
 h3 {
-    margin-top: 20px;
-    margin-bottom: 5px;
+	margin-top: 20px;
+	margin-bottom: 5px;
 }
 
 .uploadimg {
@@ -139,9 +180,9 @@ h3 {
 		border-bottom: 1px solid  #e0e5ee;
 	}
 .img_btn{
-    font-family: 'NanumSquare', Noto Sans Light, sans-serif;
-    width:150px;
-    margin: 5px 0;
+	font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+	width:150px;
+	margin: 5px 0;
 }
 .imgbox {
 		width: 400px;
@@ -151,10 +192,10 @@ h3 {
 		margin: 0 auto;
 	}
 .imgbox> img {
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 }
 .btn_group{
-    margin: 15px 0 0;
+	margin: 15px 0 0;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 0cd71e2..e68dd5c 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -13,6 +13,8 @@ import Introduce from '../components/Introduce.vue'
 import Search from '../components/Search.vue'
 import Feed from '../components/Feed.vue'
 import Forum from '../components/Forum.vue'
+import Myblog from '../components/Myblog.vue'
+import Notice from '../components/Notice.vue'
 
 Vue.use(VueRouter)
 import store from '../router/index.js'
@@ -71,7 +73,6 @@ export default new VueRouter({
       component: Post
     },
     {
-      // path: '/:username/:title',
       path: '/postdetail',
       name: 'postdetail',
       component: PostDetail
@@ -95,6 +96,16 @@ export default new VueRouter({
       path:'/forum',
       name:'forum',
       component: Forum
+    },
+    {
+      path:'/doblog/:username',
+      name:'myblog',
+      component: Myblog,
+    },
+    {
+      path:'/notice',
+      name:'notice',
+      component: Notice,
     }
   ]
 })

From 40083bf24971f323749e9e8ba0b1ff48cee941e4 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 00:49:53 +0900
Subject: [PATCH 54/74] =?UTF-8?q?Modify:=20console=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index e49f8b9..eab4d55 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -146,7 +146,6 @@ export default {
         pid : storage.getItem("pid")
       })
         .then(res => {
-          // console.log(res)
           this.post = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
@@ -173,7 +172,6 @@ export default {
         this.$nextTick(() => {
           this.renderComponent = true;
         })
-        console.log("rerender Complete")
       },
       fetchData() {
         axios.post(API_URL + 'api/v2/p/',{
@@ -181,7 +179,6 @@ export default {
           pid : storage.getItem("pid")
         })
           .then(res => {
-            console.log('fetchData')
             this.post = res.data
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
@@ -242,10 +239,8 @@ export default {
       CommentRead() {
         axios.get(API_URL+'api/v3/'+storage.getItem("pid"))
           .then(res => {
-            console.log('Comment Reset')
             this.Comments = this.isCommentauthor(res.data)
             this.forceRerender()
-            console.log('Comment Read')
           })
         this.CommentInput = ""
       },

From aca0d4cfc2f2f2a259f29acbce67bcd540717c24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Fri, 21 Aug 2020 01:10:26 +0900
Subject: [PATCH 55/74] =?UTF-8?q?feature:=ED=8F=AC=EB=9F=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Cloud.vue  |   2 +-
 frontend/src/components/Feed.vue   |   3 +
 frontend/src/components/Forum.vue  | 185 ++++++++++++++++++++++++-----
 frontend/src/components/Navbar.vue |  21 +---
 frontend/src/components/Search.vue |  10 +-
 5 files changed, 168 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/Cloud.vue b/frontend/src/components/Cloud.vue
index 99d3eca..9ce4f20 100644
--- a/frontend/src/components/Cloud.vue
+++ b/frontend/src/components/Cloud.vue
@@ -45,7 +45,7 @@ export default {
         },
         font: {
             type: [String, Function],
-            default: 'Serif'
+            default: 'Roboto'
         },
         width: {
             type: [Number, String],
diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index e228004..8c301ef 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -215,4 +215,7 @@ export default {
   float:right; 
   margin-top: -24px
 }
+.row{
+  margin: 0px !important;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 41314d5..8431721 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -16,7 +16,31 @@
                @submit-tagname="searchtagname"
             />
          </div>
-         
+         <div class="postcount">
+				<!-- kword에 밑줄 어떻게 긋지? -->
+            <div class="tagcnt" v-if="tagclick">
+               <h3 style="font-size:52px"><span style="color:#08d3bc;">#</span>{{tag.text}}</h3>
+               총 <strong>{{posts.length}}</strong>개의 포스트
+            </div>
+			</div>
+         <div class="taglist" v-if="posts.length>0">
+            <div class="onetag" v-for="post in posts" :key="post.pid">
+               <div class="profile">
+                  <a><img :src="profileImg"></a>
+                  <div class="nickname">
+                     {{post.author}}
+                  </div>
+               </div>
+               <div class="post_thumbnail" v-if="post.thumbnail!=basicthumb">
+						<img :src="post.thumbnail">
+					</div>
+               <div class="post_info">
+						<h2>{{post.title}}</h2>
+						<p class="post_content">{{post.content}}</p>
+						{{post.publishedTime}}
+					</div>
+            </div>
+         </div>
       </div>
   </div>
 </template>
@@ -33,7 +57,7 @@ AOS.init();
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
-// const storage = window.sessionStorage
+const storage = window.sessionStorage
 
 export default {
    name: 'Forum',
@@ -41,34 +65,13 @@ export default {
       Navbar,
       Cloud
    },
-   props: {
-      onWordClick: {
+   props:{
+      onWordClick:{
          type: Function,
-         default: (word) => { 
-            axios.get(API_URL+'api/v4/'+word.text)
-               .then(({data})=>{
-                  // 콘텐츠 미리보기 슬라이스
-                  data.forEach(el => {
-                  el.tmp = el.content
-                  // console.log(el)
-                  if (el.content.length > 40) {
-                     // 마크다운 사진 제외
-                     el.content = el.content.replace(/!\[.*\)+/, "")
-                     // 최대 길이 슬라이스
-                     el.content = el.content.slice(0, 40)
-                  }
-                  // 작성 날짜만 보이게 수정
-                  let year = el.publishedTime.slice(0,4);
-                  let month = el.publishedTime.slice(5,7);
-                  let day = el.publishedTime.slice(8,10);
-                  el.publishedTime = year+"년 "+month+"월 "+day+"일"
-                  // this.posts = data
-                  });
-                  console.log(data);
-                  return {test:data}
-               })
-         },
-      },
+         default:()=>{
+
+         }
+      }
    },
    data() {
       return {
@@ -81,6 +84,7 @@ export default {
          fontSizeMapper: word => Math.log2(word.value) * 3,
          spiral: "archimedean",
          tag: '',
+         tagclick: false,
          posts : {
             pid: '',
             title: '',
@@ -88,9 +92,12 @@ export default {
             publishedTime: '',
             thumbnail:'',
          },
+         profileImg: '',
+         basicthumb: 'http://i3a507.p.ssafy.io/img/default/thumbnail.jpg'
       }
    },
    created(){
+      this.profileImg = storage.profileImage;
       var vm = this;
       axios.get(API_URL+"api/v4")
       .then(function(response) {
@@ -109,7 +116,30 @@ export default {
    },
    methods: {
       searchtagname(name){
-         console.log(name);
+         this.tagclick = true;
+         this.tag = name;
+         axios.get(API_URL+'api/v4/'+name.text)
+         .then(({data})=>{
+            // 콘텐츠 미리보기 슬라이스
+            data.forEach(el => {
+            el.tmp = el.content
+            // console.log(el)
+            if (el.content.length > 40) {
+               // 마크다운 사진 제외
+               el.content = el.content.replace(/!\[.*\)+/, "")
+               // 최대 길이 슬라이스
+               el.content = el.content.slice(0, 40)
+            }
+            // 작성 날짜만 보이게 수정
+            let year = el.publishedTime.slice(0,4);
+            let month = el.publishedTime.slice(5,7);
+            let day = el.publishedTime.slice(8,10);
+            el.publishedTime = year+"년 "+month+"월 "+day+"일"
+            // this.posts = data
+            });
+            this.posts=data
+            console.log(data)
+         })
       }
    },
 }
@@ -150,15 +180,106 @@ export default {
   padding: 151px 0 0;
 }
 .innner {
-   padding-top:20px;
+   padding-top:70px;
   min-width: 1100px;
   max-width: 1150px;
    margin: 0 auto;
+   text-align: center;
+}
+svg {
+   padding: 10px 0;
+   /* border: 1px solid black; */
+   border-radius: 5px;
+
 }
 .wordCloud{
    text-align: center;
 }
 .wordCloud text{
-  font-family: 'Inter','NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif !important;
+  font-family: 'Roboto','NanumSquareR','나눔스퀘어','Noto Sans DemiLight','Apple SD Gothic','맑은고딕','Nanum Gothic',sans-serif !important;
+}
+.inner_box {
+	width: 712px;
+	padding: 0 92px;
+	margin: 0 auto;
+	min-width: 530px;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.inner_box h2{
+	font-weight: 800;
+}
+/* 검색결과 */
+.content_list {
+	width: 768px;
+	padding: 0 15px;
+	margin : 0 auto;
+	min-width: 712px;
+}
+.postcount{
+	font-size: 1.125rem;
+	margin-top: 3rem;
+}
+.postcount h3{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight:600;
+}
+.postcount strong {
+	font-weight: 800;
+	font-size:2rem;
+}
+.post_list {
+	margin : 0 auto;
+	padding: 2rem 0 64px 0;
+	border-bottom : 1px solid #ddd;
+	cursor:pointer;
+}
+.profile {
+	display : flex;
+	align-items: center;
+	margin-bottom: 1.5rem;
+}
+.profile a {
+	color : black;
+	margin-right: 1rem;
+}
+.profile img  {
+	display: block;
+	width: 3rem;
+	height: 3rem;
+	border-radius: 1.5rem;
+}
+.post_info h2{
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	font-weight: 800;
+	font-size: 1.5rem;
+}
+.post_content {
+	margin : 0.5rem 0 2rem 0;
+	line-height: 1.3rem;
+	max-height: 3.9rem;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.post_thumbnail{
+	width:100%;
+	margin-bottom: 1rem;
+	height: 350px;
+	overflow: hidden;
+}
+.post_thumbnail img{
+	width:100%;
+	height: 100%;
+	object-fit: cover;
+}
+.onetag{
+   max-width: 738px;
+   margin: 0 auto;
+}
+.tagcnt{
+   max-width: 738px;
+   margin: 0 auto;
+   line-height: 17px;
+   padding-bottom: 50px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index ffd8f47..324a05d 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -21,7 +21,7 @@
       <div class="notice">
         <v-icon small>fas fa-volume-down</v-icon>
         <div class="banner" @click="gotonotice">
-          {{list[0].title}}
+          {{list.title}}
         </div>
 			</div>
 			<v-spacer></v-spacer>
@@ -99,7 +99,9 @@ export default {
       google_login: storage.getItem("google_login"),
       profileImage: storage.getItem("profileImage"),
 
-      list: '',
+      list: {
+        title:''
+      },
       index: 0,
       text: '',
       speed: 2000
@@ -131,17 +133,6 @@ export default {
     profileshow() {
       this.profile = !this.profile
     },
-    postdetail(text) {
-      for(var i =0; i<this.list.length; i++){
-        if( text === this.list[i].title){
-          storage.removeItem("pid")
-          storage.setItem("pid", this.list[i].pid)
-          // article, user -> 페이지 변경 this.$router.push
-          // this.$router.push({name: 'postdetail', params: {data: this.list[i]}});
-          this.$router.push({name: 'postdetail', params: {data: this.list[i]}}).catch(()=>{});
-        }
-      }
-    },
     gotonotice(){
       this.$router.push({path:'notice'})
     }
@@ -153,9 +144,9 @@ export default {
         .then(res => {
           // this.post = res.data
           // pid를 활용하여 게시글로 이동
-          this.list = res.data
+          this.list.title = res.data[0].title
     })
-    sessionStorage.setItem("noticelist",this.list)
+    sessionStorage.setItem("noticelist",this.list.title)
   },
   mounted(){
     // this.text = this.list[this.index];
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 1cec0e8..d54ca20 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -95,11 +95,11 @@ export default {
 		posts : {
 			pid: '',
 			author: '',
-        title: '',
-        content: '',
-        publishedTime: '',
-        thumbnail:'',
-			},
+			title: '',
+			content: '',
+			publishedTime: '',
+			thumbnail:'',
+		},
 		postcnt:-1,
 		date: '',
 		profileImg: '',

From 0b99785c48c4ed5554db40111f9587f4a77338dd Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 01:12:59 +0900
Subject: [PATCH 56/74] =?UTF-8?q?feature=20:=20postDetail=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20By=20Juho?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index eab4d55..1a60fb5 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -29,7 +29,7 @@
               />
             </v-col>
             <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-            <v-col cols="12">
+            <v-col v-if="post.isauthor" cols="12">
               <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
               <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
             </v-col>
@@ -160,7 +160,7 @@ export default {
           }
           this.Comments = res.data.comments
           this.isCommentauthor(this.Comments)
-          this.isPostauthor(this.isPostauthor)
+          this.post.isauthor = this.isPostauthor()
       })
     },
     mounted() {
@@ -182,7 +182,7 @@ export default {
             this.post = res.data
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
-            this.isPostauthor(this.isPostauthor)
+            this.post.isauthor = this.isPostauthor()
           })
       },
       onEditorChange() {
@@ -190,7 +190,7 @@ export default {
       },
       // 글 작성자인지 확인
       isPostauthor() {
-        if (this.post.author && storage.getItem("login_user") && this.post.uid && storage.getItem("uid")) {
+        if (this.post.author === storage.getItem("login_user") && this.post.uid === Number(storage.getItem("uid"))) {
           return true
         } else {
           return false
@@ -207,8 +207,11 @@ export default {
       // 게시글 삭제 버튼
       onPostDeleteBtn() {
         if (this.isPostauthor()) {
-          axios.delete(API_URL + 'api/v3' + this.post.pid)
-            .then(() => alert('게시글이 삭제되었습니다.'))
+          axios.delete(API_URL + 'api/v2/' + this.post.pid)
+            .then(() => {
+              alert('게시글이 삭제되었습니다.')
+              this.$router.push('/')
+          })
         }
       },
       

From 0aed0ed4e30354ab3278a6c6b207b0cb1d28a050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Fri, 21 Aug 2020 01:29:19 +0900
Subject: [PATCH 57/74] =?UTF-8?q?feature:=ED=8F=AC=EB=9F=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Forum.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 8431721..ac0554f 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -272,14 +272,16 @@ svg {
 	height: 100%;
 	object-fit: cover;
 }
-.onetag{
+.onetag {
    max-width: 738px;
    margin: 0 auto;
+   padding: 30px 0 50px;
+   border-bottom: 1px solid #ddd;
 }
 .tagcnt{
    max-width: 738px;
    margin: 0 auto;
    line-height: 17px;
-   padding-bottom: 50px;
+   padding-bottom: 10px;
 }
 </style>
\ No newline at end of file

From 1b7e4460285908870b3a3749b4d3393865ba8905 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 01:38:49 +0900
Subject: [PATCH 58/74] =?UTF-8?q?feature=20:=20QR=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Setting.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Setting.vue b/frontend/src/components/Setting.vue
index e5b268f..9e5611a 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -181,7 +181,12 @@
 							<h4 class="cate_desc">후원 QR</h4>
 							<div class="qrbox">
 								<div class="qrbox_img">
-									<img v-bind:src="userinfo.qrImage" alt="QR코드 생성방법">
+									<div v-if="userinfo.qrImage===null">
+										<img src="http://i3a507.p.ssafy.io/img/user/default/qr.png">
+									</div>
+									<div  v-else>
+										<img v-bind:src="userinfo.qrImage" onerror="this.src='http://i3a507.p.ssafy.io/img/user/default/qr.png'">
+									</div>
 								</div>
 							</div>
 							<div class="btn_grp">

From 9c2d0e1551c574a2be49afcd26399fe9382140d0 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 01:58:39 +0900
Subject: [PATCH 59/74] =?UTF-8?q?Modify:=20URI=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TextEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 609e413..4701d02 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -144,7 +144,7 @@ export default {
 			};
 
 			// **추가** POST문으로 서버에 이미지 파일 전송
-			axios.post(API_URL+'api/v2/img'+`?title=${this.title}&author=${storage.getItem("login_user")}`,
+			axios.post(API_URL+'api/v2/img'+`?title=${this.title}&uid=${storage.getItem("uid")}`,
 				file,
 				{
 					headers:{

From 7765113eaffd9e9db2b8380ce5325e8351e16635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Fri, 21 Aug 2020 02:07:47 +0900
Subject: [PATCH 60/74] =?UTF-8?q?mod:=20register.vue=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Register.vue | 44 +++++++++++++++-------------
 frontend/src/main.js                 |  2 +-
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue
index 56a01c3..309498d 100644
--- a/frontend/src/components/Register.vue
+++ b/frontend/src/components/Register.vue
@@ -7,8 +7,8 @@
           <div class="cont_data">
           <span><h2>Sign up</h2></span>
           <p>DO!를 시작해보세요.</p>
-          <strong class="tit_step">회원 정보 입력</strong>
-          <table v-if="!successful" style="border:1px solid #ddd">
+          <div style="border:1px solid #ddd">
+          <table v-if="!successful">
             <tr>
               <td class="def">
                 아이디
@@ -23,20 +23,16 @@
                   v-model="user.email"
                   v-validate="'required|email|max:50'"
                   type="email"
-                  style="padding : 0px"
                 />
-                <div class="alert-danger" v-if="submitted && errors.has('email')">
+                <div class="warn" v-if="submitted && errors.has('email')">
                   {{errors.first('email')}}
                 </div>
                 <!-- 아이디 중복체크 메세지 -->
-                <div
-                  class="alert"
-                  :class="successful ? 'alert-success' : 'alert-danger'"
-                  v-if="message">
-                  {{message}}
+                <div class="warn" v-if="message">
+                  * {{message}}
                 </div>
               </td>
-              <td style="width:5%; min-width: 63px; padding:0;">
+              <td style="width:5%; min-width: 63px; padding-right:10px;">
                 <div class="dup_check" @click="dupCheck">
                   <!-- 중복이 아닌 메일을 입력했다가 중복인 메일을 입력했을 때 -->
                   <v-btn x-small depressed color="#6e8af8" class="white--text">                
@@ -61,8 +57,8 @@
                   type="password"
                   ref="password"
                 />
-                <div class="alert-danger" v-if="submitted && errors.has('password')">
-                  {{errors.first('password')}}
+                <div class="warn" v-if="submitted && errors.has('password')">
+                  * 비밀번호는 8자 이상 입력해주세요
                 </div>
               </td>
             </tr>
@@ -84,13 +80,13 @@
                 data-vv-as="password"
               />
               <div
-                class="alert-danger"
+                class="warn"
                 v-if="submitted && errors.has('confirmPassword')"
-              >{{errors.first('confirmPassword')}}</div>
+              >* {{errors.first('confirmPassword')}}</div>
               </td>
             </tr>
             <tr>
-              <td class="defination">
+              <td class="def">
                 닉네임
               </td>
               <!-- <label for="password">비밀번호 확인</label> -->
@@ -107,12 +103,13 @@
                   data-vv-as="password"
                 />
                 <div
-                  class="alert-danger" v-if="submitted && errors.has('username')">
-                  {{errors.first('username')}}
+                  class="warn" v-if="submitted && errors.has('username')">
+                  * 닉네임은 3자 이상 입력해주세요.
                 </div>
               </td>
             </tr>
           </table>
+        </div>
           <!-- user field와 중복체크를 했을 때만 활성화-->
           <div class="reg_btn" style="text-align:right;">
             <v-btn 
@@ -193,7 +190,7 @@ export default {
           }
           else {
             this.dupcheck = false;
-            this.message = "아이디로 사용할 수 없는 이메일 주소입니다. 다시 입력해주세요."
+            this.message = " 아이디로 사용할 수 없는 이메일 주소입니다. 다시 입력해주세요."
           }
         } 
         else {
@@ -245,12 +242,15 @@ table {
   width:100%
 }
 td {
-  vertical-align: top;
+  vertical-align: center;
   text-align: left;
   padding: 18px 0px 16px 19px; 
+  /* font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif; */
+
 }
 .def{
-  width:20%
+  width:20%;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
 }
 .container {
   padding-top:150px; 
@@ -302,4 +302,8 @@ td {
   color:red;
 }
 
+.warn {
+  padding-left: 12px;
+  font-size:0.9rem;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7a652f6..949290e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -43,7 +43,7 @@ new Vue({
   mounted() {
     this.$validator.localize('en', {
       messages: {
-        email: () => "유효한 이메일 형식이 아닙니다.",
+        email: () => "* 유효한 이메일 형식이 아닙니다.",
         required: (field) => '* ' + field + '항목은 필수 항목 입니다',
         confirmed: () =>  "비밀번호가 일치하지 않습니다",
       },

From 7271b32012139d9d3d8f870b6b005b761825e0f5 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 02:18:36 +0900
Subject: [PATCH 61/74] =?UTF-8?q?Fix:=20=ED=9B=84=EC=9B=90=20qrImage=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=AC=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 1a60fb5..1fb224e 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -47,12 +47,13 @@
               <v-col cols="3" v-else>
                 안녕하세요, {{ post.author }}입니다.
               </v-col>
-              <v-col cols="5">
-                <v-btn @click="ClickQrBtn" v-if="post.authorInfo.qrImage&&qrflag">글쓴이에게 후원하기</v-btn>
+              <v-col v-if="post.authorInfo.qrImage !== 'null'" cols="5">
+                <v-btn @click="ClickQrBtn" v-if="!qrflag">글쓴이에게 후원하기</v-btn>
                 <div class="qrimage-resize">
-                  <v-img v-if="!qrflag" :src="post.authorInfo.qrImage"></v-img>
+                  <v-img v-if="qrflag" :src="post.authorInfo.qrImage"></v-img>
                 </div>
               </v-col>
+              <v-col v-else cols="5"></v-col> 
             </v-row>
             <!-- 소셜 로그인 버튼 -->
             <v-row class="social-login">
@@ -133,7 +134,7 @@ export default {
           FeedFlag: '',
           like: '',
           renderComponent: true,
-          qrflag: true,
+          qrflag: false,
         }
     },
     created(){

From 1417657b0cda900340966f662758e2e353e1fb55 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 03:07:13 +0900
Subject: [PATCH 62/74] =?UTF-8?q?Add:=20PostDetail=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20&=20=ED=9B=84=EC=9B=90=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A1=B0=EA=B1=B4=EB=AC=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 25 +++++++++++++++++++------
 frontend/src/components/PostTagBox.vue | 24 ++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/PostTagBox.vue

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 1fb224e..05d489d 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -16,10 +16,18 @@
           <v-layout column="12">
             <!-- 게시글 헤더 -->
             <h1 class="post-title">{{ post.title }}</h1>
-            <h4 class="post-author">· {{ post.author }} </h4>
-            <div class="title-area">
-              
-            </div>
+            <v-row justify="center">
+              <v-col cols="2">
+                <v-img class="author_profile_img" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
+              </v-col>
+              <v-col cols="10">
+                <h4 class="post-author">{{ post.author }} </h4>
+              </v-col>
+            </v-row>  
+            
+            <PostTagBox
+              :tagList="post.tag"
+            />
             <!-- TextEditor 미리보기만(마크다운) -->
             <v-col cols="12" class="post-content">
               <!-- <Viewer :initialValue="this.post.content"/> -->
@@ -38,7 +46,7 @@
             <!-- 작성자 Thumnail, 자기 소개, 후원버튼 & 후원QR -->
             <v-row>
               <v-col cols="3">
-                <v-img aspect-ratio="1.2" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
+                <v-img class="author_profile_img" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
                 <p v-else>{{ post.author }}</p>
               </v-col>
               <v-col cols="4" v-if="post.authorInfo.introduce">
@@ -47,7 +55,7 @@
               <v-col cols="3" v-else>
                 안녕하세요, {{ post.author }}입니다.
               </v-col>
-              <v-col v-if="post.authorInfo.qrImage !== 'null'" cols="5">
+              <v-col v-if="post.authorInfo.qrImage" cols="5">
                 <v-btn @click="ClickQrBtn" v-if="!qrflag">글쓴이에게 후원하기</v-btn>
                 <div class="qrimage-resize">
                   <v-img v-if="qrflag" :src="post.authorInfo.qrImage"></v-img>
@@ -104,6 +112,7 @@
 <script>
 import Navbar from './Navbar.vue'
 import Comment from './Comment.vue'
+import PostTagBox from './PostTagBox.vue'
 
 import { Viewer } from '@toast-ui/vue-editor'
 import axios from 'axios'
@@ -118,6 +127,7 @@ export default {
       Viewer,
       Navbar,
       Comment,
+      PostTagBox,
     },
     data() {
         return {
@@ -352,4 +362,7 @@ export default {
   width: 10rem;
   height: 15rem;
 }
+.author_profile_img {
+  border-radius: 50%;
+} 
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/PostTagBox.vue b/frontend/src/components/PostTagBox.vue
new file mode 100644
index 0000000..6d2ce3f
--- /dev/null
+++ b/frontend/src/components/PostTagBox.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+				<v-chip class="mx-1" v-for="tag in tags" :key="tag">
+					{{ tag }}
+				</v-chip>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+  export default {
+		name: "PostTagBox",
+    data() {
+			return {
+				tags: this.$attrs.tagList,
+			}
+		}
+  }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

From f64270f768ec87310af272436895723744b14df1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Fri, 21 Aug 2020 03:20:06 +0900
Subject: [PATCH 63/74] =?UTF-8?q?mod:=20texteditor=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue        |   1 +
 frontend/src/components/TagInputBox.vue |  29 ++++--
 frontend/src/components/TextEditor.vue  | 128 ++++++++++++++++--------
 3 files changed, 105 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 1ef4be7..de083b8 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -159,6 +159,7 @@ export default {
           el.publishedTime = year+"년 "+month+"월 "+day+"일"
           this.posts = data
         });
+        console.log(data);
       })
       .catch(err => console.log(err))
     }
diff --git a/frontend/src/components/TagInputBox.vue b/frontend/src/components/TagInputBox.vue
index f446e04..d480262 100644
--- a/frontend/src/components/TagInputBox.vue
+++ b/frontend/src/components/TagInputBox.vue
@@ -7,18 +7,19 @@
 				:items="items"
 				:search-input.sync="search"
 				hide-selected
-				label="태그를 추가해주세요"
+				flat
+				outlined
+				dense
 				multiple
 				small-chips
-				solo
 				hint="태그는 최대 5개까지 가능합니다"
+				style="border-radius:0px; width: 100%"
 			>
 			<template v-slot:no-data>
 				<v-list-item>
 					<!-- <span class="subheading">Create</span> -->
 					<v-chip
 						:color="`${color} lighten-3`"
-						label
 						small
 					>
 						{{ search }}
@@ -31,7 +32,6 @@
 					v-bind="attrs"
 					:color="`${item.color} lighten-3`"
 					:input-value="selected"
-					label
 					small
 				>
 					<span class="pr-2">
@@ -58,7 +58,6 @@
 					v-else
 					:color="`${item.color} lighten-3`"
 					dark
-					label
 					small
 				>
 					{{ item.text }}
@@ -74,15 +73,21 @@
 				</v-list-item-action>
 			</template>
 		</v-combobox>
+		<div class="sub_btn">
 		<v-btn 
 			@click="onSubmitButton"
-			color="success"
+			color="#08d3bc"
+			outlined
+			tile
 		>출간하기</v-btn>
 		<v-btn
 			class="ml-2"
 			@click="onSaveButton"
-			color="info"
+			color="#5c7bf4"
+			outlined
+			tile
 		>임시저장</v-btn>
+		</div>
 	</div>
 </template>
 
@@ -97,11 +102,11 @@ export default {
 			activator: null,
 			attach: null,
 			// colors: ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange'],
-			color: 'green',
+			color: "#08d3bc",
 			editing: null,
 			index: -1,
 			items: [
-				{ header: '엔터를 누르면 태그가 끊깁니다.' },
+				{ header: '엔터를 누르면 태그가 입력됩니다.' },
 			],
 			nonce: 0,
 			menu: false,
@@ -121,7 +126,7 @@ export default {
 			.then(response => {
 				response.data.tag.forEach(el => {
 					this.model.push(
-					{"color": "green",
+					{"color": "#08d3bc",
 						"text" : el}
 				);
 				})
@@ -184,4 +189,8 @@ export default {
 
 <style>
 
+.sub_btn{
+	float: right;
+	margin-top: -15px;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/TextEditor.vue b/frontend/src/components/TextEditor.vue
index 609e413..c5ff586 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -1,35 +1,57 @@
 <template>
-	<v-container>
-		<v-text-field
-			v-model="title"
-			:counter="20"
-			label="글 제목을 입력해주세요"
-			required
-		></v-text-field>
-		<editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
-		<h3>썸네일 이미지</h3>
-		<div class="profile_area">
-			<div class="imgbox">
-				<!-- 회원 프로필 이미지 디비에서 조회 -->
-				<!-- [추가]이미지 변화에 대한 처리 -->
-				<img v-bind:src="thumbImage" onerror="this.src='https://www.mangboard.com/wp-content/uploads/mangboard/2017/04/07/F816_imageupload.png'">
-			</div>
-			<div class="btn_group">
-				<!-- 이미지 업로드 (모달) -->
-				<div class="img_btn">
-					<v-btn depressed width="150px" color="#6e8af8" class="white--text"><label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
-					<input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
+	<div>
+		<Navbar></Navbar>
+		<div class="inner">
+				<v-text-field
+					dense
+					flat
+					solo
+					hide-details
+					v-model="title"
+					label="글 제목을 입력해주세요"
+					required
+					style="border-radius:0px; border: 1px solid #e0e5ee"
+					class="mb-5"
+				></v-text-field>
+				<editor :initialValue="this.tempText" ref="toastuiEditor" height="500px"/>
+				<div class="posting">
+					<div class="thumbnail">
+						<div class="regthumb">
+							<h4 class="cate_desc">썸네일 이미지</h4>
+								<!-- 이미지 업로드 (모달) -->
+							<div class="img_btn">
+								<v-btn 
+									text
+									depressed 
+									outlined
+									width="150px" 
+									color="#6e8af8"
+									style="border: 1px solid #6e8af8"
+								>
+									<label for="file-input" style="padding-top:9px">이미지 업로드</label></v-btn>
+								<input type="file" accept="image/*" @change="uploadthumbImage($event)" id="file-input" class="uploadimg">
+							</div>
+						</div>
+						<div class="profile_area">
+							<div class="imgbox" v-if="thumbImage">
+								<!-- 회원 프로필 이미지 디비에서 조회 -->
+								<!-- [추가]이미지 변화에 대한 처리 -->
+								<img v-bind:src="thumbImage">
+							</div>
+						</div>
+					</div>
+					<div class="tagreg">
+						<h4 class="cate_desc">태그 입력칸</h4>        
+						<TagInputBox 
+							:pid ="TagInputBoxPID"
+							:uid ="TagInputBoxUID"
+							@submit-post="createAction"
+							@save-post="saveAction"
+						/>
+					</div>
 				</div>
-			</div>
 		</div>
-		<h3>태그 입력칸</h3>        
-		<TagInputBox 
-			:pid ="TagInputBoxPID"
-			:uid ="TagInputBoxUID"
-			@submit-post="createAction"
-			@save-post="saveAction"
-		/>
-	</v-container>
+	</div>
 </template>
 <script>
 import 'tui-editor/dist/tui-editor.css';
@@ -38,7 +60,7 @@ import 'codemirror/lib/codemirror.css';
 import { Editor } from '@toast-ui/vue-editor'
 import axios from 'axios'
 import TagInputBox from './TagInputBox.vue'
-
+import Navbar from '../components/Navbar.vue'
 // const API_URL = 'http://localhost:8081/'
 const storage = window.sessionStorage
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
@@ -48,7 +70,8 @@ export default {
 	name: 'TextEditor',
 	components: {
 		Editor,
-		TagInputBox
+		TagInputBox,
+		Navbar,
 	},
 	data(){
 		return {
@@ -171,31 +194,50 @@ h3 {
 	margin-top: 20px;
 	margin-bottom: 5px;
 }
-
+button {
+	border-radius: 0px;
+}
+.thumbnail {
+	width:48%;
+	margin-right: 25px;
+}
+.tagreg {
+	width:50%;
+	float: right;
+	margin:7px 0 20px;
+}
 .uploadimg {
 		display:none;
 	}
-.profile_area{
-		padding: 30px 20px 18px;
-		border-bottom: 1px solid  #e0e5ee;
-	}
+
 .img_btn{
 	font-family: 'NanumSquare', Noto Sans Light, sans-serif;
 	width:150px;
-	margin: 5px 0;
+	margin-top:-6px;
+	float: right;
 }
 .imgbox {
-		width: 400px;
-		height: 250px;
-		border-radius: 10%;
+		border-radius: 5px;
 		overflow: hidden;
-		margin: 0 auto;
+		margin: 0 auto 40px auto;
+		border: 1px solid #e0e5ee;
 	}
 .imgbox> img {
 	width: 100%;
 	height: 100%;
 }
-.btn_group{
-	margin: 15px 0 0;
+.cate_desc{
+		font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+		font-weight: 600;
+		font-size: 1rem;
+		margin-right: 20px;
+	}
+.posting{
+	display: flex;
+	margin-top:20px;
+}
+.regthumb{
+	display:flex;
+	margin:7px 0 20px;
 }
 </style>
\ No newline at end of file

From 571791d91a1db97ac30904a409745f885485ff2c Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 03:33:40 +0900
Subject: [PATCH 64/74] =?UTF-8?q?Fix:=20PostDetail=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=EC=B9=A8=20=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue       |  2 +-
 frontend/src/components/PostDetail.vue | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index fe9f85c..d436101 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -167,7 +167,7 @@ export default {
       .then(({data})=>{
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {
-          el.tmp = el.content
+          // el.tmp = el.content
           if (el.content.length > 120) {
             // 마크다운 사진 제외
             el.content = el.content.replace(/!\[.*\)+/, "")
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 05d489d..8332ffc 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -32,7 +32,7 @@
             <v-col cols="12" class="post-content">
               <!-- <Viewer :initialValue="this.post.content"/> -->
               <Viewer 
-                :initialValue="this.content"
+                :initialValue="this.post.content"
                 @change="onEditorChange"
               />
             </v-col>
@@ -135,9 +135,9 @@ export default {
             title: '',
             author: '',
             content: '',
-            islike: this.$route.params.data.isLike,
+            // islike: this.$route.params.data.isLike,
           },
-          content: this.$route.params.data.content,
+          // content: this.$route.params.data.content,
           Comments: null,
           CommentInput: '',
           ChildCommentInput: '',
@@ -149,10 +149,6 @@ export default {
     },
     created(){
       axios.post(API_URL + 'api/v2/p/',{
-        // headers :{
-        //   'Content-Type': 'application/json',
-        //   'Accept':'application/json'
-        // },
         uid : storage.getItem("uid"),
         pid : storage.getItem("pid")
       })

From f714887f607259845c3edd1895d3dc3d625b6d09 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 03:52:14 +0900
Subject: [PATCH 65/74] =?UTF-8?q?Delete:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20vue=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MyPage.vue      | 31 -------------------------
 frontend/src/components/Sidebar.vue     | 25 --------------------
 frontend/src/components/user/FindID.vue | 29 -----------------------
 frontend/src/router/index.js            | 12 ----------
 4 files changed, 97 deletions(-)
 delete mode 100644 frontend/src/components/MyPage.vue
 delete mode 100644 frontend/src/components/Sidebar.vue
 delete mode 100644 frontend/src/components/user/FindID.vue

diff --git a/frontend/src/components/MyPage.vue b/frontend/src/components/MyPage.vue
deleted file mode 100644
index 9790d9b..0000000
--- a/frontend/src/components/MyPage.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="container">
-    <header class="jumbotron">
-      <h3>user name : {{content.username}}</h3>
-      <h3>email : {{content.email}}</h3>
-    </header>
-  </div>
-</template>
-
-<script>
-import UserService from '../services/user-service'
-
-export default {
-  name: 'profile',
-  data() {
-    return {
-      content: ''
-    }
-  },
-  mounted() {
-    UserService.getUserContent().then(
-      response => {
-        this.content = response.data
-      },
-      error => {
-        this.content = error.response.data.message
-      }
-    )
-  }
-}
-</script>
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
deleted file mode 100644
index f4130cd..0000000
--- a/frontend/src/components/Sidebar.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <v-form>
-      <v-text-field
-        placeholder="search"
-        append-icon="mdi-magnify"
-      ></v-text-field>
-    </v-form>
-      <h3>notice</h3>
-      <h3>tags</h3>
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'sidebar',
-}
-</script>
-
-<style scoped>
-div {
-  position: sticky;
-  top : 130px;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/user/FindID.vue b/frontend/src/components/user/FindID.vue
deleted file mode 100644
index b767816..0000000
--- a/frontend/src/components/user/FindID.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-	<Navbar></Navbar>
-	<div class="container">
-	하이욥
-	</div>
-  </div>
-</template>
-
-<script>
-import Navbar from '../Navbar.vue'
-export default {
-	name : 'FindID',
-	data(){
-		return{
-
-		}
-	},
-  components: {
-    Navbar,
-  },
-}
-</script>
-
-<style scoped>
-	.container{
-		padding-top: 120px;
-	}
-</style>>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e68dd5c..d8d2145 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,13 +2,11 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../components/Home.vue'
 import Login from '../components/Login.vue';
-import MyPage from '../components/MyPage.vue';
 import Register from '../components/Register.vue'
 import Post from '../components/Post.vue'
 import TextEditor from '../components/TextEditor.vue'
 import Setting from '../components/Setting.vue'
 import PostDetail from '../components/PostDetail.vue'
-import FindID from '../components/user/FindID.vue'
 import Introduce from '../components/Introduce.vue'
 import Search from '../components/Search.vue'
 import Feed from '../components/Feed.vue'
@@ -46,11 +44,6 @@ export default new VueRouter({
       name: 'login',
       component: Login,
     },
-    {
-      path: '/mypage',
-      name: 'mypage',
-      component: MyPage,
-    },
     {
       path: '/register',
       name: 'register',
@@ -77,11 +70,6 @@ export default new VueRouter({
       name: 'postdetail',
       component: PostDetail
     },
-    {
-      path: '/findid',
-      name: 'findid',
-      component: FindID,
-    },
     {
       path: '/search',
       name: 'search',

From 0ff6ed6cfd861d35c1c6524e1736cb88d9c21d6f Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 03:59:04 +0900
Subject: [PATCH 66/74] =?UTF-8?q?Feature:=20=ED=8F=AC=EB=9F=BC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=20=EB=94=94?=
 =?UTF-8?q?=ED=85=8C=EC=9D=BC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Forum.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index ac0554f..15ccc7d 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -24,7 +24,7 @@
             </div>
 			</div>
          <div class="taglist" v-if="posts.length>0">
-            <div class="onetag" v-for="post in posts" :key="post.pid">
+            <div @click="postdetail(post)" class="onetag" v-for="post in posts" :key="post.pid">
                <div class="profile">
                   <a><img :src="profileImg"></a>
                   <div class="nickname">
@@ -140,7 +140,12 @@ export default {
             this.posts=data
             console.log(data)
          })
-      }
+      },
+      postdetail(one_post) {
+         storage.removeItem("pid")
+         storage.setItem("pid", one_post.pid)
+         this.$router.push({name: 'postdetail', params: {data: one_post}})
+      },
    },
 }
 </script>

From d02a5bb8456c3a83df193e242d84e7778305ae0e Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 04:03:38 +0900
Subject: [PATCH 67/74] =?UTF-8?q?Modify:=20=EC=A3=BC=EC=84=9D=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=EB=90=9C=20=EC=BD=98=EC=86=94=20=EC=B6=9C=EB=A0=A5=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Cloud.vue      | 2 --
 frontend/src/components/Comment.vue    | 1 -
 frontend/src/components/Feed.vue       | 1 -
 frontend/src/components/Forum.vue      | 3 ---
 frontend/src/components/Home.vue       | 2 --
 frontend/src/components/Login.vue      | 3 ---
 frontend/src/components/Myblog.vue     | 2 --
 frontend/src/components/Notice.vue     | 1 -
 frontend/src/components/PostTagBox.vue | 6 +++---
 frontend/src/components/Register.vue   | 6 +++---
 frontend/src/components/Search.vue     | 5 -----
 11 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Cloud.vue b/frontend/src/components/Cloud.vue
index 9ce4f20..1d8dd15 100644
--- a/frontend/src/components/Cloud.vue
+++ b/frontend/src/components/Cloud.vue
@@ -35,8 +35,6 @@ export default {
                type: Function,
                default: (word) => { 
                   window.alert(`You clicked hi ${word.text}`) 
-                  // storage.setItem("tag",word.text)
-                  // console.log(storage.getItem("tag"))
                }
         },
         rotate: {
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 870a1a0..8113fc4 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -107,7 +107,6 @@ export default {
 		// 댓글 Update 메서드
 		onCommentUpdate(one_comment) {
 			if (one_comment.author === storage.getItem("login_user") && one_comment.uid === Number(storage.getItem("uid"))) {
-				// console.log(one_comment)
 				const tmp_comment = {
 					content: this.CommentUpdateInput,
 					cid: one_comment.cid
diff --git a/frontend/src/components/Feed.vue b/frontend/src/components/Feed.vue
index 8c301ef..6ed032b 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -106,7 +106,6 @@ export default {
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {
           el.tmp = el.content
-          // console.log(el)
           if (el.content.length > 40) {
             // 마크다운 사진 제외
             el.content = el.content.replace(/!\[.*\)+/, "")
diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index 15ccc7d..fef0698 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -101,7 +101,6 @@ export default {
       var vm = this;
       axios.get(API_URL+"api/v4")
       .then(function(response) {
-        // console.log(response);
         vm.words = response.data;
       })
       .catch(function(err) {
@@ -123,7 +122,6 @@ export default {
             // 콘텐츠 미리보기 슬라이스
             data.forEach(el => {
             el.tmp = el.content
-            // console.log(el)
             if (el.content.length > 40) {
                // 마크다운 사진 제외
                el.content = el.content.replace(/!\[.*\)+/, "")
@@ -138,7 +136,6 @@ export default {
             // this.posts = data
             });
             this.posts=data
-            console.log(data)
          })
       },
       postdetail(one_post) {
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index d436101..a2d90ad 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -176,7 +176,6 @@ export default {
           let year = el.publishedTime.slice(0,4);
           let month = el.publishedTime.slice(5,7);
           let day = el.publishedTime.slice(8,10);
-          // console.log(year+"년 "+month+"월 "+day+"일")
           el.publishedTime = year+"년 "+month+"월 "+day+"일"
           this.posts = data
         });
@@ -194,7 +193,6 @@ export default {
             this.topicData = this.topicData.concat(data)
             $state.loaded()
             this.limit += 1
-            console.log("after", this.topicData.length, this.limit)
             // 끝 지정(No more data) - 데이터가 EACH_LEN개 미만이면 
             if(data.length / EACH_LEN < 1) {
               $state.complete()
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 3005d6c..2d7892d 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -108,7 +108,6 @@ export default {
       //   this.loading = false
       //   return
       // }
-      console.log('TRY login')
       if (this.email && this.password) {
         storage.setItem("jwt-auth-token", "")
         storage.setItem("login_user", "")
@@ -131,7 +130,6 @@ export default {
               alert("입력 정보를 확인해주세요.")
             }
           })
-          .catch(err => console.log(err))
       } else {
         alert('이메일 또는 패스워드를 입력하지 않았습니다.')
       }
@@ -163,7 +161,6 @@ export default {
       }
       axios.post(API_URL + 'googlelogin', null, config)
       .then(res => {
-        console.log(res)
         storage.setItem("jwt-auth-token", res.data["jwt-auth-token"])
         storage.setItem("login_user", res.data.request_body.email)
         storage.setItem("uid", res.data.request_body.uid)
diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
index a9ee156..478e397 100644
--- a/frontend/src/components/Myblog.vue
+++ b/frontend/src/components/Myblog.vue
@@ -163,7 +163,6 @@ export default {
             let year = el.publishedTime.slice(0,4);
             let month = el.publishedTime.slice(5,7);
             let day = el.publishedTime.slice(8,10);
-            // console.log(year+"년 "+month+"월 "+day+"일")
             el.publishedTime = year+"년 "+month+"월 "+day+"일"
             this.posts = data
             });
@@ -182,7 +181,6 @@ export default {
               let year = el.publishedTime.slice(0,4);
               let month = el.publishedTime.slice(5,7);
               let day = el.publishedTime.slice(8,10);
-              // console.log(year+"년 "+month+"월 "+day+"일")
               el.publishedTime = year+"년 "+month+"월 "+day+"일"
               this.posts = data
 
diff --git a/frontend/src/components/Notice.vue b/frontend/src/components/Notice.vue
index ca51489..6cf2ef5 100644
--- a/frontend/src/components/Notice.vue
+++ b/frontend/src/components/Notice.vue
@@ -102,7 +102,6 @@ export default {
         // 콘텐츠 미리보기 슬라이스
         data.forEach(el => {
           el.tmp = el.content
-          // console.log(el)
           if (el.content.length > 40) {
             // 마크다운 사진 제외
             el.content = el.content.replace(/!\[.*\)+/, "")
diff --git a/frontend/src/components/PostTagBox.vue b/frontend/src/components/PostTagBox.vue
index 6d2ce3f..ce9783f 100644
--- a/frontend/src/components/PostTagBox.vue
+++ b/frontend/src/components/PostTagBox.vue
@@ -1,9 +1,9 @@
 <template>
   <v-row>
     <v-col cols="12">
-				<v-chip class="mx-1" v-for="tag in tags" :key="tag">
-					{{ tag }}
-				</v-chip>
+		<v-chip class="mx-1" v-for="tag in tags" :key="tag">
+			{{ tag }}
+		</v-chip>
     </v-col>
   </v-row>
 </template>
diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue
index 309498d..eeac50d 100644
--- a/frontend/src/components/Register.vue
+++ b/frontend/src/components/Register.vue
@@ -160,9 +160,9 @@ export default {
     }
   },
   watch: {
-    fillCheck(user){ 
-      user = this.user.email;
-      console.log(user)
+    fillCheck(){ 
+      // user = this.user.email;
+      // console.log(user)
       // if(){
       // }
       if(this.user.email && this.user.password && this.user.confirmPassword && this.user.name){
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index d54ca20..768ee87 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -111,23 +111,18 @@ export default {
 	},
 	methods: {
 		postList(){
-			// console.log(this.select.abbr)
-			// console.log(this.kword)
 			axios
 				.get(API_URL+`api/v2/find/${this.select.abbr}/${this.kword}`)
 				.then(({data})=>{
 					this.postcnt = data.length;
-					console.log(data);
 					data.forEach(el => {
 						let year = el.publishedTime.slice(0,4);
 						let month = el.publishedTime.slice(5,7);
 						let day = el.publishedTime.slice(8,10);
-						// console.log(year+"년 "+month+"월 "+day+"일")
 						el.publishedTime = year+"년 "+month+"월 "+day+"일"
 						this.posts = data;
 					})
 				});
-			// console.log(this.getFormatDate(this.posts.publishedTime));
 		},
 		postdetail(one_post) {
       storage.removeItem("pid")

From 6392aa46900d0f81f175f297c5a225af27e3915d Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 04:04:13 +0900
Subject: [PATCH 68/74] =?UTF-8?q?Modify:=20=EC=95=88=EC=93=B0=EB=8A=94=20v?=
 =?UTF-8?q?ue=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Post.vue | 24 ------------------------
 frontend/src/router/index.js     |  6 ------
 2 files changed, 30 deletions(-)
 delete mode 100644 frontend/src/components/Post.vue

diff --git a/frontend/src/components/Post.vue b/frontend/src/components/Post.vue
deleted file mode 100644
index 032a6db..0000000
--- a/frontend/src/components/Post.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div>
-		<!-- 사이드바 -->
-		<!-- 글 내용 -->
-		<!-- 사이드바 -->
-	</div>
-</template>
-
-<script>
-// import { Editor } from '@toast-ui/vue-editor'
-
-export default {
-	name: 'post',
-	data() {
-		return {
-				
-		}
-	},
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d8d2145..18caf27 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
 import Home from '../components/Home.vue'
 import Login from '../components/Login.vue';
 import Register from '../components/Register.vue'
-import Post from '../components/Post.vue'
 import TextEditor from '../components/TextEditor.vue'
 import Setting from '../components/Setting.vue'
 import PostDetail from '../components/PostDetail.vue'
@@ -60,11 +59,6 @@ export default new VueRouter({
       component: Setting,
       beforeEnter: requireAuth()
     },
-    {
-      path: '/create',
-      name: 'create',
-      component: Post
-    },
     {
       path: '/postdetail',
       name: 'postdetail',

From 9674eb5085d3999ec641a535ea07971fc725587f Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 04:35:35 +0900
Subject: [PATCH 69/74] =?UTF-8?q?Fix:=20Tag=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=EB=A6=AC=ED=84=B4=20=EA=B0=92=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=9E=91=EC=84=B1=EC=9E=90=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Forum.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Forum.vue b/frontend/src/components/Forum.vue
index fef0698..a427921 100644
--- a/frontend/src/components/Forum.vue
+++ b/frontend/src/components/Forum.vue
@@ -26,7 +26,7 @@
          <div class="taglist" v-if="posts.length>0">
             <div @click="postdetail(post)" class="onetag" v-for="post in posts" :key="post.pid">
                <div class="profile">
-                  <a><img :src="profileImg"></a>
+                  <a><img :src="post.authorInfo.profileImage"></a>
                   <div class="nickname">
                      {{post.author}}
                   </div>

From 60163da9d013a1370967e38fc2fc826d6148c287 Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 04:37:29 +0900
Subject: [PATCH 70/74] =?UTF-8?q?Fix:=20=EC=9C=A0=EC=A0=80=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A9=94=EC=9D=BC=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=EB=B0=94=20=EB=85=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Login.vue  | 10 +++-------
 frontend/src/components/Navbar.vue |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 2d7892d..5670750 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -101,18 +101,13 @@ export default {
   },
   methods: {
     login() {
-      // this.loading = true
-      // this.$validator.validateAll()
-
-      // if (this.errors.any()) {
-      //   this.loading = false
-      //   return
-      // }
       if (this.email && this.password) {
         storage.setItem("jwt-auth-token", "")
         storage.setItem("login_user", "")
+        storage.setItem("email", "")
         storage.setItem("uid", "")
         storage.setItem("google_login", "")
+        storage.setItem("profileImage", "")
         axios.post(API_URL+'api/signin', {
           email: this.email,
           password: this.password
@@ -121,6 +116,7 @@ export default {
               this.message = res.data.request_body.email + "로 로그인 되었습니다."
               storage.setItem("jwt-auth-token", res.data["jwt-auth-token"])
               storage.setItem("login_user", res.data.request_body.nickname)
+              storage.setItem("email", res.data.request_body.email)
               storage.setItem("uid", res.data.request_body.uid)
               storage.setItem("google_login", false)
               storage.setItem("profileImage", res.data.request_body.profileImage)
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 324a05d..dcd66f1 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -93,7 +93,7 @@ export default {
     return {
       uid: storage.getItem("uid"),
       nickname: storage.getItem("login_user"),
-      userEmail: "사용자메일@가져오기.com",
+      userEmail: storage.getItem("email"),
       profile: false,
       isLogin: this.$store.state.isLoggedIn,
       google_login: storage.getItem("google_login"),

From b6b9a53ce69cfa0907bbc408802153fff526899e Mon Sep 17 00:00:00 2001
From: gaberani <khs0783@naver.com>
Date: Fri, 21 Aug 2020 06:14:41 +0900
Subject: [PATCH 71/74] =?UTF-8?q?Fix:=20myblog=EC=97=90=EC=84=9C=20postdet?=
 =?UTF-8?q?ail=EB=A1=9C=20=EC=95=88=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20?=
 =?UTF-8?q?=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Myblog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Myblog.vue b/frontend/src/components/Myblog.vue
index 478e397..1a6eb34 100644
--- a/frontend/src/components/Myblog.vue
+++ b/frontend/src/components/Myblog.vue
@@ -190,6 +190,7 @@ export default {
     },
     postdetail(one_post) {
       storage.removeItem("pid")
+      storage.setItem("pid", one_post.pid)
       // 임시 저장
       if(one_post.isTemp){
         this.$router.push({name: 'texteditor', params: {data: one_post}})

From bbbd54725dd82ddf4e6ed53a4d9fd1bd5cd0eb06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A3=BC=ED=98=B8?= <einjuho7@ajou.ac.kr>
Date: Fri, 21 Aug 2020 07:27:50 +0900
Subject: [PATCH 72/74] =?UTF-8?q?feature:postdetail=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChildComment.vue |  33 ++-
 frontend/src/components/Comment.vue      | 124 ++++++---
 frontend/src/components/PostDetail.vue   | 321 +++++++++++++++--------
 frontend/src/components/PostTagBox.vue   |   8 +-
 4 files changed, 321 insertions(+), 165 deletions(-)

diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
index ad6d8af..fd71e22 100644
--- a/frontend/src/components/ChildComment.vue
+++ b/frontend/src/components/ChildComment.vue
@@ -1,9 +1,13 @@
 <template>
   <div>
-    <div>
-      <h5>{{ child.author }}</h5>
-      <p>{{ child.content }}</p>
-    </div>
+    <div class="main_comment">
+		<div>
+			<h5>{{child.author}}</h5>
+			<div class="mc_content">
+				<p>{{ child.content }}</p>
+			</div>
+		</div>
+	</div>
     <div>
       <v-btn
         class="mx-2 red accent-3 text-white"
@@ -83,6 +87,23 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.main_comment {
+	width: 100%;
+	display: flex;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	margin : 10px 0 10px 30px;
+}
+.main_comment h5{
+	font-weight: 800;
+}
+.mc_content {
+	max-height: 3.6rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mc_content p{
+	font-size: 1rem;
+	line-height: 1.2rem;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index 8113fc4..e6114bb 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -2,71 +2,83 @@
 	<!-- 댓글(comment)+대댓글(comment.child) -->
 	<div class="comment-body">
 		<!-- 댓글 하나 -->
-		<div class="comment-box justify-content-between">
+		<div class="comment-box">
 			<!-- 댓글 작성자, 내용 -->
-			<div>
-				<h5>{{ comment.author }}</h5>
-				<p class="mr-3">{{ comment.content }}</p>
+			<div class="main_comment">
+				<div>
+					<h5>{{ comment.author }}</h5>
+					<div class="mc_content">
+					<p>{{ comment.content }}</p>
+					</div>
+				</div>
+				<div class="btngrp">
+					<span style="margin-right: 10px;"
+						@click="onCommentDelete(comment)"
+					>삭제</span>
+					<span
+						@click="ClickUpdateBtn(comment)"
+					>수정</span>
+				</div>
 			</div>
 			<!-- 댓글 삭제, 수정 버튼 -->
-			<div>
-				<v-btn
-					class="mx-2 red accent-3 text-white"
-					color="white"
-					v-if="comment.isauthor"
-					@click="onCommentDelete(comment)"
-				>삭제</v-btn>
-				<v-btn
-					class="green accent-4"
-					v-if="comment.isauthor"
-					@click="ClickUpdateBtn(comment)"
-				>수정</v-btn>
-			</div>
+			
 		</div>
 		<!-- 댓글 수정 버튼 누를 시 인풋 -->
 		<div v-if="UpdateFlag" class="update-box">
 			<v-text-field
 				v-model="CommentUpdateInput"
-				solo
 				rows="2"
 				clearable
+				style="border-radius:0px"
+				flat
+				outlined
 			></v-text-field>
 			<v-btn @click="onCommentUpdate(comment)" class="update-btn">수정하기</v-btn>
 		</div>
 		<!-- 대댓글 버튼 & 갯수 -->
 		<div class="child-comment-btn">
 			<!-- 대댓글 보이기/숨기기 버튼 -->
-			<v-btn @click="ClickChildBtn" class="mx-2" fab x-small dark color="indigo">
+			<v-btn @click="ClickChildBtn" depressed outlined fab x-small dark color="#08d3bc"
+				style="border-radius:0px; margin-right: 10px">
 				<v-icon v-if="!ChildFlag" dark>mdi-plus</v-icon>
 				<v-icon v-if="ChildFlag">mdi-minus</v-icon>
 			</v-btn>
 			<!-- 대댓글 갯수 따라서 다른 설명 -->
-			<div class="my-auto">
-				<p class="" v-if="!isCommentChild(comment.child)">대댓글이 없습니다 ㅠㅠ</p>
-				<p class="" v-else>{{ comment.child.length }}개의 대댓글</p>
+			<div class="comment_c">
+				<p class="">{{ comment.child.length }}개의 코멘트</p>
 			</div>
 		</div>
 		<!-- 대댓글 -->
 		<div v-if="ChildFlag">
+			<!-- 대댓글 리스트 -->
+			<div v-for="child in comment.child" :key="child.cid" class="child-comment">
+				<ChildComment
+					:child="child"
+					@Click-Child-Update-Btn="ChildChange"
+					@Click-Child-Delete-Btn="ChildChange"
+				/>
+			</div>
 			<!-- 대댓글 작성 인풋 -->
 			<div class="child-box">
+				<span>댓글 코멘트</span>
 				<v-text-field
+					hide-details
 					v-model="ChildCommentInput"
 					flat
 					outlined
 					clearable
+					style="border-radius:0px"
 					rows="2"
 				></v-text-field>
-				<v-btn class="Child-Create-Btn" @click="onChildCommentCreate(comment.cid)">대댓글 작성하기</v-btn>
-			</div>
-			<!-- 대댓글 리스트 -->
-			<div v-for="child in comment.child" :key="child.cid" class="child-comment">
-				<ChildComment
-					:child="child"
-					@Click-Child-Update-Btn="ChildChange"
-					@Click-Child-Delete-Btn="ChildChange"
-				/>
+				<div class="comment_btn">
+					<v-btn 
+						color="#08d3bc"
+						depressed
+						style="border-radius:0px"
+						class="white--text" @click="onChildCommentCreate(comment.cid)">작성</v-btn>
+				</div>
 			</div>
+			
 		</div>
 	</div>
 </template>
@@ -171,14 +183,13 @@ export default {
 
 <style scoped>
 .comment-body {
-	margin: 1rem 0 1rem 1rem;
-  padding: 0 0 0.5rem 0;
-}
-.comment-box {
-	display: flex;
+	margin: 10px 0;
+	padding: 0 0 0.5rem 0;
 }
 .child-box {
 	display: inline;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+
 }
 .child-comment-btn {
 	display: flex;
@@ -194,9 +205,42 @@ export default {
 }
 .child-comment {
 	display: flex;
-	justify-content: space-between;
-	margin: 0.5rem 0 1rem 2rem;
-  padding: 0 0 0.5rem 0;
-  border-bottom: 1px solid #888888
+	padding: 0 0 0.5rem 0;
+	border-bottom: 1px solid #888888
+}
+.btngrp{
+	margin-top: -2px;
+}
+.btngrp span {
+	cursor: pointer;
+	font-size: 14px;
+}
+.main_comment {
+	width: 100%;
+	display: flex;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.main_comment h5{
+	font-weight: 800;
+}
+.mc_content {
+	max-height: 3.6rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mc_content p{
+	font-size: 1rem;
+	line-height: 1.2rem;
+}
+.comment_c p{
+	padding-top:7px;
+	font-size: 14px;
+}
+.comment_btn {
+  display:flex;
+}
+.comment_btn button {
+	margin-left: auto;
+	margin-top : 10px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 8332ffc..387d16a 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -1,111 +1,128 @@
 <template>
   <div id="app">
   <!-- navbar(로고에 개인 블로그 이름 추가되야함) -->
-    <Navbar/>
-    <v-container class="post-box">
-      <!-- {{ this.post }} -->
-      <v-row>
-        <!-- 왼쪽 사이드바(좋아요, 공유버튼) -->
-        <v-col cols="1" class="pa-0">
-        <v-btn icon depressed small @click="addToFeed" color="pink">
-          <v-icon :class="like"></v-icon>
-        </v-btn>
-        </v-col>
-        <!-- 게시글, 댓글 큰틀  -->
-        <v-col cols="10" class="pa-0">  
-          <v-layout column="12">
-            <!-- 게시글 헤더 -->
-            <h1 class="post-title">{{ post.title }}</h1>
-            <v-row justify="center">
-              <v-col cols="2">
-                <v-img class="author_profile_img" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
-              </v-col>
-              <v-col cols="10">
-                <h4 class="post-author">{{ post.author }} </h4>
-              </v-col>
-            </v-row>  
-            
-            <PostTagBox
-              :tagList="post.tag"
+  <Navbar/>
+  <div class="likepost">
+    <v-btn icon depressed small @click="addToFeed" color="pink">
+      <v-icon :class="like"></v-icon>
+    </v-btn>
+  </div>
+  <div class="detail_content">
+    <h1 class="post-title">{{ post.title }}</h1>
+    <div class="post_info">
+      <div class="post_author">
+        {{post.author}}
+      </div>
+      <div class="post_date">
+        {{post.publishedTime}}
+      </div>
+    </div>
+    <div class="taglist">
+      <PostTagBox
+          :tagList="post.tag"
+        />
+    </div>
+    <div class="post-content">
+      <!-- TextEditor 미리보기만(마크다운) -->
+      <!-- <Viewer :initialValue="this.post.content"/> -->
+      <Viewer 
+        :initialValue="this.post.content"
+        @change="onEditorChange"
+      />
+    </div>
+    <!-- 작성자 Thumnail, 자기 소개, 후원버튼 & 후원QR -->
+    <div class="author_info">
+      <div class="author_img">
+        <img :src="post.authorInfo.profileImage">
+      </div>
+      <div class="author_prof">
+        <span>{{ post.author }}</span>
+        <div v-if="post.authorInfo.introduce">
+        {{ post.authorInfo.introduce }}
+        </div>
+        <div v-else>
+          안녕하세요, {{ post.author }}입니다.
+        </div>
+        <!-- 소셜 로그인 버튼 -->
+        <div class="social-login">
+          <i v-if="post.authorInfo.github" small class="fab fa-github fa-2x mr-3" href="`https://github.com/${post.authorInfo.github}`"></i>
+          <i v-if="post.authorInfo.instagram" small class="fab fa-instagram fa-2x mr-3" href=""></i>
+          <i v-if="post.authorInfo.facebook" small class="fab fa-facebook fa-2x mr-3" href=""></i>
+        </div>
+      </div>
+    </div>
+    <div class="author_dona">
+      <div class="dona_btn" v-if="post.authorInfo.qrImage">
+        <v-btn
+          tile
+          depressed
+          outlined
+          color="#08d3bc"
+          @click="ClickQrBtn" v-if="!qrflag"
+        >글쓴이에게 후원하기</v-btn>
+        <div v-if="qrflag" class="qrimage-resize" @click="ClickQrBtn">
+          <v-img :src="post.authorInfo.qrImage"></v-img>
+        </div>
+      </div>
+      <div v-else></div>
+    </div>
+    
+    <div class="comment_area">
+      <div class="comment_input">
+        <v-textarea
+          clearable
+          flat
+          outlined
+          hide-details
+          label="댓글 내용을 작성하세요"
+          rows="3"
+          v-model="CommentInput"
+          style="border-radius:0px"
+        ></v-textarea>
+        <div class="comment_btn">
+          <v-btn
+            depressed
+            color="#08d3bc"
+            @click="onCommentCreate"
+            style="border-radius:0px"
+            class="white--text"
+          >댓글 작성
+          </v-btn>
+        </div>
+      </div>
+      <div class="comment_p" v-if="renderComponent">
+          <div v-for="comment in Comments" :key="comment.cid">
+            <Comment 
+              :comment="comment"
+              @Click-Delete-Btn="CommentRead"
+              @Click-Update-Btn="CommentRead"
+              @Child-Create="CommentRead"
+              @Click-Child-Change-Btn="CommentRead"
             />
-            <!-- TextEditor 미리보기만(마크다운) -->
-            <v-col cols="12" class="post-content">
-              <!-- <Viewer :initialValue="this.post.content"/> -->
-              <Viewer 
-                :initialValue="this.post.content"
-                @change="onEditorChange"
-              />
-            </v-col>
-            <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-            <v-col v-if="post.isauthor" cols="12">
-              <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
-              <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
-            </v-col>
-            <!-- 블로그 작성자 Thumnail -->
+        </div>
+      </div>
+    </div>
+    <v-row>
+      
+      <!-- 게시글, 댓글 큰틀  -->
+      <v-col cols="10" class="pa-0">  
+        <v-layout column="12">
+          <!-- 게시글 헤더 -->
+        
+          <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+          <v-col v-if="post.isauthor" cols="12">
+            <v-btn @click="onPostUpdateBtn" color="success">게시글 수정</v-btn>
+            <v-btn @click="onPostDeleteBtn" color="primary">게시글 삭제</v-btn>
+          </v-col>
+          <!-- 블로그 작성자 Thumnail -->
 
-            <!-- 작성자 Thumnail, 자기 소개, 후원버튼 & 후원QR -->
-            <v-row>
-              <v-col cols="3">
-                <v-img class="author_profile_img" v-if="post.authorInfo.profileImage" :src="post.authorInfo.profileImage"></v-img>
-                <p v-else>{{ post.author }}</p>
-              </v-col>
-              <v-col cols="4" v-if="post.authorInfo.introduce">
-                {{ post.authorInfo.introduce }}
-              </v-col>
-              <v-col cols="3" v-else>
-                안녕하세요, {{ post.author }}입니다.
-              </v-col>
-              <v-col v-if="post.authorInfo.qrImage" cols="5">
-                <v-btn @click="ClickQrBtn" v-if="!qrflag">글쓴이에게 후원하기</v-btn>
-                <div class="qrimage-resize">
-                  <v-img v-if="qrflag" :src="post.authorInfo.qrImage"></v-img>
-                </div>
-              </v-col>
-              <v-col v-else cols="5"></v-col> 
-            </v-row>
-            <!-- 소셜 로그인 버튼 -->
-            <v-row class="social-login">
-              <i v-if="post.authorInfo.github" class="fab fa-github fa-3x" href=""></i>
-              <i v-if="post.authorInfo.instagram" class="fab fa-instagram fa-3x" href=""></i>
-              <i v-if="post.authorInfo.facebook" class="fab fa-facebook fa-3x" href=""></i>
-            </v-row>
-            <h3 class="comment-header">댓글</h3>
-            <!-- 댓글 작성창 -->
-            <div class="col-lg-12 mb-2">          
-              <v-textarea
-                clearable
-                label="댓글 내용을 작성하세요"
-                rows="3"
-                v-model="CommentInput"
-                solo
-              ></v-textarea>
-              <v-btn
-                @click="onCommentCreate"
-              >댓글 작성
-              </v-btn>
-            </div>
-            <!-- 댓글 목록 -->
-            <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-            <div v-if="renderComponent">
-              <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
-                <Comment 
-                  :comment="comment"
-                  @Click-Delete-Btn="CommentRead"
-                  @Click-Update-Btn="CommentRead"
-                  @Child-Create="CommentRead"
-                  @Click-Child-Change-Btn="CommentRead"
-                />
-              </div>
-            </div>
-          </v-layout>
-        </v-col>
-        <v-col cols="1"></v-col>
-        <!-- 오른쪽 사이드바 -->
-        <!-- <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
-          <h3> 게시글 목차 </h3>
-        </v-col> -->
-      </v-row>
-    </v-container>
+          <!-- 댓글 목록 -->
+          <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+          
+        </v-layout>
+      </v-col>
+    </v-row>
+  </div>
   </div>
 </template>
 
@@ -135,6 +152,7 @@ export default {
             title: '',
             author: '',
             content: '',
+            publishedTime: '',
             // islike: this.$route.params.data.isLike,
           },
           // content: this.$route.params.data.content,
@@ -158,6 +176,11 @@ export default {
           this.post.author = res.data.author
           this.post.content = res.data.content
           this.post.islike = res.data.isLike
+          let year = res.data.publishedTime.slice(0,4);
+          let month = res.data.publishedTime.slice(5,7);
+          let day = res.data.publishedTime.slice(8,10);
+          this.post.publishedTime = year+"년 "+month+"월 "+day+"일"
+          
           if(this.post.islike===true){
             this.like = "fas fa-heart"
             this.FeedFlag= true
@@ -168,6 +191,7 @@ export default {
           this.Comments = res.data.comments
           this.isCommentauthor(this.Comments)
           this.post.isauthor = this.isPostauthor()
+          console.log(this.post)
       })
     },
     mounted() {
@@ -326,11 +350,46 @@ export default {
 </script>
 
 <style scoped>
-#side {
-  margin-left:2vw;
-  position: sticky;
-  top : 130px;
+.detail_content {
+  padding-top:151px;
+  max-width:980px;
+  margin: 0 auto;
+}
+.post_info{
+  display: flex;
+}
+.post_author{
+  font-family: 'Inter', sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  padding-right: 30px;
+}
+.post_date{
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+  font-size: 14px;
+  margin: auto 0;
+}
+.taglist{
+  margin: 10px 0;
 }
+.post_content{
+  height:700px;
+}
+.author_dona{
+  width: 100%;
+  margin-top: 42px;
+}
+.dona_btn{
+  margin-top:-123px;
+  float: right;
+}
+.qrimage-resize {
+  margin-top:-63px;
+  width: 10rem;
+  height: 10rem;
+  overflow: hidden;
+}
+
 .test {
   display: flex
 }
@@ -338,26 +397,60 @@ export default {
   margin-top: 130px;
 }
 .social-login{
-  margin: 1rem 0;
+  padding-top: 10px;
+  color:#ccc
 }
 .post-title {
   margin: 0 0 2rem 0;
-  border-bottom: 1px solid black;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+  font-size: 36px;
+  font-weight: 800;
 }
 .post-content {
+  min-height:500px;
   margin: 2rem 0 2rem 0;
   padding: 0 0 1rem 0;
-  border-bottom: 1.5px solid #888888
+}
+.author_info {
+  display: flex;
+}
+.author_img{
+  width: 128px;
+  height: 128px;
+}
+.author_img img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1px solid #ddd;
+}
+.author_prof{
+  padding-top:10px;
+  padding-left: 15px;
+  margin: auto 0;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+  font-size: 20px;
+  line-height: 28px;
+}
+.author_prof span{
+  font-size: 32px;
+  font-weight: 800;
+}
+.comment_btn {
+  display:flex;
+}
+.comment_input button {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-left: auto;
 }
 .comment-header {
   margin: 2rem 0 2rem 0;
   padding: 0 0 1rem 0;
   border-bottom: 1.5px solid #888888
 }
-.qrimage-resize {
-  width: 10rem;
-  height: 15rem;
-}
+
 .author_profile_img {
   border-radius: 50%;
 } 
diff --git a/frontend/src/components/PostTagBox.vue b/frontend/src/components/PostTagBox.vue
index ce9783f..97045c9 100644
--- a/frontend/src/components/PostTagBox.vue
+++ b/frontend/src/components/PostTagBox.vue
@@ -1,11 +1,9 @@
 <template>
-  <v-row>
-    <v-col cols="12">
-		<v-chip class="mx-1" v-for="tag in tags" :key="tag">
+    <div>
+		<v-chip class="mr-2 white--text" v-for="tag in tags" :key="tag" color="#08d3bc">
 			{{ tag }}
 		</v-chip>
-    </v-col>
-  </v-row>
+    </div>
 </template>
 
 <script>

From 88a568581c82c705512329e8dcb7292a50dfa0be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Fri, 21 Aug 2020 09:29:26 +0900
Subject: [PATCH 73/74] =?UTF-8?q?mod:=20comment=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChildComment.vue | 35 +++++++++++++++---------
 frontend/src/components/Comment.vue      |  6 ++--
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
index fd71e22..7fc1974 100644
--- a/frontend/src/components/ChildComment.vue
+++ b/frontend/src/components/ChildComment.vue
@@ -7,19 +7,20 @@
 				<p>{{ child.content }}</p>
 			</div>
 		</div>
+		<div class="btngrp">
+			<span
+				v-if="child.isauthor"
+				style="margin-right: 10px;"
+				@click="onCommentDelete(child)"
+				>삭제</span>
+			<span 
+				v-if="child.isauthor"
+				style="margin-right: 10px;"
+				@click="ClickChildUpdateBtn(child)"
+				>수정</span>
+		</div>
 	</div>
     <div>
-      <v-btn
-        class="mx-2 red accent-3 text-white"
-        v-if="child.isauthor"
-        @click="onCommentDelete(child)"
-      >삭제</v-btn>
-      <v-btn 
-        class="green accent-4"
-        color="white"
-        v-if="child.isauthor"
-        @click="ClickChildUpdateBtn(child)"
-      >수정</v-btn>
       <div v-if="ChildUpdateFlag" class="update-box">
 				<v-text-field
 					v-model="ChildUpdateInput"
@@ -92,10 +93,11 @@ export default {
 	width: 100%;
 	display: flex;
 	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
-	margin : 10px 0 10px 30px;
+	margin : 10px 0 10px 0;
 }
-.main_comment h5{
+.main_comment div h5{
 	font-weight: 800;
+	margin-right: 20px;
 }
 .mc_content {
 	max-height: 3.6rem;
@@ -106,4 +108,11 @@ export default {
 	font-size: 1rem;
 	line-height: 1.2rem;
 }
+.btngrp{
+	margin-top: -2px;
+}
+.btngrp span {
+	cursor: pointer;
+	font-size: 14px;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index e6114bb..2c12304 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -205,8 +205,7 @@ export default {
 }
 .child-comment {
 	display: flex;
-	padding: 0 0 0.5rem 0;
-	border-bottom: 1px solid #888888
+	margin: 0 0 0.5rem 2rem;
 }
 .btngrp{
 	margin-top: -2px;
@@ -223,6 +222,9 @@ export default {
 .main_comment h5{
 	font-weight: 800;
 }
+h5 {
+	margin-right: 20px;
+}
 .mc_content {
 	max-height: 3.6rem;
 	overflow: hidden;

From bc59ac62405e479a7524782445e52ee6673c8a8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=ED=95=98?= <0311minha@gmail.com>
Date: Fri, 21 Aug 2020 10:11:23 +0900
Subject: [PATCH 74/74] =?UTF-8?q?feature:=20=EC=A2=8B=EC=95=84=EC=9A=94,?=
 =?UTF-8?q?=20=EA=B8=80=EC=94=A8=ED=81=AC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostDetail.vue | 45 ++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 387d16a..656cd90 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -2,13 +2,17 @@
   <div id="app">
   <!-- navbar(로고에 개인 블로그 이름 추가되야함) -->
   <Navbar/>
-  <div class="likepost">
-    <v-btn icon depressed small @click="addToFeed" color="pink">
-      <v-icon :class="like"></v-icon>
-    </v-btn>
-  </div>
   <div class="detail_content">
     <h1 class="post-title">{{ post.title }}</h1>
+    <div class="btn_outer">
+      <div class="likepost">
+        <div class="remote_likepost">
+          <v-btn icon fab outlined depressed large @click="addToFeed" color="pink">
+            <v-icon :class="like"></v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </div>
     <div class="post_info">
       <div class="post_author">
         {{post.author}}
@@ -349,7 +353,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+.btn_outer{
+  position: relative;
+  margin-top: 2rem;
+}
+.likepost{
+  position: absolute;
+  left: 64rem;
+}
+.remote_likepost{
+  position: fixed;
+}
 .detail_content {
   padding-top:151px;
   max-width:980px;
@@ -410,6 +425,7 @@ export default {
   min-height:500px;
   margin: 2rem 0 2rem 0;
   padding: 0 0 1rem 0;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
 }
 .author_info {
   display: flex;
@@ -454,4 +470,21 @@ export default {
 .author_profile_img {
   border-radius: 50%;
 } 
+.tui-editor-contents p{
+  font-size: 1.125rem;
+}
+.tui-editor-contents li{
+  font-size: 1.125rem;
+}
+.tui-editor-contents h1{
+  font-size: 32px;
+  font-family: 'inter', 'NanumSquare','나눔스퀘어', sans-serif;
+  line-height:35px;
+}
+.tui-editor-contents h2{
+  font-size: 24px;
+  font-family: 'inter', 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+  font-weight: 700;
+  line-height:30px;
+}
 </style>
\ No newline at end of file