채용 공고·지원자 관리 서비스 및 관리자 페이지 개발

배경

서비스가 종료되어 화면을 보여드릴 수 없습니다. 내부 시스템명과 비공개 세부사항은 생략했고, 진행 과정은 실제와 동일합니다.

채용 공고 등록부터 지원자 관리까지 다루는 Next.js 14 기반 서비스와, 운영진이 쓰는 관리자 페이지를 함께 개발했습니다. 서비스·관리자 페이지 양쪽 모두 입력 폼과 서버 상태 관리 비중이 큰 프로젝트였습니다.

문제

백엔드 API 개발 일정이 프론트엔드보다 늦게 시작되는 구조였습니다. 그대로 두면 프론트엔드가 백엔드 완료를 기다리며 순차적으로 진행돼야 했고, 전체 일정이 그만큼 늘어질 상황이었습니다.

진행한 작업

1. MSW 기반 API 목업으로 선행 개발

**MSW(Mock Service Worker)**를 도입해 실제 백엔드 API 스펙을 기준으로 목업 응답을 만들고, 백엔드가 준비되기 전부터 프론트엔드 개발과 테스트를 시작할 수 있는 환경을 구성했습니다. API 계약이 바뀌면 목업 핸들러만 갱신하면 됐기 때문에, 프론트엔드가 백엔드 진행 상황에 발이 묶이지 않았습니다.

2. 입력 폼·서버 상태 관리

React Hook Form으로 채용 공고 등록·지원서 작성 등 복잡한 입력 폼의 유효성 검증을 구현하고, React Query로 지원자 목록·상태 변경 같은 서버 상태를 관리했습니다.

3. 다국어 SSG 페이지

next-translate를 이용해 채용 공고 페이지를 다국어로 정적 생성(SSG)했습니다.

결과

MSW 도입으로 얻은 가장 큰 이득은 속도보다도 일정 리스크 자체가 줄어든 것이었습니다 — 백엔드 지연이 프론트엔드 착수 시점을 밀어내지 않게 됐습니다.