HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
🏃🏻‍♂️
달리팀
/
🍉
1차 프로젝트 문서
/
1차 스프린트 회의

1차 스프린트 회의

날짜
Jun 9, 2022
태그
회의
속성
디자인 픽스 회의
  • 알림확인 페이지 구현 필요
요구사항 체크
기본 요구사항
  • 사용자는 회원가입과 로그인을 할 수 있습니다.
    • 로그인 페이지 - 로그인 기능
    • 회원가입 페이지 - 회원가입 기능
  • 사용자는 채널에 올라온 글을 볼 수 있습니다.
    • 채널 - 일단 유일한 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개 - 라우팅
      • 활성화 아이콘 필드인
      • 따봉 아이콘
    • 베이스 컴포넌트
      • 아바타
        • 뱃지
      • 아이콘
기간 설정
역할 분담
개발 시작!
스크럼?