SSG MOBILE

사이트명: SSG MOBILE
제작기간: 3일
사용언어: HTML, CSS, JS
분류: M

✔️ Main Point

• 전체 데이터 바인딩 사용 작업

✏️ Project Review

~ 2022년도 프로젝트 작업 시 문제점

• 개발을 고려하지 않는 퍼블리싱

보완사항

• 데이터 바인딩 사용

데이터 바인딩

❗️ 데이터 바인딩을 사용하였다.

    fetch('./assets/data/giftData.json') //데이터 파일을 불러옴.
        .then((response) => response.json()) //데이터를 json으로 변환.
        .then((json) => {
            data = json.items; //json에 있는 items를 받아오기.
            let html = ''
            data.forEach(element => { //배열 수만큼 반복문을 돌리기 위함.



              isPer = (element.cost === element.price) ? "hide":''
              //isPer = (원가와 할인가가 같을 경우(참일 시))  
              //hide 클래스를 추가한다.


                html += `<li class="ssg-item">
            <a href="/category/${element.id}" class="img-wrap">
              <img src="${element.thumb}" alt="${element.title}">
            </a>
            <div class="basic-icon">
              <a href="" class="heart"><span class="blind">하트</span></a>
              <a href="" class="cart"><span class="blind">카트</span></a>
            </div>
            <a href="" class="txt-wrap">
              <p><strong>${element.title}</strong>
               <span>${element.productName}</span>
                ${element.productInfo}</p>
              <div class="" class="amount-box">
                <p class="cost">
                  <span class="cost-num ${isPer}">${numberformat(element.cost)}</span>
                  <span class="cost-unit">원</span>
                </p>
                <p class="dc">
                  <span class="dc-per ${isPer}">${element.per}</span>
                  <span class="dc-price">${numberformat(element.price)}</span>
                  <span class=dc-unit>원</span>
                </p>
              </div>
              <p class="eval"><span>★ ${element.marks}</span><span>${element.cases}건</span> </p>
            </a>
          </li>`;
            });
            $('#giftData').html(html);
        })

해당 JSON 데이터 파일.

{
    "items": [
        {
            "id": 1000,
            "thumb": "./assets/images/gift-product01.jpg",
            "title": "이마트몰",
            "productName": "신라명과",
            "productInfo": "골든쿠키세트(605)+쇼핑백/고급선물세트/간식/쿠키/선물용",
            "cost":"18900",
            "per":"10%",
            "price":"16900",
            "marks": "4.8",
            "cases": "264"
        }
 }

cosEl = (element.cost) ? element.cost : element.sale;

모바일 작업 시 추가사항 viewport-fit=cover

❗️ 가로 모드일 때 좌우 흰색여백영역이 있다. 이전에 하나원큐 모바일 작업을 하면서, 'viewport-fit=cover' 를 추가가 필요했다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

모바일 작업 시 추가사항 safe-area-inset 속성

❗️ 메타 태그의 기본값은 auto이다. 그러나 cover를 주게 되면 꽉 차는 화면을 가지게 된다. header와 footer 내부의 글자가 보이지 않을 수 있다.

constant(), env() 애플이 위와 같은 문제를 해결하기 위해 제공하는 CSS 속성이 있다.

IOS 11 당시 constant()라는 속성을 제공하였으나 IOS 11.2로 업데이트가 되면서 env() 속성으로 변경이 되었다. 업데이트하지 않은 만약의 경우를 생각해서 둘 다 넣어주면 된다.

.header { 
  display: flex; 
  align-items: center; 
  padding-top: calc(10px + env(safe-area-inset-top)); 
  padding-left: calc(15px + env(safe-area-inset-left)); 
  padding-right: calc(15px + env(safe-area-inset-right));
} 

overflow-x:auto

❗️ 이전 프로젝트 작업 시 body에 overflow:hidden을 주며 스크롤 여백을 없애는 작업을 했다. 모바일 스크롤을 위해서는 각각의 overflow-x: auto를 지정해주어야한다.

.sc-menu { -ms-overflow-style: none; margin-top: 19px; } 
.sc-menu::-webkit-scrollbar { display: none; } 
.sc-menu .cate-wrap { overflow-x: auto; } 

이미지 나열 다른 케이스

.sc-special .img-wrap { 
  position: relative; 
  display: flex; 
  width: 100%; 
} 

.sc-special .img-wrap .img-thumb { 
  position: relative; 
  width: 100%; 
  padding-bottom: 77%; /*높이 값을 padding-bottom 값으로 대체*/
  background: #00f; 
  margin-right: 15px; 
  flex-shrink: 1; /*같이 줄어들게*/
  border-radius: 8px; 
  overflow: hidden; 
} 

.sc-special .img-wrap .img-thumb:after { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.03); 
  content: ""; 
} 

.sc-special .img-wrap .img-thumb img { 
  width: 100%; 
  position: absolute; top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
} 

.sc-special .txt-wrap { 
  margin-top: 14px; 
  display: block; 
} 

.sc-special .column-list {
  width: 23%; 
  flex-shrink: 1; /*같이 줄어들게*/
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 

.sc-special .column-item a { 
  display: block; 
  padding-bottom: 100%;  /*높이 값을 padding-bottom 값으로 대체*/
  position: relative; 
  border-radius: 8px; 
  overflow: hidden; 
} 

.sc-special .column-item a:after { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.03); 
  content: ""; 
} 

말줄임 시 추가 유의사항

.footer .notice-txt {
    overflow: hidden;
    font-size: 11px;
    color: #666;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; /*flex:1을 넣어야 줄어들면서 말줄임이 가능*/
}

position : sticky

❗️ 카테고리 sticky 효과

.wrapper {position: relative;} /*부모 relative 설정 필수*/

.stiky-nav { 
position: sticky; 
top: 0; /*값 설정 필수*/
z-index: 10;
}