[8일차] React Prop를 이용해 음악 재생 리스트 하위 컴포넌트 구현

어제 기능적인 부분은 다 구현했다고 생각했는데 재생리스트를 놓치고 있었다. 그래서 8일차인 오늘은 아직 구현하지 않은 음악 재생 리스트 화면을 구현하는데 치중했다. 음악 리스트 화면은 음악 재생화면의 하위 컴포넌트 형태로 구성했으며, 음악 재생 버튼을 누를때 표시된다.

 

음악리스트 호출버튼

표시된 음악리스트는 indexedDB 순서에 따라 정렬되어 표시된다. 만약 셔플을 했다면, 셔플된 랜덤한 순서로 정렬되어 표시된다.

음악리스트 화면

리스트에 표시된 음악 제목을 선택하면 해당 음악으로 바로 재생하며 하단의 X 버튼을 누르면 리스트가 닫힌다.

 

아래는 구현한 음악리스트 화면 컴포넌트에 대한 전체 소스이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 걸 React에선 Prop 라고 불리는데, 컴포넌트간에 종속적인 부분이 생기는 것 같아 마음에 들진 않는다.

 

일단 이번 프로젝트는 어디까지나 "개발" 자체에 의의를 둔거라 고도화는 다음에 생각하겠다.

interface MusicListProp {
  close : Function,
  playList : Media[],
  currentPlayIdx : number,
  setCurrentPlayIdx : Function
}

/**
 * 음악 리스트 화면
 */
function MusicList({ close, playList, currentPlayIdx, setCurrentPlayIdx } : MusicListProp) {

  return (
  <List>
  {playList && playList.map(item => {
    
    return (
      <ListItem key={item.title} button onClick={() => { setCurrentPlayIdx(playList.findIndex(p => p.idx === item.idx)) }}>
        <ListItemIcon>
          {(item.idx === playList[currentPlayIdx].idx)? <IconAudiotrack /> : <IconVolumeMute /> }
        </ListItemIcon>
        <ListItemText>{ item.title }</ListItemText>
      </ListItem>
    )
  }) }
  <IconButton onClick={() => close() }>
    <IconClose />
  </IconButton>
  </List>
  )
}

한 가지 버그가 있는데, 셔플로 인해 원래 순서와 다른 순서에 배치된 음악이 재생 중일때, 셔플을 끄면 리스트에는 해당 순서에 맞는 음악이 재생되는 것처럼 표시되어 있게 된다. 재생 중인 음악임을 구분하는 IconAudiotrack 컴포넌트 표시 유무를 number 형식의 index로 비교해서 그런건데, 딱히 쓰는데 큰 지장은 없어서 고치는건 좀 보류할 생각이다.

 

오늘 내일 중으로 디자인과 함께 전반적인 마무리를 지을 생각이다.