[ToDo] Play

[designDefined]

요약

• 담당자: @bubblelim
• 마감 기한: 23-08-18
• 할 일 요약: Play 페이지 만들기

작업 내용

• Login Page 만들기
• Dashboard Page 만들기

스펙 상세

레이아웃

플레이 피그마

Play

• 라우팅: /play/:content_id
• 주요 컴포넌트: Player, Comments
• 아래 설명에서 말하는 content는 mock/contents.json에서 위의 content_id에 위치
  • 혹시 해당하는 데이터가 없을 경우, 빈 페이지를 표시해주시면 됩니다.
  • 이렇게 content_id에 해당하는 데이터를 가져오기가 어려울 경우, mock/contents.json의 두번째 데이터를 하드코딩해서 가져오는 형식으로 구현해주세요!

Player

• YouTube의 embed 코드를 이용하여 구현합니다
  • 유튜브 접속 후, 공유하기 -> 퍼가기를 누르면 <iframe> HTML 코드가 뜹니다. 이를 그대로 이용하시면 됩니다.
  • 단, iframe의 src 속성에는 mock 데이터의 content.url을 넣어주세요
• 재생, 일시정지 등은 따로 구현할 필요가 없습니다.

Comments

• content.comments의 값을 이용합니다.
• 댓글 입력 창은 useState로 입력 값을 관리합니다 (댓글 추가 기능은 따로 구현할 필요 없습니다.
• 주의사항
  • css flex를 이용하여 만들어주시기 바랍니다.

주의 사항

• 컴포넌트는 src/components/페이지 명/컴포넌트 명으로 디렉토리 만드시고, 그 내부에 js와 css파일 모두 넣어주세요!
  파일 구조 예시:
  • src
    • components
      • Login
        • IdInput
          • IdInput.js
          • IdInput.css
      • SubmitButton
        • SubmitButton.js
        • SubmitButton.css
• 위의 피그마와 상세 스펙을 참고하시고, 불분명한 부분은 바로 질문해주세요!

참고 / 출처