나만의 작은 SNS - 'MINI'

빠르게 변하는 사회와 바쁘디 바쁜 현대 사회 구성원들의 하루는 어땠는지, 다른 사람들은 어떻게 지내는지 공유하고 소통할 수 있는 SNS를 만들어 보았습니다.

링크 : https://mini-mindong2.web.app/

사용한 기술

언어 및 라이브러리

• REACT
• TypeScript

번들러

• Vite

스타일

• Styled-Component

API 및 배포

• Firebase

로컬 환경 설치 방법

$ npm install

페이지 설명

• Authentication

회원가입 페이지

간단하게 이메일 가입이 가능하며, 로그인 페이지에는 깃허브 / 구글 로그인 기능도 추가했습니다.

비밀번호 재설정 이메일 송신 페이지

가입하신 이메일로 비밀번호 재설정 이메일을 수신 받을 수 있습니다.

위 링크를 누르면 비밀번호 재설정 페이지로 Redirect됩니다.

• Thread

  게시물 작성

상단의 텍스트창이나, 사이드바의 '글쓰기' 버튼을 눌러 글을 작성 가능합니다. 물론 본인의 글은 수정 / 삭제가 가능합니다.

댓글과 좋아요

댓글과 좋아요 기능을 추가했습니다. 이 과정에서 조금 헷갈렸는데, Firebase에서 기본으로 제공하는 user내에서는 현재 사용자 정보밖에 없어서 Firestore에 UserInfo라는 Doc을 추가하여 회원가입 시 그 유저 정보를 쌓아 그 정보들을 활용하였습니다.

• User

프로필 페이지

프로필 페이지입니다. 본인의 프로필사진과 이름 옆에 아이콘을 추가하여 수정이 가능하다는 걸 보여주고 있습니다.

프로필 수정

프로필은 물론 수정이 가능하며, 프로필 변경시 작성했던 글에서도 닉네임 혹은 프로필사진 변경 사항을 확인할 수 있습니다.

추천친구 페이지

추천친구 페이지입니다. 클릭시 해당 유저의 프로필로 이동가능하며 해당 유저의 쓰레드를 확인 가능합니다.

• 반응형 레이아웃

반응형 레이아웃으로 모바일 환경에서도 부담없이 사용 가능합니다.

버그제보 및 피드백

버그제보 및 피드백을 환영합니다.
[이메일링크] : qlsnaos12@naver.com