개인 과제 - 웍스피어 채용 파이프라인 보드

프로젝트 성격

구분: 채용 프론트엔드 과제·개인 포트폴리오
기간: 2026.08
대상: 가상 지원자 1,000건의 채용 단계 관리

웍스피어 재직 경력이 아닌 개인 과제입니다. Next.js 화면과 MSW API, 브라우저 localStorage로 조회·변경·실패·복구를 검증했습니다. 실제 채용 데이터나 운영 서버·DB를 사용한 서비스는 아닙니다.

이동 편의보다 중요한 결정의 확인 과정

지원자 단계 변경은 중요한 결정이고 알림 같은 후속 동작도 고려해야 하므로 DnD를 제외하고 명시적 행동과 확인 모달을 선택했습니다. 방향키는 카드 사이 포커스 이동만 담당하고 상태를 바꾸지 않게 했습니다. 실제 알림 발송이나 오조작 감소를 측정한 사례는 아닙니다.

일반 단계 변경은 다음 단계 이동·탈락만 허용하고 최종 합격·탈락은 종료 상태로 다뤘습니다. UI와 MSW API가 공통 전이 규칙을 사용하며 당시 일반 전이 허용 6개·거부 19개와 역행 요청 400 응답을 확인했습니다.

전체 검색의 책임을 데이터를 가진 API로 이동

컬럼별 100건 페이지네이션을 적용한 뒤 이미 로드한 카드만 검색하면 나머지 지원자가 누락됐습니다. 선로딩 검색 인덱스를 거쳐 MSW API가 전체 데이터에서 먼저 필터하고 페이지를 나누도록 교정했습니다. 초기 화면은 컬럼 합계 380개 카드이며 끝까지 읽으면 1,000개가 누적됩니다.

검색·직무 조건이 바뀌면 새 GET을 요청하고 이전 요청을 취소하며 no-store를 적용했습니다. 응답 순서에 따라 직무 순서가 흔들리지 않도록 표시 순서도 고정했습니다. 이 선택은 요청 수를 늘리며 다른 사용자의 변경을 실시간 동기화하는 구조는 아닙니다.

변경 실패 뒤 위치·수량·상세를 함께 복구

낙관적 단계 변경 실패 시 카드 위치와 상태, 양쪽 컬럼 수량과 상세 값을 함께 복구했습니다. 같은 UI에서 연속 확정하는 경우 동기 ref Set으로 요청 시작을 잠그고 finally에서 해제했습니다. 당시 700ms 지연과 500 응답 조건에서 두 번 확정해도 PATCH는 한 번 발생하고, 수량 319/121이 320/120으로 복구된 뒤 재시도와 새로고침 후 저장 유지까지 확인했습니다.

상세는 별도 데이터 사본 대신 선택한 지원자 ID로 현재 보드에서 찾게 했습니다. 일부 조회 실패 시 알고 있는 카드를 유지하고 부분 오류·수동 재시도를 표시했습니다. 중복 잠금은 같은 UI 인스턴스에 한정되며 다른 탭·사용자의 동시성이나 모든 GET/PATCH 경쟁을 해결하지는 않습니다.

페이지 경계와 Undo 회귀를 별도 규칙으로 처리

단계 이동으로 원본 목록의 offset이 당겨질 때 다음 페이지가 누락되는 문제를 다뤘습니다. 저장 성공 후 원본의 기존 요청을 취소하고 1페이지를 다시 조회하며 대상 목록은 ID로 중복을 제거했습니다. 원본 1페이지 결과가 목록을 교체하므로 이전에 읽은 모든 페이지를 보존하는 방식은 아닙니다.

API 전이 검증 강화로 Undo가 깨졌을 때 일반 역행 금지는 유지하고 undo-only 예외를 추가했습니다. UI는 현재 페이지에서 마지막으로 성공한 비종료 변경 한 건을 보관합니다. MSW는 인접한 비종료 역방향인지만 검사하므로 서버 이력·토큰·주체·버전에 기반한 되돌리기 보장은 아닙니다.

측정한 범위에서 가상화 보류

요청 대기와 마지막 응답 이후 화면 반영, 전체 완료와 Long Task를 나눠 측정하고 기존 페이지네이션을 유지했습니다. 당시 두 데스크톱 화면의 production 성공 표본에서 이름 필터 반영 43.8~51.0ms, 직무 필터 50.5~82.2ms와 Long Task 0을 확인해 가상화 추가를 보류했습니다. 생성 데이터와 제한 없는 CPU·네트워크 조건이며 화면 반영은 두 번째 animation frame 기준입니다.

에이전트 없이 다시 확인할 수 있도록 성능 검증 명령과 보고서를 남겼습니다. 후속 기록은 두 화면·두 시나리오에 성공 표본 25개씩 총 100개, 마지막 응답 이후 최대 반영 38.0ms와 Long Task 0입니다. 의도된 500으로 제외·재시도한 표본 118개가 있었고 이전 기록과 환경·시나리오가 달라 성능 개선 전후 비교로 사용하지 않습니다.

실패 기록도 검증 근거에 포함

기능·테스트·문서·프롬프트를 연결하고 방향키 해석 오류, 포커스 실패와 Undo 회귀를 수정 기록에 남겼습니다. 상태 함수 실행·소스 패턴 검사·브라우저 상호작용·새로고침 후 저장 확인을 구분했습니다. 이 문서의 결과는 당시 실행 기록을 근거로 하며 이번 경력기술서 갱신에서 과제 자체의 테스트를 다시 실행한 결과는 아닙니다.

기술

Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, MSW, localStorage, Playwright, Node.js