[CRM 개발일지 #6] 상담 신청 기능 구현 (고객 생성, ActivityLog 자동 저장)

🚀 TODAY WORK

백엔드

• 상담 신청 API(POST /consult/apply) 구현
• 상담 신청 요청 DTO(ConsultApplyRequestDto) 생성
• CustomerService 상담 신청 비즈니스 로직 구현
• 전화번호 + 생년월일 기준 기존 고객 조회 로직 구현
• 신규 고객(Customer) 자동 생성 로직 구현
• 상담 신청 시 ActivityLog 자동 생성 기능 구현
• ActivityLog RECEIVED 상태 저장 처리
• 상담 신청 API 테스트 및 DB 저장 확인

프론트엔드

• 상담 신청 페이지(/consult/apply) 생성
• 상담 전용 Layout 구성 및 공통코드(CodeInitializer) 적용
• 상담 신청 API 연동
• 상담 신청 Form 상태 관리 구현
• 입력값 유효성 검증 추가
• 공통코드(Store) 기반 관심 과정 Select 구현
• 공통코드(Store) 기반 유입 경로 Radio 구현
• 상담 신청 페이지 UI 및 CSS Module 구성
• 상담 신청 성공/실패 메시지 처리
• 상담 신청 기능 통합 테스트 완료

---

🚨 TODAY ISSUE

상담 신청 프로세스 구현

고객이 상담 신청을 하면 기존 고객인지 확인한 뒤,

신규 고객 생성 및 상담 이력을 자동으로 생성하는 구조가 필요했다.

 

기존 구조

상담 신청
→ Customer 저장

변경 구조

상담 신청
        ↓
전화번호 + 생년월일 기준 고객 조회
        ↓
기존 고객이면 재사용
신규 고객이면 Customer 생성
        ↓
ActivityLog 자동 생성(RECEIVED)

1-1) Controller - 상담 신청 API

상담 신청 요청을 받아 CustomerService로 전달하도록 구현했다.

@PostMapping("/apply")
public ResponseEntity<Void> apply(
        @RequestBody ConsultApplyRequestDto request
) {

    customerService.applyConsult(request);

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

---

1-2) Service - 기존 고객 조회 및 신규 고객 생성

전화번호와 생년월일을 기준으로 기존 고객을 조회하고,

없으면 신규 고객을 생성하도록 구현했다.

Customer customer =
        customerRepository
                .findByPhoneAndBirthDate(
                        request.getPhone(),
                        request.getBirthDate()
                )
                .orElseGet(() -> {

                    Customer newCustomer = Customer.builder()
                            .name(request.getName())
                            .phone(request.getPhone())
                            .birthDate(request.getBirthDate())
                            .email(request.getEmail())
                            .interestCourse(request.getInterestCourse())
                            .leadSource(request.getLeadSource())
                            .status("NEW")
                            .build();

                    return customerRepository.save(newCustomer);
                });

---

1-3) ActivityLog 자동 생성

상담 신청 완료 후 ActivityLog를 자동 생성하여

최초 상담 접수 이력을 남기도록 구현했다.

ActivityLog activityLog = ActivityLog.builder()
        .customer(customer)
        .createdBy("SYSTEM")
        .activityResult("RECEIVED")
        .content(content)
        .build();

activityLogRepository.save(activityLog);

---

공통코드(Store) 기반 화면 구성

상담 신청 페이지에서도 관리자/상담사 화면과 동일한 방식으로

공통코드를 활용하도록 구성했다.

 

초기에는 Input으로 구현했지만,

설계에 맞게 Select와 Radio를 공통코드 기반으로 변경했다.

const { codes, hydrated } = useCodeStore();

{codes.INTEREST_COURSE?.map((course) => (
    <option
        key={course.code}
        value={course.code}
    >
        {course.name}
    </option>
))}

유입 경로 역시 동일하게 공통코드를 사용하도록 변경했다.

{codes.LEAD_SOURCE?.map((source) => (
    <label key={source.code}>
        <input
            type="radio"
            name="leadSource"
            value={source.code}
            checked={form.leadSource === source.code}
            onChange={handleChange}
        />

        {source.name}
    </label>
))}

---

Spring Security 접근 권한

상담 신청은 비회원도 사용할 수 있는 기능이므로

Spring Security에서 /consult/** 경로를 허용하도록 수정하여 403 Forbidden 오류를 해결했다.

---

✨ TODAY RESULT

상담 신청 API

• 기존 고객 조회
• 신규 고객 자동 생성
• ActivityLog 자동 생성
• 상담 신청 정상 처리

customerService.applyConsult(request);

---

Customer 저장

• 이름
• 생년월일
• 연락처
• 이메일
• 관심 과정
• 유입 경로
• 상태(NEW)

정상 저장 확인.

---

ActivityLog 저장

• createdBy = SYSTEM (기본값)
• activityResult = RECEIVED (상담 대기)
• 초기 상담 내용(Content) 저장

자동 생성 확인

---

상담 신청 페이지

• 기본 정보 영역
• 상담 정보 영역
• 유입 경로 영역
• 공통코드 Select
• 공통코드 Radio
• 입력값 검증
• 성공/실패 메시지

구현 완료.

---

🔥 NEXT TODO

• 상담 신청 완료 페이지(/consult/complete) 구현
• 상담 신청 완료 후 페이지 이동 처리
• DTO Validation(@Valid, @NotBlank 등) 적용
• 상담 희망 시간 저장 여부 검토
• 상담 신청 UI 개선
• 공통 Form 컴포넌트 리팩토링 검토
• 공통 Select / Radio 컴포넌트 분리 검토