fix: 프론트엔드 품질 개선 (UX 결함, 인증 헤더 중앙화, dead code 정리)

[dongmin0204]

개요

코드베이스 전반 점검 결과, 실사용에 영향을 주는 UX 결함과 유지보수성을 떨어뜨리는 구조적 문제를 정리합니다.

---

수정 항목 (중요도 순)

1. window.prompt() → inline UI 전환 (UX 결함)

현상: 관리자 승인/거절 시 window.prompt()로 사유를 입력받고 있음 (10곳)

• RequestManagementPage.jsx — 6곳
• ChangeRequestManagementPage.jsx — 4곳

문제점:

• 모바일 브라우저에서 UX 깨짐
• ESC 키로 실수 취소 시 입력 유실
• 관리자가 매일 사용하는 핵심 기능

방향: 각 카드/모달 내 inline textarea + 확인/취소 버튼으로 교체

---

2. Auth 헤더 수동 주입 중앙화

현상: requestService.js, authService.js 등에서 매 API 호출마다 수동으로 Authorization: Bearer ${token} 삽입 (25곳)

문제점:

• 새 API 함수 작성 시 헤더 누락하면 401 발생
• 동일 보일러플레이트 반복

방향: api.js의 ApiClient.request()에서 localStorage의 accessToken이 있으면 자동 삽입. 개별 서비스에서는 헤더 제거.

---

3. Dead code 정리

파일	상태
pages/dashboard/AdminDashboard.jsx	100% mock 데이터, 아무 데서도 import/라우팅 없음
pages/dashboard/UserDashboard.jsx	라우팅에 없음 (API 연동은 돼 있으나 미사용)
contexts/AuthContext.jsx → signup()	mock 구현 (setTimeout 1000ms), 실제 회원가입은 authService.register() 사용

---

4. console.log 제거 (services/)

api.js에서 모든 요청/응답을 콘솔 출력 중 (18건). 프로덕션 빌드에서 불필요한 노이즈.

---

5. 스피너 색상 디자인 시스템 통일

border-blue-600 → border-brand-500 (3곳):

• components/Auth/ProtectedRoute.jsx:12
• pages/dashboard/AdminDashboard.jsx:124
• pages/admin/ImageManagementPage.jsx:193

---

수정하지 않는 항목 (YAGNI)

• App.jsx 라우트 반복 → 추상화하면 가독성 저하
• "개발 중입니다" placeholder 라우트 → 삭제 시 Sidebar 링크 404
• Sidebar.jsx USER/ADMIN 분기 중복 → 동작이 다름 (disabled vs active)
• requestMapper.js 수동 매핑 → 필드 수 적어 generic mapper 과잉
• SessionEventManager 클래스 → 리스너 1개, EventTarget 전환 불필요