로그인 메인 페이지
• SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다.
• 로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
* 이메일로 로그인을 클릭하면 이메일 로그인 페이지로 이동한다.
* 회원가입을 클릭하면 회원가입 페이지으로 이동한다.
이메일 로그인 페이지
• 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
• 로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
• 입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 갈색, #7D4B0F)
* 입력창에 focus 될 경우에는 테두리의 색이 변한다.
* 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 된다. 입력되지 않은 입력창이 있다면 버튼은 활성화되지 않는다.
* 로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행한다. 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타난다.
* 이메일로 회원가입을 클릭하면 회원가입 페이지으로 이동한다.
* 로그인을 하면 feed로 이동한다
join membership
joinEmail
[유효성]
1. 이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
◦ 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
[기능]
1. 입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
2. 작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
[유효성]
1. 이메일 api 연동을 통한 중복 검사 완료
2. 비밀번호 6자 미만일 경우 경고 문구와 버튼 비활성화기능 완료
[기능]
1. 완료 ⇒ (회색 #DBDBDB → 갈색7D4B0F)
2. 값을 올바르게 넣으면 다음 버튼 활성 완료
- 다음 버튼 누르면 프로필 설정으로 넘어가짐
- 회원가입 이메일, 비번 입력시 바로바로 오류 검사해야하는데 검사가 버튼눌러야지만 활성화
join membership 페이지
JoinProfileSetting
[유효성]
1. 계정 ID는 중복이 불가합니다.
◦ 프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.
2. 사용자 이름과 소개는 다른 사용자와 중복 될 수 없음
3. <추가> 사용자 이름(2~10자 이내),
[기능]
1. 프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력 받습니다.
2. 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
◦ 사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
[유효성]
1. 계정 id 중복 여부 api 연동을 통해 확인
2. 사용자 이름과 소개 중복 되는지 api를 통해 확인
[기능]
1. 프로필 사진 등록
- 등록 안할땐 기본 프로필로 값을 넘겨줘야
2. 사용자의 인풋값 유효성 검토 통과한 값들 Join page 의 값들과 같이 api 에 등록
프로필 수정 페이지와 UI 비슷
홈 피드 페이지
• 먹을사람? 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.
• 먹을사람? 피드에는 자신이 팔로우한 사용자의 게시글만 확인할 수 있습니다.
• 팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.
- 먹을사람?의 메인페이지
- 자신이 팔로우한 사용자의 게시글만 확인할 수 있습니다.
피드 내용 없을때 404페이지와 UI 비슷
post
- 같이 먹을 사람을 구하는 내용이 담긴 영역이 나타남. 해당 내용이 API에 없으면 생략
- 게시물로 올린 이미지가 나타난다. 이미지가 없으면 생략
- 텍스트
검색 페이지
• 드실 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.
• 사용자 이름을 검색할 수 있는 페이지입니다.
• 필수 과제에서는 검색 기능은 구현하지 않습니다. 마크업만 구현해 보세요.
- 기능개발 필수 아님
필수 - 화면
도전 - 기능
your profile 페이지
갤러리형, 앨범형 구현 필요
이미지가 없는 게시글일 경우 앨범형에선 띄우지 않음
상품 있는 경우에만 상품 섹션 출력
작성글 없을때는 ‘작성된 글이 없어요’ 같은거 띄워줘도 좋을듯
my profile 페이지
• 내 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
• 사용자 정보 하단에는 팔로우 버튼이 있습니다. 팔로우 버튼을 클릭하면 언팔로우 버튼으로 바뀌어야 합니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
• 팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
• 판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
• 게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
• 또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.
• 나의 프로필 페이지일 경우
◦ 프로필 수정 버튼과 상품 등록 버튼이 표시됩니다.
◦ 판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다. (단, 나의 프로필 페이지가 아닐 경우 상품을 클릭하면 바로 상품 판매 사이트로 이동됩니다.)
- 게시글 리스트 또는 앨범 형식으로 확인 가능
위와 동일
팔로잉 목록 페이지
(내가 팔로우)
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
[기능(선택)]
- 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다. (단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
버튼 클릭시 색 변화 구현
[기능(선택)]
팔로O - 언팔(취소)버튼 / 팔로X - 팔로우버튼
팔로우버튼 클릭시 팔로잉 목록에 해당 사용자 추가,
언팔(취소)버튼 클릭시 팔로잉 목록에서 해당 사용자 삭제
팔로워 및 팔로잉 목록에 내가 표시될 경우 팔로우버튼 표시X
팔로잉한 사람이 없을때는 ‘팔로잉한 사람이 없어요’ 같은거 띄워줘도 좋을듯
팔로워 목록 페이지
(나를 팔로우)
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
필수 - 화면
도전 - 기능
프로필 수정 페이지
프로필 설정 페이지와 UI 비슷
상품 등록 페이지
• 나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품을 등록할 수 있는 페이지가 나타납니다.
• 상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
• 상품명은 2~15자 이내로 입력되게 하고, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.
- 나의 프로필에서 상품 등록 누르면 등록 페이지로 연결 됨
- 상품 이미지, 상품명, 가격, 링크 입력 받으면 버튼 활성화 됨. #B19370 (비활성화)→ #7D4B0F(활성화)
- 상품명 2~ 15자 이내로 입력 구현
- 숫자 3자리 마다 , 생성됨
- 링크 ex) http(s): // www.naver.com 양식 구현
- 이미지 미리보기 구현
상품 수정 페이지
UI는 상품 등록 페이지와 동일하나 등록한 상품의 데이터를 갖고와야 함
게시물 작성 페이지
[기능]
- 하단 메뉴바에서 게시글 작성 클릭시 페이지 표시
- 글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
하단 메뉴바에서 게시글 작성 클릭시 페이지 표시
- 글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
사진 업로드 : 한 장만 업로드 가능하도록 구현할 것.
[선택] 도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.
하단 사진 아이콘 클릭하면 이미지 첨부 가능해야함
사진 한 장 첨부는 필수, 3장은 도전과제
게시물 수정 페이지
UI는 게시물 작성 페이지와 동일하나 작성한 게시물의 데이터를 갖고와야 함
채팅방 목록 페이지
필수 - 화면
도전 - 기능
채팅방 페이지
• 채팅 입력창에서 텍스트가 입력되면 전송 버튼이 활성화됩니다.
• 이미지 버튼을 클릭하고 이미지를 선택하면 전송 버튼이 활성화됩니다.
• 채팅방 상단 우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.
필수 - 화면
도전 - 기능
404 페이지
- 연결 실패 시, 나타나는 페이지
피드 내용 없을때와 UI 비슷
게시글 모달
• 게시글 우측 상단에 위치한 버튼을 클릭했을 경우
◦ 내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다.
◦ 다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.
