친구 조각 모음

카톡, SNS, 게임 친구창 등 이곳저곳 흩어져 있는 친구들을 한곳에 모아보세요!

친구의 정보를 카드 형태로 저장해주는 사이트입니다.

• 친구 조각 모음 사이트 링크

• 친구 조각 모음 개발기 : 어떻게, 왜 만들었는지 작성한 블로그 포스팅

사용된 기술 스택

• 
• 
• 

프로젝트 화면 및 소개

• 메인 화면

  

  • 홈으로 돌아가는 로고, 로그인 버튼, 간단한 페이지 소개와 활용법, 친구 추가 화면으로 가는 링크로 구성
  • 친구 추가 화면은 비회원도 접근 가능

• 친구 추가 화면

  

  • 비회원도 접근 가능 (단, 친구 등록 버튼을 누르면 모달창으로 로그인 화면이 뜨고, 로그인을 해야 저장 기능 사용 가능. 모달 창에서 회원가입까지 진행할 수 있어 입력한 친구 추가 정보는 보존됨)
  • 카테고리는 친구 리스트 화면에서 추가 가능
  • 이미지 미등록 시, 기본 썸네일로 표시

• 로그인 화면

  

  • 로그인, 회원가입 기능 구현
  • 구글, GitHub으로도 로그인할 수 있고, 이메일로 계정을 생성할 수도 있음

• 친구 리스트 화면

  

  • 추가한 친구 목록 확인
  • 카테고리별로 목록 확인 기능
  • 카테고리 추가, 삭제 기능
  • 친구 수정, 삭제 기능
  • 카드 크기는 scale로 조정 (브라우저 너비에 따라 자동으로 크기 맞춤)

리소스 출처

• 사람들 이미지 : Designed by pch.vector / Freepik
• 로고
  • 폰트 : Gugi
• 로딩바 : Menu vector created by pch.vector - www.freepik.com
• 주의 사항 아이콘 : Icons made by Freepik from www.flaticon.com

업데이트 기록

• 2021-02-16(화) : 주요 기능 구현, 배포
• 2021-02-28(일) : 반응형 업데이트