[Web21] EPIC STORY TASK

EPIC

• 1순위
  • 음악 공유 스트리밍
• 2순위
  • 메인
  • 음악 업로드 모달
  • 음악 검색 모달
• 3순위
  • 방 생성, 입장 (2순위 연장)
  • 헤더(navbar)
  • 음악 검색 페이지
  • 음악 상세 정보
• 4순위 ( 안할 가능성이 높다 )
  • 인증(로그인, 회원가입, 로그아웃)
  • 유저 정보 / 페이지
  • 유저 플레이리스트

STORY

1순위

• 공유 스트리밍 페이지

	스토리
1	사용자는 방장이 플레이하는 노래를 들을 수 있다.
2	사용자는 현재 듣고 있는 곡의 제목을 확인할 수 있다.
3	사용자는 현재 듣고 있는 곡의 진행도를 확인할 수 있다.
4	사용자는 다른 사용자들과 채팅을 할 수 있다.
5	사용자는 채팅을 하고 있는 상대방을 구분할 수 있다.
	2순위
6	사용자는 방장의 곡 플레이리스트를 확인할 수 있다.
7	방장은 노래를 모달을 통해 검색할 수 있다.
8	방장은 검색 내역에서 원하는 노래를 선택해 플레이리스트에 추가할 수 있다.
9	사용자는 원하는 별명으로 채팅을 할 수 있다.
10	사용자는 음악의 볼륨을 조절할 수 있다.

2순위

• 음악 업로드 모달 페이지

	스토리
1	사용자는 자신의 음악을 업로드할 수 있다.
α	음악 업로드 시 장르를 선택할 수 있다.

• 음악 검색 모달

	스토리
1	사용자는 검색창에 키워드를 입력해 음악을 검색할 수 있다.
2	검색 결과로 음악 정보들이 조회된다.
3	사용자는 검색된 음악을 플레이리스트에 추가할 수 있다.

3순위

• 메인 페이지

	스토리
1	사용자는 개설되어 있는 방의 목록을 일부 제공받는다.
2	사용자는 방을 생성할 수 있다.
3	사용자는 방을 선택해서 입장할 수 있다.

• 헤더

	스토리
1	사용자는 방과 음악을 검색할 수 있다.
2	사용자는 음악을 업로드할 수 있다.
3	사용자는 메인 페이지로 이동할 수 있다.

• 음악 검색 내역 페이지

	스토리
1	결과 페이지에 노래, 방 정보들이 조회된다.
2	사용자는 노래와 방 중 원하는 결과만을 조회할 수도 있다.
3	사용자는 검색된 음악을 재생할 수 있다.
	4순위
4	사용자는 검색된 음악 리스트의 상세페이지에 접근할 수 있다.
5	사용자는 플레이리스트에 검색된 음악을 추가할 수 있다.

TASK

공유 스트리밍 페이지

Task1

	태스크
1	사용자는 방장이 플레이하는 노래를 들을 수 있다
1.1	사용자가 방에 입장 시, 서버에서 현재 실행 중인 곡과, 방의 플레이리스트 목록을 받아온다.
1.2	실행중인 곡 정보에는, 제목, 설명, 가수, 총 실행 시간과 현재 시간에 대한 정보가 있다.
1.3	플레이리스트 목록에는, 각 곡의 제목, 가수, 총 실행 시간에 대한 정보가 있다.
1.4	방 내 모든 사용자가 현재 실행된 음악을 동일 구간부터 청취한다.
1.5	음악은 화면 상단의 뮤직 플레이어를 통해 실행된다.

Task2

	태스크
2	사용자는 현재 듣고 있는 곡의 제목을 확인할 수 있다.
2.1	곡명은 뮤직 플레이어의 상단에 표시된다.

Task3

	태스크
3	사용자는 현재 듣고 있는 곡의 진행도를 확인할 수 있다.
3.1	곡의 진행도는 뮤직플레이어의 하단에 표시된다.
3.2	곡의 총 길이와 현재 위치를 시:분의 형태로 같이 표시한다.

Task4

	태스크
4	사용자는 다른 사용자들과 채팅을 할 수 있다.
4.1	뮤직플레이어 컴포넌트의 하단에 채팅창이 위치한다.
4.2	사용자 자신이 작성한 채팅은 우측에, 다른 사람들이 작성한 채팅은 좌측에 표시된다.
4.3	채팅창의 하단에 입력 폼이 존재하며, 메세지를 입력할 수 있다.
4.4	입력 폼의 전송 버튼을 클릭하거나, Enter 키를 통해 채팅을 전송한다.
4.5	전송된 채팅은 서버를 거쳐 다른 모든 사용자에게 브로드캐스팅 된다.

Task5

	태스크
5	사용자는 채팅을 하고 있는 상대방을 구분할 수 있다.
5.1	채팅을 작성한 상대방의 index를 통해 구분한다.
5.2	손님${idx}의 형태로 채팅 작성자를 명시한다.

2순위

Task6

	태스크
6	사용자는 방장의 곡 플레이리스트를 확인할 수 있다.
6.1	뮤직플레이어 컴포넌트의 우측에 플레이리스트 창이 위치한다.
6.2	플레이리스트에는 방장이 관리하고 있는 실행 음악의 목록이 출력된다.
6.3	플레이리스트에는 현재 실행되고 있는 음악이 강조된다.
6.4	각 음악은 제목과 가수, 총 실행 시간이 표시된다.

Task7

	태스크
7	사용자는 원하는 별명으로 채팅을 할 수 있다.
7.1	채팅창의 입력 폼 좌측에 별명을 설정할 수 있는 폼을 제공한다.
7.2	사용자는 해당 폼에 원하는 별명을 기입하여 사용할 수 있다.
7.3	사용자가 별명을 설정하면 서버로 별명을 보낸다.
7.4	채팅을 입력하면, 상대방은 사용자의 idx와 함께 기입한 별명을 메세지와 함께 출력받는다.

Task8

	태스크
8	사용자는 음악의 볼륨을 조절할 수 있다.
8.1	뮤직플레이어 progress bar의 우측에 음악의 볼륨 기능을 제공한다.
8.2	볼륨은 dragbar의 형태로 제공해 사용자가 0~100 사이의 값을 drag로 설정할 수 있다.
8.3	볼륨을 0으로 설정하거나, 해당 아이콘을 클릭하면 음소거 처리한다.
8.4	볼륨을 0 초과로 설정하거나, 해당 아이콘을 다시 클릭하면 음소거를 해제한다.

음악 업로드 모달 페이지

	스토리
1	사용자는 자신의 음악을 업로드할 수 있다.
α	음악 업로드 시 장르를 선택할 수 있다.

Task9

	태스크
9	사용자는 자신의 음악을 업로드할 수 있다.
9.1	사용자는 업로드 버튼을 누른다.
9.2	사용자는 업로드 될 노래를 로컬에서 선택해서 첨부한다.
9.3	업로드 모달에서 업로드할 음악의 제목, 썸네일을 입력한다.
9.4	모든 입력이 수행되면 완료 버튼이 활성화 된다.
9.5	완료 버튼을 클릭하면 서버에 업로드 요청이 수행된다.
9.6	서버에서 응답 실패시 에러문구를 표시한다.
9.7	사용자가 최종적으로 노래를 업로드하면 곡 썸네일, 곡 제목, 곡이 저장되는 스토리지의 경로를 하나의 레코드로 하여 그 정보를 DB에 저장한다.

Task9-α

	태스크
α	음악 업로드 시 장르를 선택할 수 있다.
α.1	사용자는 업로드 모달 창에서 노래의 장르를 선택한다.
α.2	사용자는 업로드 모달 창에서 노래의 설명을 작성한다.

음악 검색 모달 페이지

	스토리
1	사용자는 검색창에 키워드를 입력해 음악을 검색할 수 있다.
2	검색 결과로 음악 정보들이 조회된다.
3	사용자는 검색된 음악을 플레이리스트에 추가할 수 있다.

Task10

	태스크
10	사용자는 검색창에 키워드를 입력해 음악을 검색할 수 있다.
10.1	사용자는 방 페이지 우측 플레이리스트 하단에 존재하는 + 버튼을 클릭한다.
10.2	사용자는 버튼을 눌러서 나타난 모달창의 검색칸을 클릭한다.
10.3	사용자는 검색어를 입력한다.
10.4	사용자는 검색칸 왼쪽의 돋보기 아이콘을 클릭한다.
10.5	서버에 해당하는 검색어 데이터를 요청한다.
10.6	DB에서 검색어에 해당하는 데이터를 찾아서 클라이언트로 보낸다.

Task11

	태스크
11	검색 결과로 음악 정보들이 조회된다.
11.1	사용자는 검색 결과로 조회된 음악 리스트들을 무한 스크롤을 통해 모달창 내에서 확인할 수 있다.
11.2	검색 결과로 출력된 각 곡은 제목과 가수, 총 실행 시간에 대한 정보를 출력한다.

Task12

	태스크
12	사용자는 검색된 음악을 플레이리스트에 추가할 수 있다.
12.1	사용자는 검색된 음악 리스트 중에서 원하는 음악을 클릭한다.
12.3	사용자는 원하는 음악을 모두 선택한 뒤 + 버튼을 누른다.
12.4	서버에서 해당하는 음악을 플레이리스트에 넣어준다.
12.α	사용자는 원하는 음악을 여러개 클릭할 수 있다.

메인 페이지

	스토리
1	사용자는 개설되어 있는 방의 목록을 일부 제공받는다.
2	사용자는 방을 생성할 수 있다.
3	사용자는 방을 선택해서 입장할 수 있다.

Task13

	태스크
13	사용자는 개설되어 있는 방의 목록을 일부 제공받는다.
13.1	메인페이지에 접속하면 서버에 방 목록을 요청한다.
13.2	서버에서 응답 실패시 에러 문구를 표시한다.
13.3	방 목록은 시간 순으로 나열된다.
13.4	방 목록은 각각의 방 제목, 인원 수가 표시된다.

Task14

	태스크
14	사용자는 방을 생성할 수 있다.
14.1	사용자가 방 생성 버튼을 누르면 방 생성 페이지(모달)이 표시된다.
14.2	방 생성 화면에서 방 제목, 설명을 입력한다.
14.3	모든 입력이 수행되면 완료 버튼이 활성화 된다.
14.4	완료 버튼을 누르면 방 생성에 관한 서버 요청이 수행된다.
14.5	서버에서 응답 실패시 에러 문구를 표시한다.
14.6	취소 버튼을 누르면 방 생성 모달이 닫힌다.
14.7	방 생성이 완료되면, 생성된 방 페이지로 이동한다.

Task15

	태스크
15	사용자는 방을 선택해서 입장할 수 있다.
15.1	사용자가 방을 클릭하면 서버에 입장 요청이 수행된다.
15.2	서버에서 응답 실패시 에러 문구를 표시한다.

헤더

	스토리
1	사용자는 방과 음악을 검색할 수 있다.
2	사용자는 음악을 업로드할 수 있다.
3	사용자는 메인 페이지로 이동할 수 있다.

Task16

	태스크
16	사용자는 방과 음악을 검색할 수 있다.
16.1	사용자는 화면 상단의 검색창을 통해 키워드를 입력할 수 있다.
16.2	사용자는 검색창에서 통합, 방, 노래 3가지의 검색 조건을 선택할 수 있다.
16.3	키워드를 입력한 후 검색 버튼을 누르면 해당 키워드에 대한 결과를 서버에 요청한다.
16.4	키워드가 공백일 시 검색하지 않는다.
16.5	서버에서 응답 실패시 에러 문구를 표시한다.

Task17

	태스크
17	사용자는 음악을 업로드할 수 있다.
17.1	사용자가 화면 상단의 업로드 버튼을 클릭하면 음악 업로드 모달이 나타난다.

Task18

	태스크
18	사용자는 메인 페이지로 이동할 수 있다.
18.1	사용자가 화면 상단의 홈 버튼을 클릭하면 메인 페이지로 이동한다.

음악 검색 내역 페이지

	스토리
1	결과 페이지에 노래, 방 정보들이 조회된다.
2	사용자는 노래와 방 중 원하는 결과만을 조회할 수도 있다.
3	사용자는 검색된 음악을 재생할 수 있다.
	4순위
4	사용자는 검색된 음악 리스트의 상세페이지에 접근할 수 있다.
5	사용자는 플레이리스트에 검색된 음악을 추가할 수 있다.

Task19

	태스크
19	결과 페이지에 노래, 방 정보들이 조회된다.
19.1	검색 버튼을 클릭하면 결과 페이지로 이동한다.
19.2	사용자가 선택한 카테고리 데이터를 서버로 요청한다.
19.3	서버는 요청한 데이터를 DB에서 찾는다.
19.4	서버는 찾은 데이터를 클라이언트로 전송한다.
19.5	서버에서 받아온 데이터를 정해진 형식으로 출력한다.

Task20

	태스크
20	사용자는 노래와 방 중 원하는 결과만을 조회할 수도 있다.
20.1	노래, 방, 통합 카테고리 버튼을 누른다.
20.2	사용자가 원하는 카테고리 데이터를 서버로 요청한다.
20.3	서버는 요청한 데이터를 DB에서 찾는다.
20.4	서버는 찾은 데이터를 클라이언트로 전송한다.
20.5	클라이언트에서 받은 데이터를 정해진 형식으로 출력한다.

Task21

	태스크
21	사용자는 검색된 음악을 재생할 수 있다.
21.1	검색된 노래의 재생 버튼을 클릭한다.
21.2	서버에 해당하는 노래에 대한 정보를 요청하고 재생한다.

Task22

	태스크
22	사용자는 검색된 음악 리스트의 상세페이지에 접근할 수 있다.
22.1	검색된 노래를 클릭한다.
22.2	서버에 해당 음악과 함께 저장된 정보들을 요청한다.
22.3	서버는 요청한 데이터를 DB에서 찾는다.
22.4	서버는 찾은 데이터를 클라이언트로 전송한다.
22.5	클라이언트에서 받은 데이터를 정해진 형식으로 출력한다.

Task23

	태스크
23	사용자는 플레이리스트에 검색된 음악을 추가할 수 있다.
23.1	'재생목록에 추가' 버튼을 클릭한다.
23.2	서버에 해당하는 사용자와 음악을 DB에 저장 요청한다.
23.3	서버는 요청한 데이터를 DB에 삽입한다.
23.4	서버에서 응답 실패시 에러문구를 표시한다.