선택된 값을 전역변수로 관리 하여 파라미터로 넘길 예정.
(클릭 이벤트 호출 마다 해당 값을 여기 저장시킨다.)
// 이렇게 했어도 좋았을걸..letcurrentFilter= {
areaCode: 'all', // 기본값은 전국
sigunguCode: '', // 기본값은 빈 값
sortBy: ''// 기본값은 빈 값
};
let activeSigunguItem = null;
let currentAreaCode = 'all'; // 기본값을 전국으로 설정let currentSigunguCode = ''; // 기본값은 빈 값let currentSortBy = '';
asyncfunctionareaClick(areaCode, areaName, element) {
// 선택된 지역 스타일 지정 위해 active 클래스 추가if (activeItem) {
activeItem.classList.remove("active");
}
element.classList.add("active");
$(".place__name2").remove(); // 시군구가 나올 div
activeItem = element;
currentAreaCode = areaCode; // 선택한 areaCode 업데이트// area 를 클릭하면 sigungu 는 선택되지 않은 상태이므로 빈문자열로 초기화
currentSigunguCode = '';
awaitfetchArea(areaCode, areaName); // 지역클릭시 시군구 찾는 fetchlet contentUrl = `get-info?area=${areaCode}`;
awaitfetchContent(contentUrl); // 지역 코드만 매개변수로 받아 내부 컨텐츠 찾기// "전국"을 클릭한 경우if (areaCode === 'all') {
$(".place__box1__title").text("# 전국");
}
}
asyncfunctionfetchArea(areaCode, areaName){
let response = awaitfetch(`get-sigungu?area=${areaCode}`);
let responseBody = await response.json();
$(".place__box1__title").text(`# ${areaName}`); //왼쪽 상단 #서울 에 해당//2. 받아온 데이터로 div 만들기let sigunguList = responseBody.body;
let placeName2Div = $("<div>").addClass("place__name2");
for(sigungu of sigunguList){
let dom = sigunguItem(sigungu);
placeName2Div.append(dom);
}
$(".place__name1").after(placeName2Div)
requestAnimationFrame(() => {placeName2Div.css({opacity: 1})});
}
functionsigunguItem(responseBody){
return` <div onclick="sigunguClick('${responseBody.code}','${responseBody.area.code}',this)" class="place__name2__item">${responseBody.name}</div>`;
}
여기 까지 하면 왼쪽 상단의 #지역 과 지역에 맞는 시군구가 랜더링 된다.
2. 클릭시 적절한 내부 컨텐츠 출력하기
시군구나 정렬기준 클릭 시 내부 컨텐츠가 알맞게 랜더링 되어야 한다.
적절한 파라미터를 설정하여 요청을 보내면 되도록 코드를 구성했다.
일단 얘 역시 여러가지 파라미터를 동적으로 할당받고 있기 때문에 동적쿼리 작성이 필요하다.
public List<Content> findByContentTypeIdAndOption(String contentTypeId, String area, String sigunguCode,String sortBy, Pageable pageable) {
StringBuilderqueryStr=newStringBuilder("select c from Content c where c.contentTypeId = :contentTypeId and c.areaCode= :area");
if (sigunguCode != null && !sigunguCode.isEmpty()) {
queryStr.append(" and c.sigunguCode = :sigunguCode");
}
if (sortBy != null && !sortBy.isEmpty()) {
if (sortBy.equals("createdTime")) {
queryStr.append(" order by c.createdTime desc");
} elseif (sortBy.equals("viewCount")) {
queryStr.append(" order by c.viewCount desc");
}
}
Queryquery= em.createQuery(queryStr.toString(), Content.class);
query.setParameter("contentTypeId", contentTypeId);
query.setParameter("area", area);
if (sigunguCode != null && !sigunguCode.isEmpty()) {
query.setParameter("sigunguCode", sigunguCode);
}
query.setFirstResult((int) pageable.getOffset()); // 시작 위치
query.setMaxResults(pageable.getPageSize()); // 한 페이지에 표시할 최대 개수return query.getResultList();
}
![[방방곡곡] info 페이지 출력 - 2차](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-12-04T08%3A08%3A59.639Z-3a127c94-c088-4341-a99e-9cafc07fe06c&w=3840&q=75)
