배민찬

슬라이딩 효과

이전에는 templating에 사용되는 html을 쪼개서 메소드로 만들었다. 가독성과 유지보수가 어려웟다.

이번에는 한번에 합쳐보았다

mainSectionListItem({image, delivery_type, title, description, n_price, s_price, badge}) {
      return `
      <li class='main_section_list_item'>
        <div class="main_section_list_item_img_wrap">
          <img class='main_section_list_item_img' src="${image}" alt="side_dish_1">
          <div class="main_section_list_item_delivery_type_wrap">
            <div class="main_section_list_item_delivery_type">
              ${
                delivery_type.reduce((html, deliveryType, index) => {
                  return `<div class="main_section_list_item_delivery_type_${index+1}">${deliveryType}</div>`
                }, '')
              }
            </div>
          </div>
        </div>
...`
}

가독성이 좋아졌다