Merge branch 'main' into board-notice-select

2025-01-23 11:14:06 +09:00 · 2025-01-23 11:14:06 +09:00 · 3699b8386f
commit 3699b8386f
parent e4700b0ff8 5095f68d6b
8 changed files with 283 additions and 117 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -2,9 +2,9 @@
    <component :is="layout">
        <template #content>
            <router-view></router-view>
-            <ToastModal /> 
        </template>
    </component>
+    <ToastModal />
 </template>
 <script setup>
 import { computed } from 'vue';
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@ -2,7 +2,7 @@
    <div class="mb-2 row">
        <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
            {{ title }}
-            <span class="text-danger">*</span>
+            <span :class="isEssential ? 'text-red' : 'none'">*</span>
        </label>
        <div class="col-md-10">
            <input
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@ -1,12 +1,14 @@
 <template>
-    <div class="mb-2" :class="isRow ?'row' : ''">
+    <div class="mb-2" :class="isRow ? 'row' : ''">
        <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
            {{ title }}
            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
        </label>
-        <div :class="isRow ?'col-md-10' : 'col-md-12'">
+        <div :class="isRow ? 'col-md-10' : 'col-md-12'">
            <select class="form-select" :id="name" v-model="selectData">
-                <option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option>
+                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
+                    {{ isCommon ? item.label : item }}
+                </option>
            </select>
        </div>
        <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
@ -56,13 +58,24 @@ const props = defineProps({
        type: Boolean,
        default: true,
        required: false,
+    },
+    isCommon : {
+        type: Boolean,
+        default: false,
+        required: false,
    }
 });

 const emit = defineEmits(['update:data']);
 const selectData = ref(props.value);

+
 watchEffect(() => {
+    if (props.isCommon && props.data.length > 0) {
+        selectData.value = props.data[0].value; // 첫 번째 옵션의 값으로 설정
+    } else {
+        selectData.value = props.value; // 기본값으로 설정
+    }
    emit('update:data', selectData.value);
 })
 </script>
--- a/src/components/input/UserFormInput.vue
+++ b/src/components/input/UserFormInput.vue
@ -11,9 +11,10 @@
                    class="form-control"
                    :type="type"
                    @input="updateInput"
-                    :value="value"
+                    :value="computedValue"
                    :maxLength="maxlength"
                    :placeholder="title"
+                    @blur="$emit('blur')"
                />
                <span class="input-group-text">@ localhost.co.kr</span>
            </div>
@ -23,78 +24,90 @@
                    class="form-control"
                    :type="type"
                    @input="updateInput"
-                    :value="value"
+                    :value="computedValue"
                    :maxLength="maxlength"
                    :placeholder="title"
+                    @blur="$emit('blur')"
                />
            </div>
-
            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
        </div>
    </div>
 </template>

 <script setup>
-import { ref } from 'vue';
+    import { inject, computed } from 'vue';

-const prop = defineProps({
-    title: {
-        type: String,
-        default: '라벨',
-        required: true,
-    },
-    name: {
-        type: String,
-        default: 'nameplz',
-        required: true,
-    },
-    isEssential: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    type: {
-        type: String,
-        default: 'text',
-        required: false,
-    },
-    value: {
-        type: String,
-        default: '',
-        require: false,
-    },
-    maxlength: {
-        type: Number,
-        default: 30,
-        required: false,
-    },
-    isAlert : {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    useInputGroup: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-});
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+        name: {
+            type: String,
+            default: 'nameplz',
+            required: true,
+        },
+        isEssential: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'text',
+            required: false,
+        },
+        value: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        maxlength: {
+            type: Number,
+            default: 30,
+            required: false,
+        },
+        isAlert: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+        useInputGroup: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+    });

-const emits = defineEmits(['update:data', 'update:alert'])
+    const emits = defineEmits(['update:data', 'update:alert', 'blur']);

-const updateInput = function (event) {
-    //Type Number 일때 maxlength 적용 안됨 방지
-    if (event.target.value.length > prop.maxlength) {
-        event.target.value = event.target.value.slice(0, prop.maxlength);
-    }
-    emits('update:data', event.target.value);
+    // dayjs 인스턴스 가져오기
+    const dayjs = inject('dayjs');

-    // 값이 입력될 때 isAlert를 false로 설정
-    if (event.target.value.trim() !== '') { emits('update:alert', false); }
+    // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
+    const today = dayjs().format('YYYY-MM-DD');

-};
+    // date인 경우 기본값 -> 오늘 날짜
+    const computedValue = computed(() => {
+        return props.type === 'date' ? props.value || today : props.value;
+    });
+
+    // 입력값 업데이트
+    const updateInput = event => {
+        const newValue = event.target.value.slice(0, props.maxlength);
+
+        // date인 경우 날짜 형식 유지
+        if (props.type === 'date') {
+            emits('update:data', newValue.replace(/[^0-9-]/g, ''));
+        } else {
+            emits('update:data', newValue);
+        }
+
+        // 값이 입력될 때 isAlert를 false로 설정
+        if (newValue.trim() !== '') {
+            emits('update:alert', false);
+        }
+    };
 </script>
-
-<style>
-
-</style>
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@ -12,7 +12,7 @@

            <UserFormInput
                title="비밀번호"
-                name="pw"
+                name="password"
                type="password"
                :is-alert="passwordAlert"
                @update:data="handlePasswordChange"
@ -36,6 +36,8 @@
 </template>

 <script setup>
+    import $api from '@api';
+    import router from '@/router';
    import { ref } from 'vue';
    import UserFormInput from '@c/input/UserFormInput.vue';

@ -44,8 +46,6 @@
    const idAlert = ref(false);
    const passwordAlert = ref(false);

-    const emit = defineEmits(['submit']);
-
    const handleIdChange = value => {
        id.value = value;
        idAlert.value = false;
@ -56,12 +56,23 @@
        passwordAlert.value = false;
    };

-    const handleSubmit = () => {
-        idAlert.value = id.value.trim() === '';
-        passwordAlert.value = password.value.trim() === '';
+    const handleSubmit = async () => {

-        if (!idAlert.value && !passwordAlert.value) {
-            emit('submit', { id: id.value, password: password.value });
+        try {
+            const response = await $api.post('user/login', {
+                loginId: id.value,
+                password: password.value,
+                remember: false,
+            });
+
+            if (response.status === 200) {
+                console.log('로그인 성공', response.data);
+                router.push('/');
+            }
+        } catch (error) {
+            console.error('로그인 실패', error);
        }
    };
+
+
 </script>
--- 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(`/user/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('/user/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('/user/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('/user/join', formData, { isFormData : true });
+
+            if (response.status === 200) {
+                toastStore.onToast('등록신청이 완료되었습니다. 관리자 승인 후 이용가능합니다.', 's');
+                router.push('/login');
+            }
+    };
 </script>

 <style></style>
--- a/src/views/user/TheLogin.vue
+++ b/src/views/user/TheLogin.vue
@ -2,7 +2,7 @@
    <div class="d-flex justify-content-center align-items-center vh-100">
        <div class="container container-p-y rounded bg-white" style="max-width: 500px">
            <LogoHeader title="LOCALNET" />
-            <LoginForm @submit="handleSubmit" />
+            <LoginForm />
        </div>
    </div>
 </template>
@ -11,9 +11,6 @@
 import LoginForm from '@c/user/LoginForm.vue';
 import LogoHeader from '@c/user/LogoHeader.vue';

-    const handleSubmit = async ({ id, password }) => {
-        console.log('Login');
-    };
 </script>

 <style></style>
--- 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>