프로젝트 개요
구직자가 모바일에서 공고를 검색하고 저장된 프로필로 파트타임·이벤트 공고에 간편지원하는 흐름을 구현하는 프로젝트입니다. 사무직·현장직 구분 검색, 4개 언어 화면 전환, 지원 현황 추적, 신원확인 신청을 React와 Express 기반으로 설계합니다.
작업 범위
- 공고 검색·필터: 사무직과 현장직을 작은 아이콘 하나로 구분한 공고 카드 그리드에서 지역, 고용형태, 급여 조건으로 공고를 좁혀 탐색합니다. 모바일에서는 하단 필터 시트로, 웹에서는 상단 검색 바로 같은 조건을 적용합니다
- 간편지원: 저장된 프로필을 불러와 공고 상세에서 확인 한 번으로 지원을 마치는 단계 흐름입니다. 스텝퍼로 현재 단계를 보여주고 우측 요약에서 제출될 프로필 항목을 미리 확인합니다
- 프로필·이력서 관리: 경력, 학력, 희망 지역, 가능 언어를 섹션 단위로 편집하는 프로필 화면입니다. 화면 언어를 한국어, 영어, 말레이어, 중국어 간체로 즉시 바꿀 수 있고 간편지원에 쓰이는 이력서 완성도를 안내합니다
- 지원 현황·알림: 제출한 지원의 진행 상태를 타임라인으로 확인하고 상태 변경 알림을 알림 센터에서 모아 봅니다. 푸시와 메신저 알림 수신 채널을 구직자가 직접 선택합니다
주요 업무
- 공고 검색·필터 화면: 필터 조건을 URL 쿼리와 서버 검색 API에 동일하게 매핑하여 웹과 앱이 한 검색 모델을 공유합니다
- 간편지원 화면: 지원 시점의 프로필 스냅샷을 지원서에 복제하여 이후 프로필 수정이 제출 내역에 영향을 주지 않도록 설계합니다
- 프로필·이력서 관리 화면: i18n 리소스를 네임스페이스별로 분리하고 서버 저장 번역 문구를 런타임에 병합하는 구조를 설계합니다
- 지원 현황·알림 화면: 기업이 지원 상태를 바꾸면 이벤트 큐를 거쳐 알림 레코드와 FCM·WhatsApp 발송 요청이 함께 생성되도록 설계합니다
프로젝트 핵심 과제
사무직·현장직 공고를 아이콘 하나로 구분하면서도 좁은 모바일 카드에 급여·지역 정보를 담는 정보 밀도 설계
말레이어·중국어 간체의 문구 길이 차이로 버튼과 카드가 깨지지 않
4개 언어 레이아웃 대응 필요
파트타임·이벤트 공고의 간편지원에서 필수 입력을 최소화하면서 기업이 요구하는 정보를 보장하는 입력 흐름 설계
휴대폰 OTP 재전송과 만료 시간 제어를 포함한 인증 상태 관리와 실기기 푸시 수신 확인 절차 설계
핵심 기능 상세
공고 검색·필터
사무직과 현장직을 작은 아이콘 하나로 구분한 공고 카드 그리드에서 지역, 고용형태, 급여 조건으로 공고를 좁혀 탐색합니다. 모바일에서는 하단 필터 시트로, 웹에서는 상단 검색 바로 같은 조건을 적용합니다.
- URL 쿼리 파라미터와 필터 상태를 양방향 동기화하여 검색 결과 링크 공유 구현
- PostgreSQL 복합 인덱스와 커서 기반 페이지네이션으로 무한 스크롤 목록 API 설계
- 모바일 하단 시트와 웹 사이드 필터가 같은 필터 스키마를 쓰도록 공용 훅으로 분리
필터 스키마를 단일 정의로 두고 웹 검색 바, 모바일 필터 시트, 서버 쿼리 빌더가 같은 조건 객체를 공유하는 구조를 설계합니다.
간편지원
저장된 프로필을 불러와 공고 상세에서 확인 한 번으로 지원을 마치는 단계 흐름입니다. 스텝퍼로 현재 단계를 보여주고 우측 요약에서 제출될 프로필 항목을 미리 확인합니다.
- React Hook Form과 Zod로 필수 항목만 검증하는 최소 입력 지원 흐름 구현
- 지원 시점 프로필을 JSON 스냅샷으로 저장하는 Prisma 모델과 중복 지원 방지 유니크 제약 적용
- 낙관적 UI 업데이트로 제출 직후 지원 완료 화면과 지원 현황 목록 즉시 갱신
프로필 재사용과 제출 스냅샷을 분리하여 입력 단계를 줄이면서도 지원 내역의 정합성을 유지하는 데이터 흐름을 구현합니다.
프로필·이력서 관리
경력, 학력, 희망 지역, 가능 언어를 섹션 단위로 편집하는 프로필 화면입니다. 화면 언어를 한국어, 영어, 말레이어, 중국어 간체로 즉시 바꿀 수 있고 간편지원에 쓰이는 이력서 완성도를 안내합니다.
- i18next 네임스페이스 분리와 언어별 지연 로딩으로 4개 언어 리소스 구조 구현
- 서버 저장 번역 문구를 캐시 후 리소스에 병합하여 관리자 수정이 앱 재빌드 없이 반영되도록 설계
- 언어별 날짜·통화 표기를 Intl API로 통일하고 긴 문구에 대비한 줄바꿈 규칙 적용
번역 문구를 코드와 분리된 데이터로 다루어 4개 언어 전환과 관리자 문구 편집이 같은 리소스 경로를 사용하도록 구현합니다.
지원 현황·알림
제출한 지원의 진행 상태를 타임라인으로 확인하고 상태 변경 알림을 알림 센터에서 모아 봅니다. 푸시와 메신저 알림 수신 채널을 구직자가 직접 선택합니다.
- 지원 상태 머신(접수·열람·면접·합격·불합격)을 서버에서 검증하고 전이 이력 테이블에 기록
- FCM 토큰 등록 API와 WhatsApp Business 템플릿 메시지 발송을 알림 채널 어댑터로 분리
- 알림 센터 읽음 처리와 미읽음 배지를 React Query 캐시 무효화로 동기화
상태 전이 이벤트 하나에서 인앱 알림, 푸시, 메신저 발송을 채널 어댑터로 분기하는 알림 구조를 구현합니다.
프로젝트 진행 단계
구직자 도메인 모델과 검색 스키마 설계 · 2026.10
프로필·공고·지원 테이블을 Prisma로 모델링하고 지역·고용형태·급여 복합 인덱스 정의
인증과 간편지원 흐름 구현 · 2026.10
휴대폰 OTP·이메일·구글 로그인과 프로필 스냅샷 기반 간편지원 API 구현
다국어 리소스와 모바일 우선 화면 구현 · 2026.10
4개 언어 i18n 구조와 하단 필터 시트·검색 그리드 반응형 화면 구현
알림 어댑터와 Expo 앱 셸 연결 · 2026.10
FCM·WhatsApp 발송 어댑터, 알림 센터, 공용 API 클라이언트를 Expo 앱 셸에 연결
개발 결과
기술적 주안점
- 필터 스키마를 단일 정의로 두고 웹 검색 바, 모바일 필터 시트, 서버 쿼리 빌더가 같은 조건 객체를 공유하는 구조를 설계합니다
- 프로필 재사용과 제출 스냅샷을 분리하여 입력 단계를 줄이면서도 지원 내역의 정합성을 유지하는 데이터 흐름을 구현합니다
- 번역 문구를 코드와 분리된 데이터로 다루어 4개 언어 전환과 관리자 문구 편집이 같은 리소스 경로를 사용하도록 구현합니다
