feat(owner-vue): 매장 생성 로직 추가

- 다음 주소 API 추가
- 카카오 맵 위도 경도 Service 추가

owner-vue/package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "moment": "^2.29.1",
     "vue": "^2.6.11",
+    "vue-daum-postcode": "^0.10.0",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
     "vuetify": "^2.4.0"

owner-vue/src/api/user.js

@@ -1,8 +1,23 @@
 import jwt from '../common/jwt.js';
 
 export default {
-  requestRegisterUser(user) {
-    return axios.post(process.env.VUE_APP_USER_URL + "/store-owner", user);
+  requestRegisterUser(user, store) {
+    const param = {
+      email: user.email,
+      password: user.password,
+      name: user.name,
+      phoneNumber: user.phoneNumber,
+      businessNumber: user.businessNumber,
+
+      storeName: store.storeName,
+      storePhoneNumber: store.storePhoneNumber,
+      address: store.storeAddress,
+      zipcode: store.zipcode,
+      latitude: store.latitude,
+      longitude: store.longitude,
+    }
+
+    return axios.post(process.env.VUE_APP_USER_URL + "/api/owner/store-owner", param);
   },
 
   async requestLoginUser(email, password) {

owner-vue/src/main.js

@@ -57,6 +57,8 @@ axios.interceptors.response.use(
        }
       window.location.href = "/";
       alert("권한이 없습니다. 다시 로그인해주세요.");
+    } else {
+      if (error.response.data.message) alert(error.response.data.message);
     }
     return Promise.reject(error);
   }

owner-vue/src/views/RegisterUser.vue

@@ -1,67 +1,145 @@
 <template>
-  <v-card width="800" class="mx-auto mt-5">
-    <v-card-title>
-      <h1>Register</h1>
-    </v-card-title>
-    <v-card-text>
-      <v-form
-          ref="form"
-          lazy-validation
-      >
-        <v-text-field
-            v-model="email"
-            :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
-            label="이메일"
-        ></v-text-field>
-        <v-text-field
-            v-model="password"
-            :rules="[v => !!v || '비밀번호는 필수 값입니다']"
-            label="비밀번호"
-            type="Password"
-            append-icon="mdi-eye-off"
-        ></v-text-field>
-        <v-text-field
-            v-model="name"
-            :rules="[v => !!v || '이름은 필수 값입니다']"
-            label="이름"
-        ></v-text-field>
-        <v-text-field
-            v-model="phoneNumber"
-            :rules="[v => !!v || '전화번호는 필수 값입니다']"
-            label="전화번호"
-        ></v-text-field>
-        <v-text-field
-            v-model="businessNumber"
-            :rules="[v => !!v || '사업자번호는 필수 값입니다']"
-            label="사업자번호"
-        ></v-text-field>
-      </v-form>
-    </v-card-text>
-    <v-divider></v-divider>
-    <v-card-actions>
-      <v-spacer></v-spacer>
-      <v-btn color="info" v-on:click="register">Register</v-btn>
-    </v-card-actions>
-  </v-card>
+  <div>
+    <v-card width="800" class="mx-auto mt-5">
+      <v-card-title>
+        <h1>Register</h1>
+      </v-card-title>
+      <v-card-text>
+        <h3>회원 정보</h3>
+        <v-form
+            ref="form"
+            lazy-validation
+        >
+          <v-text-field
+              v-model="email"
+              :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
+              label="이메일"
+          ></v-text-field>
+          <v-text-field
+              v-model="password"
+              :rules="[v => !!v || '비밀번호는 필수 값입니다']"
+              label="비밀번호"
+              type="Password"
+              append-icon="mdi-eye-off"
+          ></v-text-field>
+          <v-text-field
+              v-model="name"
+              :rules="[v => !!v || '이름은 필수 값입니다']"
+              label="이름"
+          ></v-text-field>
+          <v-text-field
+              v-model="phoneNumber"
+              :rules="[v => !!v || '전화번호는 필수 값입니다']"
+              label="전화번호"
+          ></v-text-field>
+          <v-text-field
+              v-model="businessNumber"
+              :rules="[v => !!v || '사업자번호는 필수 값입니다']"
+              label="사업자번호"
+          ></v-text-field>
+
+          <br>
+          <h3>매장 정보</h3>
+          <v-text-field
+              v-model="storeName"
+              :rules="[v => !!v || '매장정보는 필수 값입니다']"
+              label="매장 이름"
+          ></v-text-field>
+          <v-text-field
+              v-model="storePhoneNumber"
+              :rules="[v => !!v || '매장전화번호는 필수 값입니다']"
+              label="매장 전화번호"
+          ></v-text-field>
+          <v-text-field
+              v-model="storeAddress"
+              :rules="[v => !!v || '매장 주소는 필수 값입니다']"
+              label="매장 주소"
+              readonly
+          >
+            <template v-slot:append-outer>
+              <v-btn
+                  @click="dialog = true"
+                  small
+              >우편번호 검색</v-btn>
+            </template>
+          </v-text-field>
+          <v-row>
+            <v-col sm="6">
+              <v-text-field
+                  v-model="latitude"
+                  :rules="[v => !!v || '매장 위도는 필수 값입니다']"
+                  label="위도"
+                  readonly
+              ></v-text-field>
+            </v-col>
+            <v-col sm="6">
+              <v-text-field
+                  v-model="longitude"
+                  :rules="[v => !!v || '매장 경도는 필수 값입니다']"
+                  label="경도"
+                  readonly
+              ></v-text-field>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="info" v-on:click="register">Register</v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-dialog
+        v-model="dialog"
+        width="500"
+    >
+      <VueDaumPostcode
+          @complete="complete"
+      ></VueDaumPostcode>
+    </v-dialog>
+    <div id="map"></div>
+  </div>
 </template>
 
 <script>
-
 import userApi from '../api/user.js'
+import { VueDaumPostcode } from 'vue-daum-postcode'
 
 export default {
   name: "RegisterUser",
+  components: {
+    VueDaumPostcode
+  },
+  mounted() {
+    const script = document.createElement("script");
+    // eslint-disable-next-line no-undef
+    script.onload = () => kakao.maps.load(this.initMap);
+    script.src =
+        "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&libraries=services&appkey=013b300ace1c317f0f39ce53201f831b";
+    document.head.appendChild(script);
+  },
   data: function() {
     return {
-      email: '',
-      password: '',
-      name: '',
-      phoneNumber: '',
-      businessNumber: ''
+      email: 'test@gmail.com',
+      password: '1234',
+      name: '테스트 계정',
+      phoneNumber: '010-1111-2222',
+      businessNumber: '03912',
+
+      storeName: '테스트 매장',
+      storePhoneNumber: '010-1111-2222',
+      storeAddress: '',
+      zipcode: '',
+      latitude: '',
+      longitude: '',
+
+      dialog: false,
+
+      map: '',
     }
   },
   methods: {
-    register: function() {
+    register: async function() {
       if (!this.$refs.form.validate()) return;
 
       const user = {
@@ -72,21 +150,63 @@ export default {
         businessNumber: this.businessNumber
       }
 
-      userApi.requestRegisterUser(user)
-        .then( (response) => {
-          if (response.status == '201') {
-            alert("사용자 등록이 성공되었습니다.");
-            this.$router.push('/login');
-          } else {
-            alert("사용자 등록에 실패하였습니다. 다시 시도해주세요.");
-          }
-        })
-        .catch( (error) => {
-          console.log(error);
-          let message = error.response.data.message;
-          if (message) alert(message);
+      const store = {
+        storeName: this.storeName,
+        storePhoneNumber: this.storePhoneNumber,
+        storeAddress: this.storeAddress,
+        zipcode: this.zipcode,
+        latitude: this.latitude,
+        longitude: this.longitude,
+      }
+
+      try {
+        await userApi.requestRegisterUser(user, store);
+        alert("회원 가입에 성공하였습니다. \n로그인 페이지로 이동합니다.");
+        await this.$router.push('/login');
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    initMap() {
+      const container = document.getElementById("map");
+      const options = {
+        // eslint-disable-next-line no-undef
+        center: new kakao.maps.LatLng(33.450701, 126.570667),
+        level: 5,
+      };
+
+      // eslint-disable-next-line no-undef
+      this.map = new kakao.maps.Map(container, options);
+    },
+    complete: function(addressResult) {
+      this.storeAddress = addressResult.address;
+      this.zipcode = addressResult.zonecode;
+      this.dialog = false;
+
+      Promise.resolve(this.storeAddress).then(value => {
+        return new Promise((resolve, reject) => {
+          // eslint-disable-next-line no-undef
+          const geocoder = new daum.maps.services.Geocoder();
+
+          geocoder.addressSearch(value, (result, status) => {
+            // eslint-disable-next-line no-undef
+            if (status === daum.maps.services.Status.OK) {
+              const {x, y} = result[0];
+
+              resolve({lat: y, long: x})
+            } else {
+              reject();
+            }
+          })
+        }).then(result => {
+          this.latitude = result.lat;
+          this.longitude = result.long;
+        }).catch(error => {
+          console.log("[RegisterUser]", error);
+          alert("해당 주소의 위도, 경도를 가져오는 도중 오류가 발생하였습니다. \n다시 시도해주세요.");
         });
-    }
+      })
+    },
   }
 }
 </script>