# E2E 테스트 기반 프론트엔드 수정 계획서

**작성일**: 2026-01-27
**기준**: sam-hotfix 프로젝트 1월 27일 E2E 테스트 결과
**대상**: sam-react-prod (Next.js 프론트엔드)

---

## 📊 테스트 결과 요약

| 구분 | 개수 | 비율 |
|------|------|------|
| ✅ PASS | 44 | 93.6% |
| ⚠️ PARTIAL PASS | 3 | 6.4% |
| ❌ FAIL | 0 | 0% |

---

## 🔴 HIGH 우선순위 수정 항목

### 1. BUG-CARDTRANS-001: 카드내역 일괄변경 선택 항목 인식 안됨

**위치**: `/accounting/card-transactions`
**컴포넌트**: `src/components/accounting/CardTransactionInquiry/`
**심각도**: HIGH

**증상**:
- 테이블 전체선택 체크박스 클릭 → "6개 항목 선택됨" 표시
- 계정과목명 드롭다운에서 "경비" 선택
- 저장 버튼 클릭
- **예상**: "6개의 사용 유형을 경비(으)로 변경하시겠습니까?" 확인 다이얼로그
- **실제**: "항목 선택 필요 - 변경할 카드 사용 내역을 먼저 선택해주세요." 오류

**원인 분석**:
- 일괄변경 저장 시 `selectedItems` 상태가 올바르게 전달되지 않음
- 또는 저장 핸들러에서 선택 항목 체크 로직 오류

**수정 방향**:
```typescript
// 확인 필요한 부분
1. selectedItems 상태가 일괄변경 컴포넌트에 올바르게 전달되는지
2. 저장 핸들러에서 selectedItems.size > 0 체크 로직
3. UniversalListPage 또는 IntegratedListTemplateV2의 선택 상태 동기화
```

**예상 수정 파일**:
- `src/components/accounting/CardTransactionInquiry/index.tsx`
- `src/components/templates/UniversalListPage/index.tsx` (선택 상태 관련)

---

### 2. BUG-BOARD-001: 게시판 글쓰기 폼 미렌더링

**위치**: `/boards/{board_id}`
**컴포넌트**: 동적 게시판 페이지
**심각도**: HIGH

**증상**:
- 게시판 목록 페이지에서 "글쓰기" 버튼 클릭
- URL이 `?mode=new`로 변경됨
- **예상**: 게시글 작성 폼 표시 (제목, 내용 입력 필드)
- **실제**: 목록 화면 그대로 유지

**원인 분석**:
- `mode=new` URL 파라미터 감지 후 폼 렌더링 로직 누락
- 또는 조건부 렌더링 로직 오류

**수정 방향**:
```typescript
// 확인 필요한 부분
const searchParams = useSearchParams();
const mode = searchParams.get('mode');

// mode === 'new' 일 때 작성 폼 렌더링
if (mode === 'new') {
  return <BoardWriteForm />;
}
```

**예상 수정 파일**:
- `src/app/[locale]/(protected)/boards/[boardId]/page.tsx`
- 또는 해당 게시판 컴포넌트

---

### 3. BUG-BOARD-002: 게시판 수정 폼 미렌더링

**위치**: `/boards/{board_id}/{post_id}`
**컴포넌트**: 게시판 상세 페이지
**심각도**: HIGH

**증상**:
- 게시글 상세 페이지에서 "수정" 버튼 클릭
- URL이 `?mode=edit`로 변경됨
- **예상**: 게시글 편집 폼 표시 (기존 내용 로드)
- **실제**: 상세보기 화면 그대로 유지

**원인 분석**:
- `mode=edit` URL 파라미터 감지 후 편집 폼 렌더링 로직 누락
- 또는 조건부 렌더링 로직 오류

**수정 방향**:
```typescript
// 확인 필요한 부분
const mode = searchParams.get('mode');

// mode === 'edit' 일 때 편집 폼 렌더링
if (mode === 'edit') {
  return <BoardEditForm postData={postData} />;
}
```

**예상 수정 파일**:
- `src/app/[locale]/(protected)/boards/[boardId]/[postId]/page.tsx`
- 또는 해당 게시판 상세 컴포넌트

---

## 🟡 MEDIUM 우선순위 수정 항목

### 4. BUG-ATTSETTING-001: 자동 출퇴근 설정 저장 안됨

**위치**: `/settings/attendance-settings`
**컴포넌트**: `src/components/settings/AttendanceSettings/` (추정)
**심각도**: MEDIUM

**증상**:
- GPS 출퇴근 활성화 → 부서 선택 → 반경 300M 설정
- 자동 출퇴근 활성화
- 저장 버튼 클릭
- 페이지 새로고침
- **예상**: 자동 출퇴근 체크박스 ON 상태 유지
- **실제**: 자동 출퇴근 체크박스 OFF로 초기화됨
- **참고**: GPS 출퇴근 설정(체크박스, 반경)은 정상 저장됨

**원인 분석**:
- 자동 출퇴근 설정값이 API 호출에 포함되지 않음
- 또는 백엔드에서 해당 필드 저장 누락

**수정 방향**:
```typescript
// 저장 API 호출 시 payload 확인
const savePayload = {
  gpsEnabled: true,
  gpsRadius: 300,
  autoPunchEnabled: true, // ← 이 값이 포함되는지 확인
  ...
};
```

**예상 수정 파일**:
- `src/components/settings/AttendanceSettings/index.tsx`
- `src/components/settings/AttendanceSettings/actions.ts`

---

## 🟢 LOW 우선순위 수정 항목

### 5. BUG-ATTSETTING-002: 저장 완료 토스트 미표시

**위치**: `/settings/attendance-settings`
**심각도**: LOW

**증상**:
- 저장 버튼 클릭 시 "출퇴근 설정이 저장되었습니다." 토스트 미표시
- 콘솔 에러 없음, URL 유지됨

**수정 방향**:
```typescript
// 저장 성공 후 토스트 추가
import { toast } from 'sonner';

const handleSave = async () => {
  const result = await saveSettings(payload);
  if (result.success) {
    toast.success('출퇴근 설정이 저장되었습니다.');
  }
};
```

---

## 📋 작업 체크리스트

### Phase 1: HIGH 우선순위 (즉시 수정) ✅ 완료

- [x] **카드내역 일괄변경 버그 수정** (2026-01-27 수정 완료)
  - [x] CardTransactionInquiry 컴포넌트 분석
  - [x] selectedItems 상태 흐름 추적
  - [x] UniversalListPage에 onSelectionChange 콜백 추가
  - [x] 테스트 검증

- [x] **게시판 글쓰기 폼 렌더링 수정** (2026-01-27 수정 완료)
  - [x] 동적 게시판 페이지 구조 분석
  - [x] mode=new 파라미터 처리 로직 추가
  - [x] DynamicBoardCreateForm 컴포넌트 분리 및 연결
  - [x] 테스트 검증

- [x] **게시판 수정 폼 렌더링 수정** (2026-01-27 수정 완료)
  - [x] 게시판 상세 페이지 구조 분석
  - [x] mode=edit 파라미터 처리 로직 추가
  - [x] DynamicBoardEditForm 컴포넌트 분리 및 연결
  - [x] 테스트 검증

### Phase 2: MEDIUM 우선순위 ✅ 완료

- [x] **자동 출퇴근 설정 저장 버그 수정** (2026-01-27 수정 완료)
  - [x] 저장 API payload 분석
  - [x] 백엔드 DB에 use_auto 컬럼 추가 (마이그레이션)
  - [x] 백엔드 Model/Request 수정
  - [x] 프론트엔드 API 연동 수정
  - [x] 테스트 검증

### Phase 3: LOW 우선순위 ✅ 완료

- [x] **저장 완료 토스트 추가** (이미 구현되어 있음)
  - [x] 저장 핸들러에 toast.success 이미 존재 (index.tsx:142)

---

## 📌 추가 확인 필요 사항

### 백엔드 이슈 (프론트 수정 범위 외)

| 이슈 | 위치 | 상태 |
|------|------|------|
| reference-box 500 에러 | `/api/v1/boards/reference` | 백엔드 확인 필요 |

### 기획 변경 사항

| 항목 | 변경 내용 | 조치 |
|------|----------|------|
| payment-history | 구독관리 페이지로 통합됨 | 테스트 시나리오 삭제/수정 |

---

## 🔍 참고: 이미 수정된 항목

### bank-transactions key 중복 오류 (2026-01-27 수정 완료)

**수정 내용**: 입금/출금 통합 목록에서 React key 중복 오류
**수정 파일**: `src/components/accounting/BankTransactionInquiry/actions.ts`
**수정 방법**: ID 생성 시 거래 유형을 접두어로 추가
```typescript
// 기존: id: String(item.id)
// 수정: id: `${item.type}-${item.id}`
```

### BUG-CARDTRANS-001: 카드내역 일괄변경 선택 인식 (2026-01-27 수정 완료)

**수정 내용**: UniversalListPage에서 선택 상태 변경 시 외부 콜백 호출
**수정 파일**:
- `src/components/templates/UniversalListPage/types.ts` - onSelectionChange 타입 추가
- `src/components/templates/UniversalListPage/index.tsx` - useEffect로 콜백 호출 추가

### BUG-BOARD-001/002: 게시판 글쓰기/수정 폼 미렌더링 (2026-01-27 수정 완료)

**수정 내용**: mode=new/edit URL 파라미터 처리 로직 추가
**신규 컴포넌트**:
- `src/components/board/DynamicBoard/DynamicBoardCreateForm.tsx` - 글쓰기 폼
- `src/components/board/DynamicBoard/DynamicBoardEditForm.tsx` - 수정 폼

**수정 파일**:
- `src/app/[locale]/(protected)/boards/[boardCode]/page.tsx` - mode=new 처리
- `src/app/[locale]/(protected)/boards/[boardCode]/[postId]/page.tsx` - mode=edit 처리
- `src/app/[locale]/(protected)/boards/[boardCode]/create/page.tsx` - 컴포넌트 재사용
- `src/app/[locale]/(protected)/boards/[boardCode]/[postId]/edit/page.tsx` - 컴포넌트 재사용

### BUG-ATTSETTING-001: 자동 출퇴근 설정 저장 안됨 (2026-01-27 수정 완료)

**원인**: 백엔드 DB에 use_auto 컬럼이 없었음

**백엔드 수정 (sam-api)**:
- `database/migrations/2026_01_27_144110_add_use_auto_to_attendance_settings.php` - 마이그레이션 생성
- `app/Models/Tenants/AttendanceSetting.php` - fillable, casts에 use_auto 추가
- `app/Http/Requests/V1/WorkSetting/UpdateAttendanceSettingRequest.php` - validation 규칙 추가

**프론트엔드 수정 (sam-react-prod)**:
- `src/components/settings/AttendanceSettingsManagement/actions.ts` - API 타입 및 transform 함수 수정
- `src/components/settings/AttendanceSettingsManagement/index.tsx` - 로드/저장 시 useAuto 필드 연동

---

**작성자**: Claude Code
**상태**: 전체 완료 ✅
**백엔드 배포 필요**: sam-api 프로젝트에서 `php artisan migrate` 실행 필요