Final Project

프로젝트명

Inssagram

개발환경

운영체제

Windows 7 Home Premium K

사용언어

Java8, Spring, MyBatis, JavaScript, jQuery, HTML, JSP, CSS, JSTL, SQL

데이터베이스

Oracle Database 11g Express Edition

서버

Tomcat 8.5

개발툴

코드작성 툴

Eclipse CodeMix 3 CI 2019.2.14

쿼리 테스트

QueryBox 3.3.1.1

프로젝트 기간

참여인원

2019. 03. 25 ~ 2019. 04. 26 (5주간)

개인 프로젝트

프로젝트 내용

웹페이지를 기반으로 Spring을 이용한 Social Network Service 제작

담당업무 요약 및 설명

기존 인스타그램 페이지의 디자인 최대한 비슷하게 복사

사진이나 영상을 첨부한 게시물 작성

회원 사이의 팔로우 등록, 해제

본인 정보, 팔로우 정보를 연계하여 회원들의 게시물들 조회

게시물의 댓글, 좋아요, 북마크, 댓글의 좋아요

게시물, 좋아요, 북마크, 댓글, 댓글 좋아요, 회원 정보를 종합한 뷰페이지 조회

뷰페이지에서 사진 이동, 이전글, 다음글로 이동

접속한 회원들 간의 채팅

회원의 정보페이지

Session의 로그인 아이디로 구분

본인일시 프로필 편집으로 이동 버튼 표시

타인일시 팔로우 등록 해제 버튼 표시

회원의 닉네임, 이름, 소개, 웹페이지 조회

게시물, 팔로워 팔로우 수 조회

회원의 게시물 리스트 조회

세부 내용

메인페이지에서 볼 수 있는 게시물

본인과 팔로우들의 글을 기간제한으로 조회

좋아요, 북마크, 댓글 등록 가능

회원 프로필 클릭시 회원 정보페이지로 이동

역시 JSTL FMT를 이용해 날짜 표시

회원의 게시물 리스트

마우스 올리면 사진과 영상 구분지어 다른 정보 표시

사진, 영상 구분지어 우측 상단에 아이콘 표시

클릭시 뷰페이지로 이동

게시물 리스트에서 선택시 볼 수 있는 조회창

Post 형태로 데이터 전송

작성 회원 정보와 댓글 조회 가능

게시물 좋아요, 북마크, 댓글, 댓글에 좋아요

JSTL FMT를 이용해 현재날짜와 등록일의 차이를 구해 분, 시간, 일, 그 외로 구분지어 표시

세부 내용

게시물 조회창에서 새로고침 혹은 링크 직접 입력시 표시되는 조회창

Get타입일 시 현재 페이지가 조회되도록 작업

게시물 입력 페이지

사진, 영상 선택하여 등록

파일 추가시 새로 추가 할 수 있는 영역 추가

동영상의 경우 올리고 미리보기 가능

동영상 올릴시 썸네일 추출

SockJS를 이용해 웹소켓 연결로 채팅 구현

Handshake-lnterceptor를 이용해 Session Data 추출

본인인지 여부 확인해 다른 메시지 표시