## Enact Client

npm install -g @enact/cli@6.0.4
node v16.13.0 //14이상이면 별상관없을것 같긴한데

## package

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

## React import 필요

컴포넌트 상단에 React import 필요함.
import React from "react";

## 빌드하여 chrome 38버전에서 확인필요

npm run build 또는 npm run pack
npx http-server ./dist

## 크롬 webos3.0 버전 링크

https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app

## 주의

async / await 함수 사용 불가 --> promise 방식으로 적용
css 에서 calc 문법 주의. 문자열로 사용해야함.
calc(@toplayerHeight + 22px); ==> ~"calc(@{toplayerHeight} + 22px)";

## 배포

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

## 배포 시 주의 사항

- `develop` 환경에서는 [오토 스크롤 영역]("./assets/src/components/AutoScrollArea.module.less")을 명확하게 보기 위해 `background-color`를 보여지게 했으나, 배포 시에는 `production` 상태로 바꿔서 빌드하셔야 합니다.

```less
// 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로 조절)

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

## TScroller 사용시 여백

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

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