justin-sk / miniprojects-2019

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TurkeyBook

우아한테크코스 level 2 미니프로젝트

페이스북 기반의 서비스

Member

우테코 닉네임 이름 역할
베디 배대준 백엔드 & 프론트엔드 & 검색기능
철시 박경철 백엔드 & 프론트엔드 & API 문서화
이지 김지훈 백엔드 & 프론트엔드 & 태그기능
히브리 송원근 백엔드 & 프론트엔드 & 실시간 유저 현황
올라프 백현영 백엔드 & 프론트엔드 & 메신저

Environment

tool version
Java JDK 1.8
Spring Boot 2.1.7.RELEASE
DB(MySQL) 8.0.17
AWS EC2 -
AWS S3 -

구현 기능

  • 로그인 / 회원가입
  • 글 작성, 수정, 삭제
  • 친구 글 및 내 글만 조회하도록 기능 구현
  • 해당 유저의 mypage 접근 시 해당 유저가 쓴 글 볼 수 있음
  • 댓글 작성, 수정, 삭제, 조회
  • 글, 댓글 좋아요
  • 친구 요청, 친구 요청 삭제
  • 친구 추가, 친구 삭제
  • 메신저
  • 검색
  • 실시간 접속 현황
  • 프로필 / 커버 사진 추가
  • 소개 추가 기능
  • API 문서화

시연 캡쳐

초기 화면

/users/form (로그인 & 회원가입 화면)

로그인하지 않는 경우 로그인 및 회원가입 페이지으로 이동합니다.

/ (index)

로그인 한 경우 초기 화면입니다.

오른쪽 바는 현재 접속한 모든 유저 및 친구의 현황을 볼 수 있으며 친구 추가 요청을 보내거나 메신저를 통해 DM을 주고 받을 수 있습니다.

친구 요청

위 오른쪽 바에서 친구요청을 보내면 다음과 같은 화면이 등장합니다.

그러면 받은 유저는 다음과 같이 친구 요청을 볼 수 있습니다.

요청을 받은 유저가 수락을 누르면 다음과 같은 알림이 나타나면서 친구가 됩니다!

마이페이지

/users/{userId}

1_본인_페이지_소개

소개 작성

위 마이페이지에서 소개를 작성할 수 있습니다. (회원가입 후에 마이페이지에서 작성해야함)

소개 작성 버튼을 누르면 작성 input이 나타납니다.

3_소개_수정

수정이 완료되면 다음과 같이 수정된 소개가 나타납니다.

4_소개_수정_완료

글 작성

글은 마이페이지와 초기 화면에서 작성할 수 있습니다.

게시글_삭제

초기화면에서는 맨 위에 작성 칸이 있으며 작성한 경우 위 캡쳐와 같이 수정, 삭제 버튼이 나타납니다. 작성한 유저가 아니라면 나타나지 않습니다.

게시글 작성시에는 사진과 동영상이 들어갈 수 있습니다. 여러 파일을 넣을 수 있지만 총 파일의 크기가 100MB를 넘으면 안됩니다.

게시글작성 게시글_작성_결과

아래는 동영상 동영상_게시 동영상_미리보기 게시글_영상

글 작성시에 유저를 태그할 수 있습니다.

5_친구_태그_친구_없을때 6_친구_태그_친구_있을때 7_친구_태그_체크 8_친구_태그_후 9_인덱스_페이지_친구_태그_후_글_게시 10_피드_페이지_친구_태그_후_글_게시

댓글 작성

댓글 작성은 글에서 할 수 있습니다.

댓글작성 댓글목록

댓글에 대한 답글도 작성할 수 있습니다.

답글

마찬가지로 댓글도 작성한 유저에 대해 수정, 삭제 버튼이 나타납니다.

댓글 좋아요

글과 마찬가지로 댓글에 대해서도 좋아요를 누를 수 있습니다.

검색

검색기능은 자음, 모음, 초성 검색을 지원합니다.

위 결과화면은 다음과 같이 나타납니다.

API 문서화

REST API 관련 문서화를 했습니다.

docs

About


Languages

Language:Java 45.7%Language:HTML 27.9%Language:CSS 15.8%Language:JavaScript 10.5%Language:Shell 0.1%