Skip to content

민원(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-viewboard/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 || author fallback.
  • 상태/담당 변경: 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.js complaint 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·통계 미구현.