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

---
 src/components/user/RegisterForm.vue | 216 +++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 src/components/user/RegisterForm.vue

diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
new file mode 100644
index 0000000..52ebca7
--- /dev/null
+++ b/src/components/user/RegisterForm.vue
@@ -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>