[CRM 개발일지 #7] 상담 신청 기능 구현 (완료 페이지, 공통코드 연동, Validation)

🚀 TODAY WORK

백엔드

• 상담 신청 완료 페이지(/consult/complete) 이동 구조 적용
• 상담 희망 시간(CONSULT_TIME) 공통코드(code_mng) 추가
• 상담 신청 요청 DTO(ConsultApplyRequestDto)에 preferredTime 필드 추가
• 상담 희망 시간 Spring Validation(@Valid, @NotBlank) 적용
• activity_logs 테이블 preferred_time 컬럼 추가
• ActivityLog 엔티티 preferredTime 필드 추가
• 상담 신청 시 ActivityLog에 상담 희망 시간 저장 로직 구현
• 상담 희망 시간을 고객 정보가 아닌 상담 이력(ActivityLog)으로 관리하도록 구조 개선
• 상담 신청 API 및 DB 저장 테스트 완료

프론트엔드

• 상담 신청 완료 페이지(/consult/complete) 구현
• 상담 신청 성공 시 완료 페이지 이동 처리
• 상담 희망 시간 Select UI 추가
• 공통코드(Store) 기반 CONSULT_TIME Select 연동
• 상담 희망 시간 필수 입력 Validation 추가
• 상담 신청 완료 UX 개선(성공 메시지 → 완료 페이지 이동)
• 상담 신청 기능 통합 테스트 완료

---

🚨 TODAY ISSUE

상담 희망 시간 공통코드가 화면에 표시되지 않는 문제

상담 희망 시간을 공통코드(CONSULT_TIME)로 관리하도록 변경했지만,

Select에는 "선택하세요."만 표시되고 코드 목록이 출력되지 않는 문제가 발생했다.

 

기존 구현

상담 희망 시간 → 하드코딩 Option 사용

 

변경 구조

상담 희망 시간
        ↓
COMMON_CODE(CONSULT_TIME)
        ↓
Zustand Store
        ↓
Select 자동 생성

 

---

1-1) 공통코드(Store) 기반 상담 희망 시간 구성

하드코딩을 제거하고 공통코드를 사용하도록 변경했다.

<select
    name="preferredTime"
    value={form.preferredTime}
    onChange={handleChange}
>
    <option value="">선택하세요.</option>

    {codes.CONSULT_TIME?.map((time) => (
        <option
            key={time.code}
            value={time.code}
        >
            {time.name}
        </option>
    ))}
</select>

 

 

1-2) 상담 신청 완료 페이지 구현

상담 신청 성공 후 완료 페이지로 이동하도록 변경했다.

 

기존 구조

상담 신청
→ 성공 메시지 출력

 

변경 구조

상담 신청
        ↓
API 성공
        ↓
/consult/complete 이동

await applyConsult(form);

router.push("/consult/complete");

---

1-3) 상담 희망 시간 Validation 적용

프론트와 백엔드 모두 필수값으로 검증하도록 수정했다.

Frontend

if (!form.preferredTime) {
    return "상담 희망 시간대를 선택하세요.";
}

Backend

@NotBlank(message = "상담 희망 시간을 선택하세요.")
private String preferredTime;

 

Controller에서도 @Valid를 적용하여 API 요청 시 Validation이 동작하도록 구성했다.

@PostMapping("/apply")
public ResponseEntity<Void> apply(
        @Valid @RequestBody ConsultApplyRequestDto request
) {
    customerService.applyConsult(request);

    return ResponseEntity.ok().build();
}

---

1-4) ActivityLog 상담 희망 시간 저장

상담 희망 시간은 고객의 고정 정보가 아니라 상담 신청 당시의 정보이므로

Customer가 아닌 ActivityLog에 저장하도록 설계를 변경했다.

activityLogService.createReceivedLog(
        customer,
        request.getPreferredTime(),
        request.getContent()
);

---

공통코드 미출력 원인

초기에는 DB 또는 API 문제로 판단했지만,

확인 결과 zustand persist의 LocalStorage에 저장되어 있던 기존 공통코드가 먼저 사용되고 있었다.

기존 저장된 Store에는 CONSULT_TIME이 없었기 때문에 화면에서도 출력되지 않았다.

 

해결

common-code-storage(LocalStorage) 삭제
        ↓
공통코드 재조회
        ↓
CONSULT_TIME 정상 로드
        ↓
Select 정상 출력

---

✨ TODAY RESULT

상담 신청 완료 페이지

• /consult/complete 페이지 구현
• 상담 신청 성공 시 자동 이동
• UX 개선 완료

---

상담 희망 시간

• CONSULT_TIME 공통코드 연동
• 공통코드 Select 정상 출력
• 필수 입력 Validation 적용
• Spring Validation 적용

---

ActivityLog 저장

• 상담 희망 시간(preferred_time) 저장
• 상담 내용(Content) 저장
• 상담 접수 이력 자동 생성 확인

---

기능 테스트

• 공통코드 정상 조회 확인
• 상담 희망 시간 Select 정상 출력
• 프론트 Validation 정상 동작
• 백엔드 Validation 정상 동작
• activity_logs.preferred_time 정상 저장 확인
• 상담 신청 완료 페이지 이동 정상 동작

---

🔥 NEXT TODO

• 관리자 고객 관리 화면 상담 희망 시간 표시 여부 검토
• 상담 이력(Activity Log) 조회 화면 상담 희망 시간 표시
• Global Exception Handler 적용
• Validation 응답 메시지 공통 처리
• 공통 Form 컴포넌트 리팩토링 검토
• 공통 Select / Radio 컴포넌트 분리 검토