Frontend

frontend/package.json

@@ -12,21 +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",
@@ -39,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",

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <router-view />
+    <!-- <router-view :key="someVariableUnderYourControl"/> -->
+    <router-view :key="$route.fullPath"/>
   </v-app>
 </template>
 
@@ -14,7 +15,6 @@ export default {
 
     }
   },
-
 }
 </script>
 

frontend/src/components/ChildComment.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="main_comment">
+		<div>
+			<h5>{{child.author}}</h5>
+			<div class="mc_content">
+				<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>
+      <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 scoped>
+.main_comment {
+	width: 100%;
+	display: flex;
+	font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+	margin : 10px 0 10px 0;
+}
+.main_comment div h5{
+	font-weight: 800;
+	margin-right: 20px;
+}
+.mc_content {
+	max-height: 3.6rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mc_content p{
+	font-size: 1rem;
+	line-height: 1.2rem;
+}
+.btngrp{
+	margin-top: -2px;
+}
+.btngrp span {
+	cursor: pointer;
+	font-size: 14px;
+}
+</style>

frontend/src/components/Cloud.vue

@@ -0,0 +1,163 @@
+<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}`) 
+               }
+        },
+        rotate: {
+            type: [Function, String, Number],
+            default: 0,
+        },
+        font: {
+            type: [String, Function],
+            default: 'Roboto'
+        },
+        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>