실전 프로젝트 6일차

담당 업무

목소리 작성 페이지

주요기능

• 카테고리 및 태그 설정
• 목소리 녹음, 재생 등의 컨트롤, 스톱워치(플레이 시간을 시각화 하기위한 컴포넌트)
• 목소리 파일 업로드
• 커버(이모티콘) 이미지 선택 및 업로드
• 업로드 후 공유 온보딩 페이지로..

컴포넌트

• EditBase
• EditRecord
  - ScriptMemo: 스크립트 메모 기능 -> textarea 자동 높이 조절
  - ScriptView: 스크립트 스크린 모달
  - Recorder: MediaRecorder API를 통한 media blob 생성 및 컨트롤
• EditFinal
• ShareTrack

페이지 별 다루는 데이터

• EditBase

데이터	타입	예시
선택한 카테고리	String	'나레이션'
선택한 태그	Array	['깔끔한', '여성적인', '귀여운']
게시물 제목	String	'나의 깔끔한 목소리'

• EditRecord

데이터	타입	예시
녹음본 or 녹음파일	Blob or File Object
재생 시간	String	"01:20:44"

• EditFinal

데이터	타입	예시
이모티콘 id	String	'1'

• ShareTrack

데이터	타입	예시
선택한 카테고리	String	'나레이션'
선택한 태그	Array	['깔끔한', '여성적인', '귀여운']
게시물 제목	String	'나의 깔끔한 목소리'
녹음본 주소	String	'/static/media/push.0a14d3b053d54ee4db26.mp3'
재생 시간	String	"01:20:44"

리덕스 모듈 예상

• 모듈명: editTrack
• state:

const initialState = {
  category: "",
  tags: [],
  subject: "",
  audio_file: null,
  audio_url: "",
  audio_runtime: "00:00:00",
  cover_id: null,
};

API

기능	URL	Method
트랙 녹음 업로드	api/tracks	POST
트랙 녹음 업로드	api/tracks/:trackId	PUT