작업계획서대로 진행

frontend/mypage/index.vue

@@ -151,7 +151,7 @@
     </div>
     
     <!-- 로그인 이력 -->
-    <div class="card">
+    <div class="card mb-4">
       <div class="card-header">
         <strong>로그인 이력</strong>
         <small class="text-muted ms-2">(최근 50건)</small>
@@ -194,6 +194,149 @@
         </div>
       </div>
     </div>
+    
+    <!-- VCS 계정 설정 -->
+    <div class="card mb-4">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <strong><i class="bi bi-git me-2"></i>VCS 계정 설정</strong>
+        <button class="btn btn-sm btn-outline-primary" @click="openVcsModal()">
+          <i class="bi bi-plus"></i> 계정 추가
+        </button>
+      </div>
+      <div class="card-body p-0">
+        <div v-if="isLoadingVcs" class="text-center py-4">
+          <span class="spinner-border spinner-border-sm me-2"></span>로딩 중...
+        </div>
+        <div v-else-if="vcsAccounts.length === 0" class="text-center py-4 text-muted">
+          <i class="bi bi-git display-6 d-block mb-2"></i>
+          등록된 VCS 계정이 없습니다.
+        </div>
+        <div v-else class="table-responsive">
+          <table class="table table-hover mb-0">
+            <thead class="table-light">
+              <tr>
+                <th>서버</th>
+                <th>사용자명</th>
+                <th>이메일</th>
+                <th style="width: 80px">인증방식</th>
+                <th style="width: 100px" class="text-center">관리</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="a in vcsAccounts" :key="a.accountId">
+                <td>
+                  <span v-if="a.serverType === 'git'" class="badge bg-success me-1">Git</span>
+                  <span v-else class="badge bg-info me-1">SVN</span>
+                  {{ a.serverName }}
+                </td>
+                <td>{{ a.vcsUsername }}</td>
+                <td>{{ a.vcsEmail || '-' }}</td>
+                <td>
+                  <span v-if="a.authType === 'token'" class="badge bg-primary">토큰</span>
+                  <span v-else-if="a.authType === 'ssh'" class="badge bg-dark">SSH</span>
+                  <span v-else class="badge bg-secondary">비밀번호</span>
+                </td>
+                <td class="text-center">
+                  <button class="btn btn-sm btn-outline-primary me-1" @click="openVcsModal(a)">
+                    <i class="bi bi-pencil"></i>
+                  </button>
+                  <button class="btn btn-sm btn-outline-danger" @click="deleteVcsAccount(a)">
+                    <i class="bi bi-trash"></i>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 비밀번호 변경 -->
+    <div class="card">
+      <div class="card-header">
+        <strong><i class="bi bi-key me-2"></i>비밀번호 변경</strong>
+      </div>
+      <div class="card-body">
+        <form @submit.prevent="changePassword">
+          <div class="row mb-3" v-if="userInfo.hasPassword">
+            <label class="col-3 col-form-label">현재 비밀번호</label>
+            <div class="col-9">
+              <input type="password" class="form-control" v-model="pwForm.currentPassword" required />
+            </div>
+          </div>
+          <div class="row mb-3">
+            <label class="col-3 col-form-label">새 비밀번호</label>
+            <div class="col-9">
+              <input type="password" class="form-control" v-model="pwForm.newPassword" required minlength="8" />
+              <small class="text-muted">8자 이상</small>
+            </div>
+          </div>
+          <div class="row mb-3">
+            <label class="col-3 col-form-label">비밀번호 확인</label>
+            <div class="col-9">
+              <input type="password" class="form-control" v-model="pwForm.confirmPassword" required />
+            </div>
+          </div>
+          <div class="text-end">
+            <button type="submit" class="btn btn-warning" :disabled="isChangingPw">
+              <span v-if="isChangingPw" class="spinner-border spinner-border-sm me-1"></span>
+              비밀번호 변경
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- VCS 계정 모달 -->
+    <div class="modal fade" :class="{ show: showVcsModal }" :style="{ display: showVcsModal ? 'block' : 'none' }">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ isEditVcs ? 'VCS 계정 수정' : 'VCS 계정 추가' }}</h5>
+            <button type="button" class="btn-close" @click="showVcsModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">VCS 서버 <span class="text-danger">*</span></label>
+              <select class="form-select" v-model="vcsForm.serverId" :disabled="isEditVcs">
+                <option value="">선택하세요</option>
+                <option v-for="s in vcsServers" :key="s.serverId" :value="s.serverId.toString()">
+                  [{{ s.serverType.toUpperCase() }}] {{ s.serverName }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">사용자명 <span class="text-danger">*</span></label>
+              <input type="text" class="form-control" v-model="vcsForm.vcsUsername" placeholder="VCS 계정 사용자명" />
+            </div>
+            <div class="mb-3">
+              <label class="form-label">이메일</label>
+              <input type="email" class="form-control" v-model="vcsForm.vcsEmail" placeholder="커밋 시 사용하는 이메일" />
+              <small class="text-muted">Git 커밋 시 사용하는 이메일과 동일하게 입력하세요.</small>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">인증 방식</label>
+              <select class="form-select" v-model="vcsForm.authType">
+                <option value="password">비밀번호</option>
+                <option value="token">토큰</option>
+                <option value="ssh">SSH 키</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">{{ vcsForm.authType === 'token' ? '액세스 토큰' : '비밀번호/키' }}</label>
+              <input type="password" class="form-control" v-model="vcsForm.credential" 
+                :placeholder="isEditVcs ? '변경하려면 입력' : ''" />
+              <small class="text-muted">암호화하여 저장됩니다.</small>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="showVcsModal = false">취소</button>
+            <button type="button" class="btn btn-primary" @click="saveVcsAccount">저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop fade show" v-if="showVcsModal"></div>
     </div>
   </div>
 </template>
@@ -206,6 +349,15 @@ const userInfo = ref<any>({})
 const loginHistory = ref<any[]>([])
 const isLoading = ref(true)
 const isLoadingHistory = ref(true)
+
+// VCS 계정 관련
+const vcsAccounts = ref<any[]>([])
+const vcsServers = ref<any[]>([])
+const isLoadingVcs = ref(true)
+const showVcsModal = ref(false)
+const isEditVcs = ref(false)
+const editVcsId = ref<number | null>(null)
+const vcsForm = ref({ serverId: '', vcsUsername: '', vcsEmail: '', authType: 'password', credential: '' })
 const isEditing = ref(false)
 const isSaving = ref(false)
 
@@ -225,6 +377,8 @@ onMounted(async () => {
   }
   loadUserInfo()
   loadLoginHistory()
+  loadVcsAccounts()
+  loadVcsServers()
 })
 
 async function loadUserInfo() {
@@ -294,4 +448,67 @@ function formatDateTime(dateStr: string) {
   const second = String(d.getSeconds()).padStart(2, '0')
   return `${year}-${month}-${day} ${hour}:${minute}:${second}`
 }
+
+// VCS 계정 관련 함수
+async function loadVcsAccounts() {
+  isLoadingVcs.value = true
+  try {
+    const res = await $fetch<any>('/api/vcs-account/my')
+    vcsAccounts.value = res.accounts || []
+  } catch (e) { console.error(e) }
+  finally { isLoadingVcs.value = false }
+}
+
+async function loadVcsServers() {
+  try {
+    const res = await $fetch<any>('/api/vcs-server/list')
+    vcsServers.value = res.servers || []
+  } catch (e) { console.error(e) }
+}
+
+function openVcsModal(account?: any) {
+  if (account) {
+    isEditVcs.value = true
+    editVcsId.value = account.accountId
+    vcsForm.value = {
+      serverId: account.serverId?.toString() || '',
+      vcsUsername: account.vcsUsername || '',
+      vcsEmail: account.vcsEmail || '',
+      authType: account.authType || 'password',
+      credential: ''
+    }
+  } else {
+    isEditVcs.value = false
+    editVcsId.value = null
+    vcsForm.value = { serverId: '', vcsUsername: '', vcsEmail: '', authType: 'password', credential: '' }
+  }
+  showVcsModal.value = true
+}
+
+async function saveVcsAccount() {
+  if (!vcsForm.value.serverId) { alert('서버를 선택해주세요.'); return }
+  if (!vcsForm.value.vcsUsername.trim()) { alert('사용자명을 입력해주세요.'); return }
+  
+  try {
+    if (isEditVcs.value && editVcsId.value) {
+      await $fetch(`/api/vcs-account/${editVcsId.value}/update`, { method: 'PUT', body: vcsForm.value })
+    } else {
+      await $fetch('/api/vcs-account/create', { method: 'POST', body: { ...vcsForm.value, serverId: Number(vcsForm.value.serverId) } })
+    }
+    showVcsModal.value = false
+    await loadVcsAccounts()
+  } catch (e: any) {
+    alert(e.data?.message || '저장에 실패했습니다.')
+  }
+}
+
+async function deleteVcsAccount(account: any) {
+  if (!confirm('VCS 계정을 삭제하시겠습니까?')) return
+  try {
+    await $fetch(`/api/vcs-account/${account.accountId}/delete`, { method: 'DELETE' })
+    await loadVcsAccounts()
+  } catch (e: any) {
+    alert(e.data?.message || '삭제에 실패했습니다.')
+  }
+}
 </script>