[Project] 화면에 뿌리는 것 먼저 해보기( AJAX )

Oct 09, 2024

임의로 정보들을 만들어 화면에 나올 수 있게 테스트 하기


 영화관
 let cinemaList = [`가산디지털단지`, `사상롯데시네마`, `화명CGV`, `서면롯데시네마`, `덕천메가박스`];
    for (let i = 0; i < cinemaList.length; i++) {
        console.log(cinemaList[i] + `<br>`);
    }
    
    영화
    let movieList = [{ age: 15, title: `베리드` }, { age: 15, title: `러브로지` }, { age: 19, title: `쏘우` }, { age: 19, title: `악마를 보았다` }];
    for (let i = 0; i < movieList.length; i++) {
        console.log(movieList[i].age + `<br>`);
        console.log(movieList[i].title + `<br>`);
    }
    
    //날짜
    var today = new Date();
    var date = today.getDate();//일
    //현재 날짜 +1   
    for (let i = 0; i < 10; i++) {
        console.log(date + i);
    }
    
    상영시간 + 좌석
    let seatList = [{ time: `14:35`, remain: `85/90` }, { time: `18:35`, remain: `20/98` }]
    for (let i = 0; i < seatList.length; i++) {
        console.log(seatList[i].time + `<br>`);
        console.log(seatList[i].remain + `<br>`);
    }

아직 day로 하면 일요일 시작으로 0123456 으로 숫자로 나오는 것은 아는데 이 것을 요일로 바꾸는 법이 아직 미숙함

먼저 화면 뿌리고 시작할 예정


<!-- 메인 콘텐츠 -->
        <div class="main__content">
            <!-- 영화관 선택 -->
            <div class="section">
                <div class="section__title">영화관</div>
                <div class="content cinema__selection">
                    <div onclick="cinemaLists()" class="cinema__area">
                        <div class="cinema__item">부산</div>
                        <div class="cinema__item">서울</div>
                    </div>
                    <div class="cinema__name" id="cinemas">

                    </div>
                </div>
            </div>

            <!-- 영화 선택 -->
            <div class="section">
                <div class="section__title">영화 선택</div>
                <div class="content" id="movies">

                </div>
            </div>


let isMovieListsExecuted = false;

    // 여기서는 영화 리스트를 가지고 와야한다
    let movieList = [{ age: 15, title: `베리드` }, { age: 15, title: `러브로지` }, { age: 19, title: `쏘우` }, { age: 19, title: `악마를 보았다` }];
    for (let i = 0; i < movieList.length; i++) {
        console.log(movieList[i].age + `<br>`);
        console.log(movieList[i].title + `<br>`);
    }

    function movieLists() {
        if (isMovieListsExecuted) return;
        for (let i = 0; i < movieList.length; i++) {
            $("#movies").append(makeMovies(i))
        }
        isMovieListsExecuted = true;
    }
    function makeMovies(id) {
        return ` <div class="movie__item">
                        <img src="num_${movieList[id].age}.png" alt="rating">
                        <span>${movieList[id].title}</span>
                    </div>`
    }

    function cinemaLists() {
        if (isCinemaListsExecuted) return;

        for (let i = 0; i < cinemaList.length; i++) {
            $("#cinemas").append(makeCinemas(i))
            console.log(cinemaList[i] + `<br>`);
        }
        isCinemaListsExecuted = true;
    }

    function makeCinemas(id) {
        return ` <div onclick="movieLists()"  class="cinema__detail__item">${cinemaList[id]}</div>`
    }

이런식으로 먼저 화면 클릭 시 이동되는 것을 먼저 연습함

근데 이거 왜 된거지? 아직 모름

잘 몰랐던게 ShowtimeResponse.MoveiDTO를 받을 때 생성자 Moive movie를 넣었는데 List<Movie>로 받아야해서 고민 계속함

참고함 여기에서

List를 Dto로 반환하는 방법 - RESTful API

List를 Dto로 반환하기

https://velog.io/@nyong_i/List를-Dto로-반환하는-방법-RESTful-API

이거 그냥


public List<ShowtimeResponse.ShowTimeDTO> 날짜보기(Long date,Long id){
        List<Showtime> dats = showtimeRepository.mFindByDateIdMovieId(date,id);
        List<ShowtimeResponse.ShowTimeDTO> dtos = new ArrayList<>();

        for(Showtime showtime : dats){
            ShowtimeResponse.ShowTimeDTO dto = new ShowtimeResponse.ShowTimeDTO(showtime);
            dtos.add(dto);
        }
        return dtos;
    }

이렇게 했으면 됐는데 이 때는 기억을 못했었음

그래서 이런식으로 했음


public List<ShowtimeResponse.MovieDTO> 영화관영화보기(Long id){
        List<Screen> screens = screenRepository.mFindScreenByCinemaId(id);
        List<Long> screenIds = screens.stream().map(screen -> screen.getId()).toList();
        List<Showtime> showtimes = showtimeRepository.mFindByWithMovieScreenIds(screenIds);

        List<Movie> moviePs =  showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
        List<ShowtimeResponse.MovieDTO> movieList = new ArrayList<>();
        for(Movie movie : moviePs){
            ShowtimeResponse.MovieDTO dto = ShowtimeResponse.MovieDTO.builder()
                    .id(movie.getId())
                    .movieNm(movie.getMovieNm())
                    .ratingGrade(movie.getRatingGrade())
                    .build();
            movieList.add(dto);
        }
        return movieList;
    }

일단 리포지토리


@Query("select distinct st from Showtime st left join fetch st.movie mt where st.screen.id IN :ids ")
    List<Showtime> mFindByWithMovieScreenIds(@Param("ids") List<Long> ids);

서비스


 public List<ShowtimeResponse.MovieDTO> 영화관영화보기(Long id){
        List<Screen> screens = screenRepository.mFindScreenByCinemaId(id);
        List<Long> screenIds = screens.stream().map(screen -> screen.getId()).toList();
        List<Showtime> showtimes = showtimeRepository.mFindByWithMovieScreenIds(screenIds);

        List<Movie> moviePs =  showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
        List<ShowtimeResponse.MovieDTO> movieList = new ArrayList<>();
        for(Movie movie : moviePs){
            ShowtimeResponse.MovieDTO dto = ShowtimeResponse.MovieDTO.builder()
                    .id(movie.getId())
                    .movieNm(movie.getMovieNm())
                    .ratingGrade(movie.getRatingGrade())
                    .build();
            movieList.add(dto);
        }
        return movieList;
//        List<Showtime> showtimes = showtimeRepository.mFindByScreenIds(screenIds);
//        List<Movie> moviePs = showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
    }

컨트롤러


 @GetMapping("/reservation/cinema/{id}")
    public ResponseEntity<?> movies(@PathVariable("id") Long id){
        List<ShowtimeResponse.MovieDTO> movieList = showtimeService.영화관영화보기(id);
        return ResponseEntity.ok(Resp.ok(movieList));
    }

또 다른 궁금증

왜 alt=”rating” 이라 하면 사진이 안 보이고 rating 글자만 보일까?


async function movies(cinemaId){
        let response = await fetch("http://localhost:8080/reservation/cinema/"+cinemaId,{
            method: "get"
        });
        let data = await response.json();
        console.log("data ", data);
        console.log("body ", data.body);

        $("#movie-box").empty();
        for(movie of data.body){
            let dom = makeMovie(movie);
            $("#movie-box").append(dom);

        }
    }
function makeMovie(movie){
        return ` <div class="movie__item">
                        <img src="num_${movie.ratingGrade}.png" alt="rating">
                        <span>${movie.movieNm}</span>`;
    }