풍년마켓 스토리보드
프로젝트 10조 십전백기
화면명 | 스플레쉬 | URL | |
화면설명 |
담당자 : 김미경 |
기능 : 천천히 나타나는 화면 |
setTimeOut 다음 화면 전환 |
|
|
|
|
|
|
|
화면명 | 로그인 | URL | /login |
화면설명 |
담당자 : 김혜빈 |
로그인 / 회원가입 페이지 이동 |
|
|
|
|
|
|
|
|
화면명 | 로그인-이메일 | URL | /login/login_email |
화면설명 |
담당자 : 김혜빈 |
|
*이메일, 비밀번호 밸리데이션 �회원가입 정보와 일치하는지,�둘 다 작성했는지 |
*버튼 활성화 |
|
|
|
|
|
|
화면명 | 회원가입 | URL | /login/sign_up |
화면설명 |
담당자: 강풍윤 |
폼 벨리데이션 실패 시 에러메시지 |
모두 valid일 경우 버튼 활성화 |
프로필 설정 페이지 이동 |
*Validation 명세 |
비밀번호 6자리 이상 |
|
|
|
|
화면명 | 프로필 설정 | URL | /login/sign_up |
화면설명 |
담당자: 강풍윤 |
폼 벨리데이션 실패 시 에러메시지 |
모두 valid일 경우 버튼 활성화 |
홈 페이지 이동 |
프로필 이미지 추가 |
|
|
|
|
|
화면명 | 홈 | URL | /home |
화면설명 |
담당자 : UI 김미경 |
|
2. 피드 구현�로그인한 해당유저의 팔로잉이 없다면 (post:[]) Blank 페이지를 랜더링 합니다.�팔로잉이 있는 경우 팔로잉한 유저들의 포스트를 출력하는 페이지를 랜더링합니다.�프로필이미지유저이름아이디포스트데이터를 출력합니다.�포스트 날짜를 출력합니다. 업데이트가있는경우 업데이트 날짜를 출력합니다. |
3. 검색하기 클릭 => Search Page |
4. 더보기 버튼 클릭�IsMe? true => 수정 IsMe? false => 신고 |
5. 하트 토글 |
6. 댓글 누르면 상세 페이지 이동 |
|
|
|
화면명 | 검색 | URL | /search |
화면설명 |
담당자 : 강풍윤(UI), 김혜빈(기능) |
검색기능(선택)�- 검색시 일치하는 결과만 구현�- 일치하는 부분만 글자 색 변경 |
- 클릭 시 해당 사람 프로필로 이동 |
|
|
|
|
|
|
|
화면명 | 내 프로필 | URL | /my_profile |
화면설명 |
담당자: 김미경 - 상품/팔로우 |
담당자: 김혜빈 - 리스트/앨범 |
프로필 수정 => 프로필 수정 페이지로 이동 |
상품 등록 => 상품 등록 페이지 |
|
|
|
|
|
|
화면명 | 유저 프로필 | URL | /user_profile/:id |
화면설명 |
담당자: 김미경 - 상품/팔로우 |
담당자: 김혜빈 - 리스트/앨범 |
사용자 정보 받아서 프로필 정보 출력하기 |
팔로워 카운트 클릭 =>�Followers Page 이동(팔로우/취소) ��팔로잉 카운트 클릭 => �Followings Page 이동 (팔로우/취소) |
채팅 => ChatRoom 페이지 이동 |
쉐어 => 사용자 프로필 링크 복사 |
팔로우,취소 버튼 토글 (변하는 기능만 1차) |
상품 정보 출력하기 |
피드 정보 출력하기 |
Post Card클릭 => Post Page�(리스트, 앨범) |
하트 |
화면명 | 유저 프로필 | URL | /user_profile/:id |
화면설명 |
담당자: 강풍윤 |
|
사용자 정보 받아서 프로필 정보 출력하기 |
팔로워 카운트 클릭 =>�Followers Page 이동(팔로우/취소) ��팔로잉 카운트 클릭 => �Followings Page 이동 (팔로우/취소) |
채팅 => ChatRoom 페이지 이동 |
쉐어 => 사용자 프로필 링크 복사 |
팔로우,취소 버튼 토글 (변하는 기능만 1차) |
상품 정보 출력하기 |
피드 정보 출력하기 |
Post Card클릭 => Post Page�(리스트, 앨범) |
하트 |
화면명 | 프로필 수정 | URL | /profile_edit |
화면설명 |
담당자: 강풍윤 - 프로필수정 |
프로필 수정 => 사용자 데이터 받아와서 input 출력 |
저장 버튼 활성 비활성 |
회원가입 밸리데이션과 동일 |
|
|
|
|
|
|
화면명 | 업로드 | URL | /post_upload |
화면설명 |
담당자: 고은영 |
내 프로필 이미지 불러오기 |
텍스트 입력 |
하단 업로드 버튼 눌러서 이미지 등록 |
이미지 등록시 미리보기 이미지 뜸 |
텍스트나 이미지 둘 중 하나만 작성되어도 상단 헤더의 업로드 버튼 활성화 |
상단 헤더에 활성화된 업로드 버튼을 누르면 글 작성 |
작성된 글은 자신의 프로필 피드에 게시 |
게시글이 작성되면 프로필 피드로 이동 |
|
화면명 | 상품 등록/수정 | URL | /product_upload, /product/:id/edit |
화면설명 |
담당자: 김미경 - 상품수정/삭제 |
상품 CRUD |
Input 유효성 검사 글자 수, 가격 숫자만, 링크URL 확인 |
유효성 검사 후 버튼 활성화 |
이미지 불러와 불러온 출력하기 |
상품 수정 => 상품 데이터 받아와서 input 출력 |
|
|
|
|
화면명 | 게시물 | URL | /post/:id |
화면설명 |
담당자 : 고은영 |
게시글 오른쪽 상단 더보기 -> 내 게시글 : 삭제/수정�유저 게시글 : 신고하기 |
|
댓글창 인풋 입력하면 ‘게시' 버튼 초록색으로 활성화 -> 게시 |
댓글창 더보기 ->�내 댓글 : 삭제 모달�유저 댓글 : 신고 모달 |
댓글창 내 프로필 사진 출력 |
유저 게시글
유저 댓글
내 댓글
내 게시글
화면명 | 채팅 리스트 | URL | /chat |
화면설명 |
담당자: 고은영 |
Just 하드코딩.. |
첫번째 채팅방 클릭 => ChatRoom page 이동 |
|
|
|
|
|
|
|
화면명 | 채팅방 | URL | /chat/:id |
화면설명 |
담당자: 고은영 |
Just 하드코딩…22 |
|
|
|
|
|
|
|
|
화면명 | 에러 페이지 | URL | /not_found |
화면설명 |
담당자 : 김미경 |
404일때 연결하기 |
이전 페이지 클릭 시 이동 |
|
|
|
|
|
|
|
화면명 | | URL | |
화면설명 |
|
|
|
|
|
|
|
|
|
|
화면명 | | URL | |
화면설명 |
|
|
|
|
|
|
|
|
|
|
화면명 | | URL | |
화면설명 |
|
|
|
|
|
|
|
|
|
|
화면명 | | URL | |
화면설명 |
|
|
|
|
|
|
|
|
|
|
화면명 | | URL | |
화면설명 |
|
|
|
|
|
|
|
|
|
|