diff --git a/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css b/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css
new file mode 100644
index 0000000000000000000000000000000000000000..736e49a9c17659d48e4e5229e98bb558b79c0702
--- /dev/null
+++ b/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css
@@ -0,0 +1,2 @@
+#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}
+/*# sourceMappingURL=app.d23ad4f968f75bc1fdc1e08ce69223ca.css.map */
\ No newline at end of file
diff --git a/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css.map b/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..76f37e49caf3e5268a1bd105acc056896b71cdc6
--- /dev/null
+++ b/backend/public/static/css/app.d23ad4f968f75bc1fdc1e08ce69223ca.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["app.d23ad4f968f75bc1fdc1e08ce69223ca.css"],"names":[],"mappings":"AACA,KACE,6CAAmD,CACnD,kCAAmC,CACnC,iCAAkC,CAClC,iBAAkB,CAClB,aAAc,CACd,eACF","file":"app.d23ad4f968f75bc1fdc1e08ce69223ca.css","sourcesContent":["\n#app {\r\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n text-align: center;\r\n color: #2c3e50;\r\n margin-top: 60px;\n}\r\n"]}
\ No newline at end of file
diff --git a/backend/public/static/img/book-open-flat.a6d64f7.png b/backend/public/static/img/book-open-flat.a6d64f7.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7d171572ab0e861396c16f1ed4bd63ebe158e90
Binary files /dev/null and b/backend/public/static/img/book-open-flat.a6d64f7.png differ
diff --git a/backend/public/static/js/app.1c070e861afe7dc1467b.js b/backend/public/static/js/app.1c070e861afe7dc1467b.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b2234ae920725f42374003426d804d914385377
--- /dev/null
+++ b/backend/public/static/js/app.1c070e861afe7dc1467b.js
@@ -0,0 +1,2 @@
+webpackJsonp([1],{NHnr:function(t,o,n){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var e=n("7+uW"),s={render:function(){var t=this.$createElement,o=this._self._c||t;return o("div",{attrs:{id:"app"}},[o("img",{attrs:{src:n("R0yh")}}),this._v(" "),o("router-view")],1)},staticRenderFns:[]};var r=n("VU/8")({name:"App"},s,!1,function(t){n("i+00")},null,null).exports,i=n("/ocq"),a={created:function(){var t=this;this.$http.get("/api/books").then(function(o){t.books=o.data})},data:function(){return{books:[]}},methods:{increaseSellCount:function(){this.book.sellcount+=1,this.$http.post("/api/books",this.book).then(function(t){console.log("Increase Buy count success")}).catch(function(t){console.log("Increase Buy count fail")})}}},c={render:function(){var t=this,o=t.$createElement,n=t._self._c||o;return n("div",{staticClass:"books"},[n("h1",[t._v("서적 목록")]),t._v(" "),t._l(t.books,function(o){return n("div",{key:o.id,staticClass:"book"},[n("img",{staticClass:"cover",attrs:{src:o.cover}}),t._v(" "),n("div",[n("strong",[t._v("제목: "+t._s(o.name))]),t._v(" "),n("br"),t._v(" "),n("i",[t._v("작가: "+t._s(o.author))]),t._v(" "),n("br"),t._v("\n 출판사: "+t._s(o.publisher)+"\n "),n("router-link",{attrs:{to:{name:"bookdetail",params:{id:o.id}}}},[t._v("더보기")]),t._v(" "),n("div",[n("button",{on:{click:function(t){o.buycount++}}},[t._v("구매")]),t._v(" 구매현황: "+t._s(o.buycount)+"\n "),n("button",{on:{click:function(t){o.sellcount++}}},[t._v("판매")]),t._v(" 판매현황: "+t._s(o.sellcount)+"\n ")]),t._v(" "),n("hr")],1)])})],2)},staticRenderFns:[]},u=n("VU/8")(a,c,!1,null,null,null).exports,l={render:function(){var t=this,o=t.$createElement,n=t._self._c||o;return n("div",[n("h1",[t._v("상세 내용")]),t._v(" "),n("img",{staticClass:"cover",attrs:{src:t.book.cover}}),t._v(" "),n("div",[n("strong",[t._v("제목: "+t._s(t.book.name))]),t._v(" "),n("br"),t._v(" "),n("i",[t._v("작가: "+t._s(t.book.author))]),t._v(" "),n("br"),t._v("\n 출판사: "+t._s(t.book.publisher)+"\n "),n("p",[t._v(" 도서 소개: "+t._s(t.book.description)+" ")]),t._v(" "),n("router-link",{attrs:{to:{name:"bookindex"}}},[t._v("돌아가기")])],1)])},staticRenderFns:[]},v=n("VU/8")({created:function(){var t=this,o=this.$route.params.id;this.$http.get("/api/books/"+o).then(function(o){t.book=o.data[0]})},data:function(){return{book:{}}}},l,!1,null,null,null).exports;e.a.use(i.a);var _=new i.a({mode:"history",routes:[{path:"/",name:"bookindex",component:u},{path:"/:id",name:"bookdetail",component:v}]}),p=n("mtWM"),d=n.n(p);e.a.prototype.$http=d.a,e.a.config.productionTip=!1,new e.a({el:"#app",router:_,components:{App:r},template:"<App/>"})},R0yh:function(t,o,n){t.exports=n.p+"static/img/book-open-flat.a6d64f7.png"},"i+00":function(t,o){}},["NHnr"]);
+//# sourceMappingURL=app.1c070e861afe7dc1467b.js.map
\ No newline at end of file
diff --git a/backend/public/static/js/app.1c070e861afe7dc1467b.js.map b/backend/public/static/js/app.1c070e861afe7dc1467b.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..af72ce080e7c99723e4a417495af7b4566d4d35a
--- /dev/null
+++ b/backend/public/static/js/app.1c070e861afe7dc1467b.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./src/App.vue?68f6","webpack:///./src/App.vue","webpack:///src/App.vue","webpack:///src/components/BookIndexPage.vue","webpack:///./src/components/BookIndexPage.vue?8278","webpack:///./src/components/BookIndexPage.vue","webpack:///./src/components/BookShowPage.vue?3f57","webpack:///./src/components/BookShowPage.vue","webpack:///src/components/BookShowPage.vue","webpack:///./src/router/index.js","webpack:///./src/main.js","webpack:///./src/assets/book-open-flat.png"],"names":["selectortype_template_index_0_src_App","render","_h","this","$createElement","_c","_self","attrs","id","src","__webpack_require__","_v","staticRenderFns","src_App","normalizeComponent","name","ssrContext","BookIndexPage","created","_this","$http","get","then","response","books","data","methods","increaseSellCount","book","sellcount","post","res","console","log","catch","err","components_BookIndexPage","_vm","staticClass","_l","key","cover","_s","author","publisher","to","params","on","click","$event","buycount","src_components_BookIndexPage","BookIndexPage_normalizeComponent","components_BookShowPage","description","src_components_BookShowPage","BookShowPage_normalizeComponent","$route","Vue","use","Router","router","mode","routes","path","component","BookShowPage","prototype","axios","config","productionTip","el","components","App","template","module","exports","p"],"mappings":"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","file":"static/js/app.1c070e861afe7dc1467b.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('img',{attrs:{\"src\":require(\"./assets/book-open-flat.png\")}}),_vm._v(\" \"),_c('router-view')],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-2556a522\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-2556a522\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-2556a522\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","<template>\r\n <div id=\"app\">\r\n <img src=\"./assets/book-open-flat.png\">\r\n <router-view/>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'App'\r\n}\r\n</script>\r\n\r\n<style>\r\n#app {\r\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n text-align: center;\r\n color: #2c3e50;\r\n margin-top: 60px;\r\n}\r\n</style>\r\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","<template>\r\n <div class=\"books\">\r\n <h1>서적 목록</h1>\r\n <div v-for=\"book in books\" class=\"book\" v-bind:key=\"book.id\">\r\n <img v-bind:src=\"book.cover\" class=\"cover\">\r\n <div>\r\n <strong>제목: {{book.name}}</strong> <br />\r\n <i>작가: {{book.author}}</i> <br />\r\n 출판사: {{book.publisher}}\r\n <router-link :to=\"{ name: 'bookdetail', params: { id: book.id }}\">더보기</router-link>\r\n \r\n <div>\r\n <button v-on:click=\"book.buycount++\">구매</button> 구매현황: {{book.buycount}}\r\n <button v-on:click=\"book.sellcount++\">판매</button> 판매현황: {{book.sellcount}}\r\n </div>\r\n \r\n <hr />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n created() {\r\n this.$http.get('/api/books').then((response) => {\r\n this.books = response.data;\r\n });\r\n },\r\n data() {\r\n return {\r\n books: [],\r\n };\r\n },\r\n methods: {\r\n increaseSellCount() {\r\n this.book.sellcount += 1;\r\n this.$http.post(\"/api/books\", this.book)\r\n .then(res => {\r\n console.log('Increase Buy count success'); \r\n })\r\n .catch(err => {\r\n console.log('Increase Buy count fail');\r\n });\r\n // this.$router.push({ name: 'bookdetail' });\r\n }\r\n }\r\n};\r\n</script>\n\n\n// WEBPACK FOOTER //\n// src/components/BookIndexPage.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"books\"},[_c('h1',[_vm._v(\"서적 목록\")]),_vm._v(\" \"),_vm._l((_vm.books),function(book){return _c('div',{key:book.id,staticClass:\"book\"},[_c('img',{staticClass:\"cover\",attrs:{\"src\":book.cover}}),_vm._v(\" \"),_c('div',[_c('strong',[_vm._v(\"제목: \"+_vm._s(book.name))]),_vm._v(\" \"),_c('br'),_vm._v(\" \"),_c('i',[_vm._v(\"작가: \"+_vm._s(book.author))]),_vm._v(\" \"),_c('br'),_vm._v(\"\\n 출판사: \"+_vm._s(book.publisher)+\"\\n \"),_c('router-link',{attrs:{\"to\":{ name: 'bookdetail', params: { id: book.id }}}},[_vm._v(\"더보기\")]),_vm._v(\" \"),_c('div',[_c('button',{on:{\"click\":function($event){book.buycount++}}},[_vm._v(\"구매\")]),_vm._v(\" 구매현황: \"+_vm._s(book.buycount)+\"\\n \"),_c('button',{on:{\"click\":function($event){book.sellcount++}}},[_vm._v(\"판매\")]),_vm._v(\" 판매현황: \"+_vm._s(book.sellcount)+\"\\n \")]),_vm._v(\" \"),_c('hr')],1)])})],2)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-405635e5\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/BookIndexPage.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./BookIndexPage.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./BookIndexPage.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-405635e5\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./BookIndexPage.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/BookIndexPage.vue\n// module id = null\n// module chunks = ","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('h1',[_vm._v(\"상세 내용\")]),_vm._v(\" \"),_c('img',{staticClass:\"cover\",attrs:{\"src\":_vm.book.cover}}),_vm._v(\" \"),_c('div',[_c('strong',[_vm._v(\"제목: \"+_vm._s(_vm.book.name))]),_vm._v(\" \"),_c('br'),_vm._v(\" \"),_c('i',[_vm._v(\"작가: \"+_vm._s(_vm.book.author))]),_vm._v(\" \"),_c('br'),_vm._v(\"\\n 출판사: \"+_vm._s(_vm.book.publisher)+\"\\n \"),_c('p',[_vm._v(\" 도서 소개: \"+_vm._s(_vm.book.description)+\" \")]),_vm._v(\" \"),_c('router-link',{attrs:{\"to\":{ name: 'bookindex' }}},[_vm._v(\"돌아가기\")])],1)])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-3a40b3bd\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/BookShowPage.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./BookShowPage.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./BookShowPage.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-3a40b3bd\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./BookShowPage.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/BookShowPage.vue\n// module id = null\n// module chunks = ","<template>\r\n <div>\r\n <h1>상세 내용</h1>\r\n <img v-bind:src=\"book.cover\" class=\"cover\">\r\n <div>\r\n <strong>제목: {{book.name}}</strong> <br />\r\n <i>작가: {{book.author}}</i> <br />\r\n 출판사: {{book.publisher}}\r\n <p> 도서 소개: {{book.description}} </p>\r\n <router-link :to=\"{ name: 'bookindex' }\">돌아가기</router-link>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n created: function() {\r\n var id = this.$route.params.id;\r\n this.$http.get(`/api/books/${id}`).then((response) => {\r\n this.book = response.data[0];\r\n });\r\n },\r\n data: function() {\r\n return {\r\n book: {}\r\n };\r\n }\r\n};\r\n</script>\n\n\n// WEBPACK FOOTER //\n// src/components/BookShowPage.vue","import Vue from 'vue'\r\nimport Router from 'vue-router'\r\n\r\n\r\nVue.use(Router)\r\n\r\n//import IndexPage from '@/components/IndexPage'\r\nimport BookIndexPage from '@/components/BookIndexPage'\r\nimport BookShowPage from '@/components/BookShowPage'\r\n\r\nexport default new Router({\r\n mode: 'history',\r\n routes: [\r\n // {\r\n // path: '/',\r\n // name: 'IndexPage',\r\n // component: IndexPage\r\n // },\r\n\r\n {\r\n path: '/',\r\n name: 'bookindex',\r\n component: BookIndexPage\r\n },\r\n {\r\n path: '/:id',\r\n name: 'bookdetail',\r\n component: BookShowPage\r\n }\r\n ]\r\n})\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/router/index.js","// The Vue build version to load with the `import` command\r\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\r\nimport Vue from 'vue'\r\nimport App from './App'\r\nimport router from './router'\r\nimport axios from 'axios'\r\n\r\nVue.prototype.$http = axios\r\nVue.config.productionTip = false\r\n\r\n/* eslint-disable no-new */\r\nnew Vue({\r\n el: '#app',\r\n router,\r\n components: { App },\r\n template: '<App/>'\r\n})\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","module.exports = __webpack_public_path__ + \"static/img/book-open-flat.a6d64f7.png\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/assets/book-open-flat.png\n// module id = R0yh\n// module chunks = 1"],"sourceRoot":""}
\ No newline at end of file
diff --git a/backend/public/static/js/manifest.2ae2e69a05c33dfc65f8.js.map b/backend/public/static/js/manifest.2ae2e69a05c33dfc65f8.js.map
index 6c8d3bc1182c9cd108322a0181ff4ce65ba898b3..a6fdb1fadaedaade73a7f2accab8880b24ab2116 100644
--- a/backend/public/static/js/manifest.2ae2e69a05c33dfc65f8.js.map
+++ b/backend/public/static/js/manifest.2ae2e69a05c33dfc65f8.js.map
@@ -1,5 +1,59 @@
-<<<<<<< HEAD
-{"version":3,"sources":["webpack:///webpack/bootstrap d4402d785da50a39ba85"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap d4402d785da50a39ba85"],"sourceRoot":""}
-=======
-{"version":3,"sources":["webpack:///webpack/bootstrap 9a1e0d9f46f089fcbcf1"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 9a1e0d9f46f089fcbcf1"],"sourceRoot":""}
->>>>>>> master
+{
+ "version": 3,
+ "sources": [
+ "webpack:///webpack/bootstrap 9a1e0d9f46f089fcbcf1"
+ ],
+ "names": [
+ "parentJsonpFunction",
+ "window",
+ "chunkIds",
+ "moreModules",
+ "executeModules",
+ "moduleId",
+ "chunkId",
+ "result",
+ "i",
+ "resolves",
+ "length",
+ "installedChunks",
+ "push",
+ "Object",
+ "prototype",
+ "hasOwnProperty",
+ "call",
+ "modules",
+ "shift",
+ "__webpack_require__",
+ "s",
+ "installedModules",
+ "2",
+ "exports",
+ "module",
+ "l",
+ "m",
+ "c",
+ "d",
+ "name",
+ "getter",
+ "o",
+ "defineProperty",
+ "configurable",
+ "enumerable",
+ "get",
+ "n",
+ "__esModule",
+ "object",
+ "property",
+ "p",
+ "oe",
+ "err",
+ "console",
+ "error"
+ ],
+ "mappings": "aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA",
+ "file": "static/js/manifest.2ae2e69a05c33dfc65f8.js",
+ "sourcesContent": [
+ " \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 9a1e0d9f46f089fcbcf1"
+ ],
+ "sourceRoot": ""
+}
diff --git a/frontend/config/index.js b/frontend/config/index.js
index 977a98c77ed889ddbb94bae01bd19294e0fab53f..c5eded7f81ab3b7f3c6fb54e0c86bcf7adeab944 100644
--- a/frontend/config/index.js
+++ b/frontend/config/index.js
@@ -10,15 +10,7 @@ module.exports = {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
- proxyTable: {
- '/api': {
- target: 'http://localhost:3000/api',
- changeOrigin: true,
- pathRewrite: {
- '^/api': ''
- }
- }
- },
+ proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
@@ -46,12 +38,10 @@ module.exports = {
build: {
// Template for index.html
- //index: path.resolve(__dirname, '../dist/index.html'),
- index: path.resolve(__dirname, '../../backend/public/index.html'),
+ index: path.resolve(__dirname, '../dist/index.html'),
// Paths
- //assetsRoot: path.resolve(__dirname, '../dist'),
- assetsRoot: path.resolve(__dirname, '../../backend/public'),
+ assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
diff --git a/frontend/index.html b/frontend/index.html
index b896c1392e0531f0ad2da3298942da618547ca3d..12bce148a2353277a3f72773ce8178b473ba69de 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>majorbook</title>
+ <title>frontend</title>
</head>
<body>
<div id="app"></div>
diff --git a/frontend/package.json b/frontend/package.json
index f877548d34833afc32e3228de81b6d94ff6f2dc0..88330ca0e4583e4da39f7ee2c81b16c9a1233efb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,7 +2,7 @@
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
- "author": "YongJae <sdc689@gmail.com>",
+ "author": "HyeonJu <hj950000@ajou.ac.kr>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
@@ -42,6 +42,7 @@
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
+ "prettier": "^1.19.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 490185ecff5d09220147d543b1ece5f03e5bef7a..7579ff4ef55978f42126c99364c76e47955276f2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,12 +1,97 @@
<template>
- <div id="app">
+ <div id="app" class="page-container">
+ <md-app md-mode="fixed-last">
+ <md-app-toolbar class="md-large md-dense md-primary">
+ <div class="md-toolbar-row">
+ <span class="md-title">MajorBook </span>
+ </div>
+
+ <div style="flex:1">
+ <template v-if="logged_io">
+ ID :
+ <input v-model="id" placeholder="ID" type="text" required />
+ PASSWORD :
+ <input
+ v-model="pwd"
+ placeholder="password"
+ type="password"
+ required
+ />
+ <button v-on:click="login" class="btn">Login</button>
+ <md-button :href="signup" class="btn">Sign up</md-button>
+ </template>
+ <template v-else>
+ <button class="btn">거래현황</button>
+ <button v-on:click="logout" class="btn">Logout</button>
+ </template>
+ </div>
+
+ <div class="md-toolbar-row">
+ <md-tabs class="md-primary" style="margin: auto; height: 30px">
+ <md-tab id="tab-home" md-label="Home" to="/"> </md-tab>
+ <md-tab
+ id="tab-dashBoard"
+ md-label="Dashboard"
+ to="/dashBoard"
+ ></md-tab>
+ <md-tab id="tab-profile" md-label="Profile" to="/profile"></md-tab>
+ <md-tab
+ id="tab-list"
+ md-label="전공서적보기"
+ to="/BookSearchPage"
+ ></md-tab>
+ </md-tabs>
+ </div>
+ </md-app-toolbar>
+ </md-app>
<router-view />
</div>
</template>
<script>
+import Vue from "vue";
+import VueMaterial from "vue-material";
+import "vue-material/dist/vue-material.min.css";
+
+Vue.use(VueMaterial);
+
export default {
- name: "App"
+ name: "App",
+ data() {
+ return {
+ id: "",
+ pwd: "",
+ flag: false,
+ url: {
+ bookIndex: "/api/books"
+ }
+ };
+ },
+ computed: {
+ changeID() {
+ this.id = `${this.id}`;
+ },
+ changePWD() {
+ this.pwd = `${this.pwd}`;
+ },
+ logged_io() {
+ if (!this.flag) return true;
+ else return false;
+ }
+ },
+ methods: {
+ login: function() {
+ if (this.id != "" && this.pwd != "") {
+ alert(this.id + " login!!");
+ this.flag = !this.flag;
+ this.id = "";
+ this.pwd = "";
+ } else alert("ID/PASSWORD를 입력하세요");
+ },
+ logout: function() {
+ this.flag = !this.flag;
+ }
+ }
};
</script>
@@ -17,6 +102,24 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
- margin-top: 60px;
+ height: 100%;
+}
+
+.btn {
+ color: #00b7ff;
+ background-color: #a6a6a6;
+ border-radius: 15%;
+}
+
+h1 {
+ text-align: left;
+ font-size: 35px;
+ color: #00b7ff;
+ text-decoration: none;
+}
+
+img {
+ height: 100%;
+ width: 100%;
}
</style>
diff --git a/frontend/src/components/BookIndexPage.vue b/frontend/src/components/BookIndexPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17753634013d1c4c1923d53e64fe213f9c5664a2
--- /dev/null
+++ b/frontend/src/components/BookIndexPage.vue
@@ -0,0 +1,49 @@
+<template>
+ <div class="books">
+ <h1>서적 목록</h1>
+ <div v-for="book in books" class="book" v-bind:key="book.id">
+ <img v-bind:src="book.cover" class="cover">
+ <div>
+ <strong>제목: {{book.name}}</strong> <br />
+ <i>작가: {{book.author}}</i> <br />
+ 출판사: {{book.publisher}}
+ <router-link :to="{ name: 'bookdetail', params: { id: book.id }}">더보기</router-link>
+
+ <div>
+ <button v-on:click="book.buycount++">구매</button> 구매현황: {{book.buycount}}
+ <button v-on:click="book.sellcount++">판매</button> 판매현황: {{book.sellcount}}
+ </div>
+
+ <hr />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ created() {
+ this.$http.get('/api/books').then((response) => {
+ this.books = response.data;
+ });
+ },
+ data() {
+ return {
+ books: [],
+ };
+ },
+ methods: {
+ increaseSellCount() {
+ this.book.sellcount += 1;
+ this.$http.post("/api/books", this.book)
+ .then(res => {
+ console.log('Increase Buy count success');
+ })
+ .catch(err => {
+ console.log('Increase Buy count fail');
+ });
+ // this.$router.push({ name: 'bookdetail' });
+ }
+ }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/buy.vue b/frontend/src/components/buy.vue
deleted file mode 100644
index de8bac6ac6219c468d61f20f17350221e242c0e2..0000000000000000000000000000000000000000
--- a/frontend/src/components/buy.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
- <h1> buy</h1>
-</template>
-
-<script>
-export default{
- data() {
- return{
- name : '',
- univ : '',
- email : ''
- }
- },
- computed:{
- },
- methods:{
- }
- }
-</script>
-
-<style lang='css'>
-
-
-</style>
diff --git a/frontend/src/components/dashBoard.vue b/frontend/src/components/dashBoard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78b235bda6b595ef1b8d34a800627cc37e8bfdfd
--- /dev/null
+++ b/frontend/src/components/dashBoard.vue
@@ -0,0 +1,14 @@
+<template>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Majorbook</title>
+ </head>
+ <body>
+ <h1>my page 1</h1>
+ <button>수정하기</button>
+ </body>
+ </html>
+</template>
diff --git a/frontend/src/components/home.vue b/frontend/src/components/home.vue
index 26e3dcfd3d4caa29766125c683d977cf5f4028e0..a400cf5fe708fe686c46ef1e33f431b4bc2c7dd8 100644
--- a/frontend/src/components/home.vue
+++ b/frontend/src/components/home.vue
@@ -1,30 +1,15 @@
<template>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Majorbook</title>
- </head>
-
- <body>
- <header class="header">
- <h1>Majorbook</h1>
- <div align="right">
- <Login />
- </div>
- </header>
- <nav class="nav">
- <button v-on:click="gotoMyPage()">My Page</button>
- <button v-on:click="gotoBuyPage()">buy</button>
- <button v-on:click="gotoSellPage()">sell</button>
- <router-link to="/BookSearchPage">전공서적보기</router-link>
- </nav>
- <section class="section">
- <img src="../../static/img/img1.jpg" />
- </section>
- <aside class="aside">이용방법</aside>
- <footer class="footer">Implemented by 202-WebSysDesign</footer>
- </body>
- </html>
+ <div>
+ <div class="md-layout" style="display: block; color:#F6F6F6">
+ <div class="md-layout-item"><img src="../../static/img/img2.jpg" /></div>
+ <div class="md-layout-item" style="backgroundColor:#F2CB61; height:30px;">
+ 이용방법
+ </div>
+ <div class="md-layout-item" style="backgroundColor:#353535;">
+ Implemented by 202-WebSysDesign
+ </div>
+ </div>
+ </div>
</template>
<script>
diff --git a/frontend/src/components/login/SignUp.vue b/frontend/src/components/login/SignUp.vue
index 499aef0fa7e819d3ae6584c59457db6d44a38d03..5d132f5fad97bca567810198a63a7146406d7762 100644
--- a/frontend/src/components/login/SignUp.vue
+++ b/frontend/src/components/login/SignUp.vue
@@ -1,58 +1,59 @@
<template>
<div>
- <md-card class="md-layout-item md-size-50 md-small-size-100">
- <md-card-header>
- <div class="md-title"> Sign Up</div>
- </md-card-header>
+ <md-card class="md-layout-item md-size-50 md-small-size-100">
+ <md-card-header>
+ <div class="md-title">Sign Up</div>
+ </md-card-header>
- <md-card-content>
- <md-field>
- <label for="name">Name</label>
- <md-input name="name" v-model="user.name" />
- </md-field>
+ <md-card-content>
+ <md-field>
+ <label for="name">Name</label>
+ <md-input name="name" v-model="user.name" />
+ </md-field>
- <md-field>
- <label for="id">ID</label>
- <md-input name="id" v-model="user.id" />
- </md-field>
+ <md-field>
+ <label for="id">ID</label>
+ <md-input name="id" v-model="user.id" />
+ </md-field>
- <md-field :md-toggle-password="true">
- <label for="password">Password</label>
- <md-input name="password" v-model="user.password" type="password"/>
- </md-field>
+ <md-field :md-toggle-password="true">
+ <label for="password">Password</label>
+ <md-input name="password" v-model="user.password" type="password" />
+ </md-field>
- <md-field>
- <label for="email">Email</label>
- <md-input name="email" v-model="user.email" />
- </md-field>
- </md-card-content>
+ <md-field>
+ <label for="email">Email</label>
+ <md-input name="email" v-model="user.email" />
+ </md-field>
+ </md-card-content>
- <md-card-actions>
- <md-button class="md-raised md-primary" v-on:click="signUp">Sign Up</md-button>
- </md-card-actions>
- </md-card>
+ <md-card-actions>
+ <md-button class="md-raised md-primary" v-on:click="signUp"
+ >Sign Up</md-button
+ >
+ </md-card-actions>
+ </md-card>
</div>
</template>
<style>
-
.md-card {
margin: auto;
}
.md-primary {
background-color: blue;
- color:white;
+ color: white;
}
</style>
<script>
-import Vue from 'vue'
+import Vue from "vue";
-import VueMaterial from 'vue-material'
-import 'vue-material/dist/vue-material.min.css'
-import 'vue-material/dist/theme/default.css'
-Vue.use(VueMaterial)
+import VueMaterial from "vue-material";
+import "vue-material/dist/vue-material.min.css";
+import "vue-material/dist/theme/default.css";
+Vue.use(VueMaterial);
// import {MdField, MdButton, MdCard, MdInput} from 'vue-material/dist/components'
// import 'vue-material/dist/vue-material.min.css'
@@ -64,36 +65,38 @@ Vue.use(VueMaterial)
// Vue.use(MdInput)
export default {
- data: function () {
+ data: function() {
return {
user: {
- id: '',
- password: '',
- name: '',
- email: '',
+ id: "",
+ password: "",
+ name: "",
+ email: "",
isLoggedIn: false
},
sending: false
- }
+ };
},
methods: {
- signUp: function (event) {
- this.$http.post('/api/login/signUp', { //axios 사용
- user: this.user
- })
- .then((response) => {
- if (response.data.result === 0) {
- alert('Error, please, try again')
- }
- if (response.data.result === 1) {
- alert('Success')
- this.$router.push('/') // Home 페이지로 보내줌
- }
- })
- .catch(function (error) {
- alert('error')
- })
+ signUp: function(event) {
+ this.$http
+ .post("/api/login/signUp", {
+ //axios 사용
+ user: this.user
+ })
+ .then(response => {
+ if (response.data.result === 0) {
+ alert("Error, please, try again");
+ }
+ if (response.data.result === 1) {
+ alert("Success");
+ this.$router.push("/"); // Home 페이지로 보내줌
+ }
+ })
+ .catch(function(error) {
+ alert("error");
+ });
}
}
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/frontend/src/components/myPage.vue b/frontend/src/components/myPage.vue
deleted file mode 100644
index e8b04fe191cfcf6a2fa23afc6dfbcbf4d432fcbc..0000000000000000000000000000000000000000
--- a/frontend/src/components/myPage.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
- <title>Majorbook-My Page</title>
- </head>
- <body>
- <h1>My Page</h1>
-
- <button>수정하기</button>
- </body>
- </html>
-</template>
\ No newline at end of file
diff --git a/frontend/src/components/profile.vue b/frontend/src/components/profile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b6170dbfbd53d42dcf6dff693a36f20f88a2f25
--- /dev/null
+++ b/frontend/src/components/profile.vue
@@ -0,0 +1,15 @@
+<template>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Majorbook</title>
+ </head>
+ <body>
+ <h1>My Page-2</h1>
+ dfsd
+ <button>수정하기</button>
+ </body>
+ </html>
+</template>
diff --git a/frontend/src/components/sell.vue b/frontend/src/components/sell.vue
deleted file mode 100644
index 0bca32e74b919713d2d71a5fea7d06774dc8dfe0..0000000000000000000000000000000000000000
--- a/frontend/src/components/sell.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
- <h1> sell </h1>
-</template>
-
-<script>
-export default{
- data() {
- return{
- name : '',
- univ : '',
- email : ''
- }
- },
- computed:{
- },
- methods:{
- }
- }
-</script>
-
-<style lang='css'>
-
-
-</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 3d590b97ad7d50b5b06b5c04f0d75388b850de2e..83ffc885b0018d863edc5e93a7776a0cb2baf7eb 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@
import Vue from 'vue'
import App from './App'
import router from './router'
+
import axios from 'axios'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 347eb30caeea80150c75f55684037b8249610565..fdd998c2313700aec5b9b939d9e9c2a3d1f6e441 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,51 +1,62 @@
-import Vue from 'vue'
-import Router from 'vue-router';
-Vue.use(Router)
-import home from '@/components/home'
-import myPage from '@/components/myPage'
-import buy from '@/components/buy'
-import sell from '@/components/sell'
-import Login from '@/components/login/Login'
-import SignUp from '@/components/login/SignUp'
-import BookSearchPage from '@/components/BookSearchPage'
+import Vue from "vue";
+import Router from "vue-router";
+Vue.use(Router);
+import home from "@/components/home";
+import dashBoard from "@/components/dashBoard";
+import profile from "@/components/profile";
+import signup from "@/components/signup";
+import BookSearchPage from "@/components/BookSearchPage";
+import BookIndexPage from "@/components/BookIndexPage";
+import BookShowPage from "@/components/BookShowPage";
+import Login from "@/components/login/Login";
+import SignUp from "@/components/login/SignUp";
export default new Router({
- mode: 'history',
routes: [
{
- path: '/',
- name: 'home',
+ path: "/",
+ name: "home",
component: home
},
{
- path: '/myPage',
- name : 'myPage',
- component: myPage
+ path: "/dashBoard",
+ name: "dashBoard",
+ component: dashBoard
},
{
- path: '/buy',
- name: 'buy',
- component: buy
+ path: "/profile",
+ name: "profile",
+ component: profile
},
{
- path: '/sell',
- name: 'sell',
- component: sell
+ path: "/signup",
+ name: "signup",
+ component: signup
},
{
- path: '/BookSearchPage',
- name: 'bookindex',
+ path: "/BookIndexPage",
+ name: "bookindex",
+ component: BookIndexPage
+ },
+ {
+ path: "/BookIndexPage:id",
+ name: "bookdetail",
+ component: BookShowPage
+ },
+ {
+ path: "/BookSearchPage",
+ name: "bookindex",
component: BookSearchPage
},
{
- path: '/login',
- name: 'Login',
+ path: "/login",
+ name: "Login",
component: Login
},
{
- path: '/login/signUp',
- name: 'SignUp',
+ path: "/login/signUp",
+ name: "SignUp",
component: SignUp
}
]
-})
\ No newline at end of file
+});
diff --git a/frontend/static/img/img1.jpg b/frontend/static/img/img1.jpg
deleted file mode 100644
index d3e6c67ea7e5cbde850ba2736b5732946b7afe23..0000000000000000000000000000000000000000
Binary files a/frontend/static/img/img1.jpg and /dev/null differ
diff --git a/frontend/static/img/img2.jpg b/frontend/static/img/img2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..12c90818ae52c1554d38b1fb8333677fff9e63c8
Binary files /dev/null and b/frontend/static/img/img2.jpg differ