[FEAT] 공연 : 공연 목록 및 상세 조회 기능 구현

[boogiewooki02]

• ## ‼️ 관련 이슈

close #20

🔎 개요

공연 목록 및 상세 조회 기능을 구현했습니다.
사용자가 공연 목록에서 공연 시간, 장소, 잔여 좌석을 확인하고, 상세 화면에서
공연 설명과 예매 예정 영역을 확인할 수 있도록 했습니다.

📝 작업 내용

• 백엔드 공연 조회 API 추가
  • GET /api/performances
  • GET /api/performances/{performanceId}
• 공연 도메인 모델 추가
  • 공연명, 아티스트, 시작/종료 시간, 장소, 설명, 전체 좌석, 예약 좌석 정보
    포함
  • 잔여 좌석은 totalSeats - reservedSeats 기준으로 계산
• 공연 인메모리 데이터소스, Repository, Service, Controller 추가
• 공연 조회 API를 인증 없이 조회 가능한 GET API로 Security 설정에 추가
• 프론트엔드 공연 API 타입 및 호출 함수 추가
• /performances 공연 목록 화면을 하드코딩 데이터에서 백엔드 API 조회 방식
  으로 변경
• /performances/[performanceId] 공연 상세 화면 추가
• 공연 상세 화면에 이후 티켓 예매 기능으로 연결될 예매 버튼 영역 추가
• 공연 카드, 상세 패널, 예매 패널 컴포넌트 분리
• 공연 조회 관련 테스트 추가

👀 변경 사항

• 공연 페이지가 이제 NEXT_PUBLIC_API_BASE_URL 기준의 백엔드 API를 호출합니
  다.
  • 기본값은 http://localhost:8080입니다.
  • 로컬 확인 시 백엔드 서버가 실행되어 있어야 합니다.
• 백엔드 실행 시 JWT_SECRET 값은 최소 32자 이상이어야 합니다.
  • 예: JWT_SECRET=local-development-jwt-secret-key-32-bytes-minimum
• 예매 버튼 영역은 실제 예매 API와 연결하지 않고, 이후 기능 연결을 고려한 UI
  영역으로만 구현했습니다.
• 잔여 좌석이 0석이면 예매 영역에서 매진 상태로 표시됩니다.

✅ 테스트

• 백엔드 테스트 추가
  • PerformanceControllerTest
  • PerformanceRepositoryTest
  • PerformanceServiceTest
• 프론트엔드 테스트 추가
  • PerformanceCard.test.tsx
  • PerformanceDetailPanel.test.tsx
  • PerformanceReservationPanel.test.tsx

검증 결과:

• pnpm test 통과
  • 11 files / 26 tests
• pnpm lint 통과
• pnpm build 통과
• mvn test는 로컬 환경에 mvn 명령어가 없어 실행하지 못했습니다.

📸 스크린샷 (Optional)

• 공연 목록

• 공연 상세

[dldusgh318]

확인했습니다. 수고하셨습니다

[dldusgh318]

공연 상세 페이지에서 “로그인하고 예매하기”를 누르면 redirect=/performances로 이동하도록 되어 있습니다.

사용자 입장에서는 로그인 후 원래 보던 공연 상세 페이지로 돌아오는 흐름이 더 자연스러울 것 같습니다.

현재 상세 페이지의 performanceId를 기준으로 redirect=/performances/{performanceId} 형태로 넘기거나, 현재 pathname을 redirect 값으로 사용하는 방식을 검토해주시면 좋을 것 같습니다.

[dldusgh318]

중요한 부분은 아니나, 추후 테스트코드를 작성할 때는 @BeforeAll을 이용하여 리소스 낭비를 줄이는 방식으로 해도 좋을 거 같습니다!