JECT 행사 체크인

JECT 오프라인 행사에서 QR로 접근해 이름과 휴대폰 번호를 제출하는 모바일 웹 클라이언트입니다. Next.js 정적 export로 빌드되며 런타임에는 브라우저에서 체크인 API를 직접 호출합니다.

• Node.js 22 이상
• pnpm 11

pnpm install
pnpm dev

로컬 개발 시 NEXT_PUBLIC_CHECKIN_API_BASE_URL을 지정하지 않으면 /api 요청을 https://checkin-api.ject.kr로 프록시합니다.

pnpm lint
pnpm typecheck
pnpm check
pnpm security:audit
pnpm build

pnpm build 결과는 out/에 생성됩니다.

NEXT_PUBLIC_CHECKIN_API_BASE_URL=https://checkin-api.ject.kr

운영 빌드는 개인정보가 다른 서버로 전송되지 않도록 https://checkin-api.ject.kr origin만 허용합니다.

1. / 진입 시 GET /events/active로 활성 행사 정보를 조회합니다.
2. EVENT-004 응답이면 폼 대신 새로 고침 버튼을 표시합니다.
3. 폼 제출 시 POST /events/active/check-in으로 이름과 휴대폰 번호를 전송합니다.
4. 체크인 도메인 오류는 코드별로 완료 상태, 안내 다이얼로그 또는 정적 오류 페이지로 분기합니다.

{
  "name": "김젝트",
  "phoneNumber": "01012345678"
}

주요 응답 처리:

• CHECKIN-001: 체크인 마감 다이얼로그
• CHECKIN-002: 이미 체크인 완료 상태
• CHECKIN-003~CHECKIN-005: 현장 문의 다이얼로그
• 그 밖의 제출 오류: /error/checkin-failed

행사 정보 UI는 GET /events/active의 다음 응답을 사용합니다. 기존 eventDateTime은 시작 시간으로 유지하고, 종료 시간과 장소명·주소를 추가합니다. 날짜와 시간은 API가 제공하는 행사 현지 시각을 그대로 표시합니다.

{
  "status": "SUCCESS",
  "data": {
    "name": "JECT 행사",
    "eventDateTime": "2026-10-10T14:00:00",
    "eventEndDateTime": "2026-10-10T18:00:00",
    "eventLocationName": "ICT CoC",
    "eventLocationAddress": "서울 마포구 마포대로 122 6층 ICT콤플렉스"
  },
  "timestamp": "2026-10-10T13:00:00"
}

description은 선택 항목이며 생략, null, 빈 문자열 또는 공백만 있는 문자열이면 설명과 전용 여백을 표시하지 않습니다. 내용이 있으면 체크인 폼 위에 표시합니다.

세 신규 필드는 필수입니다. 구버전 응답이나 유효하지 않은 행사 일정은 기존 조회 오류 흐름으로 처리됩니다.

• src/lib: API 계약, 응답 분류, 검증과 경로 상수
• src/hooks: 활성 행사 조회 및 체크인 제출 상태
• src/components: 화면과 JDS 기반 UI
• src/app: 정적 라우트, 전역 스타일과 메타데이터

JDS 스타일은 @jects/jds/styles, 타이포그래피는 @jects/jds/tokens의 textStyles를 사용합니다.

서버의 신규 응답 적용 전에는 .env.development.local에 다음 값을 설정하고 pnpm dev를 실행합니다. 이미 실행 중이라면 개발 서버를 재시작합니다.

NEXT_PUBLIC_MOCK_CHECKIN_EVENT=true

행사 조회는 /dev/events/active, 타임테이블 조회는 /dev/events/active/timetable 테스트 API를 사용합니다. 기존 환경변수 이름은 호환성을 위해 유지합니다. 테스트 행사에 종료 시각이 없으면 시작 시각만 표시하고, 장소가 없으면 장소 영역을 숨깁니다. 운영 행사 응답의 필수 필드 검증은 유지합니다. 이 설정은 개발 환경에서만 적용됩니다. 체크인 제출도 서버 요청 없이 로컬에서 성공 처리하여 완료 화면과 타임테이블을 확인할 수 있습니다. 입력값 검증은 그대로 적용됩니다. 서버 연동으로 돌아가려면 값을 false로 변경하고 개발 서버를 재시작합니다.

체크인 제출 성공 또는 이미 체크인한 응답 이후 GET /events/active/timetable을 호출합니다. 행사 조회 응답에는 타임테이블을 포함하지 않으며, 체크인 폼 표시 중이나 제출 실패 시에는 조회하지 않습니다.

{
  "status": "SUCCESS",
  "data": [
    { "startTime": "13:30", "endTime": "14:00", "schedule": "체크인" },
    { "startTime": "14:10", "endTime": "15:00", "schedule": "젝트 협업 도구 세미나" }
  ],
  "timestamp": "2026-07-30T08:25:00Z"
}

시작 시각과 일정은 문자열이며 종료 시각은 문자열 또는 null입니다. null은 ‘미정’으로 표시합니다. 별도 id나 시간 포맷을 요구하지 않습니다. 배열 순서대로 표시합니다. 빈 배열 또는 404 / EVENT-003, 409 / EVENT-004 응답이면 오류 안내 없이 제목과 표를 숨깁니다. 조회 실패 또는 잘못된 응답이면 완료 상태를 유지하고 타임테이블만 재조회할 수 있습니다. 홈으로 돌아가면 진행 중인 조회를 취소하고, 다음 체크인 완료 시 새로 조회합니다. 개발 테스트 모드에서는 두 조회를 공개 테스트 API로 호출하고, 제출만 로컬 성공 처리합니다. 실제 체크인 API는 호출하지 않습니다. 고정 샘플의 날짜가 과거이면 기존 만료 정책에 따라 완료 기록은 복원되지 않습니다. 종료 시각이 없는 테스트 행사는 시작일 다음 날 0시를 만료 기준으로 사용합니다.

체크인 성공·이미 체크인 응답을 받으면 localStorage에 행사명과 원본 시작 시각으로 만든 행사 키, 완료 시각, 만료 시각을 저장합니다. 이름·전화번호는 저장하지 않습니다. 행사 종료일 다음 날 00:00(한국 시간)에 만료되며, 다음 조회 때 만료 또는 다른 행사 기록을 삭제합니다. 현재 행사 종료일이 앞당겨진 경우에도 새 종료일 기준으로 만료를 검사합니다. 재방문 시 행사 조회와 저장 기록 검사를 마친 뒤 완료 화면을 복원하고 타임테이블을 새로 조회합니다. 저장소 사용이 차단되어도 현재 체크인은 정상 완료됩니다. 목데이터 기록은 별도 키로 분리합니다. 행사명이나 시작 시각이 바뀌면 별도 행사로 간주합니다. 브라우저 데이터 삭제나 다른 브라우저에서는 복원되지 않습니다.