shoptime/com.twin.app.shoptime

Enact Client

• npm install -g @enact/cli@6.0.4

enact 및 기타 라이브러리 버전 변경 불가

Node.js >= v14.0.0 (recommended: v16.13.0)

개발 및 테스트 환경

빌드 방법

# 개발 빌드
npm run build
# 또는
npm run pack

# 빌드 결과물 테스트를 위한 로컬 서버 실행
npx http-server ./dist

Chrome 테스트 환경

• WebOS 3.0용 Chrome 38 버전 필수
• Chrome 38 버전 다운로드 및 설치: WebOS TV 개발자 사이트
• 모든 기능은 반드시 Chrome 38에서 테스트 필요

Chrome 38 브라우저 호환성 제한사항

JavaScript 제한사항

1. async/await 문법 - 지원되지 않음 (Chrome 55부터 지원)

   • 대체방법: Promise 체이닝 방식 사용

   // Promise 방식으로 비동기 처리
   function getData() {
       return fetch('/api/data')
           .then(function(result) {
               return result;
           });
   }
   

2. ESLint - 지원되지 않음 (Enact CLI 6.0.4 버전 제한)

   • 이유: ESLint 6 이후 버전과의 호환성 문제
   • WebOS 3.0 호환성을 위해 Enact 버전 업그레이드 불가

3. React import 문 필수

   • 모든 컴포넌트 파일 상단에 React import 필요

   import React from "react";
   

CSS 제한사항

1. CSS Grid Layout
2. CSS Flexbox
3. CSS Variables (Custom Properties)
4. CSS gap 속성 - margin 혹은 padding 사용
5. CSS calc() - 제한적 지원 (문자열로 사용 필요)

calc(@toplayerHeight + 22px); 
 /* 사용불가 */

 ~"calc(@{toplayerHeight} + 22px)";
  /* 문자열로 사용 가능 */

6. CSS Transforms 3D
7. CSS Animations/Transitions
8. CSS Filter Effects
9. CSS Masks
10. CSS Custom Scroll Snap
11. CSS Logical Properties

code convention

1. vs-code extension: js/ts import/export sorter 설치

2. vs-code setting.json

{

"prettier.tabWidth": 2,

"prettier.printWidth": 80,

"prettier.trailingComma": "es5",

"tsImportSorter.configuration.keepUnused": [".*"],

}

배포

npm install -g @enact/cli@6.0.4 npm install npm run build --> ./dist 폴더 배포

배포 시 주의 사항

• develop 환경에서는 오토 스크롤 영역을 명확하게 보기 위해 background-color를 보여지게 했으나, 배포 시에는 production 상태로 바꿔서 빌드하셔야 합니다.

// AutoScrollArea.module.less

.autoScrollArea {
  position: absolute;
  z-index: 20;
  background-color: transparent; /* production */
  // background-color: #ff00001f; /* develop */
}

상태로 변경 후 배포 부탁드립니다.

TVirtualGridList 사용시 여백

OnSaleProductList.jsx 참고 --> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)

// OnSaleProductList.module.less
.tVirtualGridList {
  padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
}

TScroller 사용시 여백

SubCategory.jsx 참고(Home) --> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)

// SubCategory.module.less
.home {
  > div {
    > div {
      padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
    }
  }
}

자막영상

ontv4u 검색 후 첫 영상

컴포넌트 사용 가이드라인

1. Grid 레이아웃 여백 설정

TVirtualGridList 사용시 여백

OnSaleProductList.jsx 참고 --> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)

// OnSaleProductList.module.less
.tVirtualGridList {
  padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
}

2. 스크롤 레이아웃 여백 설정

TScroller 사용시 여백

SubCategory.jsx 참고(Home) --> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)

// SubCategory.module.less
.home {
  > div {
    > div {
      padding-left: 60px; /* GUI 가이드에 맞도록 적절히 조절 */
    }
  }
}

3. 테스트용 자막 영상

자막영상 테스트

ontv4u 검색 후 첫 영상