0601,2 작업일지

무엇을 했는가

어제 팀원들과 오프라인으로 만나 최신버전 코드로 배포까지 마치고 ppt정리 및 시연발표에 대해 이야기를 나눴다.

밖에서 영상을 녹화하기엔 잡음이 많이 들어갈 것 같아 일단은 내가 테스트버전으로 시연 영상을 녹화하기로 했다.

그리고 그 외에 수정하고싶은건 무리하지 않는 선에서 각자 작업하기로 :)

 

피드백받은 사항

1.자동 스크롤 기능 추가

 

영화 정보 페이지에서 예매하기를 누르면 즉시 예매페이지로 이동한다.

무슨 영화를 택했는지 쿠키값을 저장->사용하여 값 확인 -> 하이라이트로 체크하였는데

이때, 자동 스크롤 기능이 없어서 수동으로 스크롤해서 확인해야했다.ㅠㅠ

벤치마킹한 대형 영화관들을 보면 자동 스크롤기능이 있어서 그런 기능이 있나 검색을 해보았다.

scrollIntoView 라는 메소드가 있다고 한다 !

예제를 확인해보고 적용해보니잘 작동한다;)

 

*scrollIntoView

요소가 뷰포트(화면영역)에 들어오도록 스크롤 해주는 메소드이다.

만약 선택한 요소가 보이지 않는 경우, 해당 요소가 보이도록 스크롤되게 한다.

하나의 매개변수를 받으며, 객체or 불리언값일 수 있다고 한다.

 

1)behavior : 스크롤 애니메이션 설정

auto : 기본값 , 즉시 스크롤

smooth : 부드럽게 스크롤

 

2)block : 수직정렬 설정

start : 기본값 , 요소가 뷰포트 상단에 맞춰진다.

center : 요소가 뷰포트 중앙에 맞춰진다.

end : 요소가 하단에 맞춰진다.

nearrest : 뷰포트와 요소의 가장 가까운 위치에 맞춰진다.

 

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

 

즉 , 위의 예제는 부드럽게, 요소가 뷰포트 중앙에 맞춰지는 코드이다.

 

 

 

2.로그인한 회원일 경우 예매 페이지에 선호극장 출력하기

메가박스,cgv등의 영화사이트를 보면 비회원인 경우 예매 페이지의 지점(지역)은

서울,경기도,대구 등 기본적인 정보만 출력해주지만..

로그인한 회원인 경우 선호극장이라는 행을 하나 더 출력해준다.

회원님이 찜해둔(자주가는) 지점부터 확인하세요~ 라는 편의성 기능인데 이걸 넣어보면 어떨까 싶어서 작업하려고한다.

 

 

수정 전

로그인/비로그인 관계 없이 지역은 기본지역정보만 출력된다.(선호지점없음)

 

 

작업 시작

로그인한 회원의 선호극장 정보를 확인해야 한다.

이건이미 다른 팀원이 구현해놓은거라 해당 코드를 찾아보기로하였다.

극장 메인 페이지를 들어가면 로그인한 회원에 한해 상단에 선호극장 리스트를 출력하는데,

시네마 컨트롤러에 해당 코드가 있다!

// 사용자가 로그인하지 않은 경우에도 locationsWithCinemas 정보는 페이지에 전달, memberLikeCinemaListDtos는 비어 있는 리스트로 전달
        List<LocationDto> locationsWithCinemas = locationService.findAllLocationsWithCinemas();
        List<MemberLikeCinemaListDto> memberLikeCinemaListDtos = new ArrayList<>();

        // 사용자가 로그인한 경우
        if (memberDetails != null) {
            memberLikeCinemaListDtos = memberLikeCinemaService.findByMemberId(memberDetails.getMember().getId());
            System.out.println("내가찜한 선호극장:"+memberLikeCinemaListDtos);
        }

        model.addAttribute("locations", locationsWithCinemas);
        model.addAttribute("memberLikeCinemas", memberLikeCinemaListDtos);

 

 

기존에 지역-지점을 출력해주는 dto와 구조가 다른데다가,

기존 지역-지점 dto도 간단정보만 출력하면 되는데 log를 확인해보니 detail한 정보까지 다 가져오고있어서

통합 및 수정 작업을 해야할 것 같다

즉, 지역-지점선택과 선호극장 - 선호극장 리스트를 동일&심플한 dto class로 만들어 공용으로 사용할 것. 

기존

LocationDto

수정

LocationResDto

@Data
public class LocationResDto {
    private Long id;
    private String location_name;
}

 

 

선호극장 선택 시 최대 3개, 내가 찜해둔 목록이 출력되고 이하 기능을 동일하게 작동한다.

시네마[극장] 메인페이지에서 썼던 MemberLikeCinemaListDto를 그대로 쓰려고했는데 참조순환 오류가 발생함.

무슨이유인지 정확히 모르겠는데 ..하나하나 따져봐야할 것 같다..

 

일단은 시네마 전체정보는 필요 없다.

내게 필요한 건 오직 선호극장의 고유아이디,이름이었기때문에 아래와 같이 작성하였다.

@Data
public class MemberLikeCinemaListDto2 {
    private Long cinemaId;
    private String regionCinema;
    //private Cinema cinema;
}

 

레포지토리 쪽도 cinema와 조인해서 해당 시네마의 이름을 가져왔다.(regionCinema)

그리고 시네마(지점)의 이름순으로 정렬하도록 order by 조건을 추가하였다.

이렇게 하면 강남점,세종점,왕십리점..순차적으로 정렬되어 출력된다.

@Query("SELECT mlc, c.region_cinema FROM MemberLikeCinema mlc JOIN FETCH mlc.cinema c 
WHERE mlc.member.id = :memberId order by c.region_cinema")
List<MemberLikeCinema> findByMemberIdWithCinema2(@Param("memberId") Long memberId);

 

 

js에서는 똑같이 findCinema로 비동기 요청을 하는데,

suceess일 경우 데이터 처리하는 부분을 조금 수정했다.

기존 지역들을 조회할 때는 cinema.id 값이지만, 선호극장을 조회할 땐 cinema.cinemaId값이기 때문에

전자의 값이 null이면 후자의 방법으로 값을 대입하도록 if문하나만 추가해주었다.

$.ajax({
    url: `findCinema`,
    type: 'get',
    data:{
        localId //지역 id
    },
    success(data){
        console.log("지역으로 찾은 지점:",data);
        //초기화
        $('.cinema-area2 tbody').empty();
        for (var i = 0; i < data.length; i++)
        {
            var cinema = data[i];
            var cinemaId = cinema.id;
            if(cinemaId==null)
                cinemaId = cinema.cinemaId;
            var regionCinema = cinema.regionCinema;