인스타그램 클론 Team 프로젝트 - 3 (최종)

1. 프로젝트 기간

2022.05.03 (화) ~ 2022.05.11 (수)

 

2. 팀 구성

김선민, 김민기, 박재현, 황신혜 

 

3. 프로젝트 진행 방식

• Figma 활용 구현 화면 관리 : 링크
• Git Project / Gantt Chart 일정 관리 : Git 프로젝트 링크, 간트차트 링크
• Git Issue 기반 프로젝트 관리 : 이슈 링크
• API 설계도 Notion 작성 : 링크
• 개발 도구
  • FE : HTML, CSS, JS
  • BE : Flask
  • DB : MongoDB (Atlas MongoDB)

 

4. 프로젝트 진행

4.1 Instgram 화면 조사 / 기능 구현 범위 정의

화면	화면 이름	기능	담당자
	회원가입	필수기능 회원가입, 로그인 JWT 토큰 활용 세션 관리 추가기능 아이디/비밀번호 찾기, SNS(Facebook 등) 이용 로그인	박재현
	메인(피드) 페이지	필수기능 Feed 프로필(헤더) - 페이지 이동 Feed 본문 (사진, 글, 모달창) Feed 댓글 조회/작성 Feed 좋아요 / 북마크  Feed 옵션 모달 Feed 친구 추천 기능 추가기능 무한스크롤 페이지네이션 DM	김선민, 박재현
	마이페이지	필수기능 포스트 Hover시 (좋아요/정보) 포스트 Click시 포스팅 모달  추가 기능 팔로워/팔로잉 기능 프로필 편집 (이미지/정보 변경) 계정 설정	김민기
	nav 헤더바	필수 기능 (아이콘 링킹) 홈, 마이페이지 (프로필, 로그아웃) 새 게시물 작성 (모달) 게시물 최근 활동 조회 추가 기능 유저 검색	황신혜
· · ·	· · ·	· · ·

 

4.2 DB 설계도 작성

 

4.3 기능 세부 구현

• 로그인/회원가입 페이지
  • 회원가입 : User 정보 검증 및 DB 저장
    - 아이디 중복 체크 (이메일형식, 4~30자)
    - 닉네임 중복 체크 (영대소문자, 숫자, (_ . @ !) 특수문자, 4~12자)
    - 이름 체크 (영대소문자, 한글 2-20자)
    - 비밀번호 체크 (영대소문자, 숫자, (!@#$%^) 특수문자, 8~20자)
    
    
  • 로그인 : 입력 정보 DB 검증 및 Token 부여
    - JWT(Json Wep Token) 생성 (ID 값 저장)
    - 페이지 로드시 Token 체크 유지 시간(30분) 초과시 토큰 삭제 및 로그아웃

 

• 피드 페이지
  
  • 게시물 조회 : 로그인 유저 정보 조회
    - User가 Follow 한 사람의 Feed 출력
  • 게시물 헤더 : 유저 프로필 페이지 이동
  • 게시물 본문
    - 게시글 조회
    - 게시물 좋아요/해제 
    - 북마크 등록/해제
  • 게시물 모달 (위 기능과 동일)
  • 게시물 댓글
    - 댓글 조회
    - 댓글 작성
  • 친구 추천 기능
    - 추천 유저 Follow / Unfollow 가능
    - 추천 알고리즘 : 전체 유저 - 내가 팔로우한 유저 리스트
  • (다음 기회에) 게시물 편집 (수정, 삭제) Option ( ··· )

 

• 마이페이지
  
  • Follow , Following (모달)
    - 팔로우/언팔로우 기능
    - 팔로우/팔로잉 수
  • 포스트 출력 (유저가 작성한)
    - 포스트 Hover (좋아요/댓글 정보)
    - 포스트 Click (게시글 모달)
  • 프로필 이미지 변경
    - 이미지 업로드 및 서버 저장
  • (다음 기회에) 포스트 북마크 탭 (저장됨) 출력

 

• NAV
  
  • 홈, 마이페이지 : 페이지 이동
  • 새 게시물 작성 (모달)
    - 이미지 업로드 후 서버 저장
  • (다음 기회에) 게시물 최근 활동

 

4.4 기능별 API 설계

• https://chemical-child-2bc.notion.site/c1bcd82a87284af2a31417eb05f91bbe?v=af9524e1b4424fc1ab878849998a052d