프로젝트: 인스타그램(Instagram) 클론코딩
기획 및 제작: 김태진
분류: 개인 프로젝트
제작 기간: 2021. 03 ~ 08.
배포일: 2021.08.18.
주요 기능: 회원가입, 로그인, 포스트 작성 및 삭제, 댓글, 유저 검색, 다이렉트 메시지, 팔로우, 프로필 페이지, 좋아요 및 북마크
사용 기술: React, Styled-component, Redux-thunk, Firebase, Git flow
React, Styled-component, redux-thunk, firebase를 이용하여 인스타그램 클론 코딩 완성하기입니다. firebase의 Authentication, Cloud firestore, storage, hosting 서비스를 이용하였습니다. 데이터 베이스와 스토리지에 데이터를 저장하고 불러오는 요청 처리와 완성된 프로젝트의 호스팅을 목표로 진행하였습니다.
링크: instagram
ID: test@gmail.com | PW: 123456를 입력하여 접속 가능
git flow를 통한 업데이트 진행
-
✨ 메인 페이지 및 프로필 페이지에 인피니트 스크롤 기능 추가(21.09.06)
-
🐛 프로필 페이지로 이동하는 버튼 클릭 시 발생했던 데이터 가져오기 에러 수정(21.09.06)
- Authentication
- Firebase Cloud Firestore(JSON TREE)
{
"users": {
"user-1": {
"uid": "",
"username": "",
"displayName": "",
"email": "",
"phone": "",
"photoURL": "",
"presentation": "",
},
"user-2": { ... }
}
}{
"posts": {
"post-1": {
"uid": "",
"id": "",
"text": "",
"date": "",
"imagesArray": [
{
"name": "",
"timeCreated": 1628775963000,
"url": ""
},
],
"bookmarks": ["", ..., ""],
"hearts": ["", ..., ""],
"location": "",
"subLocation": "",
"isPossibleToComment": true,
"comments": {
"comment-1": {
"text": "",
"date": 1628775963100,
"uid": "",
},
"comment-2": { ... }
}
},
"post-2": { ... }
}
}{
"follow": {
"follow-1": {
"displayName": "",
"followers": ["", ...,""],
"following": ["", ...,""],
},
"follow-2": { ... }
}
}{
"direct": {
"room-1": {
"id": "",
"timeStamp": 1628775963100,
"from": "",
"msg": "",
"msgId": "",
"participant": ["", ..., ""],
"messages": {
"message-1": {
"id": "",
"msg": "",
"timeStamp": 1628775963100,
"uid": "",
},
"message-2": { ... }
}
},
"room-2": { ... }
}
}- Firebase Storage
Firebase Storage를 구조화한 이미지
- 이메일을 이용한 회원가입
- 이메일, 패스워드, 성명, 아이디를 입력하여 회원가입 구현
- Firebase의 Authentication에서 회원가입한 유저 정보 관리
- Google 인증을 통한 회원가입
- 본인의 Google 계정을 연동하여 회원가입 진행하는 기능 구현
- 별도의 이메일, 패스워드 입력없이 Google 계정을 통해 회원가입 및 즉시 회원가입 가능
- 이메일 및 패스워드 로그인
- 인증된 이메일과 패스워드를 통해 로그인하도록 구현
- 이메일 형식이 아닌 경우, 비밀번호가 6자리 미만인 경우 로그인 버튼 기능을 제한함
- 이메일 혹은 비밀번호만 입력한 경우, 이메일 혹은 비밀번호가 일치하지 않을 경우 로그인 제한 기능 구현
- Google계정 로그인
- 기존에 회원가입을 통해 인증된 Google 계정이 존재할 경우 즉시 로그인
- 회원이 존재하지 않더라도 구글 인증 과정을 거친 후 즉시 로그인
- 유저 검색
- 현재 회원가입된 유저를 검색하는 기능 구현
- 최근 검색한 유저의 리스트를 최근 검색 항목에 구현
- 검색 기록 지우기, 모두 지우기, 최근 검색 항목에서 유저를 선택할 경우 최근 검색 항목의 상위로 업데이트하는 기능 구현
- 네비게이션 바
- 현재 보여주는 페이지에 대해 시각적으로 표시하고 Modal 혹은 Popup창이 열렸다가 닫힐 경우 다시 기존의 페이지로 보여주도록 구현
- 프로필 팝업
- 프로필 페이지로 이동하기 전 팝업창을 통해 프로필, 저장됨, 좋아요 페이지 혹은 프로필 설정 페이지, 로그아웃 기능을 쉽게 이용할 수 있도록 구현
- 새 게시물
- 실제 인스타그램의 웹 버전은 모바일 앱과 다르게 새 게시물 작성 기능이 없어 본 프로젝트에서 새롭게 구현함
- 새 게시물 작성은 Modal창으로 작성
- 새 게시물 작성 도중 Dimmed 부분을 클릭할 경우 창이 닫히지 않도록 구현
- 인스타그램의 가장 큰 특징은 사진업로드 기능이기 때문에 새 게시물 작성 시 사진을 업로드 하지 않으면 공유되지 않도록 구현
- 사진 업로드, 문구 입력, 장소 검색을 통해 위치 추가, 업로드 로딩 및 완료를 구현
- 업로드되는 게시물에 대해서 댓글 작성에 대한 권한을 On/Off하는 Toggle 버튼 구현
- 업로드된 새 게시물 데이터는 Firebase의 Cloud firestore에 저장되고, 사진의 경우 Firebase의 Storage에 저장함
- 이미지는 Storage의 URL을 통해 사이트에 보여지도록 구현
- 실제 인스타그램에서의 새 게시물 Modal
- 본 기능을 완성한 후 실제 인스타그램에서 부분적으로 새 게시물 업로드 기능이 생겼다 없어졌다하는 테스트가 진행되는 것으로 확인됨
- 실제 테스트 중인 인스타그램의 새 게시물에서 업로드 로딩 및 완료시 UI를 클론하여 본 프로젝트에 재구현
- 게시물
- 피드를 올린 유저의 프로필 이미지 혹은 아이디를 클릭하면 해당 유저의 프로필 페이지로 이동함
- 이미지 슬라이더(Carousel)을 직접 구현하여 여러 장의 이미지를 볼 수 있도록 구현
- 현재 보여지는 이미지가 몇 번째인지 알 수 있도록 슬라이더에 대한 pagination을 Dot 모양으로 구현
- 좋아요, 북마크, 댓글 작성
- 피드에 좋아요, 북마크, 댓글 작성 구현
- 좋아요, 북마크한 게시글은 프로필 페이지에서 다시 볼 수 있도록 함
- 새로운 댓글은 피드에서 바로 볼 수 있도록 기존에 보여지는 2개의 댓글 밑에 연속적으로 구현
- Emoji Picker library를 이용하여 댓글에 Emoji를 추가하여 작성할 수 있도록 구현
- 포스트 모달
- 게시물에 작성된 댓글은 최대 2개까지 보여지고 말풍선 모양의 아이콘 또는
댓글 n개 더보기를 클릭하면 Modal창이 열리면서 더 많은 댓글을 볼 수 있도록 구현
- Aside
- 피드가 올라오는 타임라인의 오른편에 배치하였고 로그아웃이 바로 가능하도록 구현
- 현재 나를 팔로우하는 유저에 한해서 추천 목록에 보여지도록 구현
- 맞팔로우하게 되면 추천 목록에서 지워지도록 구현
- 게시물 공유
- 공유하기 아이콘 클릭 시 Modal창이 열리도록 구현
- 다이렉트 메시지를 주고 받은 유저가 이미 존재할 경우 추천된 유저 목록에 보여지도록 구현
- 검색된 유저를 선택하게 되면 선택한 유저 목록에 보여지도록 구현
- 이미 선택받은 유저가 있으면 검색 결과에서 체크 중 표시를 나타내어 구현
- 선택한 유저가 여러명인 경우 불필요한 유저는 목록에서 바로 삭제할 수 있도록 구현
- 메시지를 작성할 경우 작성된 메시지와 게시물 링크를 함께 전달하고, 메시지를 작성하지 않으면 게시물 링크만 보내도록 구현
- 다이렉트
- 다이렉트 페이지에서 왼편은 다이렉트 룸, 오른편은 다이렉트 메시지 섹션이 나타나도록 구현
- 메시지 보내기 아이콘을 누르면 공유하기와 같은 Modal창이 열리도록 하고, 다이렉트 페이지에서는 게시물 공유 기능 없이 메시지만 전달하도록 구현
- 다이렉트 룸에 대한 멤버 정보 및 채팅 삭제는 다이렉트 메시지 섹션에서 확인 가능하도록 구현
- 보낸 메시지에 대해서 복사 및 삭제가 가능하도록 구현
- 유저 정보
- 유저의 프로필 사진, 아이디, 게시물 갯수, 팔로워, 팔로잉, 이름, 프로필 소개 문구 등의 정보를 확인할 수 있도록 구현
- 본인의 프로필 페이지일 경우 프로필 편집 및 프로필 설정 버튼, 다른 유저의 프로필 페이지일 경우 팔로우가 가능하도록 구현
- 게시물, 저장됨, 좋아요
- 유저의 게시물, 저장됨(북마크), 좋아요 목록을 서브라우터로 구현
- 저장됨, 좋아요 목록은 본인만 확인할 수 있고 다른 유저의 프로필 페이지에 접속할 경우 게시물 탭만 보여지도록 구현
- 게시물 목록의 경우 Grid 레이아웃을 이용하여 구현
- 게시물 목록에 Hover하면 좋아요 갯수와 댓글 수를 확인할 수 있도록 구현
- 게시물 목록을 클릭하면 Modal창이 활성화 되고 게시물을 더 자세히 볼 수 있도록 구현
- 모달의 왼쪽과 오른쪽에
<,>아이콘을 통해 Modal창을 닫지 않고 이전 게시물, 다음 게시물을 볼 수 있도록 구현 - 첫 번째 혹은 마지막 번째 게시물의 경우
<,>아이콘을 없애서 사용자가 처음 혹은 마지막 게시물에 도달했음을 알 수 있도록 구현 - 게시물, 저장됨, 좋아요 목록이 존재하지 않을 때 보여주는 페이지를 구현
- 프로필 편집 및 비밀번호 설정
- 네비게이션 바에서
프로필 사진클릭 >설정탭을 통해서 접속하도록 구현 - 프로필 페이지에서
프로필 편집버튼 혹은 톱니바퀴 모양의 아이콘 클릭시 프로필 편집 페이지로 접속하도록 구현 프로필 사진 바꾸기버튼 혹은 프로필 이미지를 클릭하여 프로필 사진을 변경하는 기능 구현- 이름, 사용자 이름, 이메일, 전화번호, 소개 문구를 제출하여 수정하도록 구현
비밀번호 변경탭에서 새로운 비밀번호로 변경하는 기능을 구현
- 싱글 포스트
- 게시물의 Modal창 대신에 페이지에서 볼 수 있도록 구현
- 좋아요, 북마크, 댓글 작성, 게시물 공유하기 등 구현
- 주요 게시물
- 게시물을 작성한 유저의 싱글 포스트 페이지이기 때문에 보고 있는 게시물 이 외의 주요 게시물이 무엇인지 나타내는 섹션을 분리해 구현
- 최대 6개의 게시물이 나오고 클릭하면 바로 그 게시물에 대해서 싱글 포스트 섹션에서 확인 가능하도록 구현
- 게시물 더보기의 닉네임을 클릭하면 클릭한 유저의 프로필 페이지로 접속되도록 구현
- 주요 게시물은 프로필 페이지와 마찬가지로 hover시 좋아요, 댓글 갯수를 확인할 수 있도록 구현
- React.Portal
- Emoji picker library
- 첫 배포
$ npm install -g firebase-tools
$ firebase init
$ firebase login
> HOSTING
> Directroy? build
$ yarn build
$ firebase deploy
- 수정 후 배포
$ yarn build
$ firebase deploy
미설정, 호스팅이 완료되면 Firebase console의 Hosting탭에서 설정 가능