diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 364f186..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",
@@ -10959,6 +11430,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",
@@ -10978,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",
@@ -11020,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",
@@ -11049,6 +11540,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",
@@ -11113,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",
@@ -11258,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",
@@ -11715,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",
@@ -11733,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",
@@ -11807,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 49291cd..57f31a3 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 03a2176..9c9d67e 100644
--- a/frontend/src/App.vue
+++ b/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>
 
diff --git a/frontend/src/components/ChildComment.vue b/frontend/src/components/ChildComment.vue
new file mode 100644
index 0000000..7fc1974
--- /dev/null
+++ b/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>
\ 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..1d8dd15
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Comment.vue b/frontend/src/components/Comment.vue
index f5de024..2c12304 100644
--- a/frontend/src/components/Comment.vue
+++ b/frontend/src/components/Comment.vue
@@ -1,73 +1,112 @@
 <template>
-	<div class="">
+	<!-- 댓글(comment)+대댓글(comment.child) -->
+	<div class="comment-body">
+		<!-- 댓글 하나 -->
 		<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="onCommentUpdate(comment)"
-			>수정</v-btn>
+			<!-- 댓글 작성자, 내용 -->
+			<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>
-		<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 v-if="UpdateFlag" class="update-box">
+			<v-text-field
+				v-model="CommentUpdateInput"
+				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" 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 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 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>
+				<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>
 
 <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,
+			CommentUpdateInput: '',
+			UpdateFlag: false,
 			ChildFlag: false,
-			ChildCommentInput: '',
 		}
 	},
+	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"))) {
@@ -77,47 +116,133 @@ export default {
 				alert('비정상적인 접근입니다')
 			}
 		},
-		// 댓글 수정(아직 수정 필요함)
+		// 댓글 Update 메서드
 		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}`)
-					.then(() => this.$emit('Click-Update-Btn'))
+				const tmp_comment = {
+					content: this.CommentUpdateInput,
+					cid: one_comment.cid
+				}
+				axios.put(API_URL + `api/v3/`, tmp_comment)
+					.then(() => {
+						alert('수정되었습니다.')
+						this.$emit('Click-Update-Btn')
+						this.CommentUpdateInput = ''
+						this.UpdateFlag = !this.UpdateFlag
+					})
 			} else {
 				alert('비정상적인 접근입니다')
 			}
 		},
 		// 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
 		},
-		// 대댓글 보기, 숨기기 Boolean 반전 메서드
-		onClickChildBtn() {
-			this.ChildFlag = !this.ChildFlag
+		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
+			}
 		},
+		
 
 		// *** Child Comment ***
-		onChildCommentCreate(pid) {
+		// 대댓글 Create 메서드
+		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'))
 					.catch(err => console.log(err))
 			}
+		},
+		// 대댓글 보기, 숨기기 버튼 - ChildFlag 토글 메서드
+		ClickChildBtn() {
+			this.ChildFlag = !this.ChildFlag
+			this.$nextTick()
+		},
+		// ChildComment의 이벤트 발생 듣고 PostDetail로 올림
+		ChildChange() {
+			this.$emit("Click-Child-Change-Btn")
 		}
 	}
 }
 </script>
 
-<style>
-.comment-box {
-  display: flex
+<style scoped>
+.comment-body {
+	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;
+}
+.update-box {
+	display: flex;
+}
+.update-btn {
+	margin-left: 5px;
+}
+.Child-Create-Btn {
+	margin-bottom: 2rem;
+}
+.child-comment {
+	display: flex;
+	margin: 0 0 0.5rem 2rem;
+}
+.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;
+}
+h5 {
+	margin-right: 20px;
+}
+.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/Feed.vue b/frontend/src/components/Feed.vue
index 3ec745f..6ed032b 100644
--- a/frontend/src/components/Feed.vue
+++ b/frontend/src/components/Feed.vue
@@ -1,15 +1,220 @@
 <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 {
+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
+          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
+}
+.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
new file mode 100644
index 0000000..a427921
--- /dev/null
+++ b/frontend/src/components/Forum.vue
@@ -0,0 +1,289 @@
+<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"
+               @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 @click="postdetail(post)" class="onetag" v-for="post in posts" :key="post.pid">
+               <div class="profile">
+                  <a><img :src="post.authorInfo.profileImage"></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>
+
+<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'
+
+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,
+      Cloud
+   },
+   props:{
+      onWordClick:{
+         type: Function,
+         default:()=>{
+
+         }
+      }
+   },
+   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: '',
+         tagclick: false,
+         posts : {
+            pid: '',
+            title: '',
+            content: '',
+            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) {
+        vm.words = response.data;
+      })
+      .catch(function(err) {
+        console.log(err);
+      })
+   },
+   computed: {
+      
+   },
+   mounted(){
+      this.onWordClick();
+   },
+   methods: {
+      searchtagname(name){
+         this.tagclick = true;
+         this.tag = name;
+         axios.get(API_URL+'api/v4/'+name.text)
+         .then(({data})=>{
+            // 콘텐츠 미리보기 슬라이스
+            data.forEach(el => {
+            el.tmp = el.content
+            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
+         })
+      },
+      postdetail(one_post) {
+         storage.removeItem("pid")
+         storage.setItem("pid", one_post.pid)
+         this.$router.push({name: 'postdetail', params: {data: one_post}})
+      },
+   },
+}
+</script>
+
+<style>
+.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: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: '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;
+   padding: 30px 0 50px;
+   border-bottom: 1px solid #ddd;
+}
+.tagcnt{
+   max-width: 738px;
+   margin: 0 auto;
+   line-height: 17px;
+   padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index f1067f7..eaeb6d1 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -37,55 +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'">
+              <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"
-                  max-width="350px"
-                  :elevation="hover ? 8 : 2"
-                >
-                  <v-img
-                    class="white--text align-end"
-                    height="200px"
-                    :src="post.thumbnail"
-                  />
-                    <!-- 제목이 가로범위 초과시 ... -->
-                    <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>
-                </v-card>
+                  <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="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-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>
@@ -95,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();
 
@@ -111,7 +114,7 @@ export default {
     return {
       tab: null,
       items: [
-        '최신', '조회수', '좋아요'
+        '조회수', '좋아요', '최신'
       ],
       posts : {
         pid: '',
@@ -119,44 +122,90 @@ export default {
         content: '',
         publishedTime: '',
         thumbnail:'',
-      }
+      },
+      limit: 1
     }
   },
   created() {
-    this.postread('latest')
+    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: {
     postdetail(one_post) {
       storage.removeItem("pid")
       storage.setItem("pid", one_post.pid)
-      this.$router.push({name: 'postdetail', params: {data: one_post}})
+      // this.$router.push({name: 'postdetail', params: {data: one_post}})
+      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 => {
-          el.tmp = el.content
-          if (el.content.length > 40) {
+          // el.tmp = el.content
+          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);
+          el.publishedTime = year+"년 "+month+"월 "+day+"일"
           this.posts = data
         });
+        console.log(data);
       })
       .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
+            // 끝 지정(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);
+      })
     }
   }
 }
@@ -205,9 +254,52 @@ 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{
+  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>
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 30e4196..5670750 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> 
@@ -100,19 +101,13 @@ export default {
   },
   methods: {
     login() {
-      // this.loading = true
-      // this.$validator.validateAll()
-
-      // if (this.errors.any()) {
-      //   this.loading = false
-      //   return
-      // }
-      console.log('TRY login')
       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
@@ -120,16 +115,17 @@ 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("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)
               this.$router.push('/')
             } else {
               this.message = "로그인해주세요."
               alert("입력 정보를 확인해주세요.")
             }
           })
-          .catch(err => console.log(err))
       } else {
         alert('이메일 또는 패스워드를 입력하지 않았습니다.')
       }
@@ -161,11 +157,12 @@ 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)
         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))
@@ -196,13 +193,14 @@ 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;
 }
 .login_btn{
-  margin : 20px 0 0 0;
+  margin : 60px 0 0 0;
 }
 
 .v-input{
@@ -210,21 +208,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;
@@ -233,4 +231,8 @@ header {
   margin: 0 0;
   padding: 15px 101px;
 }
+.logo {
+  font-family: 'Inter', sans-serif;
+  font-weight: 800;
+}
 </style>
\ No newline at end of file
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/Myblog.vue b/frontend/src/components/Myblog.vue
new file mode 100644
index 0000000..1a6eb34
--- /dev/null
+++ b/frontend/src/components/Myblog.vue
@@ -0,0 +1,248 @@
+<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);
+            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);
+              el.publishedTime = year+"년 "+month+"월 "+day+"일"
+              this.posts = data
+
+            });
+          }).catch(err => console.log(err))
+      }
+    },
+    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}})
+      }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 15d7ff7..dcd66f1 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -11,14 +11,18 @@
       <router-link to="/introduce">소개</router-link>
     </v-toolbar-items>
     <v-toolbar-items style="align-items: center">
-      피드
+      <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>
-        <span>{{noticemsg}}</span>
+        <div class="banner" @click="gotonotice">
+          {{list.title}}
+        </div>
 			</div>
 			<v-spacer></v-spacer>
       <router-link to="/search">
@@ -39,48 +43,68 @@
       </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>
         </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">
-              <GoogleLogout :params="params" :logoutButton=true>로그아웃</GoogleLogout>
-            </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>
 
 <script>
 const storage = window.sessionStorage
-import GoogleLogin from 'vue-google-login' 
+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: {
-    GoogleLogout: GoogleLogin,
+    GoogleLogin,
+
   },
   data() {
     return {
+      uid: storage.getItem("uid"),
+      nickname: storage.getItem("login_user"),
+      userEmail: storage.getItem("email"),
       profile: false,
       isLogin: this.$store.state.isLoggedIn,
-      noticemsg: '공지입니다.',
       google_login: storage.getItem("google_login"),
+      profileImage: storage.getItem("profileImage"),
+
+      list: {
+        title:''
+      },
+      index: 0,
+      text: '',
+      speed: 2000
     }
   },
   computed: {
@@ -108,17 +132,29 @@ export default {
     },
     profileshow() {
       this.profile = !this.profile
+    },
+    gotonotice(){
+      this.$router.push({path:'notice'})
     }
   },
   created() {
     this.loginChecker()
+    //공지사항 받아옴
+    axios.get(API_URL + 'api/v2/notice')
+        .then(res => {
+          // this.post = res.data
+          // pid를 활용하여 게시글로 이동
+          this.list.title = res.data[0].title
+    })
+    sessionStorage.setItem("noticelist",this.list.title)
   },
-  mounted() {
-    this.loginChecker()
+  mounted(){
+    // this.text = this.list[this.index];
+    this.loginChecker();
+    this.text = "공지사항";
+    setInterval(this.getTextFromList, this.speed);
   },
-  // computed() {
-  //   this.loginChecker()
-  // }
+
   // watch: {
   //   isLogin (val, prev) {
   //     if (val !== prev) {
@@ -156,7 +192,7 @@ div > .newpost > a >button{
 }
 div > .newpost > a >button:hover {
   background-color:#6e8af8;
-  /* color:white !important;  */
+  color:white !important; 
 }
 .logo_title{
 	display : inline-block;
@@ -176,8 +212,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:'|';
@@ -202,11 +260,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..6cf2ef5
--- /dev/null
+++ b/frontend/src/components/Notice.vue
@@ -0,0 +1,213 @@
+<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
+          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/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/components/PostDetail.vue b/frontend/src/components/PostDetail.vue
index 8ba0e52..656cd90 100644
--- a/frontend/src/components/PostDetail.vue
+++ b/frontend/src/components/PostDetail.vue
@@ -2,74 +2,138 @@
   <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>
-
-          <!-- TextEditor 미리보기만(마크다운) -->
-          <div class="col-lg-12">
-            <Viewer :initialValue="this.content"/>
-          </div>
-          <!-- 게시글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-          <div></div>
-          <!-- 블로그 작성자 Thumnail -->
-
-          <!-- 짧은 자기 소개 -->
-
-        <!-- 댓글 작성창 -->
-        <div class="col-lg-9">          
-          <v-textarea
-            clearable
-            label="댓글 작성"
-            placeholder="댓글을 작성하세요"
-            v-model="CommentInput"
-          ></v-textarea>
+  <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}}
+      </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>
-        <!-- 댓글 목록 -->
-        <h1>댓글창</h1>
-        <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
-        <div v-for="comment in Comments" :key="comment.cid" class="col-lg-12">
-          <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"
             />
-          </div>
         </div>
-        </v-layout>
-      </v-col>
+      </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 -->
 
-      <!-- 오른쪽 사이드바 -->
-      <v-col id="side" class="hidden-sm-and-down pa-0" cols="3">
-        <h3> 게시글 목차 </h3>
+          <!-- 댓글 목록 -->
+          <!-- 댓글 수정, 삭제(작성자랑 일치할 경우 버튼 노출) -->
+          
+        </v-layout>
       </v-col>
     </v-row>
-  </v-container>
+  </div>
   </div>
 </template>
 
 <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'
@@ -84,6 +148,7 @@ export default {
       Viewer,
       Navbar,
       Comment,
+      PostTagBox,
     },
     data() {
         return {
@@ -91,69 +156,119 @@ export default {
             title: '',
             author: '',
             content: '',
+            publishedTime: '',
+            // 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: false,
-          like: "far fa-heart",
-          // dislike: "far fa-heart",
+          FeedFlag: '',
+          like: '',
+          renderComponent: true,
+          qrflag: false,
         }
     },
     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 = res.data
           this.post.title = res.data.title
           this.post.author = res.data.author
           this.post.content = res.data.content
-          console.log(this.post)
+          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
+          } else {
+            this.like = "far fa-heart"
+            this.FeedFlag = false
+          }
           this.Comments = res.data.comments
-          // console.log(this.Comments)
           this.isCommentauthor(this.Comments)
-          this.isPostauthor(this.isPostauthor)
+          this.post.isauthor = this.isPostauthor()
+          console.log(this.post)
       })
     },
     mounted() {
+      this.fetchData()
     },
-    // computed() {
-    // },
     methods: {
+      forceRerender() {
+        this.renderComponent = false;
+        this.$nextTick(() => {
+          this.renderComponent = true;
+        })
+      },
       fetchData() {
-        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
-            console.log(this.post)
             this.Comments = res.data.comments
             this.isCommentauthor(this.Comments)
-            this.isPostauthor(this.isPostauthor)
+            this.post.isauthor = this.isPostauthor()
           })
       },
+      onEditorChange() {
+        this.fetchData()
+      },
       // 글 작성자인지 확인
       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
         }
       },
+      // 게시글 수정 페이지로 보내는 버튼
+      onPostUpdateBtn() {
+        if (this.isPostauthor()) {
+          console.log()
+          // this.$router.push({path:`/${}/${}`})
+        }
+      },
+
+      // 게시글 삭제 버튼
+      onPostDeleteBtn() {
+        if (this.isPostauthor()) {
+          axios.delete(API_URL + 'api/v2/' + this.post.pid)
+            .then(() => {
+              alert('게시글이 삭제되었습니다.')
+              this.$router.push('/')
+          })
+        }
+      },
+      
       // 댓글 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('로그인한 유저만 댓글을 달 수 있습니다.')
         }
@@ -161,7 +276,10 @@ 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.forceRerender()
+          })
         this.CommentInput = ""
       },
       // 작성자 비교 후 삭제 버튼 flag 설정하는 메서드
@@ -172,6 +290,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
       },
@@ -181,8 +308,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"),
@@ -199,10 +327,15 @@ export default {
           //삭제하면 db에서 제거
           else {
             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);
+              console.log(response);
             })
             .catch(function(error){
               console.log(error);
@@ -212,21 +345,146 @@ export default {
         else {
           alert('로그인 후 이용해주세요.')
         }
+      },
+      ClickQrBtn() {
+        this.qrflag = !this.qrflag
       }
     }
 }
 </script>
 
-<style scoped>
-#side {
-  margin-left:2vw;
-  position: sticky;
-  top : 130px;
+<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;
+  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
 }
 .post-box {
   margin-top: 130px;
 }
+.social-login{
+  padding-top: 10px;
+  color:#ccc
+}
+.post-title {
+  margin: 0 0 2rem 0;
+	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;
+  font-family: 'NanumSquare','나눔스퀘어','Noto Sans','Apple SD Gothic',sans-serif;
+}
+.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
+}
+
+.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
diff --git a/frontend/src/components/PostTagBox.vue b/frontend/src/components/PostTagBox.vue
new file mode 100644
index 0000000..97045c9
--- /dev/null
+++ b/frontend/src/components/PostTagBox.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+		<v-chip class="mr-2 white--text" v-for="tag in tags" :key="tag" color="#08d3bc">
+			{{ tag }}
+		</v-chip>
+    </div>
+</template>
+
+<script>
+  export default {
+		name: "PostTagBox",
+    data() {
+			return {
+				tags: this.$attrs.tagList,
+			}
+		}
+  }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue
index 56a01c3..eeac50d 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 
@@ -163,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){
@@ -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/components/Search.vue b/frontend/src/components/Search.vue
index 05afd69..768ee87 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,44 +87,48 @@ export default {
 	},
 	data() {
 		return{
-			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: '',
+		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: '',
+		profileImg: '',
+		basicthumb: 'http://i3a507.p.ssafy.io/img/default/thumbnail.jpg'
 		}
 	},
-	mounted(){
-		console.log(this.posts);
+	created(){
+		this.profileImg = storage.profileImage;
 	},
 	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.posts = data;
 					this.postcnt = data.length;
+					data.forEach(el => {
+						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(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 +153,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 +198,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/Setting.vue b/frontend/src/components/Setting.vue
index 029e778..9e5611a 100644
--- a/frontend/src/components/Setting.vue
+++ b/frontend/src/components/Setting.vue
@@ -1,232 +1,226 @@
 <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">
+						<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="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>
-
-						<div>
-							<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-							<v-btn depressed width="120px" @click="deleteProfileImage">이미지 제거</v-btn>
+						<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>
-				</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="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>
-					</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 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>
-							<v-text-field 
-							prepend-icon="fab fa-instagram" 
-							v-model="userinfo.instagram"
-							hint="Instagram address"
-							prefix="https://instagram.com/"
-							></v-text-field>
+					</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 v-else>
+								<v-text-field 
+									outlined
+									dense
+									v-model="userinfo.nickname" 
+									hide-details 
+									style="border-radius:0px"/>
+							</div>
 						</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 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 v-else>
+								<v-textarea 
+									rows="3"
+									outlined
+									dense 
+									hide-details 
+									v-model="userinfo.introduce" 
+									style="border-radius:0px"
+								/>
+							</div>
 						</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 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>
-					</v-col>
-
-					
-
-
-				</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>
+					<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>
+							<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>
-								<!-- 기본 이미지로 대체 후, 데이터베이스에서 String = null -->
-								<v-btn depressed width="120px" @click="deleteQRImage">이미지 제거</v-btn>
+								<v-text-field 
+								outlined
+								dense
+								style="border-radius:0px"
+								prepend-icon="fab fa-github" 
+								v-model="userinfo.github"
+								hint="Github address"
+								prefix="https://github.com/"
+								></v-text-field>
 							</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>
+								<v-text-field 
+								outlined
+								dense
+								style="border-radius:0px"
+								prepend-icon="fab fa-instagram" 
+								v-model="userinfo.instagram"
+								hint="Instagram address"
+								prefix="https://instagram.com/"
+								></v-text-field>
+							</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>
+						</div>
+						<div class="mod_btn">
+							<div v-if="!clicksns">
+								<v-btn color="#6e8af8" depressed tile outlined @click="modSNS">수정</v-btn>
+							</div>
+							<div v-else>
+								<v-btn color="#6e8af8" depressed tile outlined @click="updateSNS">수정완료</v-btn>
+							</div>
+						</div>
+					</div>
+					<div class="inner_detail">
+						
+						
+						<div class="dona_info">
+							<h4 class="cate_desc">후원 QR</h4>
+							<div class="qrbox">
+								<div class="qrbox_img">
+									<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>
-									
-
-							</v-col>
-							
-					</v-row>
-					<hr>
-		</v-flex>
-  </v-container>
+							</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>
+								<div class="img_btn">
+									<v-btn depressed outlined width="150px" @click="deleteQRImage" color="#6e8af8">이미지 제거</v-btn>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="signout">
+						<a @click="showMsgBoxTwo">DO!에서 <span class="signout_btn">탈퇴하기</span></a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
+import Navbar from '../components/Navbar.vue'
 import axios from 'axios'
-
+const storage = window.sessionStorage
 
 const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 // const API_URL = 'http://localhost:8081/'
 
 export default {
+	components: {
+		Navbar,
+	},
 	props: {
 		iconName: {
 		type: String,
@@ -247,6 +241,7 @@ export default {
 	},
 	data() {
 		return {
+			pwdCheck: false,
 			clickprofile : false,
 			clicksns : false,
 			mandatory : false,
@@ -255,6 +250,7 @@ export default {
 			boxTwo: '', // 회원 탈퇴
 			userinfo : {
 				uid : '',
+				password: '',
 				profileImage : '',
 				nickname : '',
 				introduce : '',
@@ -279,7 +275,7 @@ export default {
 		}
 	},
 	methods: {
-
+		
 		modprofile() {
 			if(this.clickprofile===false){
 				this.clickprofile = true;
@@ -290,7 +286,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() {
@@ -346,7 +357,7 @@ export default {
 			};
 
 			// **추가** POST문으로 서버에 이미지 파일 전송
-			axios.post(API_URL+'api/v1/img?nickname='+this.userinfo.nickname,
+			axios.post(API_URL+'api/v1/img?uid='+this.userinfo.uid,
 				file,
 				{
 					headers:{
@@ -357,6 +368,7 @@ export default {
 			)
 			.then(response => {
 				this.userinfo.profileImage = response.data;
+				storage.setItem("profileImage", response.data)
 			})
 			.catch((err) => {
 				console.log("프로필 이미지 업로드 실패")
@@ -374,6 +386,7 @@ export default {
 			})
 			.then(response => {
 				this.userinfo.profileImage = response.data;
+				storage.setItem("profileImage", response.data)
 			})
 			.catch( (err) => {
 				console.log("프로필 이미지 삭제 실패");
@@ -395,7 +408,7 @@ export default {
 			};
 			
 			// **추가** POST문으로 서버에 이미지 파일 전송
-			axios.post(API_URL+'api/v1/qr/?nickname='+this.userinfo.nickname,
+			axios.post(API_URL+'api/v1/qr/?uid='+this.userinfo.uid,
 				file,
 				{
 					headers:{
@@ -456,6 +469,7 @@ export default {
 						console.log(error);
 					});
 				}
+				this.$router.push('/')
 			})
 			.catch(err => {
 			// An error occurred
@@ -469,19 +483,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;
@@ -491,7 +492,7 @@ export default {
 			this.userinfo.instagram = data.instagram,
 			this.userinfo.emailaddr = data.email,
 			this.userinfo.qrImage = data.qrImage
-
+			this.userinfo.password = data.password
 		})
 	},
 	
@@ -499,12 +500,123 @@ export default {
 </script>
 
 <style scoped>
-	.wrapper {
-		text-align: center;
+	.wrap {
+		background-color: #f2f4f7;	
 	}
 	.inner {
-		max-width:150px;
-		display: inline-block;
+		min-height:1850px;
+		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: 10px;
+	}
+	.inner_email{
+		width:100%;
+		padding: 30px;
+		border-bottom: 1px solid #e0e5ee;
+	}
+	.user_email{
+		padding-bottom: 40px;
+	}
+	.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;
+		border-bottom: 1px solid  #e0e5ee;
+	}
+	.imgbox {
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		overflow: hidden;
+		margin: 0 auto;
+	}
+	.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;
+		margin: 5px auto 0;
+	}
+	.inner_detail{
+		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 {
+		border-radius: 0px;
+	}
+	button:hover{
+		background-color:#6e8af8;
+		color:white !important; 
+	}
+	.sns_addr{
+		padding-bottom: 10px;
+	}
+	.user_sns_detail{
+		margin-top:15px;
+	}
+
+	.uploadimg {
+		display:none;
 	}
 	.circle {
 		width:8rem;
@@ -517,4 +629,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
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/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 92210e7..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,14 +73,27 @@
 				</v-list-item-action>
 			</template>
 		</v-combobox>
+		<div class="sub_btn">
 		<v-btn 
 			@click="onSubmitButton"
-			color="success"
-		>저장하기</v-btn>
+			color="#08d3bc"
+			outlined
+			tile
+		>출간하기</v-btn>
+		<v-btn
+			class="ml-2"
+			@click="onSaveButton"
+			color="#5c7bf4"
+			outlined
+			tile
+		>임시저장</v-btn>
+		</div>
 	</div>
 </template>
 
 <script>
+import axios from 'axios'
+const API_URL = 'http://i3a507.p.ssafy.io:8081/'
 
 export default {
 	name:'TagInputBox',
@@ -90,22 +102,38 @@ 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,
-			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": "#08d3bc",
+						"text" : el}
+				);
+				})
+				
+			})
 
+	},
 	watch: {
 		// 태그 글자수 20자 미만으로 제한 두기
 		// 태그 빈칸은 안받기, 빈칸 넣어두면 없애기
@@ -150,7 +178,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', this.model)
 		}
 	},
 }
@@ -158,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 f1f175d..d21427a 100644
--- a/frontend/src/components/TextEditor.vue
+++ b/frontend/src/components/TextEditor.vue
@@ -1,15 +1,57 @@
 <template>
-    <v-container>
-        <v-text-field
-            v-model="title"
-            :counter="20"
-            label="글 제목을 입력해주세요"
-            required
-        ></v-text-field>
-        <editor ref="toastuiEditor" height="500px"/>
-        <h3>태그 입력칸</h3>        
-        <TagInputBox @event-data="createAction"/>
-    </v-container>
+	<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>
 </template>
 <script>
 import 'tui-editor/dist/tui-editor.css';
@@ -18,48 +60,184 @@ 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/'
 // const FLICKR_URL = 'https://up.flickr.com/services/upload/'
 
 export default {
-    name: 'TextEditor',
-    components: {
-        Editor,
-        TagInputBox
-    },
-    data(){
-        return {
-            editorText: '',
-            title: '',
-        }
-    },
-    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: '유저 이름',
-                title: this.title,
-                content: this.editorText,
-                tag: tagList,
-            })
-            .then(() => this.$router.push('/'))
-            .catch(err => console.log(err))
-        },
-    },
+	name: 'TextEditor',
+	components: {
+		Editor,
+		TagInputBox,
+		Navbar,
+	},
+	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){
+
+			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}&uid=${storage.getItem("uid")}`,
+				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: 0.5rem auto;
+	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;
+	}
+
+.img_btn{
+	font-family: 'NanumSquare', Noto Sans Light, sans-serif;
+	width:150px;
+	margin-top:-6px;
+	float: right;
+}
+.imgbox {
+		border-radius: 5px;
+		overflow: hidden;
+		margin: 0 auto 40px auto;
+		border: 1px solid #e0e5ee;
+	}
+.imgbox> img {
+	width: 100%;
+	height: 100%;
+}
+.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
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/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: () =>  "비밀번호가 일치하지 않습니다",
       },
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b31f454..18caf27 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,16 +2,16 @@ 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'
+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'
@@ -43,11 +43,6 @@ export default new VueRouter({
       name: 'login',
       component: Login,
     },
-    {
-      path: '/mypage',
-      name: 'mypage',
-      component: MyPage,
-    },
     {
       path: '/register',
       name: 'register',
@@ -65,20 +60,10 @@ export default new VueRouter({
       beforeEnter: requireAuth()
     },
     {
-      path: '/create',
-      name: 'create',
-      component: Post
-    },
-    {
-      path: '/:username/:title',
+      path: '/postdetail',
       name: 'postdetail',
       component: PostDetail
     },
-    {
-      path: '/findid',
-      name: 'findid',
-      component: FindID,
-    },
     {
       path: '/search',
       name: 'search',
@@ -88,6 +73,21 @@ export default new VueRouter({
       path:'/feed',
       name:'feed',
       component: Feed
+    },
+    {
+      path:'/forum',
+      name:'forum',
+      component: Forum
+    },
+    {
+      path:'/doblog/:username',
+      name:'myblog',
+      component: Myblog,
+    },
+    {
+      path:'/notice',
+      name:'notice',
+      component: Notice,
     }
   ]
 })