Kcp 복지몰 제작

1. 01

   상품 박스 공통 레이아웃 설정

   Problem페이지마다 조금씩 다른 상품 영역 레이아웃을 통일하고 유지보수하기 쉽게 만들어야 했습니다.

   Solutiongoods_img, goods_txt 공통 레이아웃으로 구조화해 어느 페이지에서든 같은 마크업과 스타일을 쓰도록 했습니다.

   <a class="link" href="04_product_detail.html">
     <div class="goods_img">
       <img src="resources/images/12Ya81.jpg">
       <div class="item-util">
         <span class="d-day">D-468</span>
       </div>
     </div>
     <div class="goods_txt">
       <div class="txt_wrap">
         <div class="sub_title">
           <p class="elip2 brand-name">인기상품 영역임</p>
           <h2 class="elip2">인기상품 영역임</h2>
         </div>
         <div class="time_price">
           <div class="price_wrap">
             <del>32,000원</del>
             <ins><strong>1,222,000</strong>원</ins>
           </div>
           <span class="time_sale"><strong>31</strong>%</span>
         </div>
         <div class="item-user">
           <div class="user-img"><img src="resources/images/men01.png" alt=""></div>
           <div class="user-txt">
             <p class="user-pick">KCP PICK</p>
             <h3 class="user-name">기획본부 디자인팀 해피밀</h3>
           </div>
         </div>
       </div>
     </div>
   </a>

   .sub-txt{font-size:12px;font-weight:400;line-height:18px}
   .brand-name{font-weight:700;font-size:14px;line-height:1;padding-bottom:4px}
   .goods_txt h2,.item-name{font-weight:400;line-height:20px;font-size:14px;margin-bottom:8px}
   .price_wrap{margin-bottom:16px}
   .price_wrap del{display:block;font-size:12px;line-height:1;color:#9d9d9d;padding-bottom:4px}
   .price_wrap strong{font-weight:700;font-size:22px;line-height:1}
   .state .count{color:#9d9d9d;font-size:12px;line-height:18px}

2. 02

   메인페이지 상품 정기 교체를 위한 데이터 바인딩

   Problem기능 개발이 진행되지 않은 메인페이지 영역을 하드코딩해야 했습니다. 메인 비주얼, 이벤트 섹션을 포함한 3곳의 이미지와 상품 50개를 정기적으로 정확하게 바꿔야 했습니다.

   Solution상품 데이터를 JSON 구조로 정리해 main.html의 데이터만 고치면 화면이 바뀌도록 바인딩했습니다. 이미지 교체가 바로 반영되도록 캐시 무효화 쿼리(?pp=2304171)를 붙이고, 이미지 파일 이름 규칙(ct01_01, img_openSale01, img_main_pic)을 정했습니다.

   const datas = {
     mainVisual: [
       {
         img: "resources/images/banner/bnr_main02.png",
         info: "매주쏜다 당첨자 발표",
         link: "https://www.youtube.com/watch?v=sNZIYCLTGPc",
         event: "T"
       },
     ],
     category: [{
       title: "단,일주일!<br>9,900",
       link: 0,
       bnrImg: "resources/images/banner/bnr-ct00.png",
       goods: [{
         id: "3b28cfb0-554f-4b83-9e5f-89ad599a375d",
         img: "resources/images/thumb/ct00_01.jpg",
         brand: "플라워박스",
         name: "★어버이날 선물★ 카네이션 비누꽃 플라워 용돈박스 돈꽃상자",
         originPrice: "15,000 원",
         price: "9,900",
         percent: 34,
       }],
     }],
     // oneDay, openSale, kcpPick 도 같은 구조
   };
   
   fn_mainVisualInit();
   fn_categoryInit();
   fn_oneDayInit();
   fn_openSaleInit();
   fn_kcpPickInit();

   function fn_setMainVisual() {
     $('#shopBannerImg').empty();
     let html = '';
     for (let data of datas.mainVisual) {
       html += '<div class="main_visual" style="' + 'background:url(' + data.img +
         ') center center / cover no-repeat; width: 100%; display: inline-block">';
       if (data.link !== "") {
         if (data.event === "N") {
           html += '<a href="' + data.link + '" title="' + data.info + '"></a>';
         } else if (data.event === "T") {
           html += '<a href="' + data.link + '" title="' + data.info + '" target="_blank"></a>';
         } else {
           html += '<a href="event/detail?eventKeyId=' + data.link + '" title="' + data.info + '"></a>';
         }
       }
       html += '</div>';
     }
     $('#shopBannerImg').append(html);
   }

   let categoryBtn = new Swiper(".categoryBtnSwiper", {
     slidesPerView: "auto",
     loop: true,
     slideToClickedSlide: true,
   });
   
   let category = new Swiper(".categorySwiper", {
     slidesPerView: "auto",
     spaceBetween: 20,
     loop: true,
   });
   
   // 탭 슬라이드와 상품 슬라이드를 서로 연결 (이중 Swiper)
   category.controller.control = categoryBtn;
   categoryBtn.controller.control = category;

전체 작업 목록