프로젝트 소개

음악 추천 커뮤니티 페이지로 사용자가 게시물을 작성해야 사이트에 접속할 수 있음

팀원

• 프론트엔드 : 임상빈, 조혜민
• 백엔드&배포 : 김혁준, 나지수

일정

3시 진행 상황 보고 및 회의 6시-7시 저녁식사

9시 진행 상황 보고 및 회의

계획표

와이어 프레임

• 페이지 소개

  • write.html

  • Project Color 시작 페이지

  • 사용자가 작성자, 추천하는 노래 제목, 가수, 코멘트, 유투브 링크, 장르 내용을 작성

  • 위의 항목 중 장르만 5가지의 토글 선택지를 주고, 나머지 항목을 자유롭게 텍스트로 작성

  • 텍스트 입력창 각 항목별 조건 부여 (10자 이내, 특수문자 X 등 → alert로 경고)

  • ‘등록’ 버튼을 누르면 메인 페이지로 이동

  • 작성한 데이터는 Mongo DB에 저장

    

    write.html 와이어 프레임

    

    write.html 디자인 컨셉

  • indexPop.html

  • Project Color 메인 페이지로 상단 베너, Top100 차트, 곡추가, 장르, 메인 섹션으로 구성

  • 상단 베너 : 프로젝트명, 팀 이름, 현재 시간(API) 등 정보 기입

  • Top100 차트 : 멜론 순위 1 ~ 10위 정도 크롤링해 기입

  • 곡추가 : 토글 버튼으로 활성화/비활성화 구분

  • 장르 : 카테고리별 더미 데이터 업로드 (시간이 남으면 indexKPOP, indexEDM 등등 추가 페이지 만들 예정)

  • 메인 : 추가한 노래 리스트를 유투부 썸네일과 함께 정렬

    

    indexPop.html 와이어 프레임 / 디자인 컨셉은 아래와 유사함

  • autoPlay.html

  • Project Color 메인 페이지 하단의 auto play 버튼으로 활성화 할 수 있는 페이지

  • 각 장르별로 업로드된 유투브 영상 자동 실행

  • 좌우 버튼을 눌러 다음곡, 이전곡을 재생

    

    autoPlay.html 와이어 프레임

    

    autoPlay.html 디자인 컨셉