Photogram

• SNS 인스타그램과 유사한 프로젝트

기술 스택(Stacks)

Back-end

(Version: 11) (Version: 2.4.5) (Version: 11.1.2)

Tool

Build Tool

Configuration Tool

dependency

• Sring Boot DevTools
• Lombok
• Spring Data JPA
• MariaDB Driver
• Spring Security
• Security Tags
• Validation
• Spring Web
• oauth2-client
• AOP
• QLRM

DB-Diagram

ER-Diagram

---

구현 기능

1. 로그인/로그아웃 : SpringSecurity 를 이용한 로그인/로그아웃, OAuth2.0 을 이용한 페이스북 로그인 구현
2. 이미지 업로드 : 프로젝트 외부 폴더에서 이미지를 저장하여 관리
3. 비밀번호 암호화 : 비밀번호를 암호화해서 DB 에 저장되도록 구현
4. Ajax 를 통한 API 통신 : 댓글 등록, 좋아요, 구독/구독취소 등 페이지를 리로드 하지 않고 데이터를 변경하는데 사용
5. 프로필 이미지 등록 : 이미지 파일이 아닌 다른 확장자 파일 업로드 시 오류메시지 출력
6. 페이징 : 싱글페이지를 구현
7. 좋아요 순으로 인기 게시물 나열
8. Validation 은 Spring Validation 이용, Exception 은 직접 CustomException 을 만들고 등록하여 예외처리 구현
9. AOP 구현 : Validation, Exception 처리를 AOP 로 구현

화면구성

메인화면(비 로그인 시)

• localhost:8080/auth/signin

  

회원가입 화면

• localhost:8080/auth/signup

  

메인화면(로그인 시)

• localhost:8080

• 메인 화면에서는 다른 사용자의 게시물이 보이고 우측 상단에 버튼으로 홈화면,인기게시물,프로필페이지 로 이동이 가능하다.

• 댓글을 등록할 수 있고 댓글사용자만 댓글 삭제가 가능한 버튼이 생긴다.

  

• 게시물에 하트 버튼을 누르면 빨갛게 변하면서 좋아요 수가 늘어난다.

  

인기 게시물

• localhost:8080/image/popular

• 메인페이지에서 우측 상단에 가운데 있는 아이콘 클릭 시 이동가능

• 좋아요 수가 많은 순서대로 게시물이 나열된다.

• 게시물 클릭 시 게시물 작성자 프로필 페이지로 이동.

  

프로필 페이지(본인)

• `localhost:8080/user/{userId}

• 로그인한 유저의 프로필 페이지 방문시 사진등록 버튼과 프로필 수정 아이콘이 나타난다.

• 그리고 자기소개와 웹사이트주소가 있고 아래에는 게시물이 나타난다.

  

• 톱니바퀴 모양의 아이콘을 클릭하면 회원정보수정 or 로그아웃 모달창이 나타난다.

  

• 구독정보 를 누르면 구독목록이 모달창으로 나타난다.

  

• 프로필 이미지를 클릭하면 모달창이 나오고 사진업로드를 누르면 프로필 이미지를 변경할 수 있다.

  

프로필 페이지(다른 유저)

• 다른 유저의 프로필 페이지에 가면 구독하기 버튼이 나타난다.

  

이미지 업로드 페이지

• localhost:8080/image/upload

• 프로필 페이지에서 이동 가능

• 이미지와 설명을 작성할 수 있다.

  

회원 정보 수정 페이지

• localhost:8080/user/{userId}/update

• 반드시 비밀번호를 입력해야 제출할 수 있도록 구현했다.

  

�게시물 상세 페이지

• localhost:8080/image/detail/{imageId}

• 본인 게시물일 경우 설명을 수정할 수 있는 수정 버튼과 이미지를 삭제할 수 있는 삭제 버튼이 나타난다.

  

• 다른 이용자의 게시물일 경우 이미지와 설명만 나타난다.

  

---

아쉬웠던 점

1. Junit 으로 테스트 코드를 작성하지 못하여 아쉬웠다.
2. JWT 방식으로 로그인/로그아웃을 처리하지 못하여 아쉬웠다.
3. 배포를 하지 못했던게 아쉬웠다.