feat(gift): 받을 주소 관리 및 카카오 주소 검색 추가

package.json

@@ -7,7 +7,7 @@
     "serve": "vue-cli-service serve --port 8888",
     "build": "vue-cli-service build",
     "build_development": "vue-cli-service build --mode development",
-    "test:gift": "node tests/gift.test.js && node tests/gift_category.test.js && node tests/gift_size.test.js",
+    "test:gift": "node tests/gift.test.js && node tests/gift_category.test.js && node tests/gift_size.test.js && node tests/gift_mailbox.test.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/api/gift_mailbox.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+
+const baseUrl = '/api/v2/admin/gift-mailbox'
+
+async function getGiftMailbox() {
+    const response = await Vue.axios.get(baseUrl)
+    return response.data
+}
+
+async function updateGiftMailbox(request) {
+    const response = await Vue.axios.put(baseUrl, request)
+    return response.data
+}
+
+export { getGiftMailbox, updateGiftMailbox }

src/components/SideMenu.vue

@@ -118,6 +118,9 @@ export default {
               if (!giftMenu.items.some(item => item && item.route === '/gift/size')) {
                 giftMenu.items.push({ title: '선물 사이즈', route: '/gift/size', items: null })
               }
+              if (!giftMenu.items.some(item => item && item.route === '/gift/mailbox')) {
+                giftMenu.items.push({ title: '받을 주소', route: '/gift/mailbox', items: null })
+              }
             } else {
               this.items.push({
                 title: '선물함 관리',
@@ -126,7 +129,8 @@ export default {
                 items: [
                   { title: '선물함 리스트', route: '/gift/list', items: null },
                   { title: '선물 카테고리', route: '/gift/category', items: null },
-                  { title: '선물 사이즈', route: '/gift/size', items: null }
+                  { title: '선물 사이즈', route: '/gift/size', items: null },
+                  { title: '받을 주소', route: '/gift/mailbox', items: null }
                 ]
               })
             }

src/router/index.js

@@ -377,6 +377,11 @@ const routes = [
                 name: 'GiftSize',
                 component: () => import(/* webpackChunkName: "gift" */ '../views/Gift/GiftSize.vue')
             },
+            {
+                path: '/gift/mailbox',
+                name: 'GiftMailbox',
+                component: () => import(/* webpackChunkName: "gift" */ '../views/Gift/GiftMailbox.vue')
+            },
             {
                 path: '/original-work',
                 name: 'OriginalList',

src/utils/postcode.js

@@ -0,0 +1,28 @@
+let loading
+
+export function loadPostcode() {
+  if (window.daum && window.daum.Postcode) return Promise.resolve(window.daum.Postcode)
+  if (loading) return loading
+  loading = new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    const finish = error => {
+      clearTimeout(timer)
+      script.onload = null
+      script.onerror = null
+      if (error) {
+        script.remove()
+        loading = null
+        reject(error)
+      } else {
+        resolve(window.daum.Postcode)
+      }
+    }
+    const timer = setTimeout(() => finish(new Error('주소 검색을 불러오지 못했습니다. 다시 시도해주세요.')), 15000)
+    script.src = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'
+    script.async = true
+    script.onload = () => finish(window.daum && window.daum.Postcode ? null : new Error('주소 검색을 불러오지 못했습니다. 다시 시도해주세요.'))
+    script.onerror = () => finish(new Error('주소 검색을 불러오지 못했습니다. 다시 시도해주세요.'))
+    document.head.appendChild(script)
+  })
+  return loading
+}

src/views/Gift/GiftMailbox.vue

@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>받을 주소</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container fluid>
+      <p>팬이 선물을 발송할 때 확인하는 받을 주소입니다.</p>
+      <v-progress-linear
+        v-if="is_loading"
+        indeterminate
+      />
+      <v-alert
+        v-if="load_error"
+        type="error"
+        text
+      >
+        받을 주소를 불러오지 못했습니다.
+        <v-btn
+          text
+          :disabled="is_loading"
+          @click="getMailbox"
+        >
+          다시 조회
+        </v-btn>
+      </v-alert>
+      <p v-else-if="loaded && !mailbox">
+        등록된 받을 주소가 없습니다. 주소를 입력하고 저장해주세요.
+      </p>
+      <v-card>
+        <v-form @submit.prevent="saveMailbox">
+          <v-card-text>
+            <div
+              v-for="field in fields"
+              :key="field.key"
+              :class="{ 'mailbox-postcode-row': field.key === 'zipCode' }"
+            >
+              <v-text-field
+                :key="field.key"
+                v-model="form[field.key]"
+                :label="field.label"
+                :readonly="field.key === 'zipCode' || field.key === 'address'"
+                :disabled="field.key === 'zipCode' || field.key === 'address' || !loaded || is_loading || is_operating"
+                :filled="field.key === 'zipCode' || field.key === 'address'"
+                :error-messages="form_errors[field.key]"
+                outlined
+                dense
+                @input="$set(form_errors, field.key, '')"
+              />
+              <v-btn
+                v-if="field.key === 'zipCode'"
+                type="button"
+                outlined
+                color="primary"
+                height="40"
+                :disabled="!loaded || is_loading || is_operating"
+                @click="openAddressSearch"
+              >
+                주소 검색
+              </v-btn>
+            </div>
+            <p class="text-caption grey--text text--darken-1">
+              우편번호와 주소는 주소 검색으로 입력해주세요. 상세주소는 직접 입력할 수 있습니다.
+            </p>
+            <p v-if="mailbox">
+              등록된 받을 주소: {{ mailbox.address }}
+            </p>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              type="submit"
+              color="primary"
+              :loading="is_operating"
+              :disabled="!loaded || is_loading || is_operating"
+            >
+              저장
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-container>
+    <v-dialog
+      v-model="show_address_search"
+      max-width="560px"
+    >
+      <v-card>
+        <v-card-title>주소 검색</v-card-title>
+        <v-card-text>
+          <v-progress-linear
+            v-if="is_postcode_loading"
+            indeterminate
+          />
+          <div
+            ref="postcodeContainer"
+            style="width: 100%; height: 500px;"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="show_address_search = false"
+          >
+            닫기
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/gift_mailbox'
+import { loadPostcode } from '@/utils/postcode'
+
+export default {
+  name: 'GiftMailbox',
+  data() {
+    return {
+      fields: [
+        { key: 'name', label: '받을 사람 이름', required: true },
+        { key: 'phoneNumber', label: '연락처', required: true },
+        { key: 'zipCode', label: '우편번호', required: true },
+        { key: 'address', label: '주소', required: true },
+        { key: 'addressDetail', label: '상세주소', required: false }
+      ],
+      form: { name: '', phoneNumber: '', zipCode: '', address: '', addressDetail: '' },
+      form_errors: {},
+      mailbox: null,
+      loaded: false,
+      load_error: false,
+      is_loading: false,
+      show_address_search: false,
+      is_postcode_loading: false,
+      postcodeRequestId: 0,
+      is_operating: false
+    }
+  },
+  async created() {
+    await this.getMailbox()
+  },
+  beforeDestroy() {
+    this.postcodeRequestId++
+  },
+  methods: {
+    async openAddressSearch() {
+      if (!this.loaded || this.is_loading || this.is_operating) return
+      const requestId = ++this.postcodeRequestId
+      this.show_address_search = true
+      this.is_postcode_loading = true
+      try {
+        const Postcode = await loadPostcode()
+        await this.$nextTick()
+        if (requestId !== this.postcodeRequestId || !this.show_address_search) return
+        this.$refs.postcodeContainer.innerHTML = ''
+        new Postcode({
+          width: '100%',
+          height: '100%',
+          oncomplete: data => {
+            if (requestId !== this.postcodeRequestId || !this.show_address_search || this.is_operating) return
+            this.form.zipCode = data.zonecode
+            this.form.address = data.userSelectedType === 'R' ? data.roadAddress : data.jibunAddress
+            this.form.addressDetail = ''
+            this.$set(this.form_errors, 'zipCode', '')
+            this.$set(this.form_errors, 'address', '')
+            this.show_address_search = false
+          }
+        }).embed(this.$refs.postcodeContainer)
+      } catch (error) {
+        if (requestId !== this.postcodeRequestId || !this.show_address_search) return
+        this.show_address_search = false
+        this.notifyError(error)
+      } finally {
+        if (requestId === this.postcodeRequestId) this.is_postcode_loading = false
+      }
+    },
+    notifyError(error) {
+      const response = error.response && error.response.data
+      this.$dialog.notify.error((response && response.message) || error.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+    },
+    checkResponse(response) {
+      if (response.success !== true) throw new Error(response.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+    },
+    async getMailbox() {
+      if (this.is_loading || this.is_operating) return
+      this.is_loading = true
+      this.loaded = false
+      this.load_error = false
+      try {
+        const response = await api.getGiftMailbox()
+        this.checkResponse(response)
+        this.mailbox = response.data
+        const item = response.data || {}
+        const address = item.address || ''
+        const parts = address.match(/^\(([^)]+)\)\s*(.*)$/)
+        const street = parts ? parts[2] : address
+        const separator = street.indexOf(', ')
+        this.form = {
+          name: item.name || '',
+          phoneNumber: item.phoneNumber || '',
+          zipCode: parts ? parts[1] : '',
+          address: separator < 0 ? street : street.slice(0, separator),
+          addressDetail: separator < 0 ? '' : street.slice(separator + 2)
+        }
+        this.form_errors = {}
+        this.loaded = true
+      } catch (error) {
+        this.load_error = true
+        this.notifyError(error)
+      } finally {
+        this.is_loading = false
+      }
+    },
+    async saveMailbox() {
+      if (!this.loaded || this.is_loading || this.is_operating) return
+      const request = {}
+      this.form_errors = {}
+      this.fields.forEach(field => {
+        const value = (this.form[field.key] || '').trim()
+        request[field.key] = field.required ? value : value || null
+        if (field.required && !value) {
+          this.$set(this.form_errors, field.key, `${field.label}을(를) 입력해주세요.`)
+        }
+      })
+      if (Object.keys(this.form_errors).length) return
+      this.is_operating = true
+      try {
+        const response = await api.updateGiftMailbox(request)
+        this.checkResponse(response)
+        this.mailbox = response.data
+        this.form.name = response.data.name
+        this.form.phoneNumber = response.data.phoneNumber
+        this.$dialog.notify.success('받을 주소가 저장되었습니다.')
+      } catch (error) {
+        this.notifyError(error)
+      } finally {
+        this.is_operating = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mailbox-postcode-row {
+  display: grid;
+  grid-template-columns: minmax(0, 200px) max-content;
+  gap: 12px;
+  align-items: start;
+}
+</style>

tests/gift_mailbox.test.js

@@ -0,0 +1,294 @@
+const assert = require('assert').strict
+const fs = require('fs')
+const path = require('path')
+const Module = require('module')
+const { transformSync } = require('@babel/core')
+const compiler = require('vue-template-compiler')
+const Vue = require('vue')
+
+const root = path.resolve(__dirname, '..')
+const originalResolve = Module._resolveFilename
+Module._resolveFilename = function(request, parent, ...rest) {
+  return originalResolve.call(this, request.startsWith('@/') ? path.join(root, 'src', request.slice(2)) : request, parent, ...rest)
+}
+const originalJs = require.extensions['.js']
+function compileScript(source, filename) {
+  return transformSync(source, {
+    filename, babelrc: false, configFile: false,
+    plugins: ['@babel/plugin-transform-modules-commonjs']
+  }).code
+}
+require.extensions['.js'] = (module, filename) => {
+  if (!filename.startsWith(path.join(root, 'src') + path.sep)) return originalJs(module, filename)
+  module._compile(compileScript(fs.readFileSync(filename, 'utf8'), filename), filename)
+}
+require.extensions['.vue'] = (module, filename) => {
+  const { script, template } = compiler.parseComponent(fs.readFileSync(filename, 'utf8'))
+  assert.deepEqual(compiler.compile(template.content).errors, [])
+  module._compile(compileScript(script.content, filename), filename)
+  Object.assign(module.exports.default, compiler.compileToFunctions(template.content))
+}
+
+const GiftMailbox = require('../src/views/Gift/GiftMailbox.vue').default
+const SideMenu = require('../src/components/SideMenu.vue').default
+const tests = []
+const test = (name, run) => tests.push({ name, run })
+const envelope = data => ({ data: { success: true, data } })
+const saved = { name: '운영팀', phoneNumber: '010-1234-5678', address: '(01234) 서울시 도로 1, 2층, 운영실' }
+const form = () => ({ name: ' 운영팀 ', phoneNumber: ' 010-1234-5678 ', zipCode: '01234', address: '서울시 도로 1', addressDetail: '2층, 운영실' })
+function page() {
+  const vm = new Vue({ ...GiftMailbox, created: undefined })
+  const errors = []
+  const successes = []
+  vm.$dialog = { notify: { error: message => errors.push(message), success: message => successes.push(message) } }
+  return { vm, errors, successes }
+}
+function nodes(vnode) {
+  return vnode ? [vnode].concat((vnode.children || []).flatMap(nodes)) : []
+}
+const text = vm => nodes(vm._render()).map(node => node.text || '').join('')
+
+test('초기 GET과 null 빈 폼, 안내 및 필드 표시', async () => {
+  const { vm } = page()
+  const calls = []
+  Vue.axios = { get: async (...args) => { calls.push(args); return envelope(null) } }
+  await GiftMailbox.created.call(vm)
+  assert.deepEqual(calls, [['/api/v2/admin/gift-mailbox']])
+  assert.ok(Object.values(vm.form).every(value => value === ''))
+  assert.ok(text(vm).includes('등록된 받을 주소가 없습니다.'))
+  assert.equal(nodes(vm._render()).filter(node => node.tag === 'v-text-field').length, 5)
+})
+
+test('등록된 주소 조회 및 상세주소 없는 주소 편집', async () => {
+  const { vm } = page()
+  Vue.axios = { get: async () => envelope(saved) }
+  await vm.getMailbox()
+  assert.deepEqual(vm.form, { ...form(), name: saved.name, phoneNumber: saved.phoneNumber })
+  Vue.axios.get = async () => envelope({ ...saved, address: '(01234) 서울시 도로 1' })
+  await vm.getMailbox()
+  assert.equal(vm.form.address, '서울시 도로 1')
+  assert.equal(vm.form.addressDetail, '')
+})
+
+test('필수값 공백 시 필드 오류 표시 및 PUT 차단', async () => {
+  const { vm } = page()
+  vm.loaded = true
+  let calls = 0
+  Vue.axios = { put: async () => { calls++ } }
+  for (const key of ['name', 'phoneNumber', 'zipCode', 'address']) {
+    for (const value of ['', ' \t\n ', null]) {
+      vm.form = { ...form(), [key]: value }
+      await vm.saveMailbox()
+      assert.deepEqual(Object.keys(vm.form_errors), [key])
+      const field = nodes(vm._render()).find(node => node.tag === 'v-text-field' && node.key === key)
+      assert.ok(field.data.attrs['error-messages'])
+    }
+  }
+  assert.equal(calls, 0)
+})
+
+test('생성·수정 PUT 본문, 선택값 null, 성공 알림 및 서버 응답 반영', async () => {
+  for (const detail of ['2층, 운영실', '   ']) {
+    const { vm, successes } = page()
+    vm.loaded = true
+    vm.form = { ...form(), addressDetail: detail, extra: '제외' }
+    const calls = []
+    const result = { ...saved, name: '서버 이름', phoneNumber: '서버 연락처' }
+    Vue.axios = { put: async (...args) => { calls.push(args); return envelope(result) } }
+    await vm.saveMailbox()
+    await vm.saveMailbox()
+    assert.equal(calls.length, 2)
+    assert.deepEqual(calls[0], ['/api/v2/admin/gift-mailbox', {
+      ...form(), name: saved.name, phoneNumber: saved.phoneNumber, addressDetail: detail.trim() || null
+    }])
+    assert.equal(vm.form.name, result.name)
+    assert.equal(vm.form.phoneNumber, result.phoneNumber)
+    assert.equal(vm.form.address, form().address)
+    assert.equal(vm.form.addressDetail, detail)
+    assert.equal(successes.length, 2)
+    assert.ok(text(vm).includes(saved.address))
+  }
+})
+
+test('조회·저장 실패 알림, 입력 유지, 조회 재시도', async () => {
+  for (const fail of [
+    async () => ({ data: { success: false, message: '실패' } }),
+    async () => { throw { response: { data: { message: '실패' } } } }
+  ]) {
+    const { vm, errors, successes } = page()
+    let puts = 0
+    Vue.axios = { get: fail, put: async () => { puts++; return fail() } }
+    await vm.getMailbox()
+    await vm.saveMailbox()
+    assert.equal(puts, 0)
+    assert.equal(vm.load_error, true)
+    assert.ok(text(vm).includes('다시 조회'))
+    Vue.axios.get = async () => envelope(null)
+    await vm.getMailbox()
+    vm.form = form()
+    await vm.saveMailbox()
+    assert.deepEqual(vm.form, form())
+    assert.deepEqual(errors, ['실패', '실패'])
+    assert.deepEqual(successes, [])
+    assert.equal(vm.is_operating, false)
+  }
+})
+
+test('조회 중 저장 및 중복 저장 차단', async () => {
+  const { vm } = page()
+  let resolve
+  let puts = 0
+  Vue.axios = {
+    get: () => new Promise(done => { resolve = done }),
+    put: () => { puts++; return new Promise(done => { resolve = done }) }
+  }
+  const load = vm.getMailbox()
+  await vm.saveMailbox()
+  assert.equal(puts, 0)
+  resolve(envelope(null))
+  await load
+  vm.form = form()
+  const save = vm.saveMailbox()
+  await vm.saveMailbox()
+  assert.equal(puts, 1)
+  resolve(envelope(saved))
+  await save
+})
+
+test('주소 검색 선택: 읽기 전용 필드, 도로명·지번 선택 및 PUT 반영', async () => {
+  const postcode = require('../src/utils/postcode')
+  const original = postcode.loadPostcode
+  try {
+    for (const type of ['R', 'J']) {
+      const { vm } = page()
+      vm.loaded = true
+      vm.form = form()
+      vm.form_errors = { zipCode: '필수', address: '필수' }
+      vm.$refs.postcodeContainer = { innerHTML: '이전 검색' }
+      let options
+      postcode.loadPostcode = async () => function(config) {
+        options = config
+        this.embed = container => assert.equal(container, vm.$refs.postcodeContainer)
+      }
+      const fields = nodes(vm._render()).filter(node => node.tag === 'v-text-field')
+      for (const field of fields) {
+        assert.equal(field.data.attrs.readonly, ['zipCode', 'address'].includes(field.key))
+        assert.equal(field.data.attrs.disabled, ['zipCode', 'address'].includes(field.key))
+      }
+      const postcodeRow = nodes(vm._render()).find(node => node.data && node.data.class && node.data.class['mailbox-postcode-row'])
+      assert.ok(postcodeRow, '우편번호와 검색 버튼을 같은 행에 배치한다')
+      assert.ok(nodes(postcodeRow).some(node => node.key === 'zipCode'))
+      assert.ok(nodes(postcodeRow).some(node => node.tag === 'v-btn' && nodes(node).map(child => child.text || '').join('').trim() === '주소 검색'))
+      await vm.openAddressSearch()
+      assert.equal(vm.show_address_search, true)
+      options.oncomplete({ zonecode: '04524', userSelectedType: type, roadAddress: '서울 중구 세종대로 110', jibunAddress: '서울 중구 태평로1가 31' })
+      assert.equal(vm.form.zipCode, '04524')
+      assert.equal(vm.form.address, type === 'R' ? '서울 중구 세종대로 110' : '서울 중구 태평로1가 31')
+      assert.equal(vm.form.addressDetail, '')
+      assert.equal(vm.form_errors.zipCode, '')
+      assert.equal(vm.form_errors.address, '')
+      assert.equal(vm.show_address_search, false)
+      vm.form.addressDetail = '3층'
+      let request
+      Vue.axios = { put: async (url, body) => { request = body; return envelope(saved) } }
+      await vm.saveMailbox()
+      assert.equal(request.zipCode, '04524')
+      assert.equal(request.address, vm.form.address)
+      assert.equal(request.addressDetail, '3층')
+    }
+  } finally {
+    postcode.loadPostcode = original
+  }
+})
+
+test('주소 검색 취소·화면 종료·오류 시 기존 입력 보존 및 재시도', async () => {
+  const postcode = require('../src/utils/postcode')
+  const original = postcode.loadPostcode
+  try {
+    const { vm, errors } = page()
+    vm.loaded = true
+    vm.form = form()
+    let resolve
+    let embeds = 0
+    postcode.loadPostcode = () => new Promise(done => { resolve = done })
+    const pending = vm.openAddressSearch()
+    vm.show_address_search = false
+    resolve(function() { this.embed = () => { embeds++ } })
+    await pending
+    assert.equal(embeds, 0)
+    assert.deepEqual(vm.form, form())
+    postcode.loadPostcode = async () => { throw new Error('검색 로딩 실패') }
+    await vm.openAddressSearch()
+    assert.deepEqual(errors, ['검색 로딩 실패'])
+    assert.equal(vm.is_postcode_loading, false)
+    assert.equal(vm.show_address_search, false)
+    assert.deepEqual(vm.form, form())
+    postcode.loadPostcode = () => new Promise(done => { resolve = done })
+    const retry = vm.openAddressSearch()
+    GiftMailbox.beforeDestroy.call(vm)
+    resolve(function() { this.embed = () => { embeds++ } })
+    await retry
+    assert.equal(embeds, 0)
+  } finally {
+    postcode.loadPostcode = original
+  }
+})
+
+test('주소 검색 스크립트 단일 로드, 실패 후 재시도 및 기존 SDK 재사용', async () => {
+  const { loadPostcode } = require('../src/utils/postcode')
+  const scripts = []
+  const previousWindow = global.window
+  const previousDocument = global.document
+  global.window = {}
+  global.document = {
+    createElement: () => ({ remove() { this.removed = true } }),
+    head: { appendChild: script => scripts.push(script) }
+  }
+  try {
+    const first = loadPostcode()
+    assert.equal(loadPostcode(), first)
+    assert.equal(scripts.length, 1)
+    assert.equal(scripts[0].src, 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js')
+    scripts[0].onerror()
+    await assert.rejects(first, /주소 검색/)
+    assert.equal(scripts[0].removed, true)
+    const retry = loadPostcode()
+    assert.equal(scripts.length, 2)
+    global.window.daum = { Postcode: function() {} }
+    scripts[1].onload()
+    assert.equal(await retry, global.window.daum.Postcode)
+    assert.equal(await loadPostcode(), global.window.daum.Postcode)
+    assert.equal(scripts.length, 2)
+  } finally {
+    if (previousWindow === undefined) delete global.window
+    else global.window = previousWindow
+    if (previousDocument === undefined) delete global.document
+    else global.document = previousDocument
+  }
+})
+
+test('관리자 선물함 메뉴 연결 및 중복 방지, 라우트 등록', async () => {
+  for (const items of [[], [{ title: '선물함 관리', items: null }], [{ title: '선물함 관리', items: [{ title: '받을 주소', route: '/gift/mailbox' }] }]]) {
+    Vue.axios = { get: async () => ({ status: 200, ...envelope(items) }) }
+    const vm = new Vue({ ...SideMenu, created: undefined })
+    vm.$store = { state: { accountStore: { role: 'ADMIN' } } }
+    await vm.getMenus()
+    const children = vm.items.find(item => item.title === '선물함 관리').items
+    assert.equal(children.filter(item => item.route === '/gift/mailbox').length, 1)
+    assert.equal(children.find(item => item.route === '/gift/mailbox').title, '받을 주소')
+  }
+  const router = fs.readFileSync(path.join(root, 'src/router/index.js'), 'utf8')
+  assert.match(router, /path: '\/gift\/mailbox',\s*name: 'GiftMailbox',\s*component: \(\) => import\([^\n]*'\.\.\/views\/Gift\/GiftMailbox.vue'\)/)
+})
+
+;(async () => {
+  for (const { name, run } of tests) {
+    try {
+      await run()
+      console.log(`PASS ${name}`)
+    } catch (error) {
+      process.exitCode = 1
+      console.error(`FAIL ${name}`, error)
+    }
+  }
+})()