{"version":3,"sources":["webpack:///./src/components/component/ImageModal.vue?42ff","webpack:///./src/components/page/ProductReview.vue?b4e0","webpack:///./src/components/component/ImageModal.vue?123f","webpack:///src/components/component/ImageModal.vue","webpack:///./src/components/component/ImageModal.vue?83f7","webpack:///./src/components/component/ImageModal.vue?8105","webpack:///./src/components/page/ProductReview.vue?c26c","webpack:///src/components/page/ProductReview.vue","webpack:///./src/components/page/ProductReview.vue?7eea","webpack:///./src/components/page/ProductReview.vue?704e"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","on","close","clickLeft","leftColor","imgs","selectedIndex","_l","preview","idx","key","class","$event","clickImg","clickRight","rightColor","_e","staticRenderFns","component","reviews","length","_v","_s","allCount","review","staticStyle","author","datesFormat","created_time","title","content","filtered","getData","img","ref","selectedImgs"],"mappings":"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","file":"js/chunk-4ae114b5.553e35dd.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageModal.vue?vue&type=style&index=0&id=3fda8dff&lang=stylus&scoped=true&\"","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductReview.vue?vue&type=style&index=0&id=3e649480&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.visible)?_c('div',{staticClass:\"image-modal-container\"},[_c('img',{staticClass:\"unselect icon-close svg-white\",attrs:{\"src\":\"/static/icon/fi_close.svg\"},on:{\"click\":_vm.close}}),_c('div',{staticClass:\"image-wrapper\"},[_c('div',{staticClass:\"grid-image\"},[_c('svg',{staticClass:\"unselect\",attrs:{\"width\":\"60\",\"height\":\"60\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\"},on:{\"click\":_vm.clickLeft}},[_c('path',{attrs:{\"d\":\"M15 18L9 12L15 6\",\"stroke\":_vm.leftColor,\"stroke-width\":\"1\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})]),_c('div',[_c('img',{staticClass:\"img-selected\",attrs:{\"src\":_vm.imgs[_vm.selectedIndex]}}),_c('div',{staticClass:\"grid-preview\"},_vm._l((_vm.imgs),function(preview,idx){return _c('img',{key:(\"preview-\" + idx),staticClass:\"unselect img-preview\",class:{'preview-selected': _vm.selectedIndex === idx},attrs:{\"src\":preview,\"alt\":\"\"},on:{\"click\":function($event){return _vm.clickImg(idx)}}})}),0)]),_c('svg',{staticClass:\"unselect\",attrs:{\"width\":\"60\",\"height\":\"60\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\"},on:{\"click\":_vm.clickRight}},[_c('path',{attrs:{\"d\":\"M9 18L15 12L9 6\",\"stroke\":_vm.rightColor,\"stroke-width\":\"1\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})])])])]):_vm._e()])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <transition name=\"fade\">\r\n    <div class=\"image-modal-container\" v-if=\"visible\">\r\n      <img src=\"/static/icon/fi_close.svg\" class=\"unselect icon-close svg-white\" @click=\"close\">\r\n      <div class=\"image-wrapper\">\r\n        <div class=\"grid-image\">\r\n          <svg @click=\"clickLeft\" class=\"unselect\"\r\n            width=\"60\" height=\"60\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M15 18L9 12L15 6\"\r\n                  :stroke=\"leftColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <div>\r\n            <img :src=\"imgs[selectedIndex]\" class=\"img-selected\">\r\n            <div class=\"grid-preview\">\r\n              <img v-for=\"(preview, idx) in imgs\" :key=\"`preview-${idx}`\" @click=\"clickImg(idx)\"\r\n                  :src=\"preview\" alt=\"\" class=\"unselect img-preview\"\r\n                  :class=\"{'preview-selected': selectedIndex === idx}\">\r\n            </div>\r\n          </div>\r\n\r\n          <svg @click=\"clickRight\" class=\"unselect\"\r\n            width=\"60\" height=\"60\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M9 18L15 12L9 6\"\r\n                  :stroke=\"rightColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </transition>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"ImageModal\",\r\n    props: {\r\n      imgs: {\r\n        type: Array\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        visible: false,\r\n        selectedIndex: 0\r\n      }\r\n    },\r\n    computed: {\r\n      leftColor() {\r\n        return this.selectedIndex === 0 ? 'rgba(255, 255, 255, 0.3)' : '#ffffff';\r\n      },\r\n      rightColor() {\r\n        return this.selectedIndex === this.imgs.length-1 ? 'rgba(255, 255, 255, 0.3)' : '#ffffff';\r\n      }\r\n    },\r\n    methods: {\r\n      clickLeft() {\r\n        if(this.selectedIndex > 0) {\r\n          this.selectedIndex--;\r\n        }\r\n      },\r\n      clickRight() {\r\n        if(this.selectedIndex < this.imgs.length-1) {\r\n          this.selectedIndex++;\r\n        }\r\n      },\r\n      clickImg(index) {\r\n        this.selectedIndex = index;\r\n      },\r\n      open() {\r\n        setTimeout(()=>{\r\n          this.selectedIndex = 0;\r\n          this.visible = true;\r\n        }, 100);\r\n      },\r\n      close() {\r\n        this.visible = false;\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  .image-modal-container\r\n    width 100%\r\n    height 100%\r\n    position fixed\r\n    top 0\r\n    left 0\r\n    z-index 1000\r\n    background-color rgba(0, 0, 0, 0.5)\r\n    .image-wrapper\r\n      position absolute\r\n      top 20vh\r\n      left 50%\r\n      transform translateX(-50%)\r\n    .icon-close\r\n      width 30px\r\n      height 30px\r\n      position absolute\r\n      top 36px\r\n      right 36px\r\n\r\n    .img-selected\r\n      width 424px\r\n      height 424px\r\n      object-fit cover\r\n\r\n    .grid-image\r\n      display grid\r\n      grid-template-columns 40px 1fr 40px\r\n      grid-column-gap 48px\r\n      align-items center\r\n    .grid-preview\r\n      margin-top 20px\r\n      display grid\r\n      grid-template-columns repeat(5, 1fr)\r\n      grid-gap 8px\r\n      .img-preview\r\n        width 100%\r\n        height 80px\r\n        object-fit cover\r\n      .preview-selected\r\n        border 2px solid #ff5722\r\n\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageModal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageModal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImageModal.vue?vue&type=template&id=3fda8dff&scoped=true&\"\nimport script from \"./ImageModal.vue?vue&type=script&lang=js&\"\nexport * from \"./ImageModal.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ImageModal.vue?vue&type=style&index=0&id=3fda8dff&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3fda8dff\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product-review-container\"},[_c('div',{staticClass:\"pc\"},[(_vm.reviews && _vm.reviews.length>0)?[_c('div',{staticClass:\"h8\"},[_vm._v(\"후기 \"+_vm._s(_vm.allCount)+\"개\")]),_c('div',{staticClass:\"lp-divider-sub5 margin-top-16 margin-bottom-16\"}),_vm._l((_vm.reviews),function(review,idx){return _c('div',{key:'theme-review-'+idx,staticClass:\"item-review\"},[_c('div',{staticStyle:{\"flex\":\"1\"}},[_c('div',{staticClass:\"flex\",staticStyle:{\"justify-content\":\"space-between\"}},[_c('div',{staticClass:\"flex-align\",staticStyle:{\"gap\":\"8px\"}},[_c('img',{attrs:{\"src\":\"/static/icon/avata.svg\"}}),_c('div',{staticClass:\"body4 sub2\"},[_vm._v(_vm._s(review.author))])]),_c('div',{staticClass:\"body5 sub3\"},[_vm._v(_vm._s(_vm.datesFormat(review.created_time, 'date_3')))])]),_c('div',{staticClass:\"body5 sub3\",staticStyle:{\"margin\":\"12px 0\"}},[_vm._v(_vm._s(review.title))]),_c('div',{staticClass:\"body4 main\"},[_vm._v(_vm._s(review.content))])]),(review.imgs.length>0)?_c('img',{staticClass:\"img-product\",attrs:{\"src\":review.imgs[0]},on:{\"click\":function($event){return _vm.clickImg(review)}}}):_vm._e()])}),_c('lp-paginate',{staticStyle:{\"margin-top\":\"88px\"},attrs:{\"filtered\":_vm.filtered},on:{\"update:filtered\":function($event){_vm.filtered=$event},\"click\":_vm.getData}})]:_vm._e(),(_vm.reviews && _vm.reviews.length===0)?_c('div',{staticClass:\"empty-view\"},[_vm._v(\"아직 등록된 후기가 없습니다.\")]):_vm._e()],2),_c('div',{staticClass:\"mobile\",staticStyle:{\"padding\":\"0 16px\"}},[(_vm.reviews && _vm.reviews.length>0)?[_vm._l((_vm.reviews),function(review,idx){return _c('div',{key:'theme-review-'+idx,staticClass:\"item-review\"},[_c('div',{staticClass:\"flex-between margin-bottom-12\"},[_c('div',{staticClass:\"flex-align\",staticStyle:{\"gap\":\"8px\"}},[_c('img',{attrs:{\"src\":\"/static/icon/avata.svg\"}}),_c('div',{staticClass:\"body4 sub2\"},[_vm._v(_vm._s(review.author))])]),_c('div',{staticClass:\"body5 sub3\"},[_vm._v(_vm._s(_vm.datesFormat(review.created_time, 'date_3')))])]),(review.title !== '')?_c('div',{staticClass:\"body5 sub3 margin-bottom-12\"},[_vm._v(_vm._s(review.title))]):_vm._e(),(review.imgs.length>0)?_c('div',{staticClass:\"flex-align drag-scroll-mobile margin-bottom-12\"},_vm._l((review.imgs),function(img,idx){return _c('img',{key:(\"review-img-\" + idx),staticClass:\"img-product\",attrs:{\"src\":img}})}),0):_vm._e(),_c('div',{staticClass:\"body4 main\"},[_vm._v(_vm._s(review.content))])])}),_c('lp-paginate',{staticClass:\"padding-top-32\",attrs:{\"filtered\":_vm.filtered,\"unit\":5},on:{\"update:filtered\":function($event){_vm.filtered=$event},\"getData\":_vm.getData}})]:_vm._e(),(_vm.reviews && _vm.reviews.length===0)?_c('div',{staticClass:\"empty-view\"},[_vm._v(\"아직 등록된 후기가 없습니다.\")]):_vm._e()],2),_c('image-modal',{ref:\"imgModal\",attrs:{\"imgs\":_vm.selectedImgs}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"product-review-container\">\r\n    <div class=\"pc\">\r\n      <template v-if=\"reviews && reviews.length>0\">\r\n        <div class=\"h8\">후기 {{ allCount }}개</div>\r\n        <div class=\"lp-divider-sub5 margin-top-16 margin-bottom-16\"></div>\r\n        <div v-for=\"(review,idx) in reviews\" :key=\"'theme-review-'+idx\" class=\"item-review\">\r\n          <div style=\"flex:1\">\r\n            <div class=\"flex\" style=\"justify-content: space-between\">\r\n              <div class=\"flex-align\" style=\"gap:8px\">\r\n                <img src=\"/static/icon/avata.svg\">\r\n                <div class=\"body4 sub2\">{{ review.author }}</div>\r\n              </div>\r\n              <div class=\"body5 sub3\">{{ datesFormat(review.created_time, 'date_3') }}</div>\r\n            </div>\r\n            <div class=\"body5 sub3\" style=\"margin:12px 0\">{{ review.title }}</div>\r\n            <div class=\"body4 main\">{{ review.content }}</div>\r\n          </div>\r\n          <img v-if=\"review.imgs.length>0\" class=\"img-product\" :src=\"review.imgs[0]\" @click=\"clickImg(review)\">\r\n        </div>\r\n        <!-- 페이지네이션 -->\r\n        <lp-paginate :filtered.sync=\"filtered\" style=\"margin-top:88px\" @click=\"getData\"></lp-paginate>\r\n      </template>\r\n      <div v-if=\"reviews && reviews.length===0\" class=\"empty-view\">아직 등록된 후기가 없습니다.</div>\r\n    </div>\r\n\r\n    <div class=\"mobile\" style=\"padding:0 16px\">\r\n      <template v-if=\"reviews && reviews.length>0\">\r\n        <div v-for=\"(review,idx) in reviews\" :key=\"'theme-review-'+idx\" class=\"item-review\">\r\n          <div class=\"flex-between margin-bottom-12\">\r\n            <div class=\"flex-align\" style=\"gap:8px\">\r\n              <img src=\"/static/icon/avata.svg\">\r\n              <div class=\"body4 sub2\">{{ review.author }}</div>\r\n            </div>\r\n            <div class=\"body5 sub3\">{{ datesFormat(review.created_time, 'date_3') }}</div>\r\n          </div>\r\n          <div v-if=\"review.title !== ''\"\r\n            class=\"body5 sub3 margin-bottom-12\">{{ review.title }}</div>\r\n          <div v-if=\"review.imgs.length>0\"\r\n               class=\"flex-align drag-scroll-mobile margin-bottom-12\">\r\n            <img v-for=\"(img, idx) in review.imgs\" :key=\"`review-img-${idx}`\"\r\n              class=\"img-product\" :src=\"img\">\r\n          </div>\r\n          <div class=\"body4 main\">{{ review.content }}</div>\r\n        </div>\r\n        <!-- 페이지네이션 -->\r\n        <lp-paginate :filtered.sync=\"filtered\" :unit=\"5\" class=\"padding-top-32\" @getData=\"getData\"></lp-paginate>\r\n      </template>\r\n      <div v-if=\"reviews && reviews.length===0\" class=\"empty-view\">아직 등록된 후기가 없습니다.</div>\r\n    </div>\r\n    <image-modal ref=\"imgModal\" :imgs=\"selectedImgs\"></image-modal>\r\n  </div>\r\n</template>\r\n<script>\r\n  import LpPaginate from \"../component/LpPaginate\";\r\n  import ImageModal from \"../component/ImageModal\";\r\n  export default {\r\n    name: \"ProductReview\",\r\n    props: {\r\n    },\r\n    components: {ImageModal, LpPaginate},\r\n    created() {\r\n      if(this.$route.query.id) {\r\n        this.getData();\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        formData: [],\r\n        reviews: [],\r\n        filtered: {\r\n          cur_page: 1,\r\n          page_num:1,\r\n          total_page:1,\r\n          page_length: 9\r\n        },\r\n        // 전체 카운트 수\r\n        allCount: 0,\r\n        selectedImgs: []\r\n      }\r\n    },\r\n    methods: {\r\n      clickImg(review) {\r\n        this.selectedImgs = review.imgs;\r\n        this.$refs.imgModal.open();\r\n      },\r\n      getData() {\r\n        let url = `public/product/${this.$route.query.id}/review`;\r\n        this.$axios.get(url,{\r\n          params: this.filtered\r\n        }).then(res=>{\r\n          if(res.status === 200) {\r\n            this.reviews = res.data.data;\r\n            this.filtered.page_length = res.data.page_length;\r\n            this.filtered.cur_page = res.data.cur_page;\r\n            this.filtered.total_page = res.data.total_page;\r\n            this.allCount = res.data.count;\r\n\r\n            // test\r\n            /*this.reviews = [\r\n              {\r\n                author: '이남호',\r\n                content: '플랫폼의 후기입니다. 이렇게 저렴한 가격에 플랫폼을 개설하다니 너무 좋아요!\\n' +\r\n                  '후기는\\n' +\r\n                  '말줄임없이 모두 표시\\n' +\r\n                  '남길 수 있어요.',\r\n                product: '6개월 정기결제',\r\n                created_time: '2022-06-25',\r\n                imgs: [\r\n                  \"https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/img/product/29010338.png\"\r\n                ]\r\n              }\r\n            ]*/\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n</script>\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .product-review-container\r\n    padding-bottom 40px\r\n  .lp-divider-gray3\r\n    border-bottom 12px solid $gray3\r\n\r\n  .pc\r\n    .item-review\r\n      display flex\r\n      gap 0 40px\r\n      padding 16px 0\r\n      border-bottom 1px solid $gray2\r\n\r\n    .img-product\r\n      object-fit cover\r\n      object-position center\r\n      width 100px\r\n      height 100px\r\n      border-radius 8px\r\n\r\n  .empty-view\r\n    padding-bottom 80px\r\n\r\n  .mobile\r\n    .item-review\r\n      padding 20px 0\r\n      border-bottom 1px solid $gray2\r\n    .img-product\r\n      object-fit cover\r\n      object-position center\r\n      width 88px\r\n      height 88px\r\n      border-radius 8px\r\n      margin-right 8px\r\n\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductReview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductReview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProductReview.vue?vue&type=template&id=3e649480&scoped=true&\"\nimport script from \"./ProductReview.vue?vue&type=script&lang=js&\"\nexport * from \"./ProductReview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProductReview.vue?vue&type=style&index=0&id=3e649480&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3e649480\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}