[CRM 개발일지 #3] 관리자 고객 관리 API 연동 작업

🚀 TODAY WORK

백엔드

• Customer 엔티티 생성 및 JPA 연관관계 설정
• CustomerRepository 생성
• CustomerService 구현
• CustomerResponseDto 분리
• 관리자 고객 목록 조회 API 구현
• 담당 상담사(User) 연관관계 연결 (@ManyToOne)
• 공통 응답(ApiResponse) 구조 연동

---

프론트엔드

• /admin/customers 고객 관리 페이지 생성
• 고객 목록 API 연동
• 고객 테이블 UI 구현
• 공통 코드(getCodeName) 연동
• zustand 기반 공통 코드 preload 구조 적용
• hydrated 상태 처리 구조 이해 및 적용
• 관리자 레이아웃 사이드 메뉴 구성
• 관리자 페이지 내부 라우팅 연결
  • /admin
  • /admin/users
  • /admin/customers

---

🚨 TODAY ISSUE

1. TypeScript(useState<Customer\[\]>) 오류 발생

초기에는 page.jsx 파일에서 TypeScript 문법을 사용하면서 오류가 발생했다.

const [customers, setCustomers] = useState<Customer[]>([]);

원인은 JSX 파일에서는 제네릭 타입 문법을 사용할 수 없기 때문이었다.

page.jsx → page.tsx

---

2. camelCase / snake\_case 불일치 문제

백엔드 DTO는 camelCase로 내려가는데,
프론트에서는 snake_case로 접근하고 있어서 데이터가 출력되지 않았다.

 

문제 코드

customer.customer_id
customer.interest_course

해결 코드

customer.customerId
customer.interestCourse

JPA + Jackson 환경에서는 camelCase 기준으로 통일하는 것이 중요하다는 점을 다시 확인했다.

---

3. 공통 코드 초기 렌더링 문제

zustand persist 복원 전에는 codes = {} 상태라
초기 렌더 시 undefined가 출력될 수 있었다.

원인

persist.rehydrate() 이전 상태

해결

if (!hydrated) {
  return <div>공통코드 로딩중...</div>;
}

구조를 추가해 안정적으로 공통 코드가 로드된 이후 렌더링하도록 수정했다.

---

🧠 핵심 포인트

Customer ↔ User 연관관계 설정

@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "assigned_counselor_id")
private User counselor;

CRM 구조에서 고객과 상담사 관계는 핵심 도메인이므로
초기부터 연관관계를 잡아두는 방향으로 설계했다.

---

DTO 분리 이유: Entity를 직접 반환하지 않고 DTO를 사용하는 이유를 다시 정리했다.

• 비밀번호 등 민감 정보 노출 방지
• 필요한 데이터만 반환
• 프론트 구조 명확화

---

공통 코드 전역 관리 구조

CodeInitializer
↓
zustand persist
↓
codes preload
↓
getCodeName()

실무 ERP / CRM 스타일의 공통 코드 관리 구조를 적용했다.

---

📌 오늘 구현 완료 화면

• 관리자 대시보드
• 사용자 관리
• 고객 관리
• 관리자 사이드 메뉴

---

🔥 NEXT TODO

• 상담사 대시보드 (/consultant/dashboard) 화면 생성
• 상담사 고객 목록 (/consultant/customers) 화면 생성
• 상담사 고객 목록 API 연결
• 상담사 고객 테이블 출력
• 상담사 권한 접근 구조 확인
• 상담사 layout/sidebar 구조 검토

---

💬 한 줄 회고

오늘은 CRM 관리자 구조가 본격적으로 실무형 형태를 갖추기 시작한 날이었다.
특히 공통 코드 관리와 JPA 연관관계 설계 흐름을 실제 프로젝트에 적용해본 것이 큰 수확이었다.