[Web21] 4주차 주간 스프린트 계획 회의록

4주차 주간 스프린트

토의내용

Refactoring

Folder Structure

link

• 컴포넌트 별 구분
• 해당 컴포넌트의 동작, 테스트, 스타일 등의 코드를 같은 폴더에 모음

Asynchronous Callback

• then을 사용해야하면 콜백 분리해서 사용하기

상태 관리

• 아직까지는 Props 전달로 인한 관리의 어려움이 발생하고 있지 않음
• 별도의 tool을 사용하지 않고 진행한 만큼, 적용 없이 계속 진행
• 단, 여러개의 상태가 동일한 시점에 변화해야할 경우 각 상태를 하나의 객체로 묶거나 reducer를 도입하여 리팩토링할것.

금주의 기능 구현

전 주에 완성하지 못한 기능

• 추가 기능 구현보다 먼저 진행
  • 드래그 앤 드롭 파일 업로드
  • 소켓 사용하는 기능 각종 버그
  • 검색 기능 인덱싱 및 무한스크롤 적용
  • 이외 각종 버그 교정
  • 플레이리스트, 플레이어 연동
  • 업로드한 파일 다운로드해서 사용
  • 뒤로가기 하면 방을 떠나는 기능

헤더

• 검색 바
• 파일 업로드 이식
• 메인 라우팅된 로고
• (유저 정보?)

음악 검색 페이지

• 헤더 검색 바를 통해 진행
• 검색 결과가 출력된 별도의 페이지로 이동

음악 상세 정보

• 모달, 페이지 등 화면에서 음악 정보들이 출력되는 기능

플레이어, 플레이리스트 연동

1. 유저가 존재하는 방에 입장한다.

2. musicplayer.tsx, playlist.tsx가 각각 back단에 요청을 보낸다.

3. playlist는 name, singer, isPlayed를 받아와서 View에서 출력한다.

4. musicplayer는 isplayed가 true인 곡의 정보를 받아와서 썸네일 이미지, src에 넣고 재생한다.

다음곡, 이전곡으로 넘어가는 기능

1. musicplayer에서 end 이벤트 발생. 백엔드 소켓에서 다음곡을 isPlayed로 바꾼다.

2. 바꾼곡의 정보를 받아와서 src 태그, 썸네일 태그 등에 집어넣고 플레이어를 업데이트 한다.

플레이리스트 재생중인 곡 강조 처리

• 프론트에서 가지고 있는 음악 정보 배열을 나열할 때 (isPlayed === true) 인 곡을 강조 표시한다.

플레이리스트 업데이트

• isPlayed가 바뀌기 때문에 플레이리스트를 다시 받아서 렌더링 한다.
  • 여기서 무한스크롤은 부자연스러워서 삭제한다.

데모 시나리오

• 플레이리스트도 비어 있고, 플레이어도 비어 있는 상태이다.
• 드래그 앤 드롭으로 파일 업로드 한다.
• 업로드 된 노래를 플레이리스트에 추가하고 플레이어에서 재생한다.
• 헤더에서 음악을 검색한다.
• 검색 페이지로 이동해 결과를 확인한다.