인스타그램 클론 코딩 팀 프로젝트
오늘도 팀 프로젝트를 이어서 진행했다. 내가 담당하는 메인 페이지의 UI 부분이 거의 완성된 것 같아서 기분이 좋다. 물론 DB 부분을 생각하면 조금은 막막하지만.... ㅠㅠ 일단은 한숨 돌린 듯하다!
스토리 부분
스토리 부분은 인스타와 다르게 최신 게시물의 사진을 동그라미 안에 넣고, 그 동그라미를 누르게 되면 해당 게시물의 offset으로 스크롤이 이동하도록 구현하였다. 게시물을 삭제하게 되면 해당 스토리도 삭제된다. 로그인된 계정이 팔로우하고 있는 계정들의 최근 게시물 10개 정도만을 스토리로 게시하고자 한다.
북마크 (저장하기) 부분
좋아요, 댓글, 공유하기 외에 북마크 기능을 추가하였다. 북마크 기능은 해당 게시물을 로그인된 계정의 마이 페이지의 '저장됨' 부분에 저장하여 확인할 수 있는 기능이다. 좋아요 기능과 동일하게 누르면 빨간색이 들어오고, 다시 누르면 취소된다.
더보기 모달
피드의 오른쪽 상단의 ... 아이콘을 누를 경우 더보기 모달이 실행된다. 해당 게시물이 현재 로그인된 계정의 게시물일 경우 수정, 삭제, 공유, 저장하기, 취소 버튼이 나오고, 현재 로그인된 계정이 팔로우중인 계정의 게시물일 경우 팔로우 취소, 공유, 저장하기, 취소 버튼이 나오고, 현재 로그인된 계정이 팔로우중이지 않은 계정의 게시물일 경우 팔로우, 공유, 저장하기, 취소 버튼이 나온다.
검색창 아래 모달
검색창에는 다른 사람의 계정 이름을 검색할 수 있는데 이때 db의 user 컬렉션을 계속 뒤지며 가장 유사한 이름의 사용자 계정 5개를 띄울 수 있는 모달 창을 만들었다.
기타 링크 연결
이외에도 footer의 소개 부분에 이전 팀 프로젝트로 진행한 팀 소개 홈페이지를 링크로 걸어두었고, 옆의 로그인된 계정의 프로필 사진 클릭 시 마이 페이지로 진입할 수 있도록 flask를 연결해두었다. 또, 로그아웃 클릭 시 로그인 페이지로 진입하도록 flask를 연결해두었다.