작품 제목

여기에 작품를 간단하게 소개해주세요.

배포 주소:

ver	deployment URL	Start Date	PO
pre-release	미정	YYYY-MM-DD	@designDefined

목차

• 시작하기
• 일정 및 진행 상황
• 작품 설명
• 참여자 및 역할
• 참고

시작하기

설치와 실행

• install dependencies

yarn 

• start dev server

yarn dev

라우팅과 디렉토리 구조

라우팅에는 react-router를 사용했습니다. 라우팅에 사용되는 레이아웃과 페이지 컴포넌트는 src/pages에서 확인할 수 있습ㄴ디ㅏ.

여러 페이지에서 공유하는 요소가 있을 경우 레이아웃으로 처리합니다.

• Platform UI의 경우 어느 페이지에서든 헤더가 공유됩니다 -> MainLayout
• Film UI는 페이지가 크게 나눠지지 않지만, 비슷한 구조를 유지하기 위해 FilmLayout으로 처리했습니다
• 에러 페이지의 경우 아직 디자인되지 않았지만 따로 분류하기 위해 ErrorLayout으로 처리합니다.

각 레이아웃 디렉토리 내에는 페이지 컴포넌트들이 있습니다. 페이지는 main.tsx의 router 객체에서 사용되는 컴포넌트를 의미합니다

• router 객체에서는 레이아웃 컴포넌트나 페이지 컴포넌트만을 사용합니다.
• router 객체의 최하위 트리에는 반드시 페이지 컴포넌트가 사용됩니다.
• 아직 페이지가 작업되지 않았을 경우, 지금처럼 <div>레이아웃이나 페이지 명</div>의 엘리먼트를 넣어놓습니다.

페이지 내부에는 다양한 컴포넌트들이 사용될 수 있습니다. 이러한 컴포넌트들은 src/components에서 확인할 수 있습니다.

• 컴포넌트는 사용되는 페이지/레이아웃 컴포넌트와 동일한 이름의 디렉토리 내에 배치됩니다.
• 모든 페이지에서 사용될 수 있는 컴포넌트나, 매우 일반적인 컴포넌트의 경우에는 src/components/common 디렉토리 내에 배치합니다.

테스트 중인 것들

1. <Play/>

/play/normal 경로에서 확인할 수 있습니다.

버튼을 누르면 다음 영상이 재생되는 기능에 대한 테스트입니다.

버튼의 클릭 이벤트가 발생하면 내부 상태를 이용하여 <video/> 오브젝트의 src 속성을 교체하고, 다음 영상이 재생됩니다.

버튼 클릭과 동시에 다음 영상이 로딩+재생되므로 버퍼링이 걸리고 재생 성능이 좋지 않다는 단점이 있습니다.

2. <Interactive/>

/play/interactive 경로에서 확인할 수 있습니다.

비디오 플레이어 컴포넌트를 두 가지 Side로 나누어 다음에 재생될 영상을 보이지 않는(opacity:0) 상태로 미리

구현 원리는 노션 페이지 에 자세히 작성해 놓았습니다.

3. useFrame()

앞으로 테스트 에정.

useFrame이라는 훅을 만들어 영상의 재생 프레임에 따라 콜백을 작동시키는 테스트입니다.

참고: requestVideoFrameCallback

일정 및 진행 상황

1. 기본 세팅 (4.7)
2. 배포 파이프라인 구축 (CI, CD) (4.13)
3. Film UI 테스트: 연속 재생 (4.24)
4. Film UI 테스트: useFrame
5. Film UI 테스트
6. Platform UI 구현

작품 설명

참여자 및 역할

레포지토리 구조

• src
  • main.tsx: 클라이언트 최상단 파일
  • pages: 각 레이아웃 별 페이지 파일들
  • components: 컴포넌트들

참고