[Web21] EPIC STORY TASK

EPIC

• 1순위
  • 음악 공유 스트리밍
• 2순위
  • 메인
  • 음악 업로드 모달
  • 음악 검색 모달
• 3순위
  • 방 생성, 입장 (2순위 연장)
  • 헤더(navbar)
  • 음악 검색 페이지
• 4순위
  • 부가 기능(세션, 인증 등)

STORY

1순위

• 공유 스트리밍 페이지

	스토리
1	사용자는 방장이 플레이하는 노래를 들을 수 있다.
2	사용자는 현재 듣고 있는 곡의 제목을 확인할 수 있다.
3	사용자는 현재 듣고 있는 곡의 진행도를 확인할 수 있다.
4	사용자는 다른 사용자들과 채팅을 할 수 있다.
5	사용자는 채팅을 하고 있는 상대방을 구분할 수 있다.
	2순위
6	사용자는 방장의 곡 플레이리스트를 확인할 수 있다.
7	사용자는 원하는 별명으로 채팅을 할 수 있다.
8	사용자는 음악의 볼륨을 조절할 수 있다.

2순위

• 음악 업로드 모달 페이지

	스토리
1	사용자는 자신의 음악을 업로드할 수 있다.

• 음악 검색 모달

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

• 메인 페이지

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

3순위

• 헤더

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

• 음악 검색 내역 페이지

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

4순위

• 부가 기능

	스토리
1	방장 권한을 가진 사람만이 플레이리스트, 플레이어 기능을 사용할 수 있다.
2	각 방에서, 방장에게만 방 내 권한이 부여된다.
3	각 방에서, 방 내 유저들의 리스트를 출력한다.
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}의 형태로 채팅 작성자를 명시한다.
5.α	인증 추가 시, 로그인한 참여자의 닉네임을 바탕으로 사용자를 명시한다.

2순위

Task6

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

Task7

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

Task8

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

음악 업로드 모달 페이지

	스토리
1	사용자는 자신의 음악을 업로드할 수 있다.

Task9

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

음악 검색 모달 페이지

	스토리
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.5	같은 음악이 있다면 플레이리스트에 넣지 않는다.
12.6	사용자는 원하는 음악을 여러개 클릭할 수 있다.

메인 페이지

	스토리
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	키워드를 입력한 후 검색 버튼을 누르면 해당 키워드에 대한 결과를 서버에 요청한다.
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	서버에서 받아온 데이터를 정해진 형식으로 출력한다.
19.6	무한스크롤을 통해 스크롤을 내릴 때마다 새로운 데이터를 요청한다.

Task20

	태스크
20	폐기되었음

Task21

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

Task22

	태스크
22	폐기되었음

Task23

	태스크
23	폐기되었음

부가 기능

	스토리
1	방장 권한을 가진 사람만이 플레이리스트, 플레이어 기능을 사용할 수 있다.
2	각 방에서, 방장에게만 방 내 권한이 부여된다.
3	각 방에서, 방 내 유저들의 리스트를 출력한다.
4	사용자는 로그인할 수 있다.
5	사용자는 유저 프로필을 확인할 수 있다.

Task24

	태스크
24	방장 권한을 가진 사람만이 플레이리스트, 플레이어 기능을 사용할 수 있다.
24.1	방장만 플레이리스트, 플레이어 사용 한다.

Task25

	태스크
25	각 방에서, 방장에게만 방 내 권한이 부여된다.
25.1	방장을 제외한 유저들은, 접속 시 플레이리스트 추가, 프로그레스 바 기능이 비활성화 된다.

Task26

	태스크
26	각 방에서, 방 내 유저들의 리스트를 출력한다.
26.1	접속 시, 사용자들의 ID로 구성된 유저 리스트가 출력된다.
26.2	유저 리스트에 유저를 클릭 시 방장 위임 버튼이 활성화 된다.
26.3	방장 위임 버튼을 클릭하면 해당 유저에게 방장이 위임된다.

Task27

	태스크
27	사용자는 로그인할 수 있다.
27.1	카카오 로그인 버튼을 클릭하여 로그인한다.
27.2	깃허브 로그인 버튼을 클릭하여 로그인한다.
27.3	user DB에 사용자 계정이 존재하지 않을 시, 자동으로 생성시켜준다.

Task28

	태스크
28	사용자는 유저 프로필을 확인할 수 있다.
28.1	유저 프로필 버튼을 클릭하여 관련 모달에 접근한다.
28.2	유저 프로필에서는 로그인한 사용자의 닉네임을 확인할 수 있다.
28.3	유저는 프로필 모달을 통해 로그아웃할 수 있다.