📝

기획

•

 - 추가기능

•

 - 나중에 생각하고 추가

0. 스포츠 SNS 서비스

스포츠 SNS 서비스는 스포츠 팬들의 커뮤니티로

•

스포츠 range

◦

야구, 축구, (배구)

•

로그인 / 회원가입

◦

무조건 로그인 / 회원가입 필요

•

스포츠 팬들 커뮤니티 - SNS 정보나 의견 공유, 직관 인증, 해시태그

•

스포츠 관련 정보 

◦

자신의 직관 일정을 추가할 수 있다 (어느경기장인지, 어느날에 가는지 추가)

▪

⇒ 경기 일정이 있을 때 날씨 알려주기

▪

경기장 리스트 ⇒ 장소 

▪

 팀 구독 ⇒ 경기장 ⇒ 경기장 장소 ⇒ 날씨 API ⇒ 날씨 알려주기

◦

데이터 ⇒ 경기 일정 알려주기

▪

 실시간 업데이트 

•

팔로우한 계정의 게시물을 SNS 피드에서 확인

•

경기 일정, 날씨, 정보 등을 경기 정보 피드에서 확인

•

 메시지 주고 받을 수 있다 

•

게시물 좋아요를 누를 수 있고 댓글을 남기거나 공유를 할 수도 있습니다.

•

날씨 

◦

Description (그 시간대가 있으면 그 시간대, 없으면 그 날) ⇒ 글 / 그림

▪

강수량

◦

그날의 최저 온도 / 최고 온도

◦

그 시간대의 온도

데이터 (1)

문서 구조 (1)

1. 프로젝트 설명

감귤마켓 프로젝트는 SNS를 직접 구현해 보는 프로젝트입니다. 팀 프로젝트로 진행되며, 서버 API를 제공할 예정이니 백엔드 구현에 대한 걱정은 하지 않으셔도 됩니다.

아래 디자인(피그마 링크)과 요구사항 명세를 참고하여 진행해 주시면 됩니다.

2. 요구사항 명세

요구사항은 필수로 구현해야 하는 부분과 선택(도전) 과제가 있습니다. 팀원과 구현할 기능과 범위에 대해서 충분히 상의하여 진행하시면 됩니다.

2.0 감귤마켓 API

•

제공기능

◦

채팅, sns로그인을 제외한 요구사항 전부 제공

◦

2.1 회원 가입 

2.1 필수 과제

디자인(피그마)를 참고하여 모든 페이지의 UI 구현해야 합니다. 프론트엔드 스쿨인 점을 고려하여 팀에서 백엔드 파트를 맡게 되더라도 한 명당 한 페이지의 작업은 필수입니다.

게시글 CRUD와 회원가입, 로그인 기능은 필수 과제입니다.

3.1.1 splash

•

서비스 접속 초기화면입니다. 

•

splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.

◦

로그인을 하지 않은 경우 : 로그인 화면

◦

로그인이 되어 있는 경우 : SNS / 경기일정  피드

3.1.2 로그인

•

로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.

•

 SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다.

•

로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.

•

이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.

•

로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.

•

입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)

•

 아이디/비밀번호 찾기

3.1.3 회원가입

•

로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.

•

회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.

•

이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.

•

이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우,  또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.

•

입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)

•

작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.

•

프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.

◦

관심사 태그 (야구, 축구, 배구), 무슨 팀을 좋아하는지 ⇒  관심사별로 

◦

프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.

◦

사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.

◦

계정 ID는 중복이 불가합니다. 

▪

일반 회원은 앞에 sports_ 사용을 불가합니다. 

◦

프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.

3.1.4 SNS 피드(홈 화면)

•

SNS 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.

•

SNS 피드에는 자신이 팔로우한 사용자/관심사태그가 같은 사람들의 게시글만 확인할 수 있습니다. 

•

팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.

3.1.5 경기 정보 피드(홈 화면)

•

 자신의 직관 일정을 추가할 수 있다 

◦

어느 경기장인지 

◦

어느 날에 가는지, 시간

◦

무슨 팀이 경기하는지

◦

 라인업 ⇒ 실시간 데이터 업데이트가 있어야 가능…

◦

날씨 API  ⇒ 경기 일정이 있을 때 날씨 알려주기

•

 경기장 / 팀 구독

◦

 날씨 API  ⇒ 경기 일정이 있을 때 날씨 알려주기

•

 팀 구독 ⇒ 경기장 ⇒ 경기장 장소 ⇒ 날씨 API ⇒ 날씨 알려주기

•

 데이터 ⇒ 경기 일정 알려주기

◦

 실시간 업데이트 

•

필요한 정보

◦

종목별로 경기장 리스트 

◦

종목별로 팀 리스트

◦

종목별로 팀 정보 

•

팀/경기장 팔로잉 대신 구독하는 거처럼 

3.1.6 검색

•

마크업만 구현해 보세요.

•

사용자, 경기장, 팀 검색할 수 있는 페이지입니다.

◦

이름과 ID 둘다 검색 가능 (@id ⇒ 아이디만 검색)

•

스포츠 SNS 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.

3.1.7 사용자 프로필 페이지

•

사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 관심사 정보, 팔로워 및 팔로잉 수, 직관 일정 및 구독한 팀, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.

•

 사용자 정보 하단에는 팔로우 버튼이 있습니다. 팔로우 버튼을 클릭하면 언팔로우 버튼으로 바뀌어야 합니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.

•

팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.

•

등록한 직관 일정 또는 팔로우 한 팀이 없을 경우에는 표시되지 않습니다.

•

게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.

•

또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.

•

나의 프로필 페이지일 경우

◦

프로필 수정 버튼과 일정 등록 버튼이 표시됩니다.

◦

직관 일정을 클릭하면 일정 상세 페이지로 이동합니다. 더보기 버튼을 통해 수정 또는 삭제가 가능합니다.  

3.1.8 팀 / 경기장 프로필 페이지

•

팀 프로필 페이지

◦

팀 이름 (삼성 라이온즈)

▪

@sports_samsung_lions ⇒ @samsung_lions

◦

연고지 - 대구 광역시

◦

홈구장 - 대구 삼성 라이온즈 파크

◦

감독 - 박진만

◦

 선수단 정보 ⇒ 다른 탭으로??

▪

필터?? 

•

경기장 페이지

◦

@stadium_

◦

경기장 이름

◦

경기장 지역 (대구/서울/….)

◦

경기장 상세주소

3.1.9 팔로워, 팔로잉 목록

•

사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.

◦

구독한 팀/경기장 목록 ("accountname"이 앞에 sports_)인 것들은 가장 앞에 보여집니다. 

▪

팀 ⇒ 경기장 ⇒ 일반 회원 팔로잉

•

목록은 사용자  프로필 사진, 이름, 계정 ID, 팔로우(또는 취소) 버튼으로 구성됩니다.

◦

팀/경기장은 특별한 무언가…

•

 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.

3.1.10 내 프로필 수정

•

나의 프로필 페이지에서 프로필 수정 버튼을 클릭하면 프로필을 수정할 수 있는 페이지가 나타납니다.

•

입력창에 대한 명세는 회원가입에서의 프로필 설정과 동일합니다. 유효성 검사가 통과되지 않을 경우 저장 버튼이 활성화되지 않습니다.

3.1.11 경기 일정 추가

•

나의 프로필 페이지에서 일정 추가 버튼을 클릭하면 일정을 추가할 수 있는 페이지가 나타납니다.

•

경기하는 팀 (팀1, 팀2) ⇒ select box  ____ vs. ____

•

경기장 ⇒ select box ______

•

날짜 및 시간 ⇒

◦

날짜

◦

시간 

3.1.12 게시글 댓글 페이지

•

게시글 하단에 말풍선 아이콘을 클릭하면 댓글을 확인하고 입력할 수 있는 페이지가 나타납니다.

•

댓글 입력창에 텍스트를 입력하면 게시 버튼이 활성화됩니다.

3.1.13 게시글 작성 페이지

•

게시글을 작성할 수 있는 페이지로, 하단 메뉴바에서 게시글 작성 을 클릭하면 표시됩니다.

•

글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게       시글이 업로드됩니다.

•

사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다. 

◦

기본 과제 : 한 장만 업로드 가능하도록 구현할 것.

◦

도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드   가능하도록 구현할 것.

3.1.14 채팅 목록

•

채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.

•

현재 대화가 진행 중인 채팅 목록이 표시됩니다.

•

내가 읽지 않은 메시지가 있는 채팅방인 경우 프로필 사진 좌측 상단에 작은 원으로 표시됩니다.

3.1.15 채팅방

•

채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.

•

채팅 목록에서 목록 아이템을 클릭하면 해당 채팅방이 나타납니다.

•

채팅 기능은 구현하지 않습니다.

•

채팅 입력창에서 텍스트가 입력되면 전송 버튼이 활성화됩니다.

•

이미지 버튼을 클릭하고 이미지를 선택하면 전송 버튼이 활성화됩니다.

•

채팅방 상단 우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.

3.1.14 하단 탭 메뉴

•

하단 탭 메뉴는 홈 (경기 정보, 팔로잉), 게시물 작성, 일정 추가, 채팅, 프로필 5개의 메뉴로 구성되어 있습니다.

•

모든 페이지는 페이지 경로에 해당하는 탭 메뉴가 활성화됩니다.

3.1.15 좋아요 버튼

•

게시글이 나타나는 모든 페이지에 해당합니다.

•

게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.

•

빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.

•

좋아요 기능은 구현하지 않습니다.

3.1.16 모달 버튼

헤더

게시글 상단

•

우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.

•

헤더에 있는 버튼을 클릭하면 설정 및 개인정보와 로그아웃이 나타납니다.

•

게시글 우측 상단에 위치한 버튼을 클릭했을 경우

◦

내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다.

◦

다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.

내가 작성한 게시글일 경우

다른 사용자가 작성한 게시글일 경우

•

댓글 우측 상단에 위치한 버튼을 클릭했을 경우

◦

내가 작성한 댓글일 경우 : 삭제 버튼이 나타납니다.

◦

다른 사용자가 작성한 댓글일 경우 : 신고하기 버튼이 나타납니다.

•

로그아웃, 삭제, 신고 버튼을 누르면 확인 메시지 모달창이 나타나야 하고, 취소 버튼을 누르면 모달은 사라집니다.

3.2 선택(도전) 과제

싱글 페이지 웹 구현은 선택 과제입니다.

3.2.1 팔로우

•

사용자 정보 하단에는 팔로우 버튼이 있습니다. 내가 팔로우 한 사용자일 경우 언팔로우 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.

•

팔로우 목록에는 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.

•

팔로우 버튼을 클릭하면 팔로잉 목록에 해당 사용자가 추가됩니다. 취소 버튼을 클릭하면 팔로잉 목록에서 해당 사용자가 삭제되어야 합니다.

•

사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.

•

팔로워 및 팔로잉 목록에 내가 표시될 경우 팔로우 버튼은 나타나지 않습니다.

3.2.2 좋아요

•

게시글이 나타나는 모든 페이지에 해당합니다.

•

게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.

•

빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.

•

좋아요 개수는 카운트 되어 하트모양 우측에 표시됩니다.

3.2.3 댓글

•

댓글 삭제 및 신고하기 기능을 구현합니다.

•

댓글 작성이 현재 시간으로 부터 몇 초, 분, 시간 전에 작성되었는지 표시합니다.

•

댓글 개수는 카운트 되어 말풍선 아이콘 우측에 표시됩니다.

3.2.4 검색

•

감귤마켓 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.

•

사용자 이름과 계정을 검색할 수 있는 페이지입니다. 입력창에 텍스트를 입력하면 해당하는 사용자가 나오도록 합니다.

•

검색어와 같은 단어에는 주황색 글씨가 표시됩니다.

3.2.5 게시글 작성 페이지(이미지 업로드 관련)

•

사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다. 

◦

기본(필수) 과제 : 한 장만 업로드 가능하도록 구현할 것.

◦

도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.