파이널 프로젝트 - 1

1. issue 1

tmdb api를 사용해서 첫번째 탭 더보기 버튼을 누를 때마다 다른 데이터를 가져오는 건 성공! 문제는 박스오피스 페이지를 모두 출력 후에 더보기 버튼이 disabled 상태가 되는데, 다른 탭(상영예정작, 인기 영화)을 눌렀을 때 더보기란이 여전히 disabled 상태라서 데이터를 출력할 수가 없다는 것이었다.

처음 짰던 코드의 일부는 아래와 같다. 해당 탭의 전체 페이지만큼 데이터를 출력하면 더보기 버튼은 disabled 상태가 된다. 다른 탭을 눌렀을 때도 disabled 상태가 그대로 유지가 된다.

    var currentPage = 1;

    function refreshMovie() {
        currentPage = 1;
        $div.empty();
        getMovieList();
	}

    $("#searchMore").click(function() {
        if (currentPage < totalPage) {
            currentPage++;
            getMovieList();
        } else {
            this.disabled = true;
        }
    });

refreshMovie 함수에서도 currentPage 값을 1로 줬는데 왜 안 풀리지 하면서 끙끙대다가 disabled의 속성을 삭제하면 되겠다, 싶어서 바로 refreshMovie 함수에 적용! 버튼에 disabled 속성을 삭제해 준 이후로는 다른 탭을 눌렀을 때 정상적으로 데이터가 출력이 된다. $("#searchMore").removeAttr("disabled");

    function refreshMovie() {
        $("#searchMore").removeAttr("disabled");
        currentPage = 1;
        $div.empty();
        getMovieList();
    }

2. issue 2

박스오피스, 상영예정작, 인기 영화 탭 모두 결과 카운트 값이 달라서 토탈 페이지를 각기 적용해 주어야 했다. 현재 받아온 데이터로는 박스오피스는 64개, 상영예정작은 17개, 인기 영화는 총 2000개였기 때문에 인기 영화의 result는 100개로 변경해 주고, 토탈페이지는 페이지네이션 시에 적용했던 것처럼 ceil 함수를 적용해서 구해주었다.

    var currentPage = 1;
    var totalPage = 0;

    function getMovieList() {
        $.ajax({					
            type: 'get',
            url: currentMovieUrl,
            data: {
                "api_key": "your api key",
                language: "ko-KR",
                region: "KR",
                page: currentPage
            },
            dataType: 'json',
            success: function(response) {
                
                var resultCount = response.total_results;
                
                // response에서 구한 값이 100개 이상이면 resultCount의 값을 100으로 설정해준다.
                if (resultCount > 100) {
                    resultCount = 100;
                    
                    // api에서 한 페이지당 불러오는 데이터는 총 20개이다. 
                    // totalPage의 값을 전체 데이터 수 / 20으로 해서 구해주었다.
                    totalPage = Math.ceil(resultCount/20);
                    $("#count").text(100);
                    
                } else {
                    totalPage = Math.ceil(resultCount/20);
                    $("#count").text(response.total_results);
                }
                
                var movie = response.results;
                
                $.each(movie, function(index, movie) {
                    var poster = imageUrl+movie.poster_path; 
                    // 구현 생략
                })
            }
        });	
    }

이게 뭐라고.. 힘들었냐..!!!