Quartz 5

20260807_변경사항2

6 min read

커리어핏 (CareerFit) - 캘린더 커스텀 전형 일정 관리 기능 추가 보고서 (2026-08-07)

본 문서는 사용자가 각 채용 공고에 대해 공고마감일뿐만 아니라, 서류 제출, 1차 면접, 과제 제출, 2차 면접 등 개별 전형 진행 일정을 커스텀으로 등록하고 이를 월간 캘린더 뷰와 실시간으로 연동하여 통합 스케줄링이 가능하도록 개선한 내역을 정리한 리포트입니다.

1. 개요 및 목적

  • 기존 문제의식: 이전 캘린더 뷰는 수집한 공고의 공식 마감일(dueDate)만을 기준으로 일정을 렌더링하였습니다. 그러나 실제 취업 준비 프로세스에서는 서류 접수 이후 1차/2차 면접, 코딩 테스트, 과제 마감 등 개별 기업별 전형 단계의 진행 일자가 상이하고 동시다발적으로 발생하므로, 이를 일목요연하게 커스텀 관리할 수 있는 도구가 필요하다는 피드백이 있었습니다.
  • 해결 방향:
    • 공고 상세 모달 내부에 사용자가 일정을 등록/삭제할 수 있는 ‘전형 진행 일정 관리’ 영역을 신설하였습니다.
    • 사용자가 작성한 커스텀 일정은 해당 공고 객체의 내부에 저장되어 localStorage를 통해 지속적으로 유지됩니다.
    • 월간 캘린더 뷰 로직을 업데이트하여 공고 마감일(🔴 마감)과 커스텀 전형 일정(📅 일정)이 각각 고유의 시각적 테마로 캘린더 셀 내에 통합 렌더링되도록 구현했습니다.

2. 주요 변경 사항 및 적용 내역

1) src/types.ts

  • 내용:
    • 커스텀 일정 정보를 표기할 CustomSchedule 타입을 새롭게 정의했습니다.
    • JobPost 타입에 customSchedules?: CustomSchedule[] 선택적 속성을 추가하여 기존 데이터의 역직렬화 호환성을 보장했습니다.

2) src/App.tsx

  • 내용:
    • 하위 컴포넌트인 JobDetailModal에서 일정이 추가/삭제될 때 전체 공고 상태를 갱신하는 handleUpdateSchedules 핸들러를 추가했습니다.
    • 변경된 상태는 즉시 브라우저 localStorage에 자동 동기화되어 새로고침 후에도 유지됩니다.

3) src/components/JobDetailModal.tsx

  • 내용:
    • 모달 우측 영역에 ‘전형 진행 일정 관리’ 섹션을 신규 배치했습니다.
    • 일정명(예: “1차 면접”)과 날짜 선택 폼 및 “추가” 버튼을 배치하여 누구나 손쉽게 전형 스케줄을 빌드할 수 있게 구성했습니다.
    • 등록한 일정들은 취소/삭제할 수 있도록 개별 삭제(X) 버튼을 부착한 칩(Chip) 컴포넌트 형태로 표현했습니다.

4) src/components/TimelineView.tsx

  • 내용:
    • 월간 캘린더 그리드 생성 루프 내부에서 각 날짜별로 ‘마감 공고’와 ‘커스텀 전형 일정’을 동시 수집하도록 조회 로직을 개선했습니다.
    • 🔴 마감: 빨간색 스타일링 및 🔴 이모티콘을 통해 마감 임박을 알립니다.
    • 📅 일정: 파란색 스타일링 및 📅 이모티콘을 통해 면접/테스트 등 개인 커스텀 스케줄을 나타냅니다.
    • 캘린더 내의 특정 일정을 클릭하면, 즉시 해당 공고의 상세 모달이 열려 유기적으로 정보를 확인 및 수정할 수 있게 UX 동선을 일원화했습니다.

3. 기술 스택 및 호환성 점검

  • 로컬 단독 구동 방식(SPA)에 맞추어 모든 일정 CRUD 동작은 클라이언트 측 브라우저 단에서 상태 결합 방식으로 안전하고 가볍게 동작합니다.
  • 기존 데이터 스키마와의 하위 호환성을 유지하여 기존 저장된 공고 리스트가 깨지지 않고 그대로 로드됩니다.

Graph View