이 페이지에서
1. 애플리케이션 역할
apps/raid-ui는 레이드 운영 화면용 React + Vite 프런트엔드 앱임.공대원 목록, 공대원 관리, 공대 구인 알림 화면을 제공함.
공대원 목록과 관리는 PC/FHD 우선 단일 작업형 화면이며, 공대 구인 알림은 모바일 우선 단일 열 화면임.
스타일은 shared-ui 공통 자산만 사용함.
2. 런타임 구성
번들러는 Vite 6 계열을 사용함.
React + TypeScript strict 기준으로 구현함.
개발 서버 기본 포트는 15009임.
빌드 산출물은 apps/raid-ui/dist에 생성됨.
운영에서는 raid-api가 이 산출물을 /raid-ui 경로로 직접 서빙함.
3. 엔트리와 화면 분기
메인 엔트리는 src/entries/raid.tsx임.
루트 마운트 지점은 raid-ui-root임.
메인 화면 컴포넌트는 src/pages/RaidPage.tsx임.
서버가 주입한 page_props.view 값을 기준으로 members, manage, recruitment 화면을 분기함.
초기 props에는 현재 사용자, 레이드/난이도/직업/서버/역할/근원/공대원 구분 코드 목록이 포함됨.
공대 구인 알림은 BrowserRouter의 /raid/recruitment SPA 경로로 진입함. 서버 렌더링 진입 경로와 Vite 개발 서버의 /raid-ui/raid/recruitment 경로는 모두 이 화면으로 연결됨.
SPA 내부 이동은 junkbox:spa-navigate, SpaRouteTransition, useSpaRouteSettling 공통 계약을 사용함.
4. 화면 구조
4.1 공대원 목록 화면
상단 제어 영역은 레이드, 난이도, 구분, 조회 상태, 작업 그룹을 한 행에 배치함.
구분은 추적, 공대원 멀티 체크를 하나의 선택 영역으로 제공함. 나는 체크 항목으로 노출하지 않으며 서버가 항상 포함함. 초기값은 추적과 공대원을 모두 선택한 상태임.조회 상태 그룹에는 총 n건과 선택 레이드·난이도의 최근 업데이트 시각을 배치함.액션 버튼은 wow-check, 조회, 점수 갱신, 저장을 사용함.
그리드는 풀 로딩형 Tabulator를 사용함.
구분 컬럼은 캐릭터명 바로 앞에 배치하며, 공통코드 정렬 순서인 나, 추적, 공대원 순으로 행을 표시함.최근 업데이트는 목록 전체 갱신 상태이므로 행별 컬럼으로 표시하지 않고 상단 조회 상태에만 표시함.캐릭터명 셀은 새 탭으로 Warcraft Logs 캐릭터 페이지를 여는 링크임. URL은 https://ko.warcraftlogs.com/character/kr/{server_slug}/{character_name}?difficulty={difficulty_code}&zone={raid_code}이며, server_slug는 서버 공통코드 SERVER.attribute02 값임.역할, 근/원, 참여 여부, 정렬 순서를 인라인 편집함.
보스 점수 컬럼은 선택된 레이드와 난이도 기준으로 동적으로 구성됨.
점수 셀은 기본적으로 숫자만 색상으로 표시하며, 미확정 점수만 셀 전체 강조색으로 표현함.
개별 행 점수 갱신 UI는 제공하지 않음.
행 재정렬은 드래그앤드롭으로 수행하고 저장 시 정렬 순서를 서버에 반영함.
4.2 공대원 관리 화면
상단 필터 영역에서 레이드를 선택함.
작업 패널 헤더에는 총 n건, 우측 액션 버튼 영역을 배치함.
액션 버튼은 조회, 추가, 삭제, 저장을 사용함.
그리드는 풀 로딩형 Tabulator를 사용함.
저장형 마스터 화면이므로 신규 행 추가, 인라인 편집, 일괄 저장을 한 화면에서 처리함.
첫 컬럼은 선택 체크박스 컬럼이며, 일괄 삭제는 선택 행 기준으로 수행함.
서버, 직업, 역할, 근/원 같은 코드성 컬럼은 list editor를 사용함.
구분 컬럼은 캐릭터명 바로 앞에 배치하고 RAID_MEMBER_CATEGORY 코드 목록을 list editor로 편집함.신규 행은 구분=공대원과 나머지 빈값 + 필수 검증 기준으로 시작함.
저장 전 신규 행 삭제는 프런트 메모리에서만 제거함.
4.3 공대 구인 알림 화면
고정 폭 모바일 레이아웃에서 공대 구인 프로필과 최근 탐색 결과를 카드 목록으로 표시함.
프로필 추가·수정은 모바일 시트에서 처리하며, 프로필 제목은 사용자 식별용 자유 입력값임. 제목 자동완성이나 기본 제목을 제공하지 않음.
프로필 입력값은 활동 상태, 허용 요일, 주당 횟수, 추가 검색어, 제외 검색어, 알림 허용 시작·종료 시각임.
직업, 역할, 전문화 선택과 프리셋 UI는 제공하지 않음. 추가·제외 검색어를 쉼표로 구분해 입력하며 모든 검색 의도는 이 두 입력값으로 표현함.
원본은 와우 인벤 파티찾기 > 공격대_구인으로 고정 표시하며 사용자가 URL이나 수집 규칙을 바꾸지 않음.
최근 탐색 결과는 판정, 요약, 원문 링크만 표시함. 게시글 본문은 UI에 보관하거나 재표시하지 않음.
새로고침은 결과 재조회만 수행하며, 프로필 추가는 편집 시트를 여는 동작임. 저장과 삭제만 실제 저장소 변경 액션으로 처리함.
5. 공통 UI 규칙 반영 방식
레이드 화면은 hub-ui-base.css + hub-ui-desktop.css + junkbox-tabulator.css 조합을 사용함.
페이지 전체 스크롤보다 내부 그리드 스크롤을 우선함.
그리드는 부모 패널 높이를 채우고, 데이터가 많아도 패널 내부에서만 스크롤됨.
컬럼 폭은 가능하면 가로 스크롤이 생기지 않도록 타이트하게 조정함.
공통 버튼 위계는 docs/junkbox/common/guide-jb-common-ui.md의 저장/조회 기준을 그대로 따름.
상단 필터 셀렉트와 그리드 내부 셀렉트는 모두 공통 다크 테마 규칙을 사용함.
공대 구인 모바일 화면은 전용 CSS를 만들지 않고 shared-ui의 모바일 폭, 패널, 카드, 시트, 하단 고정 액션바 자산을 조합함.
프로필의 활성·비활성 상태는 jb-select 외형과 BottomOptionPicker로 변경함. 네이티브 체크박스를 사용하지 않음.
카드 목록의 활성·비활성 배지는 공통 UI 문서의 모바일 카드 상태 배지 규칙을 사용하며 줄바꿈되지 않아야 함.
6. Tabulator 연동 규칙
편집형 그리드는 Tabulator 기준으로 구현함.
list editor 셀에는 공통 클래스 jb-cell-editor-list를 적용하여 편집 가능 셀임을 우측 chevron으로 표시함.list editor 드롭다운은 브라우저 기본 흰색 팝업 대신 공통 다크 스타일을 사용함.체크박스 선택 컬럼, hover/selected 행 강조, 줄무늬 제거는 공통 Tabulator CSS가 담당함.
헤더 필터는 별도 검색 패널 대신 컬럼별 직접 검색 수단으로 사용함.
7. 데이터 흐름
React 화면은 raid-api JSON API만 호출함.
사용자 피드백은 shared-ui 공통 토스트 유틸을 통해 처리함.
사용자 노출 텍스트는 화면 컴포넌트에 한국어 문구로 직접 작성함.
공통코드 라벨과 메타 설정값처럼 데이터 자체가 마스터데이터인 값만 DB 조회 구조를 사용함.
저장 성공/실패, 점수 갱신, 정렬 저장, 삭제 결과는 공통 토스트로 표기함.
WCL 점수 갱신은 전체 페이지 단위 액션만 호출함.
wow-check 액션은 목록 API가 반환한 wow_check_url을 새 탭으로 열며, 선택 난이도 코드에 맞는 외부 조회 URL을 직접 조합하지 않음.공대 구인 화면은 프로필 목록·등록·수정과 최근 탐색 결과 API를 호출함.
8. 개발 및 빌드 기준
타입 계약은 앱 내부 src/types/models.ts를 기준으로 관리함.
브라우저 전역 타입과 import.meta.env 타입은 앱 내부 선언 파일에서 관리함.
개발 모드 엔트리 경로는 /raid-ui/src/entries/*.tsx 기준을 사용함.
Vite dev client 경로는 /raid-ui/@vite/client임.
React refresh runtime 경로는 /raid-ui/@react-refresh임.
9. 관련 문서
프로젝트 전체 구조는 docs/junkbox/common/guide-jb-core.md를 따름.
레이드 백엔드 구조는 docs/junkbox/apps/guide-apps-raid-api.md를 따름.
공통 UI 자산 구조는 docs/junkbox/libs/guide-lib-shared-ui.md를 따름.
공통 UI 규칙은 docs/junkbox/common/guide-jb-common-ui.md를 따름.