마이페이지

src/views/mypage/MyPage.vue

@@ -16,67 +16,26 @@
 
         <div class="col-xl-12">
         <div class="d-flex">
-            <UserFormInput
+            <UserFormInput title="입사일" name="entryDate" type="date"
-            title="입사일"
+            :value="form.entryDate" @update:data="form.entryDate = $event" class="me-2 w-50" />
-            name="entryDate"
+            <FormSelect title="컬러" name="color" :is-row="false" :is-label="true"
-            type="date"
+            :is-common="true" :is-color="true" :data="colorList"
-            :value="form.entryDate"
+            :value="form.color" @update:data="handleColorUpdate" class="w-50" />
-            @update:data="form.entryDate = $event"
-            class="me-2 w-50"
-            />
-            <FormSelect
-            title="컬러"
-            name="color"
-            :is-row="false"
-            :is-label="true"
-            :is-common="true"
-            :is-color="true"
-            :data="colorList"
-            :value="form.color"
-            @update:data="handleColorUpdate"
-            class="w-50"
-            />
         </div>
 
         <div class="d-flex">
-            <UserFormInput
+            <UserFormInput title="생년월일" name="birth" type="date"
-            title="생년월일"
+            :value="form.birth" @update:data="form.birth = $event" class="me-2 w-50" />
-            name="birth"
+            <FormSelect title="MBTI" name="mbti" :is-row="false" :is-label="true"
-            type="date"
+            :is-common="true" :is-mbti="true" :data="mbtiList"
-            :value="form.birth"
+            :value="form.mbti" @update:data="form.mbti = $event" class="w-50" />
-            @update:data="form.birth = $event"
-            class="me-2 w-50"
-            />
-            <FormSelect
-            title="MBTI"
-            name="mbti"
-            :is-row="false"
-            :is-label="true"
-            :is-common="true"
-            :is-mbti="true"
-            :data="mbtiList"
-            :value="form.mbti"
-            @update:data="form.mbti = $event"
-            class="w-50"
-            />
         </div>
 
-        <ArrInput
+        <ArrInput title="주소" name="address" v-model="form.address" :disabled="true" />
-            title="주소"
-            name="address"
-            v-model="form.address"
-            :disabled="true"
-        />
 
-        <UserFormInput
+        <UserFormInput title="전화번호" name="phone" :value="form.phone"
-            title="휴대전화"
+            @update:data="form.phone = $event" @blur="checkPhoneDuplicate"
-            name="phone"
+            :maxlength="11" @keypress="onlyNumber" />
-            :value="form.phone"
-            @update:data="form.phone = $event"
-            @blur="checkPhoneDuplicate"
-            :maxlength="11"
-            @keypress="onlyNumber"
-        />
 
         <div class="d-flex mt-5">
             <button type="submit" class="btn btn-primary w-100" :disabled="!isChanged">
@@ -98,26 +57,21 @@ import ArrInput from '@c/input/ArrInput.vue';
 import { useToastStore } from '@s/toastStore';
 
 const toastStore = useToastStore();
-const originalData = ref({});
+
 const form = ref({
     entryDate: '',
     birth: '',
-address: {
+    address: { address: '', detailAddress: '', postcode: '' },
-    address: '',
-    detailAddress: '',
-    postcode: ''
-},
     phone: '',
     color: '',
     mbti: ''
 });
-
+const originalData = ref({});
 const profile = ref('');
 const uploadedFile = ref(null);
 const profileChanged = ref(false);
 const profilerr = ref('');
 const currentBlobUrl = ref('');
-
 const colorDuplicated = ref(false);
 const phoneDuplicated = ref(false);
 const mbtiList = ref([]);
@@ -126,8 +80,7 @@ const colorList = ref([]);
 const isChanged = computed(() => {
     const f = form.value;
     const o = originalData.value;
-
+    return (
-    const baseChanged =
     f.entryDate !== o.entryDate ||
     f.birth !== o.birth ||
     f.phone !== o.phone ||
@@ -135,48 +88,38 @@ const isChanged = computed(() => {
     f.mbti !== o.mbti ||
     f.address.address !== o.address.address ||
     f.address.detailAddress !== o.address.detailAddress ||
-    f.address.postcode !== o.address.postcode;
+    f.address.postcode !== o.address.postcode ||
-
+    profileChanged.value
-    return baseChanged || profileChanged.value;
+    );
 });
 
-
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
 const defaultProfile = "img/avatars/default-Profile.jpg";
 
 const getProfileImageUrl = (fileName) => {
-return fileName && fileName.trim()
+    return fileName?.trim()
     ? `${baseUrl}upload/img/profile/${fileName}?t=${Date.now()}`
     : defaultProfile;
 };
 
-const profilePreviewStyle = computed(() => {
+const profilePreviewStyle = computed(() => ({
-    return {
     width: '100px',
     height: '100px',
     backgroundImage: `url(${profile.value})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
     backgroundPosition: 'center'
-    };
+}));
-});
 
 const profileUpload = (e) => {
     const file = e.target.files[0];
     if (!file) return;
-
     if (file.size > 5 * 1024 * 1024 || !['image/jpeg', 'image/png'].includes(file.type)) {
     profilerr.value = '5MB 이하의 JPG/PNG 파일만 업로드 가능합니다.';
     return;
     }
-
     profilerr.value = '';
-
+    if (currentBlobUrl.value) URL.revokeObjectURL(currentBlobUrl.value);
-// 기존 blob 주소 해제
-if (currentBlobUrl.value) {
-    URL.revokeObjectURL(currentBlobUrl.value);
-}
-
     uploadedFile.value = file;
     const newBlobUrl = URL.createObjectURL(file);
     profile.value = newBlobUrl;
@@ -184,28 +127,44 @@ currentBlobUrl.value = newBlobUrl;
     profileChanged.value = true;
 };
 
+const onlyNumber = (e) => {
+    if (!/[0-9]/.test(e.key)) e.preventDefault();
+};
+
 const checkPhoneDuplicate = async () => {
     const res = await $api.get('/user/checkPhone', { params: { memberTel: form.value.phone } });
     phoneDuplicated.value = !res.data.data;
 };
 
 const handleColorUpdate = async (colorVal) => {
-form.value.color = colorVal;
+    if (colorVal !== originalData.value.color) {
     const res = await $api.get('/user/checkColor', { params: { memberCol: colorVal } });
-colorDuplicated.value = res.data.data;
+    if (res.data.data) {
+        toastStore.onToast('이미 사용 중인 컬러입니다.', 'e');
+        form.value.color = originalData.value.color;
+        return;
+    }
+    }
+    form.value.color = colorVal;
 };
 
-const onlyNumber = (e) => {
+const formatDate = (isoDate) => (isoDate ? isoDate.split('T')[0] : '');
-if (!/[0-9]/.test(e.key)) e.preventDefault();
-};
-
-const formatDate = (isoDate) => {
-return isoDate ? isoDate.split('T')[0] : '';
-};
 
 const loadInitialData = async () => {
     const userRes = await $api.get('/user/userInfo');
     const user = userRes.data.data;
+
+    const colorRes = await $api.get('/user/color', { params: { type: 'YON' } });
+    const serverColors = colorRes.data.data.map(c => ({
+    value: c.CMNCODVAL,
+    label: c.CMNCODNAM
+    }));
+
+    const matchedColor = serverColors.find(c => c.label === user.usercolor);
+    const colorCode = matchedColor ? matchedColor.value : user.color;
+    const exists = serverColors.some(c => c.value === colorCode);
+    colorList.value = exists ? serverColors : [{ value: colorCode, label: user.usercolor }, ...serverColors];
+
     const initData = {
     entryDate: formatDate(user.isCdt),
     birth: formatDate(user.birth),
@@ -215,7 +174,7 @@ const initData = {
         postcode: user.zipcode || ''
     },
     phone: user.phone || '',
-    color: user.color || '',
+    color: colorCode,
     mbti: user.mbit || ''
     };
 
@@ -225,11 +184,11 @@ originalData.value = { ...initData };
     profile.value = getProfileImageUrl(user.profile);
     profileChanged.value = false;
 
-const colorRes = await $api.get('/user/color', { params: { type: 'main' } });
-colorList.value = colorRes.data.data.map(c => ({ value: c.CMNCODVAL, label: c.CMNCODNAM }));
-
     const mbtiRes = await $api.get('/user/mbti');
-mbtiList.value = mbtiRes.data.data.map(m => ({ value: m.CMNCODVAL, label: m.CMNCODNAM }));
+    mbtiList.value = mbtiRes.data.data.map(m => ({
+    value: m.CMNCODVAL,
+    label: m.CMNCODNAM
+    }));
 };
 
 const handleSubmit = async () => {
@@ -242,14 +201,29 @@ formData.append('mbti', form.value.mbti);
     formData.append('address', form.value.address.address);
     formData.append('detailAddress', form.value.address.detailAddress);
     formData.append('postcode', form.value.address.postcode);
-if (uploadedFile.value) {
+    if (uploadedFile.value) formData.append('profileFile', uploadedFile.value);
-    formData.append('profileFile', uploadedFile.value);
+
+    // 컬러 변경 시 업데이트
+    if (form.value.color !== originalData.value.color) {
+    if (form.value.color) {
+        await $api.patch('/user/updateColorYon', {
+        color: form.value.color,
+        type: 'YON'
+        });
+    }
+    if (originalData.value.color) {
+        await $api.patch('/user/updateColorChange', {
+        color: originalData.value.color,
+        type: 'YON'
+        });
+    }
     }
 
     await $api.patch('/user/updateInfo', formData, { isFormData: true });
 
     originalData.value = { ...form.value };
     profileChanged.value = false;
+    location.reload();
     toastStore.onToast('정보가 수정되었습니다.', 's');
 };