From e7c3833640574f923a9ae3199bb83422b04f9588 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 21 Jan 2025 14:54:11 +0900
Subject: [PATCH] =?UTF-8?q?=EB=93=B1=EB=A1=9D=EC=8B=A0=EC=B2=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/RegisterForm.vue | 205 ++++++++++++++++++++++-----
 src/views/user/TheRegister.vue       |   5 +-
 2 files changed, 171 insertions(+), 39 deletions(-)

diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
index 52ebca7..7b6dd93 100644
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@@ -3,11 +3,12 @@
         <div class="text-center">
             <label
                 for="profilePic"
-                class="rounded-circle m-auto border-label-secondary ui-bg-cover position-relative cursor-pointer"
+                class="rounded-circle m-auto ui-bg-cover position-relative cursor-pointer"
                 id="profileLabel"
-                style="width: 100px; height: 100px; background-image: url(public/img/avatars/default-Profile.jpg)"
+                style="width: 100px; height: 100px; background-image: url(public/img/avatars/default-Profile.jpg); background-repeat: no-repeat;"
             >
             </label>
+
             <span class="link-danger position-absolute">*</span>
             <input type="file" id="profilePic" class="d-none" @change="profileUpload" />
             <span v-if="profilerr" class="invalid-feedback d-block">{{ profilerr }}</span>
@@ -22,8 +23,10 @@
                 :useInputGroup="true"
                 @update:data="id = $event"
                 @update:alert="idAlert = $event"
+                @blur="checkIdDuplicate"
                 :value="id"
             />
+            <span v-if="idError" class="invalid-feedback d-block">{{ idError }}</span>
 
             <UserFormInput
                 title="비밀번호"
@@ -44,16 +47,28 @@
                 :is-alert="passwordcheckAlert"
                 @update:data="passwordcheck = $event"
                 @update:alert="passwordcheckAlert = $event"
+                @blur="checkPw"
                 :value="passwordcheck"
             />
+            <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
 
+            <FormSelect
+                    title="비밀번호 힌트"
+                    name="pwhint"
+                    :is-essential="true"
+                    :is-row="false"
+                    :is-label="true"
+                    :data="pwhintList"
+                    @update:data="pwhint = $event"
+            />
             <UserFormInput
-                title="비밀번호 힌트"
-                name="pwhint"
-                :is-alert="passwordhintAlert"
-                @update:data="passwordhint = $event"
-                @update:alert="passwordhintAlert = $event"
-                :value="passwordhint"
+                title="답변"
+                name="pwhintRes"
+                :is-essential="true"
+                :is-alert="pwhintResAlert"
+                @update:data="pwhintRes = $event"
+                @update:alert="pwhintResAlert = $event"
+                :value="pwhintRes"
             />
 
             <div class="d-flex">
@@ -74,6 +89,7 @@
                     :is-essential="true"
                     :is-row="false"
                     :is-label="true"
+                    :is-common="true"
                     :data="colorList"
                     @update:data="color = $event"
                     class="w-50"
@@ -84,6 +100,7 @@
                 <UserFormInput
                     title="생년월일"
                     name="birth"
+                    :type="'date'"
                     :is-essential="true"
                     :is-alert="birthAlert"
                     @update:data="birth = $event"
@@ -98,6 +115,7 @@
                     :is-essential="true"
                     :is-row="false"
                     :is-label="true"
+                    :is-common="true"
                     :data="mbtiList"
                     @update:data="mbti = $event"
                     class="w-50"
@@ -109,7 +127,7 @@
                 name="arr"
                 :isEssential="true"
                 :is-alert="arrAlert"
-                @update:data="arr = $event"
+                @update:data="handleAddressUpdate"
                 @update:alert="arrAlert = $event"
                 :value="arr"
             />
@@ -134,69 +152,80 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ref, onMounted } from 'vue';
+    import $api from '@api';
     import UserFormInput from '@c/input/UserFormInput.vue';
-    import FormSelect from '@/components/input/FormSelect.vue';
-    import ArrInput from '@/components/input/ArrInput.vue';
+    import FormSelect from '@c/input/FormSelect.vue';
+    import ArrInput from '@c/input/ArrInput.vue';
+    import { fileMsg } from '@/common/msgEnum';
+    import { useRouter } from 'vue-router';
+    import { useToastStore } from '@s/toastStore';
+
+    const pwhintList = ['현재 살고 있는 동네', '가장 기억에 남는 책', '좋아하는 음식'];
+
+    const router = useRouter();
 
     const profile = ref(null);
     const profilerr = ref('');
 
     const id = ref('');
+    const idError = ref('');
     const password = ref('');
     const passwordcheck = ref('');
-    const passwordhint = ref('');
+    const passwordcheckError = ref('');
+    const pwhint = ref(0);
+    const pwhintRes = ref('');
     const name = ref('');
     const birth = ref('');
-    const arr = ref('');
+    const arr = ref('');        // 전체 주소
+    const postcode = ref('');   // 우편번호
     const phone = ref('');
-    const color = ref('');
-    const mbti = ref('');
+    const colorList = ref([]);
+    const mbtiList = ref([]);
+    const color = ref(''); // 선택된 color
+    const mbti = ref('');  // 선택된 MBTI
 
+    const profilAlert = ref(false);
     const idAlert = ref(false);
+    const idErrorAlert = ref(false);
     const passwordAlert = ref(false);
     const passwordcheckAlert = ref(false);
-    const passwordhintAlert = ref(false);
+    const passwordcheckErrorAlert = ref(false); // 비밀번호 확인 오류 메시지
+    const pwhintResAlert = ref(false);
     const nameAlert = ref(false);
     const birthAlert = ref(false);
     const arrAlert = ref(false);
     const phoneAlert = ref(false);
 
-    const handleSubmit = async () => {
-        idAlert.value = id.value.trim() === '';
-        passwordAlert.value = password.value.trim() === '';
-        passwordcheckAlert.value = passwordcheck.value.trim() === '';
-        passwordhintAlert.value = passwordhint.value.trim() === '';
-        nameAlert.value = name.value.trim() === '';
-        birthAlert.value = birth.value.trim() === '';
-        arrAlert.value = arr.value.trim() === '';
-        phoneAlert.value = phone.value.trim() === '';
+    const toastStore = useToastStore();
 
-        if (!profile.value) {
-            profilerr.value = '프로필 이미지를 선택해주세요.';
-            return;
-        }
-    };
 
+    // 프로필 체크
     const profileValid = (size, type) => {
         const maxSize = 5 * 1024 * 1024;
         const validTypes = ['image/jpeg', 'image/png'];
+
+        // 용량
         if (size > maxSize) {
-            profilerr.value = '5MB 미만의 파일만 업로드할 수 있습니다.';
+            profilerr.value = fileMsg.FileMaxSizeMsg;
             return false;
         }
+
+        // 파일 타입
         if (!validTypes.includes(type)) {
-            profilerr.value = '지원되지 않는 파일 형식입니다. JPEG 또는 PNG만 가능합니다.';
+            profilerr.value = fileMsg.FileNotTypeMsg;
             return false;
         }
         profilerr.value = '';
         return true;
     };
 
+    // 파일 업로드 시 미리보기
     const profileUpload = e => {
         const file = e.target.files[0];
         const profileLabel = document.getElementById('profileLabel');
 
+        // 사이즈, 파일 타입 안 맞으면 기본 이미지
         if (!profileValid(file.size, file.type)) {
             e.target.value = '';
             profileLabel.style.backgroundImage = 'url("public/img/avatars/default-Profile.jpg")';
@@ -209,8 +238,114 @@
         profile.value = file;
     };
 
-    const colorList = ['blue', 'red', 'pink'];
-    const mbtiList = ['ISTP', 'ENFP', 'INTJ'];
+    // 아이디 중복체크
+    const checkIdDuplicate = async () => {
+        const response = await $api.get(`/register/checkId?memberIds=${id.value}`);
+
+        if (!response.data.data) {
+            idErrorAlert.value = true;
+            idError.value = '이미 사용 중인 아이디입니다.';
+        } else {
+            idErrorAlert.value = false;
+            idError.value = '';
+        }
+    };
+
+    const Colors = async () => {
+        try {
+            const response = await $api.get('/register/color');
+            colorList.value = response.data.data.map(item => ({
+                label: item.CMNCODNAM,
+                value: item.CMNCODVAL
+            }));
+        } catch (error) {
+            console.error('Error colors:', error);
+        }
+    };
+
+    const Mbtis = async () => {
+        try {
+            const response = await $api.get('/register/mbti');
+            mbtiList.value = response.data.data.map(item => ({
+                label: item.CMNCODNAM,
+                value: item.CMNCODVAL
+            }));
+        } catch (error) {
+            console.error('Error MBTIs:', error);
+        }
+    };
+
+    onMounted(() => {
+        Colors();
+        Mbtis();
+    });
+
+    // 주소 업데이트 핸들러
+    const handleAddressUpdate = (addressData) => {
+        arr.value = addressData.fullAddress;    // 전체 주소
+        postcode.value = addressData.postcode;  // 우편번호
+    };
+
+    // 비밀번호 확인 체크
+    const checkPw = async () => {
+        if (password.value !== passwordcheck.value) {
+            passwordcheckError.value = '비밀번호가 일치하지 않습니다.';
+            passwordcheckErrorAlert.value = true;
+        } else {
+            passwordcheckError.value = '';
+            passwordcheckErrorAlert.value = false;
+        }
+    };
+
+    // 회원가입
+    const handleSubmit = async () => {
+
+            idAlert.value = id.value.trim() === '';
+            passwordAlert.value = password.value.trim() === '';
+            passwordcheckAlert.value = passwordcheck.value.trim() === '';
+            pwhintResAlert.value = pwhintRes.value.trim() === '';
+            nameAlert.value = name.value.trim() === '';
+            birthAlert.value = birth.value.trim() === '';
+            arrAlert.value = arr.value.trim() === '';
+            phoneAlert.value = phone.value.trim() === '';
+
+            // 프로필 이미지 체크
+            if (!profile.value) {
+                profilerr.value = '프로필 이미지를 선택해주세요.';
+                profilAlert.value = true;
+            } else {
+                profilerr.value = '';
+                profilAlert.value = false;
+            }
+
+            if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
+                passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || arrAlert.value || phoneAlert.value) {
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('memberIds', id.value);
+            formData.append('memberPwd', password.value);
+            formData.append('memberPwh', pwhintList[pwhint.value]);
+            formData.append('memberPwr', pwhintRes.value);
+            formData.append('memberNam', name.value);
+            formData.append('memberArr', arr.value); // 전체 주소
+            formData.append('memberZip', postcode.value); // 우편번호
+            formData.append('memberTel', phone.value);
+            formData.append('memberCol', color.value);
+            formData.append('memberMbt', mbti.value);
+
+            if (profile.value) {
+                formData.append('profile', profile.value);
+            }
+
+            const response = await $api.post('/register/join', formData, { isFormData : true });
+
+            if (response.status === 200) {
+                toastStore.onToast('등록신청이 완료되었습니다. 관리자 승인 후 이용가능합니다.', 's');
+                //router.push('/login');
+            }
+    };
 </script>
 
 <style></style>
diff --git a/src/views/user/TheRegister.vue b/src/views/user/TheRegister.vue
index 7c7ec8e..4296715 100644
--- a/src/views/user/TheRegister.vue
+++ b/src/views/user/TheRegister.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex justify-content-center align-items-center">
         <div class="container rounded bg-white my-10 py-10" style="max-width: 500px">
-            <RegisterForm @submit="handleSubmit" />
+            <RegisterForm/>
         </div>
     </div>
 </template>
@@ -9,9 +9,6 @@
 <script setup>
 import RegisterForm from '@c/user/RegisterForm.vue';
 
-const handleSubmit = async (formData) => {
-    console.log('Register');
-};
 </script>
 
 <style></style>