{"version":3,"sources":["webpack:///./src/components/page/QuickBuilder/Components/BlockBuilder.vue?79b6","webpack:///./src/components/page/QuickBuilder/Components/BlockBuilder.vue?2d7f","webpack:///src/components/page/QuickBuilder/Components/BlockBuilder.vue","webpack:///./src/components/page/QuickBuilder/Components/BlockBuilder.vue?1a47","webpack:///./src/components/page/QuickBuilder/Components/BlockBuilder.vue?a62b","webpack:///./src/mixins/UserAPIMixin.js","webpack:///./src/components/page/QuickBuilder/StepTitle.vue?ec79","webpack:///src/components/page/QuickBuilder/StepTitle.vue","webpack:///./src/components/page/QuickBuilder/StepTitle.vue?2390","webpack:///./src/components/page/QuickBuilder/StepTitle.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","step","_v","_s","page","korName","on","clear","class","device","$event","stopPropagation","preventDefault","staticStyle","headerImg","_e","_l","block","idx","key","hover","selectedBlock","id","kor_name","preview","clickPageBlock","_m","footerImg","blockName","clickBlock","vBoxMobile","staticRenderFns","component","userAxios","axios","create","headers","common","data","request","user","created","defaults","baseURL","process","$store","getters","user_id","token","auth","setHeader","methods","value","logout","post","then","commit","$router","replace","catch","err","undefined","response","detail","toast","message","_t"],"mappings":"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","file":"js/chunk-d899d87c.5e32f1ee.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!./BlockBuilder.vue?vue&type=style&index=0&id=50c56be8&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"builder-container\"},[_c('div',{staticClass:\"preview-container\"},[_c('step-title',{attrs:{\"step\":_vm.step}},[_c('b',[_vm._v(_vm._s(_vm.page.korName))]),_vm._v(\" 페이지를 원하는 디자인의 \"),_c('b',[_vm._v(\"블럭 템플릿\")]),_vm._v(\"으로 교체해보세요.\")]),_c('div',{staticClass:\"mockup-wrapper\",on:{\"click\":_vm.clear}},[_c('div',{class:(_vm.device + \"-mockup\"),on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();}}},[_c('div',{staticClass:\"inner\",staticStyle:{\"overflow\":\"hidden\",\"padding-bottom\":\"8px\"}},[_c('img',{attrs:{\"src\":_vm.headerImg}}),(_vm.device==='mobile')?_c('img',{staticStyle:{\"margin-top\":\"-8px\"},attrs:{\"src\":\"https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/BlockGnb.png\"}}):_vm._e(),_vm._l((_vm.computedPageBlocks),function(block,idx){return _c('div',{key:'page-block-'+idx,staticClass:\"unselect position-relative\",on:{\"mouseover\":function($event){return _vm.hover(block)},\"mouseleave\":function($event){block.hover=false}}},[(_vm.selectedBlock.id === block.id)?_c('div',{staticClass:\"selector\"},[_c('div',{staticClass:\"selector-name\"},[_vm._v(_vm._s(block.kor_name))])]):_vm._e(),_c('img',{staticClass:\"block-preview unselect\",class:{'selected': block.idx === _vm.selectedBlock.idx},attrs:{\"src\":block.preview},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.clickPageBlock(block)}}}),(block.hover && _vm.selectedBlock.id !== block.id)?_c('div',{staticClass:\"dim\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.clickPageBlock(block)}}},[_c('div',{staticClass:\"dim-content\"},[_c('div',{staticClass:\"h7\"},[_vm._v(_vm._s(block.kor_name))]),_vm._m(0,true)])]):_vm._e()])}),_c('img',{attrs:{\"src\":_vm.footerImg}})],2)])])],1),_c('div',{staticClass:\"prop-container\"},[_c('div',{staticStyle:{\"padding\":\"24px 20px\"}},[_c('div',{staticClass:\"flex-between\"},[_c('button',{staticClass:\"button\",class:{'is-dark': _vm.device==='mobile', 'is-gray': _vm.device==='pc'},on:{\"click\":function($event){_vm.device='mobile'}}},[_c('img',{class:{'selected-img': _vm.device==='mobile'},attrs:{\"src\":\"static/img/ic_device_mobile.svg\"}}),_vm._v(\"모바일 버전 \")]),_c('button',{staticClass:\"button\",class:{'is-dark': _vm.device==='pc', 'is-gray': _vm.device==='mobile'},on:{\"click\":function($event){_vm.device='pc'}}},[_c('img',{class:{'selected-img': _vm.device==='pc'},attrs:{\"src\":\"static/img/ic_device_pc.svg\"}}),_vm._v(\"데스크탑 버전 \")])]),(_vm.blockName!=='')?_c('div',{staticClass:\"subtitle5 sub\",staticStyle:{\"margin-top\":\"24px\"}},[_vm._v(_vm._s(_vm.blockName)+\" 템플릿\")]):_vm._e()]),(_vm.device==='pc')?_c('div',{staticClass:\"builder-box position-relative\"},[_vm._l((_vm.blocks),function(block){return [_c('img',{key:'block-'+block.id,staticClass:\"block-template-preview unselect\",class:{'block-template-preview-selected':block.id === _vm.selectedBlock.id},attrs:{\"src\":block.preview},on:{\"click\":function($event){return _vm.clickBlock(block)}}})]})],2):_vm._e(),_c('div',{staticClass:\"builder-box-mobile-wrapper\"},[_c('div',{staticClass:\"builder-box-mobile position-relative\"},[(!_vm.vBoxMobile)?_c('div',{staticClass:\"box-hidden\"}):_vm._e(),_vm._l((_vm.blocks),function(block){return _c('div',{key:'block-'+block.id,staticClass:\"block-template-mobile\"},[_c('img',{staticClass:\"block-template-preview-mobile unselect\",class:{'block-template-preview-selected':block.id === _vm.selectedBlock.id},attrs:{\"src\":block.preview},on:{\"click\":function($event){return _vm.clickBlock(block)}}})])})],2)])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"dim-circle\"},[_c('img',{attrs:{\"src\":\"/static/img/ic_vector.svg\"}})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"builder-container\">\r\n    <div class=\"preview-container\">\r\n      <step-title :step=\"step\"><b>{{ page.korName }}</b> 페이지를 원하는 디자인의 <b>블럭 템플릿</b>으로 교체해보세요.</step-title>\r\n\r\n      <!-- 목업 -->\r\n      <div class=\"mockup-wrapper\" @click=\"clear\">\r\n        <div :class=\"`${device}-mockup`\" @click.stop.prevent>\r\n        <div class=\"inner\" style=\"overflow: hidden;padding-bottom:8px\">\r\n          <!-- Header -->\r\n          <img :src=\"headerImg\">\r\n          <img style=\"margin-top:-8px\" v-if=\"device==='mobile'\"\r\n               src=\"https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/BlockGnb.png\">\r\n          <div v-for=\"(block,idx) in computedPageBlocks\" :key=\"'page-block-'+idx\" class=\"unselect position-relative\"\r\n               @mouseover=\"hover(block)\"\r\n               @mouseleave=\"block.hover=false\">\r\n            <div class=\"selector\" v-if=\"selectedBlock.id === block.id\">\r\n              <div class=\"selector-name\">{{ block.kor_name }}</div>\r\n            </div>\r\n            <img :src=\"block.preview\" class=\"block-preview unselect\"\r\n                 :class=\"{'selected': block.idx === selectedBlock.idx}\"\r\n                 @click.stop.prevent=\"clickPageBlock(block)\">\r\n            <div v-if=\"block.hover && selectedBlock.id !== block.id\" class=\"dim\" @click.stop.prevent=\"clickPageBlock(block)\">\r\n              <div class=\"dim-content\">\r\n                <div class=\"h7\">{{ block.kor_name }}</div>\r\n                <div class=\"dim-circle\">\r\n                  <img src=\"/static/img/ic_vector.svg\">\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          <!-- Footer -->\r\n          <img :src=\"footerImg\">\r\n        </div>\r\n      </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 속성 -->\r\n    <div class=\"prop-container\">\r\n      <div style=\"padding:24px 20px\">\r\n        <div class=\"flex-between\">\r\n          <button class=\"button\" :class=\"{'is-dark': device==='mobile', 'is-gray': device==='pc'}\"\r\n                  @click=\"device='mobile'\">\r\n            <img :class=\"{'selected-img': device==='mobile'}\" src=\"static/img/ic_device_mobile.svg\">모바일 버전\r\n          </button>\r\n          <button class=\"button\" :class=\"{'is-dark': device==='pc', 'is-gray': device==='mobile'}\" @click=\"device='pc'\">\r\n            <img :class=\"{'selected-img': device==='pc'}\" src=\"static/img/ic_device_pc.svg\">데스크탑 버전\r\n          </button>\r\n        </div>\r\n        <div class=\"subtitle5 sub\" style=\"margin-top:24px\" v-if=\"blockName!==''\">{{ blockName }} 템플릿</div>\r\n      </div>\r\n      <div class=\"builder-box position-relative\" v-if=\"device==='pc'\">\r\n        <template v-for=\"block in blocks\">\r\n          <img :src=\"block.preview\"\r\n               class=\"block-template-preview unselect\" :key=\"'block-'+block.id\"\r\n               :class=\"{'block-template-preview-selected':block.id === selectedBlock.id}\"\r\n               @click=\"clickBlock(block)\">\r\n        </template>\r\n      </div>\r\n\r\n      <div class=\"builder-box-mobile-wrapper\">\r\n        <div class=\"builder-box-mobile position-relative\">\r\n          <div v-if=\"!vBoxMobile\" class=\"box-hidden\"></div>\r\n          <div v-for=\"block in blocks\" :key=\"'block-'+block.id\" class=\"block-template-mobile\">\r\n            <img :src=\"block.preview\"\r\n                 class=\"block-template-preview-mobile unselect\"\r\n                 :class=\"{'block-template-preview-selected':block.id === selectedBlock.id}\"\r\n                 @click=\"clickBlock(block)\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import StepTitle from \"../StepTitle\";\r\n  import UserAPIMixin from \"../../../../mixins/UserAPIMixin\";\r\n\r\n  export default {\r\n    name: \"BlockBuilder\",\r\n    components: {StepTitle},\r\n    mixins: [\r\n      UserAPIMixin\r\n    ],\r\n    props: {\r\n      step: {\r\n        type: Number\r\n      },\r\n      service: {\r\n        type: Object\r\n      }\r\n    },\r\n    created() {\r\n      this.init();\r\n      this.getData();\r\n    },\r\n    data() {\r\n      return {\r\n        vBoxMobile: false,\r\n        device: 'mobile',\r\n        page: undefined,\r\n        pages: [\r\n          {\r\n            step: 3,\r\n            korName: '홈 화면',\r\n            name: \"Home\"\r\n          },\r\n          {\r\n            step: 4,\r\n            korName: '상품목록',\r\n            name: \"Product\"\r\n          },\r\n          {\r\n            step: 5,\r\n            korName: '상품상세',\r\n            name: \"ProductDetail\"\r\n          },\r\n        ],\r\n        id: 1,\r\n        blocks: [],\r\n        selectedBlock: {id: 0},\r\n        url: '',\r\n        blockName: '',\r\n        // 선택되면 안되는 블럭\r\n        excludeBlock: [\"BlockProductDetailBottomBtn\"]\r\n      }\r\n    },\r\n    methods: {\r\n      init() {\r\n        let page = this.pages.filter(page => {\r\n          return page.step === this.step\r\n        })[0];\r\n        let servicePage = this.service.pages.filter(item => {\r\n          return item.name === page.name\r\n        });\r\n        if (servicePage.length === 0) {\r\n          this.page = {\r\n            name: page.name,\r\n            korName: page.korName,\r\n            pageBlocks: [],\r\n            pageBlocksPc: []\r\n          };\r\n          this.service.pages.push(this.page);\r\n\r\n        } else {\r\n          this.page = servicePage[0];\r\n        }\r\n      },\r\n      getData() {\r\n        if ((this.device === 'pc' && this.page.pageBlocksPc.length > 0) ||\r\n          (this.device === 'mobile' && this.page.pageBlocks.length > 0)) {\r\n\r\n          if (document.getElementsByClassName('inner').length > 0) {\r\n            document.getElementsByClassName('inner')[0].scrollTop = 0;\r\n          }\r\n\r\n          // 첫번째 블럭 선택\r\n          this.clickPageBlock(this.computedPageBlocks[0]);\r\n\r\n          return;\r\n        }\r\n        let name = this.page.name;\r\n        this.request.user.get(`ui/super_builder/page_blocks/${name}?service_key=${this.service.key}`).then(res => {\r\n          this.page.pageBlocks = res.data.mobile.filter(item => {\r\n            item.hover = false;\r\n            return ['BlockGnb'].indexOf(item.name) === -1;\r\n          });\r\n          for (let i = 0; i < this.page.pageBlocks.length; i++) {\r\n            this.page.pageBlocks[i].idx = i;\r\n          }\r\n\r\n          this.page.pageBlocksPc = res.data.pc.map(i=> { i.hover =false; return i; });\r\n          for (let i = 0; i < this.page.pageBlocksPc.length; i++) {\r\n            this.page.pageBlocksPc[i].idx = i;\r\n          }\r\n\r\n          this.$nextTick(() => {\r\n            if (document.getElementsByClassName('inner').length > 0)\r\n              document.getElementsByClassName('inner')[0].scrollTop = 0;\r\n\r\n            // 첫번째 블럭 선택\r\n            this.clickPageBlock(this.computedPageBlocks[0]);\r\n          });\r\n        });\r\n      },\r\n      getBlocks() {\r\n        this.url = `ui/super_builder/blocks/${this.selectedBlock.name}?page_length=100`;\r\n        let conv = this.service.conversions.map(item => {\r\n          return item.params.filter(param => {\r\n            return param.name === 'key'\r\n          })[0].value\r\n        }).toString();\r\n        let plugin = this.service.plugins.map(item => {\r\n          return item.params.filter(param => {\r\n            return param.name === 'key'\r\n          })[0].value\r\n        }).toString();\r\n        this.url += `&conversion=${conv}&plugin=${plugin}`;\r\n        this.request.user.get(this.url).then(res => {\r\n\r\n          // 현재 선택한 블럭 외, 다른 동일한 이름의 블럭이 이미 추가되어 있는 경우 목록에서 제거\r\n          // 중복 추가 막기 위함\r\n          let pageBlocks = this.device === 'pc' ? this.page.pageBlocksPc : this.page.pageBlocks;\r\n          pageBlocks = pageBlocks.filter(block => {\r\n            return block.name === this.selectedBlock.name && block.template_name !== this.selectedBlock.template_name\r\n          }).map(block => {\r\n            return block.template_name\r\n          });\r\n\r\n          this.blocks = res.data.filter(data => {\r\n            return pageBlocks.indexOf(data.template_name) === -1\r\n          });\r\n\r\n          let index = this.blocks.findIndex(b => { return b.id === this.selectedBlock.id });\r\n          if(index>-1) {\r\n            let sel = this.cloneItem(this.blocks[index]);\r\n            this.blocks.remove(index);\r\n            this.blocks.splice(0,0,sel);\r\n          }\r\n\r\n          this.blockName = this.blocks[0].kor_name;\r\n          this.setMasonry();\r\n        });\r\n      },\r\n      setMasonry() {\r\n        this.vBoxMobile = false;\r\n        setTimeout(()=>{\r\n          this.$nextTick(()=>{\r\n            // eslint-disable-next-line no-undef\r\n            new Masonry(document.getElementsByClassName('builder-box-mobile')[0],\r\n              { itemSelector: \".block-template-mobile\", percentPosition:true})\r\n          })\r\n          this.vBoxMobile = true;\r\n          }, 500)\r\n      },\r\n      clickPageBlock(block) {\r\n        if(this.excludeBlock.indexOf(block.name) === -1) {\r\n          this.selectedBlock = block;\r\n          this.getBlocks();\r\n        }\r\n      },\r\n      clear() {\r\n        this.selectedBlock = {id: 0};\r\n        this.blockName = '';\r\n        this.blocks = [];\r\n      },\r\n      clickBlock(block) {\r\n        this.selectedBlock.preview = block.preview;\r\n        this.selectedBlock.template_name = block.template_name;\r\n        this.selectedBlock.id = block.id;\r\n      },\r\n      hover(block) {\r\n        if(this.excludeBlock.indexOf(block.name)===-1) {\r\n          block.hover = true;\r\n        }\r\n      }\r\n    },\r\n    watch: {\r\n      page() {\r\n        this.clear();\r\n        this.getData();\r\n      },\r\n      device() {\r\n        this.clear();\r\n        this.getData();\r\n      }\r\n    },\r\n    computed: {\r\n      computedPageBlocks() {\r\n        return this.device === 'pc' ? this.page.pageBlocksPc : this.page.pageBlocks;\r\n      },\r\n      headerImg() {\r\n        return this.device === 'pc' ?\r\n          'https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/BlockHeaderPc.png' :\r\n          'https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/BlockHeader.png';\r\n      },\r\n      footerImg() {\r\n        return this.device === 'pc' ?\r\n          'https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/t1_FooterPc.png' :\r\n          'https://launchpack-storage.s3.ap-northeast-2.amazonaws.com/media/lp_templates/t1_Footer.png';\r\n      }\r\n    }\r\n\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .builder-container\r\n    display flex\r\n    height 100%\r\n    background-color $gray3\r\n    overflow hidden\r\n\r\n  .preview-container\r\n    flex 1\r\n    height 100%\r\n    position relative\r\n    overflow-y auto\r\n\r\n  .prop-container\r\n    width 392px\r\n    background-color white\r\n    height 100%\r\n\r\n  .mockup-wrapper\r\n    padding-bottom 80px\r\n    width 100%\r\n\r\n  .mobile-mockup\r\n  .pc-mockup\r\n    background-color white\r\n    box-shadow 0 4px 14px rgba(0, 0, 0, 0.15)\r\n    border-radius 20px\r\n    overflow hidden\r\n    margin 0 auto\r\n\r\n  .mobile-mockup\r\n    width 400px\r\n\r\n  .pc-mockup\r\n    width calc(100% - 120px)\r\n    max-width 1100px\r\n    padding 20px\r\n\r\n  .button\r\n    height 36px\r\n    font-size 14px\r\n    flex 1\r\n\r\n    img\r\n      margin-right 8px\r\n      filter invert(1)\r\n\r\n  .button:first-child\r\n    margin-right 6px\r\n\r\n  .button:last-child\r\n    margin-left 6px\r\n\r\n  .selected-img\r\n    filter invert(0) !important\r\n\r\n  .inner\r\n    height 100%\r\n    border 1px solid #ddd\r\n    overflow-y scroll\r\n    padding 12px 12px 150px 12px\r\n    line-height 2\r\n\r\n  .builder-box\r\n    height calc(100% - 132px)\r\n    overflow-y auto\r\n    padding 0 20px\r\n\r\n  .builder-box-mobile-wrapper\r\n    height calc(100% - 132px)\r\n    overflow-y auto\r\n\r\n  .builder-box-mobile\r\n    position relative\r\n    height 100%\r\n    min-height 500px\r\n    margin 0 auto\r\n    overflow-y auto\r\n    width calc(100% - 24px)\r\n\r\n\r\n  .block-template-preview\r\n  .block-template-preview-mobile\r\n    border 2px solid #eeeeee\r\n\r\n  .block-template-preview:hover\r\n  .block-template-preview-mobile:hover\r\n    box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)\r\n\r\n  .block-template-preview\r\n    width 100%\r\n    margin-bottom 16px\r\n\r\n  .block-template-preview-mobile\r\n    width 100%\r\n\r\n  .block-template-mobile\r\n    width 50%\r\n    padding 4px 8px\r\n\r\n\r\n  .block-template-preview-selected\r\n    border 2px solid $primary\r\n  .selector\r\n    position absolute\r\n    width 100%\r\n    height 100%\r\n    border 2px solid $primary\r\n    display flex\r\n    filter drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2))\r\n  .selector-name\r\n    background-color $primary\r\n    color white\r\n    padding 2px 8px\r\n    height 28px\r\n    font-size 12px\r\n    position absolute\r\n    top 0\r\n    left 0\r\n  .dim\r\n    position absolute\r\n    top 0\r\n    left 0\r\n    width 100%\r\n    height 100%\r\n    background-color rgba(36,36,40,0.5)\r\n    text-align center\r\n    display flex\r\n    align-items center\r\n    justify-content center\r\n  .dim-content\r\n    color white\r\n  .dim-circle\r\n    background-color white\r\n    border-radius 100%\r\n    width 72px\r\n    height 72px\r\n    display flex\r\n    align-items center\r\n    justify-content center\r\n    margin 16px auto\r\n\r\n  .box-hidden\r\n    position fixed\r\n    width 384px\r\n    height 100%\r\n    background-color white\r\n    z-index 1\r\n    right 0\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!./BlockBuilder.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!./BlockBuilder.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BlockBuilder.vue?vue&type=template&id=50c56be8&scoped=true&\"\nimport script from \"./BlockBuilder.vue?vue&type=script&lang=js&\"\nexport * from \"./BlockBuilder.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BlockBuilder.vue?vue&type=style&index=0&id=50c56be8&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  \"50c56be8\",\n  null\n  \n)\n\nexport default component.exports","import axios from 'axios'\r\n\r\nconst userAxios = axios.create({\r\n  headers: {\r\n    common: {}\r\n  }\r\n});\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      request: {\r\n        user: userAxios,\r\n      },\r\n    };\r\n  },\r\n\r\n\r\n  created() {\r\n    // Admin base URL 설정.\r\n    this.request.user.defaults.baseURL = `${process.env.VUE_APP_MASTER_BACKEND_URL}/user/${this.$store.getters.user.user_id}`;\r\n\r\n    // 인증 설정.\r\n    if (this.$store.getters.user.token !== '') {\r\n      const auth = 'Token ' + this.$store.getters.user.token;\r\n      this.setHeader(this.request.user, 'Authorization', auth);\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    setHeader(request, key, value) {\r\n      request.defaults.headers.common[key] = value;\r\n    },\r\n    // 로그아웃\r\n    async logout() {\r\n      await this.request.user.post(`${process.env.VUE_APP_MASTER_BACKEND_URL}/auth/user/logout`)\r\n        .then(() => {\r\n          this.$store.commit('logout');\r\n          delete this.request.user.defaults.headers.common['Authorization'];\r\n          this.$router.replace('home');\r\n        }).catch(err => {\r\n          if(err.response.data.detail === undefined)\r\n            this.toast(err.response.data.message);\r\n          else\r\n            this.toast(err.response.data.detail);\r\n        });\r\n    }\r\n  }\r\n}\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{\"padding\":\"64px 0 43px 0\",\"text-align\":\"center\"}},[_c('div',{staticClass:\"primary body4-bold\",staticStyle:{\"margin-bottom\":\"12px\"}},[_vm._v(\"Step 0\"+_vm._s(_vm.step))]),_c('div',{staticClass:\"main subtitle3\"},[_vm._t(\"default\")],2)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div style=\"padding:64px 0 43px 0;text-align:center\">\r\n    <div class=\"primary body4-bold\" style=\"margin-bottom:12px\">Step 0{{ step }}</div>\r\n    <div class=\"main subtitle3\"><slot></slot></div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"StepTitle\",\r\n    props: {\r\n      step: {\r\n        type: Number\r\n      }\r\n    },\r\n    created() {\r\n\r\n    },\r\n    data() {\r\n      return {}\r\n    },\r\n    methods: {}\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\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!./StepTitle.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!./StepTitle.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./StepTitle.vue?vue&type=template&id=6b7627ee&scoped=true&\"\nimport script from \"./StepTitle.vue?vue&type=script&lang=js&\"\nexport * from \"./StepTitle.vue?vue&type=script&lang=js&\"\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  \"6b7627ee\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}