[sangrae2325]

#️⃣연관된 이슈

• Closes 사물함 학생앱 API 연동 #155

📚 스택 PR 아래쪽입니다(스택 #170: 이 PR → #169). 앞 PR #154(shared 폴더 구조)는 머지돼서 base가 main이에요. 머지 순서: 이 PR → #169.

🎯 해결하려는 문제가 무엇인가요?

사물함 신청·배정 화면이 신청 기간·유의사항 날짜·구역 목록·칸 배치·신청 결과·내 배정을 모두 목데이터로 그렸다. dev 서버에 학생앱 사물함 API 5개가 배포돼서 실제 데이터로 연결한다.

❓ 왜 해결해야 하나요?

사물함 신청은 선착순 즉시 배정이라 남은 수·칸 상태·신청 기간이 서버 값이어야 한다. 목데이터로는 신청 기간 판정(IS_LOCKERS_APPLY_PERIOD = true 고정)과 실패 처리(목업 결과값)가 실제와 맞지 않는다.

⭐ 어떻게 해결했나요?

API	화면
GET /v1/app/lockers/period	유의사항 시트(이용·신청 기간, OPEN일 때만 확인 버튼), 이후 모든 조회의 lockerPeriodId
GET /sections?lockerPeriodId	구역 선택 평면도(남은 수·혼잡도), 평면도 자리는 구역 이름으로 찾는다
GET /sections/{sectionId}?lockerPeriodId	칸 선택·위치 보기(칸 배치·칸 상태·사진 여러 장)
POST /applications	신청 → 완료/실패 화면
GET /applications	배정 상태(배정완료·기간종료)·위치 보기

• 조회 정의 (5288008) — lockersQueries에 조회 4개 + zod 응답 스키마(looseObject — 서버가 필드를 더 보내도 깨지지 않고, 빠지거나 타입이 바뀌면 여기서 실패). 타입은 lockersTypes에서 z.infer. zod는 이 PR에서 처음 추가(zod 4.6.7)

• 화면 연결 (053e04b·7ead76d·c45b210·36c249d) — 캐시에는 서버 응답 그대로 두고 화면 모양은 select(toLockersNotice·toLockersSections·toLockersSectionDetail·toLockerAssignment). 여러 화면이 쓰는 변환은 shared/entities/lockers에 둔다

  • 칸 선택 주소를 구역 이름(/sections/A-1)에서 서버 숫자 id(/sections/3)로 바꿨다
  • 새로고침 버튼은 페이지 리로드 대신 그 조회만 다시 받는다
  • 칸 선택·위치 보기는 헤더(구역 이름·사진 버튼)가 데이터에 달려 있어 데이터 컴포넌트가 헤더를 등록하고, 받는 동안 LockersMapSkeleton이 헤더까지 채운다

• 사진 여러 장 (c90e524·0d36b1d) — 사진 모달 안에서 가로로 넘기고 아래에 점. 점은 로그인 소개의 AuthPaginationDots를 공용 components/ui/PaginationDots로 옮겨 같이 쓴다. 사진 틀은 Figma 비율(300:224)로 화면 폭에 맞춰 줄어든다(320 화면에서 카드가 넘치던 문제)

• 신청 (918eb74) — useApplyLockerMutation, 서버 오류 코드 → 실패 화면

  서버	실패 화면
  LOCKER_ALREADY_ASSIGNED	선택한 사물함이 방금 마감됐어요 → 다시 선택하기
  MEMBER_ALREADY_HAS_LOCKER	새로 이미 사물함을 배정받았어요 → 배정 상태 보기
  LOCKER_APPLY_NOT_OPEN·LOCKER_PERIOD_NOT_FOUND	사물함 신청이 모두 마감됐어요
  네트워크·시간 초과 / 그 외	공통 오류 화면 → 다시 시도

• 점검 반영 (8a63257·3e1c2fd·5480d48)

  • 신청 응답 형식이 달라도 성공 화면으로 간다(서버에는 이미 배정됨) — 빠진 값은 요청 때 가진 칸 이름·이용 기간으로 채운다
  • 신청이 끝나면 결과와 상관없이 내 배정을 바로 다시 받고 구역 캐시를 무효화한다. 결과 화면은 이 갱신을 기다리지 않는다
  • 새로고침 뒤 고른 칸이 남에게 가거나 고른 구역이 마감되면 선택을 풀고 버튼을 잠근다
  • 칸 배치 블록 7종을 zod로 검사해서 형식이 어긋나면 앱이 멈추지 않고 빈 화면을 보인다

• 정리·문서 (0e7ff35) — 칸 배치·배정 목데이터와 구역 사진 jpg 삭제, wds-component-usage.md·coding-style.md 갱신

🧩 이 PR의 한계 & 트레이드오프

• 실제 dev 서버 응답으로는 아직 확인하지 못했다 — 사물함 API가 로그인 회원 기준이라 토큰이 필요하다. 서버 코드(LockerSectionDetailResponse 등)의 응답 모양 그대로 만든 응답을 브라우저에서 가로채 확인했다
• 조회가 실패하면(401·네트워크) react-router 기본 에러 화면이 뜬다 — 프로젝트에 조회 에러 처리(에러 바운더리)가 아직 없다. 공통 작업으로 따로 한다
• 홈 "내 정보"의 사물함 배지는 여전히 homeMock — 홈 API를 붙일 때 바꾼다
• formatDateTime은 일시에 T가 없으면 던진다 — #151과 같은 줄이라 [Feat/#149] 학생회비 납부 API 연결 #151 머지 뒤 따로 고친다

⛓️ 기존 기능에 미치는 영향

• components/ui/PaginationDots 이동으로 로그인 소개 화면(AuthLoginCarousel) import가 바뀐다(동작 같음)
• lib/date의 formatDateTime이 시:분까지만 남긴다(서버 일시가 초까지 온다) — #151과 같은 줄로 맞춰 충돌하지 않는다
• 칸 선택 주소가 숫자 id로 바뀌어 예전 주소(/sections/A-1)는 준비 중 화면이 된다

🔀 Edge Case & 실패 시나리오

375×812에서 확인(서버 응답 가로채기):

• 유의사항: 받는 중(스켈레톤)·OPEN·BEFORE_OPEN·CLOSED·회차 없음
• 구역: 서버에 없는 평면도 자리는 잠김, 평면도에 없는 서버 구역은 무시, 마감 구역 잠김
• 칸: 배치 없음·모르는 version·형식 틀린 블록 → 빈 화면, 선택 불가 칸 토스트
• 사진: 2장(점·넘기기)·1장(점 없음)·0장(사진 버튼 숨김), 320/375/480 폭
• 신청: 성공·남이 먼저·이미 배정·기간 아님·네트워크(다시 시도)·서버 오류
• 배정: 배정완료·기간종료·없음, 배정 없이 위치 보기 → 배정 상태로

📋 검토한 대안과 선택 이유

• 화면 모양 변환을 queryFn 안에서 — 같은 응답을 여러 화면이 다른 모양으로 써서(내 배정 → 배정 상태·위치 보기) 캐시는 응답 그대로, 변환은 select([Refactor/#153] API·도메인 조회 코드를 shared 폴더 구조로 정리 #154 컨벤션)
• 칸 배치 블록을 서버가 검사 — 서버는 layout을 해석하지 않기로 했다(stream-server V15). 형식 기준이 웹 타입이라 웹에서 검사한다
• 구역 마감 실패 화면 유지 — 서버에 대응 오류 코드가 없다(구역이 차면 칸이 선택 불가로 보여 신청할 수 없다). 지웠다

💬 리뷰 포인트

• [c] Figma에 없는 화면 문구 — 이미 배정됨 실패 화면("이미 사물함을 배정받았어요 / 배정된 사물함을 확인해 보세요."), 칸 배치 빈 화면("아직 칸 배치를 볼 수 없어요 / 다른 구역을 선택해 주세요")
• [c] shared/entities/lockers/lockersQueries.ts — zod 스키마·select 변환·mutation 캐시 갱신
• [a] 사진 모달 점(PaginationDots)이 Figma와 같은 모양인지

[coderabbitai]

Important

• Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1a889c6a-a463-4c39-b6a6-e62e7f04efad

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn