등록신청 form
This commit is contained in:
yoon
parent
a9a454db01
commit
5315989232
216
src/components/user/RegisterForm.vue
Normal file
216
src/components/user/RegisterForm.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="text-center">
|
||||
<label
|
||||
for="profilePic"
|
||||
class="rounded-circle m-auto border-label-secondary ui-bg-cover position-relative cursor-pointer"
|
||||
id="profileLabel"
|
||||
style="width: 100px; height: 100px; background-image: url(public/img/avatars/default-Profile.jpg)"
|
||||
>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-12">
|
||||
<UserFormInput
|
||||
title="아이디"
|
||||
name="id"
|
||||
:isEssential="true"
|
||||
:is-alert="idAlert"
|
||||
:useInputGroup="true"
|
||||
@update:data="id = $event"
|
||||
@update:alert="idAlert = $event"
|
||||
:value="id"
|
||||
/>
|
||||
|
||||
<UserFormInput
|
||||
title="비밀번호"
|
||||
name="pw"
|
||||
type="password"
|
||||
:isEssential="true"
|
||||
:is-alert="passwordAlert"
|
||||
@update:data="password = $event"
|
||||
@update:alert="passwordAlert = $event"
|
||||
:value="password"
|
||||
/>
|
||||
|
||||
<UserFormInput
|
||||
title="비밀번호 확인"
|
||||
name="pwch"
|
||||
type="password"
|
||||
:isEssential="true"
|
||||
:is-alert="passwordcheckAlert"
|
||||
@update:data="passwordcheck = $event"
|
||||
@update:alert="passwordcheckAlert = $event"
|
||||
:value="passwordcheck"
|
||||
/>
|
||||
|
||||
<UserFormInput
|
||||
title="비밀번호 힌트"
|
||||
name="pwhint"
|
||||
:is-alert="passwordhintAlert"
|
||||
@update:data="passwordhint = $event"
|
||||
@update:alert="passwordhintAlert = $event"
|
||||
:value="passwordhint"
|
||||
/>
|
||||
|
||||
<div class="d-flex">
|
||||
<UserFormInput
|
||||
title="이름"
|
||||
name="name"
|
||||
:is-essential="true"
|
||||
:is-alert="nameAlert"
|
||||
@update:data="name = $event"
|
||||
@update:alert="nameAlert = $event"
|
||||
:value="name"
|
||||
class="me-2 w-50"
|
||||
/>
|
||||
|
||||
<FormSelect
|
||||
title="컬러"
|
||||
name="color"
|
||||
:is-essential="true"
|
||||
:is-row="false"
|
||||
:is-label="true"
|
||||
:data="colorList"
|
||||
@update:data="color = $event"
|
||||
class="w-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<UserFormInput
|
||||
title="생년월일"
|
||||
name="birth"
|
||||
:is-essential="true"
|
||||
:is-alert="birthAlert"
|
||||
@update:data="birth = $event"
|
||||
@update:alert="birthAlert = $event"
|
||||
:value="birth"
|
||||
class="me-2 w-50"
|
||||
/>
|
||||
|
||||
<FormSelect
|
||||
title="MBTI"
|
||||
name="mbti"
|
||||
:is-essential="true"
|
||||
:is-row="false"
|
||||
:is-label="true"
|
||||
:data="mbtiList"
|
||||
@update:data="mbti = $event"
|
||||
class="w-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ArrInput
|
||||
title="주소"
|
||||
name="arr"
|
||||
:isEssential="true"
|
||||
:is-alert="arrAlert"
|
||||
@update:data="arr = $event"
|
||||
@update:alert="arrAlert = $event"
|
||||
:value="arr"
|
||||
/>
|
||||
|
||||
<UserFormInput
|
||||
title="휴대전화"
|
||||
name="phone"
|
||||
:isEssential="true"
|
||||
:is-alert="phoneAlert"
|
||||
@update:data="phone = $event"
|
||||
@update:alert="phoneAlert = $event"
|
||||
:maxlength="11"
|
||||
:value="phone"
|
||||
/>
|
||||
|
||||
<div class="d-flex mt-5">
|
||||
<RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
|
||||
<button type="submit" class="btn btn-primary w-50">등록신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import UserFormInput from '@c/input/UserFormInput.vue';
|
||||
import FormSelect from '@/components/input/FormSelect.vue';
|
||||
import ArrInput from '@/components/input/ArrInput.vue';
|
||||
|
||||
const profile = ref(null);
|
||||
const profilerr = ref('');
|
||||
|
||||
const id = ref('');
|
||||
const password = ref('');
|
||||
const passwordcheck = ref('');
|
||||
const passwordhint = ref('');
|
||||
const name = ref('');
|
||||
const birth = ref('');
|
||||
const arr = ref('');
|
||||
const phone = ref('');
|
||||
const color = ref('');
|
||||
const mbti = ref('');
|
||||
|
||||
const idAlert = ref(false);
|
||||
const passwordAlert = ref(false);
|
||||
const passwordcheckAlert = ref(false);
|
||||
const passwordhintAlert = 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() === '';
|
||||
|
||||
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 미만의 파일만 업로드할 수 있습니다.';
|
||||
return false;
|
||||
}
|
||||
if (!validTypes.includes(type)) {
|
||||
profilerr.value = '지원되지 않는 파일 형식입니다. JPEG 또는 PNG만 가능합니다.';
|
||||
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")';
|
||||
return false;
|
||||
}
|
||||
|
||||
const profilePic = e.target;
|
||||
const url = URL.createObjectURL(profilePic.files[0]);
|
||||
profileLabel.style.backgroundImage = `url(${url})`;
|
||||
profile.value = file;
|
||||
};
|
||||
|
||||
const colorList = ['blue', 'red', 'pink'];
|
||||
const mbtiList = ['ISTP', 'ENFP', 'INTJ'];
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Reference in New Issue
Block a user