## Enact Client

- npm install -g @enact/cli@6.0.4 

enact 및 기타 라이브러리 버전 변경 불가
  
Node.js >= v14.0.0 (recommended: v16.13.0)

## 개발 및 테스트 환경

### 빌드 방법
```bash
# 개발 빌드
npm run build
# 또는
npm run pack

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

### Chrome 테스트 환경
- WebOS 3.0용 Chrome 38 버전 필수
- Chrome 38 버전 다운로드 및 설치: [WebOS TV 개발자 사이트](https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app)
- 모든 기능은 반드시 Chrome 38에서 테스트 필요

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

### JavaScript 제한사항
1. async/await 문법 - 지원되지 않음 (Chrome 55부터 지원)
   - 대체방법: Promise 체이닝 방식 사용
   ```javascript
   // 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 필요
   ```javascript
   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() - 제한적 지원 (문자열로 사용 필요) 
 ```css
 calc(@toplayerHeight + 22px); 
  /* 사용불가 */

  ~"calc(@{toplayerHeight} + 22px)";
   /* 문자열로 사용 가능 */
  ```
6. CSS Transforms 3D 
2. CSS Animations/Transitions 
3. CSS Filter Effects 
4.  CSS Masks
5.  CSS Custom Scroll Snap 
6.  CSS Logical Properties 
   


## code convention

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

2.  vs-code setting.json
   ```less
   
{

"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` 환경에서는 [오토 스크롤 영역]("./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 가이드에 맞도록 적절히 조절 */
    }
  }
}
```

### 자막영상

ontv4u 검색 후 첫 영상

## 컴포넌트 사용 가이드라인

### 1. Grid 레이아웃 여백 설정
#### TVirtualGridList 사용시 여백

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

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

### 2. 스크롤 레이아웃 여백 설정
#### TScroller 사용시 여백

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

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

### 3. 테스트용 자막 영상
#### 자막영상 테스트

ontv4u 검색 후 첫 영상