[FE] 백엔드 스웨거 문서의 타입과 동기화 및 좌석 렌더링 방식 변경

[JichanPark12]

🧭 Summary

백엔드의 스웨거 문서를 참고하여 프론트 mock 데이터를 변경하고 좌석 렌더링 하는 방식을 전체 구역 표시 => 구역 클릭 => 세부 좌석 표시 형태로 변경했습니다.

2026-01-16.114554.mp4

🔗 Linked Issue

• [FE] 백엔드에서 정의한 타입으로 프론트 MOCK 변경 #60
• [FE] 연습페이지 날짜 선택 #22

Closes: #60 #22

🛠 개발 기능(작업 내용)

• 공연장, 좌석정보 등 타입 변경
• 변경된 타입에 따라 mock 데이터 변경 및 fetch 코드들 수정 및 추가
• 메인페이지 공연 정보 표시를 변경된 mock으로 렌더링
• 공연장 정보를 변경된 mock으로 렌더링
• 좌석 정보 생성 (받아온 mock 데이터를 조합)
• 구역 클릭 시 세부 좌석정보 표시
• 지도보기 클릭 시 이전 공연장 전체 svg로 변경

🧩 주요 고민과 해결 방법

캐싱 처리 주기를 몇으로 해야하나

백엔드 서버에서 주는 데이터를 캐싱을 완전히 동기화 할 수 없다는 이슈가 있습니다. 공연 정보가 5분마다 변경된다 가정해도 next에서 캐싱을 5분주기로 잡을 경우 둘의 시간이 완전히 일치한다는 보장을 할 수 없기 때문입니다. 그래서 캐싱 주기를 1분으로 잡아 해당 동기화 문제를 해결하고자 했습니다.

좌석 데이터를 어떻게 어디서 만드는게 좋을지

현재 좌석 데이터는 따로 오지 않고 block, grade, block-grade 등 정보들을 따로 요청하여 가져와야합니다. 이 데이터들을 어떻게 조합해야 selector에 넣을 좌석 정보를 만들 수 있을지 고민했습니다. 해당 데이터가 상태로 공유되며 가격표시, 구역번호, 등의 정보를 표시해줘야하기에 아래와 같은 내용으로 타입을 정의하고 데이터를 만들었습니다.

export interface Seat {
  id: string;
  seatGrade: Grade;
  rowNum: string;
  colNum: string;
  blockNum: string;
}

좌석 데이터의 경우 구역을 클릭 시 좌석 세부정보가 보이는데 보통은 이 때 서버에서 좌석 정보를 가져오지만 현재는 그런 내용이 없어 해당 부분에서 좌석 데이터를 만드는 방식을 선택했습니다. 좌석 id의 경우 구역이름-row-col 로 설정했습니다.

🔍 리뷰 포인트

• 이전 pr인 [FE] 달력 적용 및 MOCK 데이터와 연동 #61 에서 변경된 내용들도 꽤 존재하고 해당 pr에 머지 충돌이 발생했는데 이 부분을 frontend-60 브랜치에서 해결했습니다. 하여 해당 pr은 닫을 예정입니다.

---

📋 Code Review Priority Guideline

• 🚨 P1: Request Change
  • 필수 반영: 꼭 반영해주시고, 적극적으로 고려해주세요 (수용 혹은 토론).
• 💬 P2: Comment
  • 권장 반영: 웬만하면 반영해주세요.
• 👍 P3: Approve
  • 선택 반영: 반영해도 좋고 넘어가도 좋습니다. 그냥 사소한 의견입니다.

[ParkTjgus]

늦게 확인했네요😭 수고하셨습니다!

[viixix]

수고하셨습니다! 락파일 충돌은 제가 해결했습니다