boostcamp-2020/project14-a-web-audio-editor

🔊 AUDI ✨클라이언트 기반 웹 음성 편집기(audio editor)✨

🔊 AUDI(AUdio eDItor)

No 라이브러리! No 프레임워크! Only Vanilla JS!

## 👩‍💻Members👨‍💻

류남광(J064) @pieisland 재생 장인	송원석(J098) @Songwonseok 커맨드 장인	신우진(J104) @wooojini 개발 장인	최정은(J206) @Jeongeun-Choi 페어프로그래밍 장인

📢프로젝트 소개

🎶 AUDI(AUdio eDItor) 🎶는 클라이언트 기반 웹 음성 편집기 서비스입니다!

언제 어디서나 웹 브라우저와 네트워크 연결만 가능하다면 오디오 및 음성 파형 편집을 시작할 수 있습니다!

✨지금 바로 편집하러 가보세요!✨

🎥유튜브 데모영상 보러가기

📚Tech Stack

🎼기능 소개

❓Why we use Vanilla JS?

🥝WIKI

저희의 활동이 궁금하시다면 WIKI로 와주세요!

🚀프로젝트 배포 링크

💻실행방법

cd frontend/

npm install
npm run dev

project14-a-web-audio-editor's Issues

기본 주파수 파형 그래프 구현

💁 설명

오디오 파일의 주파수 데이터를 이용하여 파형 그래프를 구현한다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 오디오 파일의 데이터를 활용하여 canvas로 파형을 그래프를 보여준다
• 2 채널 형태로 L/R 모두 파형 그래프를 보여준다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 파형 그래프는 추후에 디자인 변경이 가능해야합니다. 확장성을 고려해서 구현해주세요

이벤트 채널 unsubscribe 추가로 인한 성능 최적화

💁 설명

이벤트 채널에 unsubscribe를 추가하여 성능 최적화

📑 체크리스트

구현해야하는 이슈 체크리스트

• 이벤트 채널에 unsubscribe를 구현하여 불필요한 렌더링 및 사이드 이펙트를 방지한다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Sidebar/TimeInfo 컴포넌트 제작

💁 설명

Sidebar의 TimeInfo 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• TimeInfo 컴포넌트를 제작
• 현재 재생시간
• 전체 시간
• 마우스 커서 시간

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Sidebar안에 포함된 하위 컴포넌트입니다. Sidebar 구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

Main/ZoomBar 컴포넌트 제작

💁 설명

Main의 하위 컴포넌트인 ZoomBar 컴포넌트를 제작합니다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 마우스 스크롤에 따라 스크롤 기준바의 길이가 줄어들거나 늘어날 수 있어야 합니다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 스크롤 이벤트는 트랙위에서 발생합니다.
• ZoomBar는 트랙에서 이벤트 발생시 동작하는 것을 고려해주세요

백엔드 서버 정적파일 서비스 추가

💁 설명

Express 서버에서 정적파일 응답가능하도록 수정필요

📑 체크리스트

구현해야하는 이슈 체크리스트

• Express 서버 정적파일 서비스 추가
• Client 빌드 파일이 정적파일 폴더에 위치
• Client 빌드 내용이 정상적으로 보여지는 확인

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

메인화면 레이아웃 구성

💁 설명

메인화면 레이아웃 구성

📑 체크리스트

구현해야하는 이슈 체크리스트

• 레이아웃을 구성
• 공통 파일 및 폴더 설정

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Main/TrackOption 컴포넌트 제작

💁 설명

Main의 하위 컴포넌트인 TrackOption 컴포넌트 제작합니다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 트랙 메뉴의 재생 옵션 정보가 나타난다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 재사용이 가능하게 구현해주세요

오디오 재생하기(play) 구현

💁 설명

오디오 재생 도구 중에 재생기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 재생하기 버튼을 클릭하면 marker가 재생구간의 start지점으로 이동하며 트랙 전체의 오디오
  가 재생된다
• 재생하기 버튼 클릭하면 일시정지 버튼으로 바뀐다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 마커의 시작 위치는 반복구간 시작부분으로 구현한다.

Main/PlayBar 컴포넌트 제작

💁 설명

재생시간 눈금바 컴포넌트를 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 재생시간 눈금바 컴포넌트

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

구간 붙여넣기 기능 구현

💁 설명

트랙에 복사한 구간을 붙여넣을 수 있는 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 트랙에 복사한 구간을 붙여넣을 수 있다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 선택된 구간이 있는 경우에는 해당 구간 오른쪽 이어서 붙일 수 있다.
• 선택된 구간이 없는 경우에는 marker 기준으로 오른쪽에 붙일 수 있다.

store 구현하기

💁 설명

전체 state를 관리, 공유하는 store를 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• pub&sub 또는 observer pattern으로 구현합니다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Header/IconButton 컴포넌트 제작

💁 설명

Header의 IconButton 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• IconButton 컴포넌트를 제작
• 버튼 종류별 아이콘 구하기

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Header안에 포함된 하위 컴포넌트입니다. Header 구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

구간 잘라내기 기능 구현

💁 설명

구간 잘라내기 기능 구현

📑 체크리스트

구현해야하는 이슈 체크리스트

• 트랙의 선택된 구간을 잘라낼 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Main/AudioMeter 컴포넌트 제작

💁 설명

AudioMeter 컴포넌트를 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• AudioMeter 컴포넌트

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Header/EditorMenu 컴포넌트 제작

💁 설명

source를 편집 아이콘 메뉴바 컴포넌트를 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• source 편집 아이콘 메뉴바 컴포넌트

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Header 안에 포함된 하위 컴포넌트입니다. header 구현시 충돌이 발생할 수 있습니다.

Undo 기능 구현

💁 설명

오디오 편집시 undo하는 기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 편집한 작업 상태를 이전 작업 상태로 되돌릴 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 상태관리를 어떻게 해야할 지 고민해봐야한다.

채널 기능 구현

💁 설명

업로드된 소스파일의 채널 정보를 가져온다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 업로드된 소스 파일의 채널 정보를 가져온다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 파일의 채널 정보를 그대로 가져온다.

Sidebar/EffectController 컴포넌트 제작

💁 설명

Sidebar의 EffectController 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• EffectController 컴포넌트를 제작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Sidebar안에 포함된 하위 컴포넌트입니다. Sidebar구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

Sidebar/SourceList 컴포넌트 제작

💁 설명

Sidebar의 SourceList 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• SourceList 컴포넌트를 제작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Sidebar 안에 포함된 하위 컴포넌트입니다. Sidebar 구현시 충돌이 날 수도 있습니다.
• 음성 파일의 구간을 선택하면 EffectState로 변하게 되는 부분입니다.

Main/Modal-EffectList 컴포넌트 제작

💁 설명

Main의 EffectList Modal 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• EffectList Modal 컴포넌트를 제작
• Effect 목록 출력
• 취소 버튼 또는 바깥 영역 클릭으로 모달 창 닫음

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

Sidebar/EffectState 컴포넌트 제작

💁 설명

구간에 적용된 Effect들을 보여주는 컴포넌트입니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 구간을 선택하면 소스목록 화면이 해당 구간의 적용된 이펙트 목록으로 바뀐다
• 이펙트 목록에서 우측에 버튼을 통해 적용된 이펙트를 삭제 할 수 있다
• 이펙트 목록을 클릭하면 이펙트 컨트롤 메뉴로 바뀌어서 적용된 이펙트를 수정할 수 있다
• 이펙트 메뉴 상단 버튼을 통해 새로운 이펙트를 추가할 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 구간을 선택하지 않았을땐 숨겨져야합니다.

멀티트랙 기능 구현

💁 설명

멀티트랙으로 오디오를 편집할 수 있다,

📑 체크리스트

구현해야하는 이슈 체크리스트

• 멀티트랙으로 오디오를 관리할 수 있다.
• 트랙별로 상태관리가 되어야한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 어떤식으로 상태관리를 할 지 고민해봐야한다.

Modal 형식 컴포넌트 제작

💁 설명

Modal 형식 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 배경색은 진한 회색으로 한다. (색상은 알아서 지정하면 됩니다.)
• 배경을 눌렀을때 모달창이 닫히도록 구현합니다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

오디오 재생시간 맨 앞/뒤로 건너뛰기 기능 구현

💁 설명

맨 앞/뒤로 가기 버튼을 누르면 재생 시간의 맨 앞/뒤로 건너뛰는 기능 구현

📑 체크리스트

구현해야하는 이슈 체크리스트

• 버튼을 클릭하면 marker가 재생구간의 start/end 지점으로 이동하며 해당 위치에서 재생된다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

샘플레이트 표시 기능 구현

💁 설명

샘플레이트를 추출하여 화면에 보여주는 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 소스파일의 샘플레이트를 알려준다(khz).

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

섹션 정보 표시 기능

💁 설명

섹션정보 / 트랙 정보 표시 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 섹션을 선택하면 해당 섹션의 원본 파일명, 섹션의 재생시간, 섹션의 startTime, endTime을 보여준다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 섹션 / 트랙을 선택했을 경우 소스 리스트 밑의 영역에 해당 정보가 나오도록한다.

구간 반복 기능 구현

💁 설명

구간 반복 기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 버튼을 클릭하면 재생구간이 반복해서 재생된다.
• 반복하기 버튼을 다시 클릭하면 반복재생이 종료된다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 버튼의 toggle.

트랙 선택 기능

💁 설명

paste의 대상이되는 트랙 선택할 수 있다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 트랙을 선택할 수 있다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 무조건 하나의 트랙이 선택되어야 한다.

소스불러오기 기능 구현

💁 설명

로컬에서 소스파일 불러오기 기능을 구현합니다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 로컬에서 오디오 파일을 불러온다
• Web Audio API 문서를 확인하여 비디오 파일도 불러온다
• 불러오기 영역의 드래그 앤 드랍으로 파일을 불러올 수 있다
• 불러오기 영역을 클릭해서 로컬파일을 직접 선택하여 불러올 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 비디오 파일정보도 불러올 수 있는지 확인해주세요

Modal 컴포넌트 리팩토링

💁 설명

Modal 컴포넌트 리팩토링

📑 체크리스트

구현해야하는 이슈 체크리스트

• Modal 컴포넌트를 하나의 모달을 이용해서 여러 모달창으로 활용할 수 있도록 한다
• Store와 연결하여 활용한다
• 이벤트 처리를 모두 루트 컴포넌트에서 수행한다
• 재사용이 안되는 Modal과 관련된 컴포넌트는 모두 Modal 폴더로 이동한다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

정지하기 기능 구현

💁 설명

오디오 파일을 정지하는 기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 버튼을 클릭하면 marker가 재생구간의 start지점으로 이동하며 오디오 재생이 정지된다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 재생구간의 start 지점으로 이동해야 한다.

Header/Logo 컴포넌트 제작

💁 설명

Header의 Logo 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• Logo 컴포넌트를 제작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Header안에 포함된 하위 컴포넌트입니다. Header 구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

Main/TrackMenu 컴포넌트 제작

💁 설명

Main의 TrackMenu 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• TrackMenu 컴포넌트를 제작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Main안에 포함된 하위 컴포넌트입니다. Main구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

소스파일 목록 기능 구현

💁 설명

업로드한 소스파일 목록의 정보를 알려주고, 드래그앤 드롭으로 트랙에 파형을 추가 하는 기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 소스파일을 불러온 목록을 나타낸다
• 소스파일은 드래그 앤 드랍으로 트랙으로 이동할 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 드래그앤 드롭으로 구현할 때 파형이 추가될 때 기존에 있던 파형이 뒤로 밀려야한다.

Header/SourceDownloadForm 컴포넌트 제작

💁 설명

소스 파일을 저장하는 컴포넌트를 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 소스 파일을 저장하는 컴포넌트

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Header에 포함되어 있습니다.
• Modal 컴포넌트에 포함되어야 합니다.

구간 이동하기 (드래그 앤 드롭) 기능 구현

💁 설명

• 선택한 구간을 트랙내에서 또는 다른 트랙으로 드래그앤 드랍으로 이동할 수 있도록 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 선택한 구간을 트랙내에서 또는 다른 트랙으로 드래그앤 드랍으로 이동할 수 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

구간 건너뛰기 기능 구현

💁 설명

오디오 재생도구 중에 구간 건너뛰기 기능 구현

📑 체크리스트

구현해야하는 이슈 체크리스트

• 구간 건너뛰기 버튼을 클릭하면 다음 구간으로 marker가 이동하여 재생된다
• 왼쪽, 오른쪽 방향에 따라 정해진 단위로 이동한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• zoom 비율에 따라 움직이는 구간이 달라져야한다.

파일 용량 표시 기능 구현

💁 설명

소스 파일의 총 용량을 보여준다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 소스 파일 정보를 이용해서 총 용량정보를 보여준다
• 오디오 파일 정보는 소스파일 목록에서 마우스를 호버하면 나타난다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Marker 이동기능 구현

💁 설명

트랙의 재생 타임라인에 따라 Marker의 이동 기능을 구현한다

📑 체크리스트

구현해야하는 이슈 체크리스트

• 오디오 파일을 재생하면 Marker가 우측으로 재생 타임라인에 따라 우측으로 이동한다
• Marker의 이동반경은 트랙이 아닌 재생구간을 따라 이동한다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Redo 기능 구현

💁 설명

오디오 편집시 undo를 다시 되돌리는 redo기능을 구현한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 이전 작업 상태로 Undo 한 경우, 다시 Redo 할 수 있다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 상태관리를 어떻게 해야할 지 고민해봐야한다.

Loading 화면 구현

💁 설명

arraybuffer가 decode 될 때 로딩화면이 나타나도록 구현했습니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 로딩화면 구현하기

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 다른 화면에서도 사용할 수 있게 구현했으면 좋겠습니다!

편집파일 저장하기 기능

💁 설명

편집 파일을 저장하는 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 저장하기 도구를 클릭하면 저장하기 모달 메뉴가 나타난다
• 파일은 로컬, 서버 보관함에 저장할 수 있다
• 로컬 파일 저장
• 보관함에 저장
• 해상도는 Default로 고 해상도로 선택되어 있다
• 확장자는 Default로 mp3로 선택되어 있다
• 보관함에 저장하기는 Default로 선택되어 있다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 로컬 파일 저장시 파일 이름, 경로, 해상도, 확장자를 지정해주어야한다.
• 보관함에 저장시 체크박스를 통해 보관함에도 저장할 것인지 선택해줘야한다.
• 확장자
  -> 지원가능한 포맷은 추후에 결정한다

Header/SourceUploadForm 제작

💁 설명

Header의 하위컴포넌트인 SourceUploadForm 제작

📑 체크리스트

구현해야하는 이슈 체크리스트

• 모달불러오기 버튼을 클릭하면 모달레이어 메뉴가 나타난다
• 소스불러오기는 클릭, 드래그 앤 드랍 모두 가능하다
• 소스 불러오고 확인을 누르면 오디오/비디오 소스 데이터를 불러온다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 모달 레이어 메뉴는 재사용 가능하게 구현하게 해주세요

재생시간 표시 기능 구현

💁 설명

재생시간 표시 기능 구현

📑 체크리스트

구현해야하는 이슈 체크리스트

• 현재 marker가 위치한 재생시간이 나타난다
• 전체 트랙의 재생시간이 나타난다 (Total)
• 마우스 커서가 위치한 재생시간이 나타난다 (Cursor)

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Week1 리팩토링

💁 설명

Github 이슈 설명

📑 체크리스트

구현해야하는 이슈 체크리스트

• head의 title 변경
• customElement 태그명 컨벤션 적용
  • <audi-컴포넌트명>
• 루트에서 이벤트 관리하도록 수정

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Main/Marker 컴포넌트 제작

💁 설명

Main의 Marker 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• Marker 컴포넌트를 제작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 재생 구간과 연관되어 있는 컴포넌트로 재생 구간 기능 구현을 고려해야 합니다.
• Main안에 포함된 하위 컴포넌트입니다. Main구현시 충돌이 날 수도 있습니다
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

구간 삭제하기 기능 구현

💁 설명

선택한 구간을 트랙에서 삭제하는 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 선택한 구간을 트랙에서 삭제할 수 있다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Main/Track 컴포넌트 제작

💁 설명

Main의 Track 컴포넌트를 제작합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• Track 컴포넌트를 제작.
• 하나의 Track이 L/R로 나누어서 생성.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• Main안에 포함된 하위 컴포넌트입니다. Main 구현 시 충돌이 날 수도 있습니다.
• 각 컴포넌트의 파일이름 파스칼케이스, 태그이름은 케밥케이스로 작성

재생구간 기능 구현

💁 설명

재생구간을 지정해주는 기능을 구현합니다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 재생구간은 start/end 지점으로 트랙안에서 marker 이동해야한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• UI 디자인은 타임라인에 재생구간 지점을 표시해주는 형식
  -> 디자인은 추후에....

재생 시간 표시 기능

💁 설명

소스파일의 총 재생시간을 표시한다.

📑 체크리스트

구현해야하는 이슈 체크리스트

• 소스파일의 총 재생시간을 알려준다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 마우스를 올릴 때 정보가 나타난다.