다크모드
민원(complaint) 게시판 — FE 메인테이너 매뉴얼
독자: FE 메인테이너/AI. 공유 board 코어 · config-driven 변형 · ERP 통합 배선 · 확장 포인트. 정본 spec:
docs/superpowers/specs/2026-06-27-complaint-member-integration.md. 2026-06-27 통합 배선.
1. 라우트·진입
- 라우트:
/complaint(랜딩) ·/complaint/app-view→board/general(ListView) ·board/general/:id(DetailView).router/index.js. - 메뉴: 커뮤니티 그룹 "민원 접수"(
components/complaint/AppAsideOrg.vue).
2. 컴포넌트 트리 (공유 board — config-driven)
ListView → BoardListOrg(:boardKey="complaint")
DetailView → BoardDetailOrg(:boardKey="complaint")
둘 다: useBoard(boardKey) ← boardApi(seam) ← boardFixtures
config = getBoardConfig(boardKey) ← 표현 분기(non-text: tag클래스·flag)- notice·complaint가 같은 컴포넌트 공유. 차이는 전부
config플래그 + i18n(config.i18nBase). - complaint 전용 config:
hasStatus·hasAssignee·residentLink·residentAccountBase·statuses/statusTag·assignees. notice는 false-y → 동일 컴포넌트가 깔끔히 분기(회귀 0).
3. 데이터 흐름
useBoard(boardKey) → boardApi.{listPosts,getPost,setStatus,setAssignee,...}
boardApi(complaint): complaintStore(영속) + resolvePost(memberCode/unitCode → demoSeed 실명·라벨)- post 표시 식별 = SSOT 파생:
post.residentName(member.name)·post.unitLabel(unit.name). 뷰는residentName || authorfallback. - 상태/담당 변경:
changeStatus/changeAssignee→ useBoard.setStatus/setAssignee → boardApi store mutate(optimistic local update). 목록 재방문 시 반영.
4. ERP 통합 포인트 (★)
- 교차링크(BoardDetailOrg):
v-if="config.residentLink && post.unitCode"→RouterLink :to="config.residentAccountBase + '/' + post.unitCode"(account 허브). config-gated라 notice 무영향. - 담당자(BoardDetailOrg/ListOrg):
v-if="config.hasAssignee". Select(config.assignees)·컬럼. - resolve는 seam(api)에서 — 공유 board 컴포넌트는 generic 유지(complaint 특화 로직 누수 0).
5. 확장 포인트
- 새 board 도메인:
config.js에 key 추가 + fixtures + (필요시) flag. 컴포넌트 무변경. - 민원 FK 멤버 매핑:
fixtures.jscomplaint posts의 memberCode/unitCode를 demoSeed 멤버/유닛으로. 작성자 실명·계정링크 자동. - 실 BE:
api.js만 fetch 교체(seam). store→persist. - 입주민 제출 화면·알림·SLA·통계 = 후속.
6. 테스트 위치
lib/board/__tests__/complaintIntegration.spec.js— T1 resolve·T2 FK유효·T3 영속·T3b 리셋·T4 notice격리·T5 교차링크.components/board/__tests__/BoardComplaintRender.spec.js— 실명/담당 컬럼 렌더·notice 격리(config-gating).- 브라우저 검증: 컴포넌트 mount 렌더로 대체(브라우저 미연결).
7. 알려진 한계
- 상태/담당 변경 데모 영속(in-memory, 새로고침 초기화). 코호트 작성자명(세대0003 등) 평이 — 빌링 무편집 우선(후속 명명예시 확장). 입주민 제출·알림·SLA·통계 미구현.