등록신청 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