localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

등록신청

Browse Source
This commit is contained in:
yoon 2025-01-21 14:54:11 +09:00
parent e66dcad931
commit e7c3833640
2 changed files with 171 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/user/RegisterForm.vue
View File

@ -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>

5
src/views/user/TheRegister.vue
View File

@ -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>