[프로젝트]중고 경매 사이트 - 제시요(메인화면 카테고리 리스트)

화면

JavaScript

all();

 async function all(){
     let carouselInner = document.querySelector(".t1-hotCategory");
    let data = await categorySelectAll();
    let s =Math.ceil(data.length/4);
    let str = ``;
    for(let i= 0; i<s; i++){
        str += `<div class="t1-carousel-item carousel-item"><div class="t1-category-box d-flex justify-content-center" style="gap: 20px;"></div></div>`
    }
     carouselInner.innerHTML=str;

    let carouselItem = document.querySelectorAll(".t1-carousel-item");
    if (carouselItem.length > 0) {
         carouselItem[0].classList.add ('active');
     }

    let categoryBox = document.querySelectorAll(".t1-category-box");
    let num = 0;
    let str2 =``;
    for(let i=0; i<data.length; i++){
        str2+=`
             <div class="t1-category">
                 <input type="hidden" value="${data[i].id}">
                 <a href="/goods-list/${data[i].id}"><img src="${data[i].imgUrl}" class="rounded" alt="디지털기기"></a>
                 <div class="t1-category-name">${data[i].name}</div>
             </div>      `
        if((i+1)%4==0){
            if (num < categoryBox.length) {
                categoryBox[num].innerHTML = str2;
                num++;
                str2 = ``;
            }
        }
    }
     if (str2 !== '' ) {
         categoryBox[num].innerHTML = str2;
     }
}

async function categorySelectAll(){
    let url = "/api/v1/category"
        let response = await fetch(url);
        let responseData = await response.json();
        if(!responseData.success){
            throw new Error("네트워크 응답에 문제가 있습니다.");
        }
        let data = responseData.data;
        return data;
}

Controller

    @ResponseBody
    @GetMapping("/api/v1/category")
    public ResponseEntity<?> category() {
         List<CategoryResponse.CategoryDTO> dto = categoryService.findAllCategory();
         CommonResp<List<CategoryResponse.CategoryDTO>> resp = CommonResp.success(dto);
         return new ResponseEntity<>(resp, HttpStatus.OK);
    }

Service

    public List<CategoryResponse.CategoryDTO> findAllCategory() {
        List<Category> categoryList = categoryRepository.findAllCategory();

        List <CategoryResponse.CategoryDTO> categoryDTOList = new ArrayList<>();

        for (Category category : categoryList) {
            categoryDTOList.add(new CategoryResponse.CategoryDTO(category, false));
        }

        return categoryDTOList;
    }

Repository

    public List<Category> findAllCategory() {
        Query q = em.createQuery("SELECT c FROM Category c", Category.class);
        return q.getResultList();
    }

Entity

@NoArgsConstructor
@Table(name = "category_tb")
@Getter
@Entity
public class Category {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column(unique = true, nullable = false)
    private String name;

    @Column(nullable = false)
    private String imgUrl;

    @Builder
    public Category(Integer id, String name, String imgUrl) {
        this.id = id;
        this.name = name;
        this.imgUrl = imgUrl;
    }
}

해설