HCMS(Headless CMS 플랫폼)
| 항목 | 내용 |
|---|---|
| 기간 | 2026.01 ~ 2026.03 |
| 역할 | 구성 앱(cms_config)과 운영 CMS(cms) 프론트엔드 단독 구축, route TSX 95개(41 + 54) |
| 개요 | 프로젝트별 권한과 콘텐츠 타입을 먼저 구성하고 그 모델로 엔트리, 폴더, 미디어, 게시판, 감사 로그를 운영하는 Headless CMS 플랫폼입니다. 콘텐츠 모델 구성 앱과 운영 CMS 두 저장소로 나뉩니다. 백엔드 동료와 둘이서 개발실장 기획 아래 만든 사내 제품입니다. |
| 기술 | React 19, TypeScript, Vite, React Compiler, TanStack Router, TanStack Query, TanStack Form/Table, Ant Design, i18next, Zustand, Kubb, MSW, Playwright, Biome |
주요 업무
콘텐츠 모델링
운영자가 콘텐츠 타입 빌더에서 정의한 테이블과 컬럼이 운영 CMS의 엔트리, 폴더, 검색 화면까지 그대로 이어지는 구조로 두 앱을 만들었습니다. 미디어 라이브러리, 게시판, 감사 로그 화면도 그 구조를 따릅니다.
동적 폼과 테이블
컬럼 정의를 TanStack Form 입력 필드와 TanStack Table 컬럼 설정으로 변환해 필드 유형별 입력 검증과 셀 표시, 선택 상태를 처리했습니다.
조회 상태
TanStack Router의 URL query에 검색어, 콘텐츠 타입, 폴더, 정렬, 페이지를 담아 API 요청과 React Query 키에 함께 썼습니다. 새로고침이나 뒤로가기 뒤에도 목록 조건이 남습니다.
권한 관리
권한 그룹, 엔드포인트 접근, 멤버-권한 연결, 저장 상태를 구분해 RBAC 화면을 만들었습니다.
구성 앱 화면
대시보드, 프로젝트, 멤버, 설정, 프로필 화면과 i18next 다국어를 구성 앱에 구축했습니다. 로그아웃 시 React Query 캐시를 초기화합니다.
미디어 라이브러리
검색, 필터, 업로드, 미리보기, 삭제 흐름을 구현하고 업로드 개수와 용량 제한, 미디어 타입별 미리보기를 공통 패턴으로 정리했습니다.
API 연동
OpenAPI에서 Kubb로 생성한 타입과 서비스 코드를 화면별 조회와 저장 요청에 연결하고 변경 뒤 필요한 React Query 캐시만 갱신했습니다.
검증과 규약
MSW로 API 응답 사례를 재현하고 Playwright로 주요 운영 흐름과 여러 브라우저 렌더링을 확인했습니다. 여기서 다듬은 React, CSS, TypeScript, Playwright 규약은 별도 저장소로 분리했고 이후 SK AX 프로젝트가 같은 규약으로 진행됩니다.