20240326 (화) 최종 프로젝트 티켓레이더 5주차 - 마무리주차

1. 예매모달창 심화 및 오류 해결

 

현재 예매 모달창안에서 좌석 배치현황에 해당 이벤트 기준으로 예매 완료된 좌석을 띄워주는 데까진 성공했다.

 

하지만 우리는 이벤트마다 기간이 있고 또 그 날짜마다 예매현황이 다르다.

이를 구현하기위헤 기존 이벤트 페이지가 생성될때 fetchBookedTicket 을 불러오던것을 변경해서

이벤트페이지안에있는 예매하기 버튼을 눌렀을 시에 fetchBookedTicket 를 다시 불러오는 형식으로 만들었다.

이를 위해선 datePicker에서 선택한 date를 fetchBookedTicket 안에 넣어서 보내줘야한다.

추가로 모달창 닫기를 눌렀을시 선택했던 좌석들과 모달창의 스텝진행단계를 초기화하는 코드도 작성하였다.

function resetModal() {
  currentStep.value = 1;
  selectedSeats.value = [];
  // 모달이 닫힐 때 선택된 좌석 초기화
}

다시 본론으로 돌아가서

처음 이벤트가 불러와지고 자동으로 선택된 date를 입력후 좌석배치현황을 불러오는데까진 문제가 없었다. 하지만 두번째부터 어째선지 이전날의 데이터를 가져와서 붙여놓는 것이였다.

이유를 알기위해서 콘솔로그를 찍어보니 이게 웬걸

 

기본 date의 형태가 한국 국제표준시?로 바뀌면서 기존 date 00:00:00 에서 9시간을 빼는 것이였다.

그러다보니 첫실행은 기본세팅으로 09:00:00시로 되어있는데 두번째실행부터 하루가 줄어들어서 적용이 된거였다.

따라서 선택한 date에 자동으로 9시간을 추가하게하고 재실행한 결과

 

날짜별로 좌석배치 현황 적용 완료!

 

 

2. 이벤트 리스트 수정(헤더 카테고리)

 

헤더에있는 카테고리 클릭시 이벤트리스트가 해당 카테고리에 맞게 출력되게 만들고자한다.

override fun findByPageable(
        pageable: Pageable,
        searchStatus: String?,
        sortStatus: String?,
        category: String?,
        keyword: String?
    ): Page<Event> {

        val totalCount = queryFactory.select(event.count()).from(event).fetchOne() ?: 0L
        val builder = BooleanBuilder()

        if (category != null) {
            builder.and(event.category.title.eq(category))
        } else if (searchStatus == "제목") {
            builder.and(event.title.like("%$keyword%"))
        } else if (searchStatus == "장소") {
            builder.and(event.place.name.like("%$keyword%"))
        }


        val query = queryFactory.selectFrom(event)
            .leftJoin(event.price, price)
            .offset(pageable.offset)
            .limit(pageable.pageSize.toLong())
            .where(builder)
//            .orderBy(*getOrderSpecifier(pageable, event, sortStatus))
//            .fetch()

        if (sortStatus == "좋아요 순") {
            query.orderBy(event.likeCount.desc())
        } else if (searchStatus == "리뷰 순") {
            query.orderBy(event.reviewCount.desc())
        } else if (searchStatus == "평점 순") {
            query.orderBy(event.averageRating.desc())
        } else {
            query.orderBy(event.averageRating.desc())
        }


        val contents = query.fetch()
        return PageImpl(contents, pageable, totalCount)
    }

 

후에 이벤트 검색이랑도 연동될것이기 때문에 동적쿼리를 폭넓게 제작해주었다.

카테고리 클릭시 헤더에 정보를 넘겨준다.

 

넘겨받은 정보로 이벤트 리스트를 표시해줌(콘서트 카테고리에는 현재 이벤트가 없음)