$$config title: InstaKG 기술서 keywords: - IT - Spring Boot - BootStrap - Thymeleaf - 인스타그램 클론 $$ # ![](https://i.ibb.co/njcQH31/10.png) 1-1) 소개 이 프로젝트는 JAVA 기반으로 스프링부트(JPA)와 BootStrap, Thymeleaf 를 이용한 MVC 구조의 인스타그램 클론 사이트 입니다.
1-2) 링크 GitHub Repository : (https://github.com/HeoEunJae/Team_YB-OB_InstaKG) # ![](https://i.ibb.co/sFts7v1/20.png) 2-1) 형상 & 배포 관리 ▶ GitHub
2-2) 개발환경 ▶ IntelliJ ▶ SQLyog ▶ GitHuB
2-3) 사용 기술
? 프론트엔드 ▶ Thymeleaf ▶ Javascript ▶ jQuery ▶ Ajax ▶ BootStrap
? 백엔드 ▶ Spring boot - JAVA 17 - Spring MVC - Spring Boot Security - Spring Boot Validation - Spring Boot Jpa - Spring Boot Lombok - Spring Boot Web ▶ Build tool - Gradle ▶ Database - Xampp - MySql
# ![](https://i.ibb.co/yBg3xf6/30.png) ▶ 회원가입 / 로그인 ▶ 게시글 다중 이미지 업로드 및 스와이프 표시 ▶ 댓글 / 대댓글 / 좋아요 기능 ▶ 카카오톡, 트위터 공유 기능 및 링크 복사 기능 ▶ 업로드 게시물 썸네일 표시 기능 ▶ 회원정보 프로필 설정 기능 # ![](https://i.ibb.co/Tm4kZ5q/40.png) |기능|구현|배포|테스트| |-|-|-|-| |회원가입|✔️||✔️| |로그인|✔️||✔️| |로그아웃|✔️||✔️| |게시물 등록|✔️||✔️| |다중 이미지 업로드|✔️||✔️| |스와이프|✔️||✔️| |댓글|✔️||✔️| |대댓글|✔️||✔️| |댓글 막기|✔️||✔️| |좋아요|✔️||✔️| |카카오톡, 트위터 공유|✔️||✔️| |링크 복사|✔️||✔️| |수정/삭제|✔️||✔️| |프로필 수정|✔️||✔️| |프로필 이미지 수정|✔️||✔️| |게시물 썸네일|✔️||✔️| # ![](https://i.ibb.co/z46y5Tq/50.png) 5-1) 회원가입 / 로그인 - 스프링 시큐리티 사용 - 회원가입 창에서 이메일 중복 시 오류 출력 - 로그인 창에서 비밀번호 혹은 이메일 일치하지 않을 시 오류 출력
### ▶ 소스코드 ? SecurityConfig ![](https://cdn.discordapp.com/attachments/993375184193077272/1027394310183845988/unknown.png)
? AuthController ![](https://cdn.discordapp.com/attachments/993375184193077272/1027412093688889425/unknown.png)
? AuthService ![](https://cdn.discordapp.com/attachments/993375184193077272/1027412927667503164/unknown.png) ### ▶ 동작화면 ? 회원가입 / 로그인 구현화면 ![](https://camo.githubusercontent.com/19bb99a442291a493560355e7cf933b2b9decbb993f64c6464434887a74dae57/68747470733a2f2f6d656469612e646973636f72646170702e6e65742f6174746163686d656e74732f313032313630383437353332303635313834392f313032343838393532363230313633303737302f363134656232613066383661366664392e504e473f77696474683d353838266865696768743d363239) ![](https://camo.githubusercontent.com/1bc423992d6940cd050375f11934549654e904278d5753f0cbcbaf5b49402436/68747470733a2f2f6d656469612e646973636f72646170702e6e65742f6174746163686d656e74732f313032313630383437353332303635313834392f313032343838393531303135383430393830392f313061653333646139336234643330302e504e473f77696474683d353631266865696768743d363033)
5-2) 메인 스토리 화면 - 게시글 이미지 다중 업로드시 스와이프 기능 사진 슬라이드로 이동 - 삭제 버튼를 누를 시 해당 id 삭제하기 - 수정 버튼 누를시 해당 id 값 내용 수정 - 공유 / 링크 복사 버튼 누를시 해당 id 값에 저장된 내용 공유 및 복사 - 좋아요 버튼 누를시 해당 id 값의 onoff - 배열을 사용해 다중 댓글 단일 표시
### ▶ 소스코드 ? question.entity ![entity](https://cdn.discordapp.com/attachments/993375184193077272/1027417785774649414/entity.png) ? question.controller ![listController](https://cdn.discordapp.com/attachments/993375184193077272/1027417805588537404/listController.png) ![dmController](https://cdn.discordapp.com/attachments/993375184193077272/1027417770083758160/dmController.png) ? question.service ![service](https://cdn.discordapp.com/attachments/993375184193077272/1027417824630673458/Service.png) ? story.swiper ![swiper](https://cdn.discordapp.com/attachments/993375184193077272/1027417832620830751/swiper.png) ? story.modal ![modal](https://cdn.discordapp.com/attachments/993375184193077272/1027417813830348880/modal_.png) ? story.like ![likeHTML](https://cdn.discordapp.com/attachments/993375184193077272/1027417799636824074/likeHTML.png) ### ▶ 동작화면 ? 메인화면 ![게시글화면](https://user-images.githubusercontent.com/99649645/193164344-1e891999-043f-4dfd-90f8-d5715ac61694.JPG) ![](https://user-images.githubusercontent.com/99649645/193164534-c70b52de-2865-487d-a7d5-7cbe2c7db5b8.JPG)
5-3) 게시물 등록 화면 - 게시글 등록 시 해당 id값을 기억하여 가져와 출력 - 게시글 다중 이미지 업로드시 썸네일 표시 - 이미지 없을시 이미지 넣어달라는 경고창 표시
### ▶ 소스코드 ? FilesController ![FilesController](https://media.discordapp.net/attachments/1021608475320651849/1027425175110684713/9d04412695c8ffea.png)
? FilesService ![FilesService1](https://media.discordapp.net/attachments/1021608475320651849/1027425173680431156/1.png?width=784&height=630) ![FilesService2](https://media.discordapp.net/attachments/1021608475320651849/1027425174259249282/2.png)
? Files ![Files](https://media.discordapp.net/attachments/1021608475320651849/1027425174661894246/01b121acd04100cb.png)
? create.controller ![createController](https://cdn.discordapp.com/attachments/993375184193077272/1027425108752609410/CreateController.png)
? PostUpload.html ![PostUpload](https://cdn.discordapp.com/attachments/993375184193077272/1027425116851806288/fileuploadhtml.png)
### ▶ 동작화면 ? 게시물 업로드 화면 ![게시물 업로드 화면 ](https://media.discordapp.net/attachments/1021608475320651849/1027426430604296232/a4c352d20d8a586e.JPG?width=577&height=630) ![게시물 업로드 오류 화면](https://media.discordapp.net/attachments/1021608475320651849/1027426431279562802/c61f3b7bf5c3f79d.JPG?width=552&height=630) ![게시물 업로드 썸네일 화면](https://media.discordapp.net/attachments/1021608475320651849/1027426430881120326/-_.JPG?width=605&height=630)
5-4) 댓글 화면 - 댓글 버튼 누를시 id 값을 기억해 댓글 페이지 이동 - 댓글의 id값과 댓글의 댓글달기 id값을 따로 설정해서 독립된 개체로 구현
### ▶ 소스코드 ? 댓글 컨트롤러 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027420845896908870/unknown.png) ![](https://cdn.discordapp.com/attachments/993375184193077272/1027421317110169650/unknown.png) ? 댓글 서비스 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027422430697881680/unknown.png) ? 댓글 자바스크립트 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027423486852997170/unknown.png) ? 댓글 html ![](https://cdn.discordapp.com/attachments/993375184193077272/1027425857058373682/unknown.png) ? 대댓글 컨트롤러 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027423883017588826/unknown.png) ? 대댓글 서비스 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027424157656436786/unknown.png) ? 대댓글 자바스크립트 ![](https://cdn.discordapp.com/attachments/993375184193077272/1027424288241885184/unknown.png) ? 대댓글 html ![](https://cdn.discordapp.com/attachments/993375184193077272/1027424820771696690/unknown.png)
### ▶ 동작화면 ![](https://user-images.githubusercontent.com/99649645/193164682-0f4373eb-c2b9-4442-b439-19876db259fe.JPG) ![](https://cdn.discordapp.com/attachments/993375184193077272/1027427876515090483/45dce7a10211f971.JPG)
5-5) 프로필 화면 - 계정의 아이디 정보를 기억하여 로그인 시 독립된 개체로 구현 - 회원 가입 시 입력한 정보 가져오기 - 게시물의 갯수의 값을 가져와서 게시물 개수 및 썸네일 표시 - 프로필 수정 페이지 이동 및 로그아웃을 모달 창 사용
### ▶ 소스코드 ? MainController.java ![MainController](https://i.ibb.co/HKLMmX4/Main-Controller.png)
### ▶ 동작화면 ![프로필 화면 페이지](https://i.ibb.co/rG9kmWR/image.png)
5-6) 프로필 수정 화면 - input 창에 회원 가입 시 입력한 정보 가져오기 - 프로필 수정 제출 버튼 누를 시 수정한 내용 표시 - 프로필 이미지 수정 버튼 누를 시 업로드 창 구현
### ▶ 소스코드 ? User ![User](https://media.discordapp.net/attachments/1021608475320651849/1027412002936717334/unknown.png)

? Modify ![Modify](https://media.discordapp.net/attachments/1021608475320651849/1027412003851075594/unknown.png)

? AuthService ![AuthService](https://media.discordapp.net/attachments/1021608475320651849/1027412003377127445/unknown.png?width=813&height=630)
### ▶ 동작화면 ![프로필 수정 페이지](https://media.discordapp.net/attachments/1021608475320651849/1027417840606789712/d3eed3d3ee3ad180.png?width=781&height=630)

## ??‍? InstaKG 인스타그램 클론 기술서 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.

게시글 상세