SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
563b240fbfbf9dd668df5943847a3b3572654b15
sam-react-prod/claudedocs/board/[IMPL-2025-12-30] dynamic-board-creation.md
byeongcheolryu f8dbc6b2ae feat(WEB): 동적 게시판, 파트너 관리, 공지 팝업 모달 추가 
- 동적 게시판 시스템 구현 (/boards/[boardCode])
- 파트너 관리 페이지 및 폼 추가
- 공지 팝업 모달 컴포넌트 (NoticePopupModal)
  - localStorage 기반 1일간 숨김 기능
  - 테스트 페이지 (/test/popup)
- IntegratedListTemplateV2 개선
- 기타 버그 수정 및 타입 개선

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-30 21:56:01 +09:00

4.2 KiB
Raw Blame History

게시판 동적 생성 구현

작성일: 2025-12-30 상태: 완료

개요

게시판 관리에서 게시판을 등록하면 고객센터 메뉴에 자동으로 추가되고, 해당 게시판 페이지가 동적으로 렌더링되도록 구현합니다.

작업 목록

Phase 1: 게시판 관리 폼 수정

  • 1.1 대상 옵션에 "권한" 추가
    • 현재: 전사, 부서
    • 변경: 전사, 부서, 권한
    • 파일: src/components/board/BoardManagement/types.ts
  • 1.2 권한 선택 시 다중 선택 체크박스 표시
    • 파일: src/components/board/BoardManagement/BoardForm.tsx
    • MOCK_PERMISSIONS: 관리자, 매니저, 직원, 게스트
  • 1.3 API 요청 데이터에 권한 정보 포함
    • 파일: src/components/board/BoardManagement/actions.ts
    • transformFrontendToApi: permissions → extra_settings.permissions

Phase 2: 메뉴 즉시 갱신

  • 2.1 게시판 등록 성공 후 forceRefreshMenus() 호출
    • 파일: src/app/[locale]/(protected)/board/board-management/new/page.tsx
  • 2.2 게시판 수정 성공 후 forceRefreshMenus() 호출
    • 파일: src/app/[locale]/(protected)/board/board-management/[id]/edit/page.tsx

Phase 3: 동적 게시판 라우트 생성

  • 3.1 /customer-center/[boardCode]/page.tsx - 리스트
  • 3.2 /customer-center/[boardCode]/[postId]/page.tsx - 상세
  • 3.3 /customer-center/[boardCode]/create/page.tsx - 등록
  • 3.4 /customer-center/[boardCode]/[postId]/edit/page.tsx - 수정

Phase 4: 테스트 및 검증

  • 4.1 게시판 등록 → 메뉴 자동 추가 확인
  • 4.2 동적 게시판 리스트/상세/등록/수정 동작 확인
  • 4.3 권한별 접근 제어 확인

기술 명세

대상 타입

대상 옆 셀렉트박스 API 필드
전사 없음 target: 'all'
부서 부서 단일 선택 target: 'department', target_id: number
권한 권한 다중 선택 (체크박스) target: 'permission', permissions: string[]

게시판 타입

  • 기본 타입: 1:1문의 형태 (댓글 사용 가능)
  • 참고 페이지: /customer-center/qna

메뉴 갱신 플로우

게시판 등록 API 호출 (POST /api/v1/boards)
       ↓
백엔드: 게시판 생성 + 메뉴 테이블에 추가
       ↓
프론트: 등록 성공 응답 받음
       ↓
프론트: forceRefreshMenus() 호출
       ↓
사이드바 메뉴 즉시 업데이트

동적 게시판 URL 구조

/boards/[boardCode]           → 목록
/boards/[boardCode]/create    → 등록
/boards/[boardCode]/[postId]  → 상세
/boards/[boardCode]/[postId]/edit → 수정

URL 변경 이력 (2025-12-30)

  • 변경 전: /customer-center/[boardCode]
  • 변경 후: /boards/[boardCode]
  • 사유: 백엔드 메뉴 API path 규칙에 맞춤 (/boards/free, /boards/board_xxx)

관련 파일

수정된 파일

  • src/components/board/BoardManagement/types.ts - BoardTarget에 'permission' 추가
  • src/components/board/BoardManagement/BoardForm.tsx - 권한 다중 선택 UI 추가
  • src/components/board/BoardManagement/actions.ts - permissions 변환 로직
  • src/components/customer-center/shared/types.ts - SystemBoardCode 확장
  • src/app/[locale]/(protected)/board/board-management/new/page.tsx - forceRefreshMenus 호출
  • src/app/[locale]/(protected)/board/board-management/[id]/edit/page.tsx - forceRefreshMenus 호출

새로 생성된 파일

  • src/app/[locale]/(protected)/boards/[boardCode]/page.tsx - 동적 게시판 목록
  • src/app/[locale]/(protected)/boards/[boardCode]/[postId]/page.tsx - 동적 게시판 상세
  • src/app/[locale]/(protected)/boards/[boardCode]/create/page.tsx - 동적 게시판 등록
  • src/app/[locale]/(protected)/boards/[boardCode]/[postId]/edit/page.tsx - 동적 게시판 수정

진행 로그

날짜 작업 내용
2025-12-30 요구사항 정리 및 체크리스트 생성
2025-12-30 Phase 1~3 구현 완료
2025-12-30 URL 경로 변경: /customer-center/[boardCode] → /boards/[boardCode]
2025-12-30 API URL 불일치 해결: system-boards → boards (DynamicBoard/actions.ts 생성)