마이페이지지

src/layouts/TheTop.vue

@@ -191,8 +191,8 @@
                             <div class="dropdown-divider my-1"></div>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="pages-profile-user.html">
+                            <a class="dropdown-item" href="javascript:void(0)" @click="goToMyPage">
-                                <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
+                                <i class="bx bx-user bx-md me-3"></i><span>My Page</span>
                             </a>
                         </li>
                         <li>
@@ -332,6 +332,10 @@
         router.push('/login');
     };
 
+    const goToMyPage = () => {
+        router.push('/mypage');
+    };
+
 </script>
 <style scoped>
 </style>

src/router/index.js

@@ -36,6 +36,12 @@ const routes = [
             },
         ],
     },
+    {
+        path: '/mypage',
+        name: 'MyPage',
+        component: () => import('@v/mypage/MyPage.vue'),
+        meta: { requiresAuth: true }
+    },
     {
         path: '/wordDict',
         component: () => import('@v/wordDict/wordDict.vue'),

src/views/mypage/MyPage.vue

@@ -0,0 +1,127 @@
+<template>
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card shadow-sm rounded-lg p-6 max-w-2xl mx-auto">
+    <h2 class="text-2xl font-semibold mb-6 text-center">마이페이지</h2>
+
+    <!-- 사용자 정보 표시 -->
+    <div class="mb-6 text-center">
+        <p class="text-gray-700 font-medium">안녕하세요, <span class="font-bold text-blue-600">{{ userInfo?.name }}</span> 님</p>
+        <p class="text-sm text-gray-500">사원번호: {{ userInfo?.employeeNo }}</p>
+    </div>
+
+    <!-- MBTI 선택 -->
+    <label class="block font-medium mb-1">MBTI *</label>
+    <select v-model="form.mbti" class="border border-gray-300 rounded w-full p-2 mb-4">
+        <option disabled value="">선택하세요</option>
+        <option v-for="mbti in mbtiList" :key="mbti.code" :value="mbti.code">{{ mbti.name }}</option>
+    </select>
+
+    <!-- 컬러 선택 -->
+    <label class="block font-medium mb-1">컬러 *</label>
+    <select v-model="form.color" class="border border-gray-300 rounded w-full p-2 mb-1" @change="checkColor">
+        <option disabled value="">선택하세요</option>
+        <option v-for="color in colorList" :key="color.code" :value="color.code">{{ color.name }}</option>
+    </select>
+    <p v-if="colorDuplicated" class="text-red-500 text-sm mb-4">이미 사용 중인 색상입니다.</p>
+
+    <!-- 전화번호 -->
+    <label class="block font-medium mb-1">전화번호 *</label>
+    <input v-model="form.phone" class="border border-gray-300 rounded w-full p-2 mb-1" @blur="checkPhone" />
+    <p v-if="phoneDuplicated" class="text-red-500 text-sm mb-4">이미 등록된 전화번호입니다.</p>
+
+    <!-- 비밀번호 변경 -->
+    <label class="block font-medium mb-1">현재 비밀번호</label>
+    <input type="password" v-model="form.currentPassword" class="border border-gray-300 rounded w-full p-2 mb-4" />
+
+    <label class="block font-medium mb-1">새 비밀번호</label>
+    <input type="password" v-model="form.newPassword" class="border border-gray-300 rounded w-full p-2 mb-1" @input="validatePassword" />
+    <p v-if="passwordWarning" class="text-red-500 text-sm mb-1">비밀번호는 8자 이상, 특수문자/영어/숫자를 포함해야 합니다.</p>
+
+    <label class="block font-medium mb-1">비밀번호 확인</label>
+    <input type="password" v-model="form.newPasswordConfirm" class="border border-gray-300 rounded w-full p-2 mb-1" />
+    <p v-if="form.newPassword !== form.newPasswordConfirm" class="text-red-500 text-sm mb-4">비밀번호가 일치하지 않습니다.</p>
+
+    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded" @click="submit">
+        변경완료
+    </button>
+    </div>
+</div>
+</template>
+
+<script>
+import $api from "@api";
+
+export default {
+  data() {
+    return {
+      userInfo: null, // 사원 정보 저장용
+      form: {
+        mbti: '',
+        color: '',
+        phone: '',
+        currentPassword: '',
+        newPassword: '',
+        newPasswordConfirm: ''
+      },
+      mbtiList: [],
+      colorList: [],
+      colorDuplicated: false,
+      phoneDuplicated: false,
+      passwordWarning: false
+    };
+  },
+  mounted() {
+    this.loadUserInfo();
+    this.loadMBTI();
+    this.loadColor();
+  },
+  methods: {
+    loadUserInfo() {
+      $api.get('/api/user/info').then(res => {
+        this.userInfo = res.data.result;
+
+        // 폼에 사원 데이터 반영 (전화번호, mbti, color 등)
+        this.form.phone = this.userInfo.phone;
+        this.form.mbti = this.userInfo.mbti;
+        this.form.color = this.userInfo.color;
+      });
+    },
+    loadMBTI() {
+      $api.get('/api/user/mbti').then(res => this.mbtiList = res.data.result);
+    },
+    loadColor() {
+      $api.get('/api/user/color', { params: { type: 'main' } }).then(res => this.colorList = res.data.result);
+    },
+    checkColor() {
+      $api.get('/api/user/checkColor', { params: { memberCol: this.form.color } })
+        .then(res => this.colorDuplicated = res.data.result);
+    },
+    checkPhone() {
+      $api.get('/api/user/checkPhone', { params: { memberTel: this.form.phone } })
+        .then(res => this.phoneDuplicated = !res.data.result);
+    },
+    validatePassword() {
+      const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()_+]).{8,}$/;
+      this.passwordWarning = !regex.test(this.form.newPassword);
+    },
+    submit() {
+      if (this.colorDuplicated || this.phoneDuplicated || this.passwordWarning || this.form.newPassword !== this.form.newPasswordConfirm) {
+        alert('입력값을 다시 확인해주세요.');
+        return;
+      }
+
+      $api.post('/api/user/checkPassword', {
+        currentPassword: this.form.currentPassword
+      }).then(res => {
+        if (res.data.result) {
+          $api.patch('/api/user/pwNew', {
+            newPassword: this.form.newPassword
+          }).then(() => alert('비밀번호가 변경되었습니다.'));
+        } else {
+          alert('현재 비밀번호가 일치하지 않습니다.');
+        }
+      });
+    }
+  }
+};
+</script>