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