디자인 픽스 회의
- 알림확인 페이지 구현 필요
요구사항 체크
기본 요구사항
- 사용자는 회원가입과 로그인을 할 수 있습니다.
- 로그인 페이지 - 로그인 기능
- 회원가입 페이지 - 회원가입 기능
- 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 채널 - 일단 유일한 1개의 디폴트 채널만 운용
- 해당 채널에 모든 포스트 등록
- 사용자는 가입자 목록을 볼 수 있습니다.
- 가입자 검색?
- 사용자는 가입자를 이름으로 검색을 할 수 있습니다.
- 검색 페이지 - 검색 기능
- 사용자는 가입자의 정보를 볼 수 있습니다.
아바타에 호버 ⇒ 미니 유저 인포- 개인 페이지 - 개인 정보
- 사용자는 포스트 혹은 가입자를 검색할 수 있습니다.
- 검색 페이지 - 검색 기능
- 인증된 사용자는 자신의 정보를 변경할 수 있습니다.
- 개인 페이지 - 프로필 편집 기능
- 인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 메인 피드 페이지
- 인증된 사용자는 채널에 포스트를 남길 수 있습니다.
- 따봉 만들기 페이지 - 따봉 만들기 기능
- 인증된 사용자는 포스트를 좋아요 할 수 있습니다.
- 따봉카드 컴포넌트 - 좋아요 버튼 - 좋아요 기능
- 인증된 사용자는 포스트에 댓글을 남길 수 있습니다.
- 따봉카드 컴포넌트 - 댓글 버튼 - 댓글 기능
- 인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.
- 메인피드페이지 - 헤더 컴포넌트 - 알림 아이콘 - 알릭 목록 확인 기능 (w.뱃지) - 알림 페이지
- SPA 형태로 만들어주세요.
- 네
- 엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.
- 에러 페이지 구현? 아니면 그냥 404
보너스 요구사항
- 사용자는 현재 접속 중인 사용자를 볼 수 있습니다.
- 추후 구현 가능..?
- 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.
- 추후 구현 가능
- 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.
- 알림처럼 추후 구현 가능
- 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.
- 추후 구현 가능
- 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 이미지를 첨부할 수 있습니다. 파일 업로드를 구현해보세요.
- 추후 구현 가능
- 다크 모드를 적용해보세요.
- 예..?
1차 스프린트 구성
모델
모델 안내
API에 따라 모델 필드에서 일부분이 빠진 상태로 내려올 수 있습니다.
ex) 로그인 후 내려오는 User에는 프로필 이미지와 커버 이미지 필드가 제거됩니다.
User
{ "coverImage": String,// 커버 이미지"image": String,// 프로필 이미지"role": String, "emailVerified": Boolean,// 사용되지 않음"banned": Boolean,// 사용되지 않음"isOnline": Boolean, "posts": Post[], "likes": Like[], "comments": String[], "followers": [], "following": [ { "_id": "6169e91316cb2265df003c6d", "user": "6169e58216cb2265df003bf4", "follower": "6169e206aa57d952c6dc1edd", "createdAt": "2021-10-15T20:48:19.816Z", "updatedAt": "2021-10-15T20:48:19.816Z", "__v": 0 } ], "notifications": Notification[], "messages": Message[], "_id": String, "fullName": String, "email": String, "createdAt": String, "updatedAt": String }
Channel
{ "authRequired": Boolean,// 사용되지 않음"posts": String[], "_id": String, "name": String, "description": String, "createdAt": String, "updatedAt": String }
Post
{ "likes": Like[], "comments": Comment[], "_id": String, "image": Optional<String>, "imagePublicId": Optional<String>, "title": String, "channel": Channel, "author": User, "createdAt": String, "updatedAt": String }
Like
{ "_id": String, "user": String,// 사용자 id"post": String,// 포스트 id"createdAt": String, "updatedAt": String }
Comment
{ "_id": String, "comment": String, "author": User, "post": String,// 포스트 id"createdAt": String, "updatedAt": String }
Notification
{ "seen": Boolean, "_id": String, "author": User, "user": User | String, "post": Nullable<String>,// 포스트 id"follow": Optional<String>,// 사용자 id"comment": Optional<Comment>, "message": Optional<String>,// 메시지 id"createdAt": String, "updatedAt": String }
Follow
{ "_id": String, "user": String,// 사용자 id"follower": String,// 사용자 id"createdAt": String, "updatedAt": String }
Conversation
{ "_id": String[], "message": String, "sender": User, "receiver": User, "seen": Boolean, "createdAt": String }
Message
{ "_id": String, "message": String, const json = { type: 'msg' || 'TTaBong' || 'KingTTabBong', body: 'jdaslfjlasdkjf' } "sender": User, "receiver": User, "seen": Boolean, "createdAt": String, "updatedAt": String }
#프로그래머스/KDT
- 디자인
- 글로벌 스타일
- 더미 데이터 만들면서 모델 확정하기 → API 요청사항 정리하기
px vs. rem?
rem으로 할 거면 계산 좀 필요
통일성 필요 - 재사용할 컴포넌트의 디자인 크기를 통일해야. 지금 디자인 시안의 크기가 서로 다르다.
그리드는 보통 8단위의 픽셀로 스페이싱
그런데 디자인 단계에서는 그걸 안 지켜서 완성도가가 떨어진다.
지금 미리 맞추고 들어가는 것이 좋다.
코인 메세지의 경우는 메시지에 포스트아이디 넣을 것.
message: { type: string, content: string, postId: string }
- 메인 피드 리스트 기능 상세서 만들어보기
- 글로벌 스타일 마무리 - 우제님
- 더미 데이터 마무리 - 종관님👑
- 헤더
- 헤더 컨테이너
- 타이틀 랜더링
- 알림 아이콘 (뱃지) 랜더링
- 알림 누르면 알림페이지 라우팅…
- 배너
- 배너 컨테이너
- 아바타 2개 (휘장, 왕관 뱃지 달린)
- 최초 랜더링
- 스크롤 다운하면 랜더링 또는 유지
- 스크롤 업하면 배너 사라진다. → 스크롤 다운 하면 배너가 사라지지 않나요?
- 아바타 헤더로 들어가는 것은 추가구현.
- 메인
- 카드 리스트 : 카드 - 상기
- 아바타
- 레이블
- 따봉 아이콘
- 좋아요 아이콘
- 칭찬사유
- 좋아요 카운팅
- 댓글 카운팅
- 카드 클릭 시 상세 페이지 라우팅 - 라우팅은 나중엔 한꺼번에 하기로
- 아바타 클릭 시 아바타 페이지 라우팅
- 바텀바 - 지은
- 푸터 컨테이너
- 아이콘 5개 - 라우팅
- 활성화 아이콘 필드인
- 따봉 아이콘
- 베이스 컴포넌트
- 아바타
- 뱃지
- 아이콘
기간 설정
역할 분담
개발 시작!
스크럼?