ERP-node/docs/ycshin-node/CTI[계획]-카테고리-깊이구분.md

[계획서] 카테고리 드롭다운 - 3단계 깊이 구분 표시

관련 문서: 맥락노트 | 체크리스트

상태: 완료 (2026-03-11)

개요

카테고리 타입(source="category") 드롭다운에서 3단계 계층(대분류 > 중분류 > 소분류)의 들여쓰기가 시각적으로 구분되지 않는 문제를 수정합니다.

---

변경 전 동작

• category_values 테이블은 parent_value_id, depth 컬럼으로 3단계 계층 구조를 지원
• 백엔드 buildHierarchy()가 트리 구조를 정상적으로 반환
• 프론트엔드 flattenTree()가 트리를 평탄화하면서 일반 ASCII 공백(" ") 으로 들여쓰기 생성
• HTML이 연속 공백을 하나로 축소(collapse)하여 depth 1과 depth 2가 동일하게 렌더링됨

변경 전 코드 (flattenTree)

const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";

변경 전 렌더링 결과

신예철
└ 신2
└ 신22    ← depth 2인데 depth 1과 구분 불가
└ 신3
└ 신4

---

변경 후 동작

일반 공백을 Non-Breaking Space(\u00A0)로 교체

• \u00A0는 HTML에서 축소되지 않으므로 depth별 들여쓰기가 정확히 유지됨
• depth당 3칸(\u00A0\u00A0\u00A0)으로 시각적 계층 구분을 명확히 함
• 백엔드 변경 없음 (트리 구조는 이미 정상)

변경 후 코드 (flattenTree)

const prefix = depth > 0 ? "\u00A0\u00A0\u00A0".repeat(depth) + "└ " : "";

---

시각적 예시

depth	prefix	드롭다운 표시
0 (대분류)	""	신예철
1 (중분류)	"\u00A0\u00A0\u00A0└ "	···└ 신2
2 (소분류)	"\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0└ "	······└ 신22

변경 전후 비교

변경 전:                    변경 후:
신예철                      신예철
└ 신2                          └ 신2
└ 신22  ← 구분 불가                └ 신22  ← 명확히 구분
└ 신3                          └ 신3
└ 신4                          └ 신4

---

아키텍처

flowchart TD
    A[category_values 테이블] -->|parent_value_id, depth| B[백엔드 buildHierarchy]
    B -->|트리 JSON 응답| C[프론트엔드 API 호출]
    C --> D[flattenTree 함수]
    D -->|"depth별 \u00A0 prefix 생성"| E[SelectOption 배열]
    E --> F{렌더링 모드}
    F -->|비검색| G[SelectItem - label 표시]
    F -->|검색| H[CommandItem - displayLabel 표시]

    style D fill:#f96,stroke:#333,color:#000

변경 지점: flattenTree 함수 내 prefix 생성 로직 (주황색 표시)

---

변경 대상 파일

파일 경로	변경 내용	변경 규모
frontend/components/v2/V2Select.tsx (904행)	flattenTree prefix를 \u00A0 기반으로 변경	1줄
frontend/components/unified/UnifiedSelect.tsx (632행)	동일한 flattenTree prefix 변경	1줄

---

영향받는 기존 로직

V2Select.tsx의 resolvedValue(979행)에서 prefix를 제거하는 정규식:

const cleanLabel = o.label.replace(/^[\s└]+/, "").trim();

• JavaScript \s는 \u00A0를 포함하므로 기존 정규식이 정상 동작함
• 추가 수정 불필요

---

설계 원칙

• 백엔드 변경 없이 프론트엔드 표시 로직만 수정
• flattenTree 공통 함수 수정이므로 카테고리 타입 드롭다운 전체에 자동 적용
• DB 저장값(valueCode)에는 영향 없음 — label만 변경
• 기존 prefix strip 정규식(/^[\s└]+/)과 호환 유지
• V2Select와 UnifiedSelect 두 곳의 동일 패턴을 일관되게 수정