$$config title: SKIES 의류 쇼핑몰 기술서 keywords: - IT - Spring Boot - Thymeleaf $$ # 1. ? 개요 1-1) 소개 이 프로젝트는 JAVA 기반으로 스프링부트(JPA)와 Thymeleaf 를 이용한 MVC 구조의 의류 쇼핑몰 사이트 입니다.
1-2) 링크 GitHub Repository : (https://github.com/denist2322/ShoppingMall) # 2. ? 개발환경 2-1) 형상 & 배포 관리 ▶ GitHub
2-2) 개발환경 ▶ IntelliJ ▶ Postman ▶ SQLyog ▶ GitHuB
2-3) 사용 기술
? 프론트엔드 ▶ Thymeleaf ▶ Javascript ▶ jQuery ▶ Ajax ▶ Taliwind
? 백엔드 ▶ Spring boot - JAVA 17 - Spring MVC - Spring Boot Security - Spring Boot Validation - Spring Boot Mail - Spring Boot Jpa - Spring Boot Lombok - Spring Boot Fileupload ▶ Build tool - Gradle ▶ Database - Xampp - MySql
## ✅ 관리자 정보 * ID : admin@test.com * passward : admin # 3. ? 주요 기능 ▶ 메인 페이지 스와이프 ▶ 장바구니 체크 박스 ▶ 상품 상세 페이지 갯수 추가 및 상품 선택 시 화면 노출 ▶ 회원가입 인증번호 이메일 수신 ▶ 회원 정보를 주문페이지에 저장 # 4. ? 테스트 내역 |기능|구현|배포|테스트| |-|-|-|-| |메인 화면 스와이프|✔️||✔️| |상품 목록|✔️||✔️| |상품 디테일|✔️||✔️| |로그인|✔️||✔️| |로그아웃|✔️||✔️| |회원가입|✔️||✔️| |회원가입 이메일 인증|✔️||✔️| |주소 검색 api|✔️||✔️| |아이디 찾기|✔️||✔️| |비밀번호 찾기|✔️||✔️| |상품 목록|✔️||✔️| |상품 디테일|✔️||✔️| |상품 구매 할인|✔️||✔️| |상품 결제|✔️||✔️| |장바구니 담기|✔️||✔️| |고객센터 QnA|✔️||✔️| |게시판 페이징|✔️||✔️| |QnA 게시물 검색|✔️||✔️| # 5. ? 동작화면 & 소스코드 5-1) 메인페이지 스와이프 - 스와이프 기능을 이용한 이미지 슬라이드 변환 - 마지막 슬라이드에서는 처음 슬라이드로 돌아갈 수 있도록 구현 - 처음 슬라이드에서는 마지막 슬라이드로 돌아갈 수 있도록 구현
### ▶ 소스코드 ? common.css ![common.css](https://ifh.cc/g/gYRghR.png)
? main.html ![main.html](https://ifh.cc/g/OCXY7M.jpg)
### ▶ 동작화면 ? 스와이프 이미지 ![스와이프 1번](https://ifh.cc/g/qMlNsg.png) ![스와이프 2번](https://ifh.cc/g/2hvOJw.jpg) ![스와이프 3번](https://ifh.cc/g/4nvwzZ.png)
5-2) 쇼핑카트 - 체크박스 선택에 따른 해당 id를 기억하여 값 가져와 계산하기 - 체크박스 전체 선택시 모든 값 가져와 계산하기 - 삭제 이모지를 누를 시 해당 id 삭제하기
### ▶ 소스코드 ? shoppingcart.entity ![shoppingcart.entity](https://ifh.cc/g/6aK3aj.png)
? shoppingcart.controller ![shoppingcart controller 1](https://ifh.cc/g/92PvG9.png) ![shoppingcart controller 2](https://ifh.cc/g/14TbJx.png)
? shoppingcart.service ![shoppingcart service 의존성 주입부분](https://ifh.cc/g/pDGlH5.png) ![shoppingcart service 체크박스 선택](https://ifh.cc/g/JbRcPL.png) ![shoppingcart service 상품 삭제](https://ifh.cc/g/4Oqcya.png) ![shoppingcart service 장바구니 계산](https://ifh.cc/g/VJpglt.png)
### ▶ 동작화면 ? shoppingcart ![shoppingcart service checkbox 하나선택](https://ifh.cc/g/3VbvKv.png) ![shoppingcart service checkbox 전체선택](https://ifh.cc/g/4notw5.png) ![shoppingcart service 장바구니 삭제 전](https://ifh.cc/g/lj9D4b.png) ![shoppingcart service 장바구니 삭제 후](https://ifh.cc/g/nm1g27.png)
5-3) 메일인증 페이지 - 메일인증 메시지 보내기 - 메인인증 번호 받기 - 메일 인증번호 입력
### ▶ 소스코드 ? MailController.java ![MailController](https://ifh.cc/g/DkT8wl.png) ![MailController 1-2](https://ifh.cc/g/ynjALT.png) ![MailController 1-3](https://ifh.cc/g/osQLAK.png)
? MailService.java ![MailService](https://ifh.cc/g/SarnpX.png) ![MailService 1-2](https://ifh.cc/g/nlOtDL.png) ![MailService 1-3](https://ifh.cc/g/tRG41n.png)
### ▶ 동작화면 ![회원가입페이지](https://ifh.cc/g/Car5zQ.png) ![메일 송신 페이지](https://ifh.cc/g/LHazcZ.png) ![메일인증 페이지](https://ifh.cc/g/Mg6Tnp.png) ![인증번호 입력 페이지](https://ifh.cc/g/VhjHnW.png) ![인증완료 페이지](https://ifh.cc/g/Gafmx0.png)
5-4) 상품 상세 페이지 - Color 및 Size 선택 시 화면에 노출 - 상품 갯수 추가, 감소 시 가격 변동
### ▶ 소스코드 ? Product.java ![Product](https://ifh.cc/g/jLMkrh.png)
? ProductColor ![ProductColor](https://ifh.cc/g/DYCGkf.png)

? ProductImage ![ProductImage](https://ifh.cc/g/x2AXv3.png)

? ProductSize ![ProductSize](https://ifh.cc/g/3crcLj.png)

### ▶ 동작화면 ![상품 상세 페이지](https://ifh.cc/g/T36pnF.jpg) ![상품 상세 페이지](https://ifh.cc/g/om2lym.jpg) ![상품 상세 페이지](https://ifh.cc/g/Lz2dQF.jpg)
5-5) 상품 주문 페이지 - 회원 가입 시 입력한 정보 가져오기 - 상품 페이지에서 선택한 정보 가져오기 - 주문하기 누르면 결제완료
### ▶ 소스코드 ? ProductService ![ProductService](https://ifh.cc/g/kBysvM.png) ![ProductService 1-2](https://ifh.cc/g/rP6vbH.png) ![ProductService 1-3](https://ifh.cc/g/os4TkJ.png) ![ProductService 1-4](https://ifh.cc/g/hYvahO.png) ![ProductService 1-5](https://ifh.cc/g/XcH6Z3.png) ![ProductService 1-6](https://ifh.cc/g/lA028p.png)

? OrderSheetEntity ![OrderSheetEntity](https://ifh.cc/g/djmvAJ.png)

? OrderSheetForm ![OrderSheetForm](https://ifh.cc/g/BDh70D.png)
### ▶ 동작화면 ![상품주문 페이지](https://ifh.cc/g/MkjXy3.jpg) ![상품주문 페이지 1-2](https://ifh.cc/g/XV7KJL.png)

5-6) 결제 완료 - 카카오페이 결제 API를 이용하여 결제 - QR코드를 스캔하여 결제하기 - 결제 완료 시 회원 주문 리스트에 등록 됨 ### ▶ 소스코드 ?order.html ![order.html script 부분](https://ifh.cc/g/nKoHBt.png) ### ▶ 동작화면 ![결제QR 이미지](https://ifh.cc/g/QZavKY.png) ![QR코드 스캔 이미지](https://ifh.cc/g/haFkg2.png) ![결제완료 이미지](https://ifh.cc/g/ARR3zb.png) ![결제완료 카톡 메세지 이미지](https://ifh.cc/g/OAMSaB.jpg) ![회원 주문 리스트 이미지](https://ifh.cc/g/WW7lWj.png)
5-7) 아이디 찾기 - 입력한 곳이 없는 경우 에러메세지 출력 - 입력을 전부 한 경우 이메일을 알려줌과 동시에 로그인 페이지로 이동 ### ▶ 소스코드 ?userController ![userController](https://ifh.cc/g/YJDNLT.png)
?mailService ![mailService(1)](https://ifh.cc/g/J3ts4s.png) ![mailService(2)](https://ifh.cc/g/MwXhfj.png)
?findemailDTO ![findemailDTO](https://ifh.cc/g/PX7hFD.png) # 동작화면 ![로그인페이지](https://ifh.cc/g/nFYn0a.png) ![메인에서 로그인페이지로 이동](https://ifh.cc/g/k0ah8r.png) ![이메일 찾기에 아무것도 안넣고 확인 눌렀을 때](https://ifh.cc/g/Z3wzaJ.png) ![이메일 찾기에 아무것도 안넣고 확인 눌럿을 때 에러 메세지 출력](https://ifh.cc/g/nZR0S1.png) ![이메일 찾기에 전부 작성 후 확인 눌렀을 때](https://ifh.cc/g/WJdz3a.png) ![이상없이 동작 된 결과](https://ifh.cc/g/03Z2R7.png) 5-8) 비밀번호 찾기 - 입력한 곳이 없는 경우 에러메세지 출력 - 이메일을 입력하고 인증번호 발송을 누르면 실제 이메일로 발송 구현 - 실제 이메일로 받은 인증번호를 입력하고 확인 눌러야만 로그인 페이지로 이동
?userController ![userController](https://ifh.cc/g/O6CMy1.png)
? mailService ![mailService(1)](https://ifh.cc/g/J3ts4s.png) ![mailService(2)](https://ifh.cc/g/MwXhfj.png)
? findePwDTO ![findePwDTO](https://ifh.cc/g/Hamx4n.png) # 동작화면 ![로그인페이지](https://ifh.cc/g/nFYn0a.png) ![로그인페이지에서 비밀번호 찾기 페이지로 가기](https://ifh.cc/g/MJQbar.png) ![비밀번호 찾기 폼](https://ifh.cc/g/4nGnDp.png) ![비밀번호 찾기에 아무것도 안넣고 확인 눌렀을 때](https://ifh.cc/g/V8hARc.png) ![비밀번호 찾기에 아무것도 안넣고 확인 눌렀을 때 에러 메세지 출력](https://ifh.cc/g/NrRfkY.png) ![이메일 입력 후 인증번호 발송](https://ifh.cc/g/0dnQ0c.png) ![발송된 이메일 가서 인증번호 받기](https://ifh.cc/g/7vCZGA.png) ![인증번호 받고 확인 누르기](https://ifh.cc/g/r7FgVo.png) ![결과](https://ifh.cc/g/3lRBct.png)
## ??‍? SKIES 의류 쇼핑몰 기술서 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.