작업계획서대로 진행

frontend/maintenance/[id].vue

@@ -0,0 +1,468 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4 class="mb-0">
+          <i class="bi bi-tools me-2"></i>유지보수 업무 상세
+        </h4>
+        <div>
+          <NuxtLink to="/maintenance" class="btn btn-outline-secondary me-2">
+            <i class="bi bi-arrow-left me-1"></i>목록
+          </NuxtLink>
+          <button class="btn btn-danger" @click="deleteTask" v-if="!isEditing">
+            <i class="bi bi-trash me-1"></i>삭제
+          </button>
+        </div>
+      </div>
+
+      <div v-if="isLoading" class="text-center py-5">
+        <div class="spinner-border text-primary"></div>
+      </div>
+
+      <div v-else-if="task" class="row">
+        <!-- 왼쪽: 기본 정보 -->
+        <div class="col-md-8">
+          <div class="card mb-3">
+            <div class="card-header d-flex justify-content-between align-items-center">
+              <strong>업무 정보</strong>
+              <button 
+                class="btn btn-sm" 
+                :class="isEditing ? 'btn-secondary' : 'btn-outline-primary'"
+                @click="toggleEdit"
+              >
+                <i :class="isEditing ? 'bi bi-x-lg' : 'bi bi-pencil'" class="me-1"></i>
+                {{ isEditing ? '취소' : '수정' }}
+              </button>
+            </div>
+            <div class="card-body">
+              <!-- 보기 모드 -->
+              <div v-if="!isEditing">
+                <div class="row mb-3">
+                  <div class="col-md-4">
+                    <label class="text-muted small">프로젝트</label>
+                    <p class="mb-0">{{ task.projectName || '-' }}</p>
+                  </div>
+                  <div class="col-md-4">
+                    <label class="text-muted small">요청일</label>
+                    <p class="mb-0">{{ formatDate(task.requestDate) }}</p>
+                  </div>
+                  <div class="col-md-4">
+                    <label class="text-muted small">담당자</label>
+                    <p class="mb-0">{{ task.assigneeName || '미배정' }}</p>
+                  </div>
+                </div>
+                <div class="row mb-3">
+                  <div class="col-md-8">
+                    <label class="text-muted small">제목</label>
+                    <p class="mb-0 fw-bold">{{ task.requestTitle }}</p>
+                  </div>
+                  <div class="col-md-2">
+                    <label class="text-muted small">우선순위</label>
+                    <p class="mb-0">
+                      <span :class="getPriorityBadgeClass(task.priority)">{{ getPriorityText(task.priority) }}</span>
+                    </p>
+                  </div>
+                  <div class="col-md-2">
+                    <label class="text-muted small">상태</label>
+                    <p class="mb-0">
+                      <span :class="getStatusBadgeClass(task.status)">{{ getStatusText(task.status) }}</span>
+                    </p>
+                  </div>
+                </div>
+                <div class="row mb-3">
+                  <div class="col-md-6">
+                    <label class="text-muted small">요청자</label>
+                    <p class="mb-0">{{ task.requesterName || '-' }} {{ task.requesterContact ? `(${task.requesterContact})` : '' }}</p>
+                  </div>
+                  <div class="col-md-6">
+                    <label class="text-muted small">업무유형</label>
+                    <p class="mb-0">{{ getTaskTypeText(task.taskType) }}</p>
+                  </div>
+                </div>
+                <div class="mb-3" v-if="task.requestContent">
+                  <label class="text-muted small">요청 내용</label>
+                  <div class="border rounded p-3 bg-light" style="white-space: pre-wrap;">{{ task.requestContent }}</div>
+                </div>
+                <div class="mb-0" v-if="task.resolutionContent">
+                  <label class="text-muted small">처리 내용</label>
+                  <div class="border rounded p-3 bg-light" style="white-space: pre-wrap;">{{ task.resolutionContent }}</div>
+                </div>
+              </div>
+              
+              <!-- 수정 모드 -->
+              <div v-else>
+                <div class="row g-3">
+                  <div class="col-md-4">
+                    <label class="form-label">프로젝트</label>
+                    <select class="form-select" v-model="form.projectId">
+                      <option value="">선택 안함</option>
+                      <option v-for="p in projects" :key="p.projectId" :value="p.projectId">{{ p.projectName }}</option>
+                    </select>
+                  </div>
+                  <div class="col-md-4">
+                    <label class="form-label">요청일</label>
+                    <input type="date" class="form-control" v-model="form.requestDate" />
+                  </div>
+                  <div class="col-md-4">
+                    <label class="form-label">담당자</label>
+                    <select class="form-select" v-model="form.assigneeId">
+                      <option value="">미배정</option>
+                      <option v-for="e in employees" :key="e.employeeId" :value="e.employeeId">{{ e.employeeName }}</option>
+                    </select>
+                  </div>
+                  <div class="col-md-6">
+                    <label class="form-label">제목</label>
+                    <input type="text" class="form-control" v-model="form.requestTitle" />
+                  </div>
+                  <div class="col-md-3">
+                    <label class="form-label">우선순위</label>
+                    <select class="form-select" v-model="form.priority">
+                      <option value="HIGH">높음</option>
+                      <option value="MEDIUM">보통</option>
+                      <option value="LOW">낮음</option>
+                    </select>
+                  </div>
+                  <div class="col-md-3">
+                    <label class="form-label">상태</label>
+                    <select class="form-select" v-model="form.status">
+                      <option value="PENDING">미진행</option>
+                      <option value="IN_PROGRESS">진행중</option>
+                      <option value="COMPLETED">완료</option>
+                    </select>
+                  </div>
+                  <div class="col-md-4">
+                    <label class="form-label">요청자명</label>
+                    <input type="text" class="form-control" v-model="form.requesterName" />
+                  </div>
+                  <div class="col-md-4">
+                    <label class="form-label">요청자 연락처</label>
+                    <input type="text" class="form-control" v-model="form.requesterContact" />
+                  </div>
+                  <div class="col-md-4">
+                    <label class="form-label">업무유형</label>
+                    <select class="form-select" v-model="form.taskType">
+                      <option value="GENERAL">일반</option>
+                      <option value="BUG">버그수정</option>
+                      <option value="ENHANCEMENT">기능개선</option>
+                      <option value="DATA">데이터</option>
+                    </select>
+                  </div>
+                  <div class="col-12">
+                    <label class="form-label">요청 내용</label>
+                    <textarea class="form-control" v-model="form.requestContent" rows="4"></textarea>
+                  </div>
+                  <div class="col-12">
+                    <label class="form-label">처리 내용</label>
+                    <textarea class="form-control" v-model="form.resolutionContent" rows="4"></textarea>
+                  </div>
+                </div>
+                <div class="mt-3 text-end">
+                  <button class="btn btn-primary" @click="saveTask" :disabled="isSaving">
+                    <span v-if="isSaving"><span class="spinner-border spinner-border-sm me-1"></span>저장 중...</span>
+                    <span v-else><i class="bi bi-check-lg me-1"></i>저장</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 오른쪽: 반영 상태 + 메타 -->
+        <div class="col-md-4">
+          <!-- 상태 변경 -->
+          <div class="card mb-3">
+            <div class="card-header"><strong>상태 변경</strong></div>
+            <div class="card-body">
+              <div class="btn-group w-100" role="group">
+                <button 
+                  v-for="s in statusOptions" 
+                  :key="s.value"
+                  class="btn"
+                  :class="task.status === s.value ? 'btn-primary' : 'btn-outline-secondary'"
+                  @click="changeStatus(s.value)"
+                  :disabled="isChangingStatus"
+                >
+                  {{ s.label }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 반영 체크 -->
+          <div class="card mb-3">
+            <div class="card-header"><strong>반영 현황</strong></div>
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span><i class="bi bi-server me-2"></i>개발서버 반영</span>
+                <div>
+                  <input 
+                    type="checkbox" 
+                    class="form-check-input me-2" 
+                    :checked="!!task.devCompletedAt"
+                    @change="toggleDeploy('dev', $event)"
+                  />
+                  <small class="text-muted">{{ formatDate(task.devCompletedAt) || '-' }}</small>
+                </div>
+              </li>
+              <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span><i class="bi bi-cloud me-2"></i>운영서버 반영</span>
+                <div>
+                  <input 
+                    type="checkbox" 
+                    class="form-check-input me-2" 
+                    :checked="!!task.opsCompletedAt"
+                    @change="toggleDeploy('ops', $event)"
+                  />
+                  <small class="text-muted">{{ formatDate(task.opsCompletedAt) || '-' }}</small>
+                </div>
+              </li>
+              <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span><i class="bi bi-person-check me-2"></i>고객 확인</span>
+                <div>
+                  <input 
+                    type="checkbox" 
+                    class="form-check-input me-2" 
+                    :checked="!!task.clientConfirmedAt"
+                    @change="toggleDeploy('client', $event)"
+                  />
+                  <small class="text-muted">{{ formatDate(task.clientConfirmedAt) || '-' }}</small>
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <!-- 메타 정보 -->
+          <div class="card">
+            <div class="card-header"><strong>등록 정보</strong></div>
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item d-flex justify-content-between">
+                <span class="text-muted">등록자</span>
+                <span>{{ task.createdByName || '-' }}</span>
+              </li>
+              <li class="list-group-item d-flex justify-content-between">
+                <span class="text-muted">등록일</span>
+                <span>{{ formatDateTime(task.createdAt) }}</span>
+              </li>
+              <li class="list-group-item d-flex justify-content-between">
+                <span class="text-muted">수정자</span>
+                <span>{{ task.updatedByName || '-' }}</span>
+              </li>
+              <li class="list-group-item d-flex justify-content-between">
+                <span class="text-muted">수정일</span>
+                <span>{{ formatDateTime(task.updatedAt) }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const route = useRoute()
+const router = useRouter()
+
+const taskId = computed(() => Number(route.params.id))
+
+const task = ref<any>(null)
+const projects = ref<any[]>([])
+const employees = ref<any[]>([])
+const isLoading = ref(true)
+const isEditing = ref(false)
+const isSaving = ref(false)
+const isChangingStatus = ref(false)
+
+const statusOptions = [
+  { value: 'PENDING', label: '미진행' },
+  { value: 'IN_PROGRESS', label: '진행중' },
+  { value: 'COMPLETED', label: '완료' }
+]
+
+const form = ref({
+  projectId: '',
+  requestDate: '',
+  requestTitle: '',
+  requestContent: '',
+  requesterName: '',
+  requesterContact: '',
+  taskType: 'GENERAL',
+  priority: 'MEDIUM',
+  status: 'PENDING',
+  assigneeId: '',
+  resolutionContent: '',
+  devCompletedAt: '',
+  opsCompletedAt: '',
+  clientConfirmedAt: ''
+})
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) {
+    router.push('/login')
+    return
+  }
+  await Promise.all([loadTask(), loadProjects(), loadEmployees()])
+})
+
+async function loadTask() {
+  isLoading.value = true
+  try {
+    const res = await $fetch<any>(`/api/maintenance/${taskId.value}/detail`)
+    task.value = res.task
+  } catch (e) {
+    console.error('Load task error:', e)
+    alert('업무 정보를 불러올 수 없습니다.')
+    router.push('/maintenance')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function loadProjects() {
+  try {
+    const res = await $fetch<any>('/api/project/list')
+    projects.value = res.projects || []
+  } catch (e) { console.error(e) }
+}
+
+async function loadEmployees() {
+  try {
+    const res = await $fetch<any>('/api/employee/list')
+    employees.value = res.employees || []
+  } catch (e) { console.error(e) }
+}
+
+function toggleEdit() {
+  if (!isEditing.value) {
+    form.value = {
+      projectId: task.value.projectId?.toString() || '',
+      requestDate: task.value.requestDate?.split('T')[0] || '',
+      requestTitle: task.value.requestTitle || '',
+      requestContent: task.value.requestContent || '',
+      requesterName: task.value.requesterName || '',
+      requesterContact: task.value.requesterContact || '',
+      taskType: task.value.taskType || 'GENERAL',
+      priority: task.value.priority || 'MEDIUM',
+      status: task.value.status || 'PENDING',
+      assigneeId: task.value.assigneeId?.toString() || '',
+      resolutionContent: task.value.resolutionContent || '',
+      devCompletedAt: task.value.devCompletedAt?.split('T')[0] || '',
+      opsCompletedAt: task.value.opsCompletedAt?.split('T')[0] || '',
+      clientConfirmedAt: task.value.clientConfirmedAt?.split('T')[0] || ''
+    }
+  }
+  isEditing.value = !isEditing.value
+}
+
+async function saveTask() {
+  isSaving.value = true
+  try {
+    await $fetch(`/api/maintenance/${taskId.value}/update`, {
+      method: 'PUT',
+      body: {
+        projectId: form.value.projectId ? Number(form.value.projectId) : null,
+        requestDate: form.value.requestDate,
+        requestTitle: form.value.requestTitle,
+        requestContent: form.value.requestContent,
+        requesterName: form.value.requesterName,
+        requesterContact: form.value.requesterContact,
+        taskType: form.value.taskType,
+        priority: form.value.priority,
+        status: form.value.status,
+        assigneeId: form.value.assigneeId ? Number(form.value.assigneeId) : null,
+        resolutionContent: form.value.resolutionContent,
+        devCompletedAt: form.value.devCompletedAt || null,
+        opsCompletedAt: form.value.opsCompletedAt || null,
+        clientConfirmedAt: form.value.clientConfirmedAt || null
+      }
+    })
+    isEditing.value = false
+    await loadTask()
+  } catch (e: any) {
+    alert(e.data?.message || '저장에 실패했습니다.')
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function changeStatus(status: string) {
+  if (task.value.status === status) return
+  isChangingStatus.value = true
+  try {
+    await $fetch(`/api/maintenance/${taskId.value}/status`, {
+      method: 'PUT',
+      body: { status }
+    })
+    task.value.status = status
+  } catch (e: any) {
+    alert(e.data?.message || '상태 변경에 실패했습니다.')
+  } finally {
+    isChangingStatus.value = false
+  }
+}
+
+async function toggleDeploy(type: string, event: Event) {
+  const checked = (event.target as HTMLInputElement).checked
+  const now = new Date().toISOString()
+  
+  const fieldMap: Record<string, string> = {
+    'dev': 'devCompletedAt',
+    'ops': 'opsCompletedAt',
+    'client': 'clientConfirmedAt'
+  }
+  
+  try {
+    await $fetch(`/api/maintenance/${taskId.value}/update`, {
+      method: 'PUT',
+      body: {
+        ...task.value,
+        projectId: task.value.projectId,
+        [fieldMap[type]]: checked ? now : null
+      }
+    })
+    task.value[fieldMap[type]] = checked ? now : null
+  } catch (e: any) {
+    alert(e.data?.message || '반영 상태 변경에 실패했습니다.')
+    ;(event.target as HTMLInputElement).checked = !checked
+  }
+}
+
+async function deleteTask() {
+  if (!confirm('정말 삭제하시겠습니까?')) return
+  try {
+    await $fetch(`/api/maintenance/${taskId.value}/delete`, { method: 'DELETE' })
+    router.push('/maintenance')
+  } catch (e: any) {
+    alert(e.data?.message || '삭제에 실패했습니다.')
+  }
+}
+
+function getPriorityBadgeClass(p: string) {
+  return { 'HIGH': 'badge bg-danger', 'MEDIUM': 'badge bg-warning text-dark', 'LOW': 'badge bg-secondary' }[p] || 'badge bg-secondary'
+}
+function getPriorityText(p: string) {
+  return { 'HIGH': '높음', 'MEDIUM': '보통', 'LOW': '낮음' }[p] || p
+}
+function getStatusBadgeClass(s: string) {
+  return { 'PENDING': 'badge bg-secondary', 'IN_PROGRESS': 'badge bg-primary', 'COMPLETED': 'badge bg-success' }[s] || 'badge bg-secondary'
+}
+function getStatusText(s: string) {
+  return { 'PENDING': '미진행', 'IN_PROGRESS': '진행중', 'COMPLETED': '완료' }[s] || s
+}
+function getTaskTypeText(t: string) {
+  return { 'GENERAL': '일반', 'BUG': '버그수정', 'ENHANCEMENT': '기능개선', 'DATA': '데이터' }[t] || t
+}
+function formatDate(d: string | null) {
+  if (!d) return ''
+  return new Date(d).toISOString().split('T')[0]
+}
+function formatDateTime(d: string | null) {
+  if (!d) return '-'
+  const dt = new Date(d)
+  return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')} ${String(dt.getHours()).padStart(2,'0')}:${String(dt.getMinutes()).padStart(2,'0')}`
+}
+</script>

frontend/maintenance/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <!-- 헤더 -->
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4 class="mb-0">
+          <i class="bi bi-tools me-2"></i>유지보수 업무
+        </h4>
+        <div>
+          <NuxtLink to="/maintenance/upload" class="btn btn-outline-primary me-2">
+            <i class="bi bi-upload me-1"></i>일괄 등록
+          </NuxtLink>
+          <NuxtLink to="/maintenance/write" class="btn btn-primary">
+            <i class="bi bi-plus-lg me-1"></i>업무 등록
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- 검색 -->
+      <div class="card mb-3">
+        <div class="card-body py-2">
+          <div class="row g-2 align-items-center">
+            <div class="col-1 text-end"><label class="col-form-label">프로젝트</label></div>
+            <div class="col-2">
+              <select class="form-select form-select-sm" v-model="filter.projectId">
+                <option value="">전체</option>
+                <option v-for="p in projects" :key="p.projectId" :value="p.projectId">
+                  {{ p.projectName }}
+                </option>
+              </select>
+            </div>
+            <div class="col-1 text-end"><label class="col-form-label">제목</label></div>
+            <div class="col-2">
+              <input 
+                type="text" 
+                class="form-control form-control-sm" 
+                v-model="filter.keyword"
+                placeholder="제목, 내용, 요청자"
+                @keyup.enter="loadTasks"
+              />
+            </div>
+            <div class="col-1 text-end"><label class="col-form-label">상태</label></div>
+            <div class="col-3">
+              <div class="btn-group" role="group">
+                <input type="radio" class="btn-check" name="status" id="statusAll" value="" v-model="filter.status" @change="loadTasks">
+                <label class="btn btn-outline-secondary btn-sm" for="statusAll">전체</label>
+                <input type="radio" class="btn-check" name="status" id="statusPending" value="PENDING" v-model="filter.status" @change="loadTasks">
+                <label class="btn btn-outline-secondary btn-sm" for="statusPending">미진행</label>
+                <input type="radio" class="btn-check" name="status" id="statusProgress" value="IN_PROGRESS" v-model="filter.status" @change="loadTasks">
+                <label class="btn btn-outline-secondary btn-sm" for="statusProgress">진행중</label>
+                <input type="radio" class="btn-check" name="status" id="statusCompleted" value="COMPLETED" v-model="filter.status" @change="loadTasks">
+                <label class="btn btn-outline-secondary btn-sm" for="statusCompleted">완료</label>
+              </div>
+            </div>
+          </div>
+          <div class="row g-2 align-items-center mt-1">
+            <div class="col-1 text-end"><label class="col-form-label">우선순위</label></div>
+            <div class="col-2">
+              <select class="form-select form-select-sm" v-model="filter.priority">
+                <option value="">전체</option>
+                <option value="HIGH">높음</option>
+                <option value="MEDIUM">보통</option>
+                <option value="LOW">낮음</option>
+              </select>
+            </div>
+            <div class="col-1 text-end"><label class="col-form-label">요청일</label></div>
+            <div class="col-2">
+              <input type="date" class="form-control form-control-sm" v-model="filter.startDate" />
+            </div>
+            <div class="col-auto px-1">~</div>
+            <div class="col-2">
+              <input type="date" class="form-control form-control-sm" v-model="filter.endDate" />
+            </div>
+            <div class="col-2">
+              <button class="btn btn-primary btn-sm me-1" @click="loadTasks">
+                <i class="bi bi-search me-1"></i>조회
+              </button>
+              <button class="btn btn-outline-secondary btn-sm" @click="resetSearch">
+                <i class="bi bi-arrow-counterclockwise"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 목록 -->
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <span>유지보수 업무 목록 총 <strong>{{ pagination.total }}</strong>건</span>
+        </div>
+        <div class="card-body p-0">
+          <div class="table-responsive">
+            <table class="table table-hover table-bordered mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th style="width: 50px" class="text-center">No</th>
+                  <th style="width: 100px">요청일</th>
+                  <th>제목</th>
+                  <th style="width: 120px">프로젝트</th>
+                  <th style="width: 80px">요청자</th>
+                  <th style="width: 70px" class="text-center">우선순위</th>
+                  <th style="width: 80px" class="text-center">상태</th>
+                  <th style="width: 80px">담당자</th>
+                  <th style="width: 50px" class="text-center" title="개발서버">개발</th>
+                  <th style="width: 50px" class="text-center" title="운영서버">운영</th>
+                  <th style="width: 50px" class="text-center" title="고객확인">확인</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="isLoading">
+                  <td colspan="11" class="text-center py-4">
+                    <span class="spinner-border spinner-border-sm me-2"></span>로딩 중...
+                  </td>
+                </tr>
+                <tr v-else-if="tasks.length === 0">
+                  <td colspan="11" class="text-center py-5 text-muted">
+                    <i class="bi bi-inbox display-4"></i>
+                    <p class="mt-2 mb-0">조회된 업무가 없습니다.</p>
+                  </td>
+                </tr>
+                <tr v-else v-for="(task, idx) in tasks" :key="task.taskId">
+                  <td class="text-center">{{ (pagination.page - 1) * pagination.pageSize + idx + 1 }}</td>
+                  <td>{{ formatDate(task.requestDate) }}</td>
+                  <td>
+                    <NuxtLink :to="`/maintenance/${task.taskId}`" class="text-decoration-none">
+                      {{ task.requestTitle }}
+                    </NuxtLink>
+                  </td>
+                  <td>{{ task.projectName || '-' }}</td>
+                  <td>{{ task.requesterName || '-' }}</td>
+                  <td class="text-center">
+                    <span :class="getPriorityBadgeClass(task.priority)">
+                      {{ getPriorityText(task.priority) }}
+                    </span>
+                  </td>
+                  <td class="text-center">
+                    <span :class="getStatusBadgeClass(task.status)">
+                      {{ getStatusText(task.status) }}
+                    </span>
+                  </td>
+                  <td>{{ task.assigneeName || '-' }}</td>
+                  <td class="text-center">
+                    <i v-if="task.devCompletedAt" class="bi bi-check-circle-fill text-success"></i>
+                    <i v-else class="bi bi-circle text-muted"></i>
+                  </td>
+                  <td class="text-center">
+                    <i v-if="task.opsCompletedAt" class="bi bi-check-circle-fill text-success"></i>
+                    <i v-else class="bi bi-circle text-muted"></i>
+                  </td>
+                  <td class="text-center">
+                    <i v-if="task.clientConfirmedAt" class="bi bi-check-circle-fill text-success"></i>
+                    <i v-else class="bi bi-circle text-muted"></i>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <!-- 페이지네이션 -->
+          <div class="card-footer d-flex justify-content-between align-items-center" v-if="pagination.totalPages > 1">
+            <small class="text-muted">
+              전체 {{ pagination.total }}건 중 {{ (pagination.page - 1) * pagination.pageSize + 1 }} - 
+              {{ Math.min(pagination.page * pagination.pageSize, pagination.total) }}건
+            </small>
+            <nav>
+              <ul class="pagination pagination-sm mb-0">
+                <li class="page-item" :class="{ disabled: pagination.page === 1 }">
+                  <a class="page-link" href="#" @click.prevent="goPage(pagination.page - 1)">이전</a>
+                </li>
+                <li 
+                  class="page-item" 
+                  v-for="p in visiblePages" 
+                  :key="p" 
+                  :class="{ active: p === pagination.page }"
+                >
+                  <a class="page-link" href="#" @click.prevent="goPage(p)">{{ p }}</a>
+                </li>
+                <li class="page-item" :class="{ disabled: pagination.page === pagination.totalPages }">
+                  <a class="page-link" href="#" @click.prevent="goPage(pagination.page + 1)">다음</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const router = useRouter()
+
+interface Task {
+  taskId: number
+  projectId: number | null
+  projectName: string | null
+  requestDate: string
+  requestTitle: string
+  requesterName: string | null
+  priority: string
+  status: string
+  assigneeId: number | null
+  assigneeName: string | null
+  devCompletedAt: string | null
+  opsCompletedAt: string | null
+  clientConfirmedAt: string | null
+}
+
+interface Project {
+  projectId: number
+  projectName: string
+}
+
+const tasks = ref<Task[]>([])
+const projects = ref<Project[]>([])
+const isLoading = ref(false)
+
+const filter = ref({
+  projectId: '',
+  keyword: '',
+  status: '',
+  priority: '',
+  startDate: '',
+  endDate: ''
+})
+
+const pagination = ref({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+  totalPages: 0
+})
+
+const visiblePages = computed(() => {
+  const pages: number[] = []
+  const total = pagination.value.totalPages
+  const current = pagination.value.page
+  let start = Math.max(1, current - 2)
+  let end = Math.min(total, current + 2)
+  if (end - start < 4) {
+    if (start === 1) end = Math.min(total, 5)
+    else start = Math.max(1, total - 4)
+  }
+  for (let i = start; i <= end; i++) pages.push(i)
+  return pages
+})
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) {
+    router.push('/login')
+    return
+  }
+  await loadProjects()
+  await loadTasks()
+})
+
+async function loadProjects() {
+  try {
+    const res = await $fetch<{ projects: Project[] }>('/api/project/list')
+    projects.value = res.projects || []
+  } catch (e) {
+    console.error('Load projects error:', e)
+  }
+}
+
+async function loadTasks() {
+  isLoading.value = true
+  try {
+    const res = await $fetch<any>('/api/maintenance/list', {
+      query: {
+        projectId: filter.value.projectId || undefined,
+        keyword: filter.value.keyword || undefined,
+        status: filter.value.status || undefined,
+        priority: filter.value.priority || undefined,
+        startDate: filter.value.startDate || undefined,
+        endDate: filter.value.endDate || undefined,
+        page: pagination.value.page,
+        pageSize: pagination.value.pageSize
+      }
+    })
+    tasks.value = res.tasks || []
+    pagination.value.total = res.pagination?.total || 0
+    pagination.value.totalPages = res.pagination?.totalPages || 0
+  } catch (e) {
+    console.error('Load tasks error:', e)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function resetSearch() {
+  filter.value = {
+    projectId: '',
+    keyword: '',
+    status: '',
+    priority: '',
+    startDate: '',
+    endDate: ''
+  }
+  pagination.value.page = 1
+  loadTasks()
+}
+
+function goPage(page: number) {
+  if (page < 1 || page > pagination.value.totalPages) return
+  pagination.value.page = page
+  loadTasks()
+}
+
+function getPriorityBadgeClass(priority: string) {
+  const classes: Record<string, string> = {
+    'HIGH': 'badge bg-danger',
+    'MEDIUM': 'badge bg-warning text-dark',
+    'LOW': 'badge bg-secondary'
+  }
+  return classes[priority] || 'badge bg-secondary'
+}
+
+function getPriorityText(priority: string) {
+  const texts: Record<string, string> = { 'HIGH': '높음', 'MEDIUM': '보통', 'LOW': '낮음' }
+  return texts[priority] || priority
+}
+
+function getStatusBadgeClass(status: string) {
+  const classes: Record<string, string> = {
+    'PENDING': 'badge bg-secondary',
+    'IN_PROGRESS': 'badge bg-primary',
+    'COMPLETED': 'badge bg-success'
+  }
+  return classes[status] || 'badge bg-secondary'
+}
+
+function getStatusText(status: string) {
+  const texts: Record<string, string> = { 'PENDING': '미진행', 'IN_PROGRESS': '진행중', 'COMPLETED': '완료' }
+  return texts[status] || status
+}
+
+function formatDate(dateStr: string | null) {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
+}
+</script>

frontend/maintenance/upload.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4 class="mb-0">
+          <NuxtLink to="/maintenance" class="text-decoration-none text-muted me-2"><i class="bi bi-arrow-left"></i></NuxtLink>
+          <i class="bi bi-upload me-2"></i>유지보수 업무 일괄 등록
+        </h4>
+      </div>
+
+      <!-- Step 1: 파일 업로드 -->
+      <div class="card mb-4" v-if="step === 1">
+        <div class="card-header"><strong>Step 1. 파일 업로드</strong></div>
+        <div class="card-body">
+          <div class="row g-3">
+            <div class="col-md-6">
+              <label class="form-label">프로젝트 <span class="text-danger">*</span></label>
+              <select class="form-select" v-model="projectId">
+                <option value="">선택하세요</option>
+                <option v-for="p in projects" :key="p.projectId" :value="p.projectId">{{ p.projectName }}</option>
+              </select>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label">엑셀/CSV 파일 <span class="text-danger">*</span></label>
+              <input type="file" class="form-control" @change="onFileChange" accept=".xlsx,.xls,.csv" ref="fileInput" />
+            </div>
+          </div>
+          <div class="alert alert-info mt-3">
+            <i class="bi bi-info-circle me-2"></i>
+            엑셀 파일의 첫 번째 행은 헤더여야 합니다. AI가 자동으로 컬럼을 매핑합니다.
+          </div>
+          <div class="mt-3">
+            <button class="btn btn-primary" @click="uploadFile" :disabled="!projectId || !selectedFile || isUploading">
+              <span v-if="isUploading"><span class="spinner-border spinner-border-sm me-1"></span>분석 중...</span>
+              <span v-else><i class="bi bi-cloud-upload me-1"></i>업로드 및 분석</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 2: 파싱 결과 검토 -->
+      <div class="card mb-4" v-if="step === 2">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <strong>Step 2. 파싱 결과 검토</strong>
+          <span class="text-muted">{{ uploadResult?.filename }} - {{ uploadResult?.totalRows }}건</span>
+        </div>
+        <div class="card-body p-0">
+          <div class="table-responsive">
+            <table class="table table-sm table-bordered mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th style="width: 40px" class="text-center">
+                    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
+                  </th>
+                  <th style="width: 40px" class="text-center">행</th>
+                  <th style="width: 100px">요청일</th>
+                  <th>요청 제목</th>
+                  <th style="width: 80px">유형</th>
+                  <th style="width: 80px">우선순위</th>
+                  <th style="width: 80px">요청자</th>
+                  <th style="width: 80px" class="text-center">상태</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(task, idx) in parsedTasks" :key="idx" :class="{ 'table-warning': task.isDuplicate }">
+                  <td class="text-center">
+                    <input type="checkbox" v-model="task.selected" :disabled="task.isDuplicate" />
+                  </td>
+                  <td class="text-center">{{ task.rowIndex }}</td>
+                  <td>
+                    <input type="date" class="form-control form-control-sm" v-model="task.requestDate" />
+                  </td>
+                  <td>
+                    <input type="text" class="form-control form-control-sm" v-model="task.requestTitle" />
+                  </td>
+                  <td>
+                    <select class="form-select form-select-sm" v-model="task.taskType">
+                      <option value="bug">버그</option>
+                      <option value="feature">기능</option>
+                      <option value="inquiry">문의</option>
+                      <option value="other">기타</option>
+                    </select>
+                  </td>
+                  <td>
+                    <select class="form-select form-select-sm" v-model="task.priority">
+                      <option value="high">높음</option>
+                      <option value="medium">중간</option>
+                      <option value="low">낮음</option>
+                    </select>
+                  </td>
+                  <td>{{ task.requesterName || '-' }}</td>
+                  <td class="text-center">
+                    <span v-if="task.isDuplicate" class="badge bg-danger">중복</span>
+                    <span v-else class="badge bg-success">신규</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="card-footer d-flex justify-content-between">
+          <button class="btn btn-secondary" @click="step = 1">
+            <i class="bi bi-arrow-left me-1"></i>이전
+          </button>
+          <div>
+            <span class="me-3">선택: {{ selectedCount }}건 / 중복: {{ duplicateCount }}건</span>
+            <button class="btn btn-primary" @click="bulkCreate" :disabled="selectedCount === 0 || isCreating">
+              <span v-if="isCreating"><span class="spinner-border spinner-border-sm me-1"></span>등록 중...</span>
+              <span v-else><i class="bi bi-check-lg me-1"></i>{{ selectedCount }}건 등록</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: 완료 -->
+      <div class="card" v-if="step === 3">
+        <div class="card-body text-center py-5">
+          <i class="bi bi-check-circle text-success display-1"></i>
+          <h4 class="mt-3">등록 완료!</h4>
+          <p class="text-muted">{{ createResult?.insertedCount }}건이 등록되었습니다.</p>
+          <div class="mt-4">
+            <NuxtLink to="/maintenance" class="btn btn-primary me-2">
+              <i class="bi bi-list me-1"></i>목록으로
+            </NuxtLink>
+            <button class="btn btn-outline-secondary" @click="resetAll">
+              <i class="bi bi-plus-lg me-1"></i>추가 등록
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const router = useRouter()
+
+interface Project { projectId: number; projectName: string }
+interface ParsedTask {
+  rowIndex: number
+  requestDate: string | null
+  requestTitle: string
+  requestContent: string | null
+  requesterName: string | null
+  requesterContact: string | null
+  taskType: string
+  priority: string
+  resolutionContent: string | null
+  isDuplicate: boolean
+  selected: boolean
+}
+
+const projects = ref<Project[]>([])
+const projectId = ref('')
+const selectedFile = ref<File | null>(null)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const step = ref(1)
+const isUploading = ref(false)
+const isCreating = ref(false)
+
+const uploadResult = ref<any>(null)
+const parsedTasks = ref<ParsedTask[]>([])
+const createResult = ref<any>(null)
+const selectAll = ref(true)
+
+const selectedCount = computed(() => parsedTasks.value.filter(t => t.selected && !t.isDuplicate).length)
+const duplicateCount = computed(() => parsedTasks.value.filter(t => t.isDuplicate).length)
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) { router.push('/login'); return }
+  await loadProjects()
+})
+
+async function loadProjects() {
+  try {
+    const res = await $fetch<{ projects: Project[] }>('/api/project/list')
+    projects.value = res.projects || []
+  } catch (e) { console.error(e) }
+}
+
+function onFileChange(e: Event) {
+  const target = e.target as HTMLInputElement
+  selectedFile.value = target.files?.[0] || null
+}
+
+async function uploadFile() {
+  if (!projectId.value || !selectedFile.value) return
+  
+  isUploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', selectedFile.value)
+    formData.append('projectId', projectId.value)
+    
+    const res = await $fetch<any>('/api/maintenance/upload', {
+      method: 'POST',
+      body: formData
+    })
+    
+    uploadResult.value = res
+    parsedTasks.value = res.tasks.map((t: any) => ({ ...t, selected: !t.isDuplicate }))
+    step.value = 2
+  } catch (e: any) {
+    alert(e.data?.message || '파일 분석에 실패했습니다.')
+  } finally {
+    isUploading.value = false
+  }
+}
+
+function toggleSelectAll() {
+  parsedTasks.value.forEach(t => {
+    if (!t.isDuplicate) t.selected = selectAll.value
+  })
+}
+
+async function bulkCreate() {
+  if (selectedCount.value === 0) return
+  
+  isCreating.value = true
+  try {
+    const res = await $fetch<any>('/api/maintenance/bulk-create', {
+      method: 'POST',
+      body: {
+        projectId: Number(projectId.value),
+        batchId: uploadResult.value.batchId,
+        tasks: parsedTasks.value.filter(t => t.selected && !t.isDuplicate)
+      }
+    })
+    createResult.value = res
+    step.value = 3
+  } catch (e: any) {
+    alert(e.data?.message || '등록에 실패했습니다.')
+  } finally {
+    isCreating.value = false
+  }
+}
+
+function resetAll() {
+  step.value = 1
+  selectedFile.value = null
+  uploadResult.value = null
+  parsedTasks.value = []
+  createResult.value = null
+  if (fileInput.value) fileInput.value.value = ''
+}
+</script>

frontend/maintenance/write.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4 class="mb-0">
+          <i class="bi bi-tools me-2"></i>유지보수 업무 등록
+        </h4>
+        <NuxtLink to="/maintenance" class="btn btn-outline-secondary">
+          <i class="bi bi-arrow-left me-1"></i>목록
+        </NuxtLink>
+      </div>
+
+      <div class="card">
+        <div class="card-body">
+          <div class="row g-3">
+            <div class="col-md-4">
+              <label class="form-label">프로젝트</label>
+              <select class="form-select" v-model="form.projectId">
+                <option value="">선택 안함</option>
+                <option v-for="p in projects" :key="p.projectId" :value="p.projectId">
+                  {{ p.projectName }}
+                </option>
+              </select>
+            </div>
+            <div class="col-md-4">
+              <label class="form-label">요청일 <span class="text-danger">*</span></label>
+              <input type="date" class="form-control" v-model="form.requestDate" />
+            </div>
+            <div class="col-md-4">
+              <label class="form-label">담당자</label>
+              <select class="form-select" v-model="form.assigneeId">
+                <option value="">미배정</option>
+                <option v-for="e in employees" :key="e.employeeId" :value="e.employeeId">
+                  {{ e.employeeName }}
+                </option>
+              </select>
+            </div>
+            <div class="col-md-8">
+              <label class="form-label">제목 <span class="text-danger">*</span></label>
+              <input type="text" class="form-control" v-model="form.requestTitle" placeholder="업무 제목" />
+            </div>
+            <div class="col-md-2">
+              <label class="form-label">우선순위</label>
+              <select class="form-select" v-model="form.priority">
+                <option value="HIGH">높음</option>
+                <option value="MEDIUM">보통</option>
+                <option value="LOW">낮음</option>
+              </select>
+            </div>
+            <div class="col-md-2">
+              <label class="form-label">업무유형</label>
+              <select class="form-select" v-model="form.taskType">
+                <option value="GENERAL">일반</option>
+                <option value="BUG">버그수정</option>
+                <option value="ENHANCEMENT">기능개선</option>
+                <option value="DATA">데이터</option>
+              </select>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label">요청자명</label>
+              <input type="text" class="form-control" v-model="form.requesterName" placeholder="요청자 이름" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label">요청자 연락처</label>
+              <input type="text" class="form-control" v-model="form.requesterContact" placeholder="전화번호 또는 이메일" />
+            </div>
+            <div class="col-12">
+              <label class="form-label">내용</label>
+              <textarea class="form-control" v-model="form.requestContent" rows="6" placeholder="업무 내용을 입력하세요"></textarea>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer text-end">
+          <button class="btn btn-primary" @click="save" :disabled="isSaving">
+            <span v-if="isSaving">
+              <span class="spinner-border spinner-border-sm me-1"></span>등록 중...
+            </span>
+            <span v-else><i class="bi bi-check-lg me-1"></i>등록</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const router = useRouter()
+
+interface Project { projectId: number; projectName: string }
+interface Employee { employeeId: number; employeeName: string }
+
+const projects = ref<Project[]>([])
+const employees = ref<Employee[]>([])
+const isSaving = ref(false)
+
+const form = ref({
+  projectId: '',
+  requestDate: new Date().toISOString().split('T')[0],
+  requestTitle: '',
+  requestContent: '',
+  requesterName: '',
+  requesterContact: '',
+  taskType: 'GENERAL',
+  priority: 'MEDIUM',
+  assigneeId: ''
+})
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) {
+    router.push('/login')
+    return
+  }
+  await loadProjects()
+  await loadEmployees()
+})
+
+async function loadProjects() {
+  try {
+    const res = await $fetch<{ projects: Project[] }>('/api/project/list')
+    projects.value = res.projects || []
+  } catch (e) {
+    console.error('Load projects error:', e)
+  }
+}
+
+async function loadEmployees() {
+  try {
+    const res = await $fetch<{ employees: Employee[] }>('/api/employee/list')
+    employees.value = res.employees || []
+  } catch (e) {
+    console.error('Load employees error:', e)
+  }
+}
+
+async function save() {
+  if (!form.value.requestTitle) {
+    alert('제목을 입력하세요.')
+    return
+  }
+  if (!form.value.requestDate) {
+    alert('요청일을 선택하세요.')
+    return
+  }
+  
+  isSaving.value = true
+  try {
+    const res = await $fetch<{ taskId: number }>('/api/maintenance/create', {
+      method: 'POST',
+      body: {
+        projectId: form.value.projectId ? Number(form.value.projectId) : null,
+        requestDate: form.value.requestDate,
+        requestTitle: form.value.requestTitle,
+        requestContent: form.value.requestContent,
+        requesterName: form.value.requesterName,
+        requesterContact: form.value.requesterContact,
+        taskType: form.value.taskType,
+        priority: form.value.priority,
+        assigneeId: form.value.assigneeId ? Number(form.value.assigneeId) : null
+      }
+    })
+    router.push(`/maintenance/${res.taskId}`)
+  } catch (e: any) {
+    alert(e.data?.message || e.message || '등록에 실패했습니다.')
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>