MD파일 업데이트 문서 작성

README.md

@@ -1,3 +1,100 @@
 # ShopTime
 
-LG ShopTime Project
+LG ShopTime Project 
+
+
+
+
+## 브랜치 관리 전략
+
+프로젝트는 다음과 같은 브랜치 구조로 관리됩니다:
+
+### 주요 브랜치
+
+- `main`
+  - 최종 릴리즈 및 검증이 완료된 소스 코드 보관
+  - 매주 목요일: QA 브랜치에서 검증 완료된 코드를 main으로 병합
+
+- `qa`
+  - 2차 테스트 및 최종 릴리즈 검증용 브랜치
+  - 매주 화요일: 배포 진행
+  - 매주 수요일: 검증 진행
+
+- `qa2`
+  - 1차 테스트용(qa2 배포) 소스 코드 보관
+  - LG 깃 레포지토리의 QA2 브랜치와 동기화 필수
+  
+- `develop`
+  - 고도화 작업 및 유지보수팀 코드 통합 브랜치
+  - 기능 개발 완료 후 코드 리뷰를 거쳐 해당 브랜치로 병합
+
+### 작업용 브랜치
+
+- `hotfix`
+  - 유지보수팀 전용 브랜치
+  - 수정 완료 후 develop 브랜치로 병합
+
+- `feat/name_v2`
+  - 고도화 작업팀 전용 브랜치
+  - 기능별로 별도 브랜치 생성 필요
+  - 예: `feat/home_v2`, `feat/search_v2`
+  - 작업 완료 후 develop 브랜치로 병합
+
+## 배포 프로세스
+
+1. 화요일
+   - QA 브랜치 배포
+   - QA2 → QA 브랜치 병합
+
+2. 수요일
+   - QA 브랜치 검증 진행
+
+3. 목요일
+   - QA → Main 브랜치 병합
+   - Main 브랜치 릴리즈
+
+
+- 배포에 대한 자세한 설명은 [배포 가이드](./RELEASE.md)를 참고해주세요.
+
+
+## 커밋 메시지 컨벤션
+
+
+### 고도화 작업
+- [branch name]Type : 작업내용
+- git commit -m "[home]feat : 선택약관 동의시 배너 나타남"
+
+### 유지보수 작업 
+- [jira task Number]Type : 작업내용
+- git commit -m "[SHOPTIME-4020]fix : pdf open test"
+
+
+### Type
+- `feat`: 새로운 기능 추가
+- `fix`: 버그 수정
+- `docs`: 문서 수정
+- `style`: 코드 포맷팅
+- `refactor`: 코드 리팩토링
+- `test`: 테스트 코드
+- `chore`: 빌드 업무 수정
+
+
+
+## 긴급 배포 프로세스
+
+1. 긴급 수정 사항 발생 시
+   - `hotfix` 브랜치에서 작업
+   - 담당 PM 및 리드 개발자 승인 필수
+
+2. 긴급 배포 승인 시
+   - `hotfix` → `qa2` 병합
+   - QA2 검증 진행
+   - 검증 완료 후 `qa` → `main` 순차적 배포
+
+3. 배포 후 조치
+   - 긴급 배포 내역 문서화
+   - 재발 방지 대책 수립
+   - `develop` 브랜치에도 수정사항 반영
+
+
+

RELEASE.md

@@ -0,0 +1,77 @@
+# 배포 가이드
+
+## QA2 배포 프로세스
+
+1. develop 브랜치 확인
+   - develop 브랜치에서 충돌 여부 확인
+   - 고도화 작업시 merge request 작성 > PM에게 확인 후 develop에 병합 필요
+
+2. qa2 브랜치로 코드 이동
+   - develop 브랜치의 코드를 qa2 브랜치로 이동
+   - merge request 작성 / 되도록 팀원에게 확인 절차 거쳐 병합
+
+3. LG 내부 레포지토리로 파일 복사
+   - beyond compare 또는 git diff를 사용하여 파일 비교
+   - 필요한 파일들을 LG 내부 레포지토리로 복사 및 붙여넣기
+   - 배포 날짜 및 넘버링 파일 확인 필요 
+
+4. 빌드 프로세스
+   - LG 내부 레포지토리에서 build 실행
+   - 빌드된 파일을 LG 내부 백엔드 QA2 레포지토리의 src/resourse/static 디렉토리로 복사
+
+5. 백엔드 QA2 레포지토리 업데이트
+   - 복사된 파일들을 커밋
+   - 백엔드 레포 업데이트
+   - 변경사항 push
+
+6. Jenkins 배포
+   - Jenkins에 접속
+   - 팀즈 그룹 채팅방에 QA2 배포 진행 알림
+
+7. 다중 환경 배포
+   - main 브랜치에서 qa2를 다음 환경에 배포:
+     - AIC
+     - EUC
+     - RUS
+     - 기타 필요한 환경
+
+8. 티비 테스트
+
+
+## QA 배포 프로세스
+
+QA2 검증이 끝난 정기 배포 / 매주 화요일 진행
+
+1. qa 브랜치 업데이트
+   - qa2 브랜치에 있는 내용 중 qa 배포가 필요한 내용들을 이동
+   - merge request 작성 후 되도록 팀원 확인 필요
+
+2. build 진행 
+   
+
+3. 백엔드 QA 레포지토리 업데이트
+   - git pull로 업데이트
+   - build 파일  src/resourse/static 디렉토리로 복사
+   - 타겟 폴더 제외하고 프론트 build 파일만 선택후 add
+
+4. 백엔드 QA2 레포지토리 업데이트
+   - 커밋 내용 상세하게 기제 필요
+   - push 진행
+  
+5. Jenkins 배포
+   - Jenkins에 접속
+   - 팀즈 그룹 채팅방에 QA 배포 진행 알림
+
+6. 다중 환경 배포
+   - main 브랜치에서 qa를 다음 환경에 배포:
+     - AIC
+     - EUC
+     - RUS
+     - 기타 필요한 환경
+
+7. 주간 배포 진행 후 보고서 작성
+
+8. main 브랜치 업데이트
+   - 목요일 최종 릴리즈 된 코드들은 merge request 업데이트
+   - 해당주의 작업 사항을 상세하게 기제
+

com.twin.app.shoptime/README.md

@@ -1,41 +1,106 @@
 ## Enact Client
 
-npm install -g @enact/cli@6.0.4
+- npm install -g @enact/cli@6.0.4 
-node v16.13.0 //14이상이면 별상관없을것 같긴한데
 
-## package
-
-eslint 사용불가
 enact 및 기타 라이브러리 버전 변경 불가
+  
+Node.js >= v14.0.0 (recommended: v16.13.0)
 
-## React import 필요
+## 개발 및 테스트 환경
 
-컴포넌트 상단에 React import 필요함.
+### 빌드 방법
-import React from "react";
+```bash
+# 개발 빌드
+npm run build
+# 또는
+npm run pack
 
-## 빌드하여 chrome 38버전에서 확인필요
+# 빌드 결과물 테스트를 위한 로컬 서버 실행
-
-npm run build 또는 npm run pack
 npx http-server ./dist
+```
 
-## 크롬 webos3.0 버전 링크
+### 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에서 테스트 필요
 
-https://webostv.developer.lge.com/develop/tools/cli-dev-guide#launch-the-web-app
+## 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": [".*"],
+
+}
+
+   ```
 
-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` 상태로 바꿔서 빌드하셔야 합니다.
 
@@ -52,7 +117,9 @@ npm run build
 
 **상태로 변경 후 배포 부탁드립니다.**
 
-## TVirtualGridList 사용시 여백
+
+
+### TVirtualGridList 사용시 여백
 
 OnSaleProductList.jsx 참고
 --> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)
@@ -64,7 +131,7 @@ OnSaleProductList.jsx 참고
 }
 ```
 
-## TScroller 사용시 여백
+### TScroller 사용시 여백
 
 SubCategory.jsx 참고(Home)
 --> 가로 100%일 경우 TScroller 자체에서 여백 제어하는 것이 아니라 손자 엘리먼트에 좌측 여백 추가(여백은 padding-left로 조절)
@@ -80,24 +147,43 @@ SubCategory.jsx 참고(Home)
 }
 ```
 
-# 자막영상
+### 자막영상
 
 ontv4u 검색 후 첫 영상
 
-# code convention
+## 컴포넌트 사용 가이드라인
 
-1.  vs-code extension: js/ts import/export sorter 설치
+### 1. Grid 레이아웃 여백 설정
+#### TVirtualGridList 사용시 여백
 
-2.  vs-code setting.json
+OnSaleProductList.jsx 참고
-
+--> 가로 100%일 경우 container에서 여백 제어하는 것이 아니라 각 사용하려는 컴포넌트에서 class로 "TVirtualGridList" 추가한 부분에서 좌측 여백 추가(여백은 padding-left로 조절)
-{
-
-"prettier.tabWidth": 2,
-
-"prettier.printWidth": 80,
-
-"prettier.trailingComma": "es5",
-
-"tsImportSorter.configuration.keepUnused": [".*"],
 
+```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 검색 후 첫 영상