0824 작업일지_

0. 포스트맨에서 결과값을 먼저 확인함.
1. 쿼리 파라미터를 확인함.
2. 에이잭스를 function으로 한번 감싸준다.
   ex) function getChurch()
3. 2가 호출 될 수 있도록? 2 위에 넣어준다.

$(function(){
            getChurch();
        });

4. html에서 input 에 클래스 query를 준다.
   ex) 성당명 또는 지역명을 검색하세요<가 있는 input
5. 2번에다 ``` 를 준다

let query=$(".query").val(); //input text 검색어 

6. onclick이벤트를 a에게, onkeyup이벤트를 input에게 넣어준다.

<a class="search-btn" onclick="getBaptismalList();">검색</a>

<input type="text" placeholder="세례명을 검색해주세요." class="btm-sel1 query" onkeyup="getBaptismalList();">

7. query?를 넘겨워야 하니까? (ajax안에)querytype밑에 query: query를 넣어준다.

<script>
        $(function(){
            getChurch();
        });

        let page=1; //페이지 변수선언

        function getChurch() {
            let query=$(".query").val(); //input text 검색어

            $.ajax({
                type: "GET",
                url: "/i-am-catholic/churches",
                data: {
                    "size": 15,
                    "queryType": "전체",
                    "query": query,
                    "page": page-1 //페이지 api 넘기는 값
                },
                success: function (result) {
                    console.log(result);
                    let listTag = "";

                    if (result.content.length != 0) { //결과값이 0이 아닐 경우
                        result.content.forEach(function (item) {
                            if (item.address1 == null) item.address1 = "";
                            // if( item.area == null ) item.area="-";
                            // if( item.status == null ) item.status="-";

                            listTag +=
                                "<li>" +
                                "<a href='./church_detail.html'>" +
                                "<div class='img-wrap'>" +
                                "<span><img src='/images/catholic_images/churchImg01.jpg' alt=''></span>" +
                                "</div>" +
                                "<div class='text-wrap'>" +
                                "<p class='title'>" + item.churchName + "</p>" +
                                "<ul class='info'>" +
                                "<li>" +
                                "<p class='tit'><span>주</span><span>소</span></p>" +
                                "<p class='text text1'>" + item.address1 + "</p>" +
                                "</li>" +
                                "<li>" +
                                "<p class='tit'><span>사</span><span>제</span></p>" +
                                "<p class='text text1'>" + item.priest + "</p>" +
                                "</li>" +
                                "<li>" +
                                "<p class='tit'><span>부</span><span>사</span><span>제</span></p>" +
                                "<p class='text text2'></p>" +
                                "</li>" +
                                "</ul>" +
                                "</div>" +
                                "<span class='more-btn'>+ 자세히 보기</span>" +
                                "</a>" +
                                "</li>";
                        });
                        $(".churchList-wrap").html(listTag);
                    }else{
                        $(".churchList-wrap").html(listTag);
                    }
                    fPagination(result, page); //페이지네이션 생성 함수 호출
                }
            });
        }

        $("#pagination").on("click", "a", function() { //페이지네이션 안에 a태그를 클릭했을 때
            page = parseInt($(this).attr("gopage")); //클릭된 a태그의 gopage 속성값을 숫자로 변환해서 page변수에 넣어준다.
            getChurch();
        });
    </script>