웹 기반 쇼핑몰 구현 프로젝트 - 축하해요

Web-based Custom Celebration Card Making Shopping Mall

신한 금융SW 아카데미
2024.05 ~ 2024.06
Spring / JavaScript / HTML, CSS 사용

사진을 클릭하시면 배포 페이지로 이동합니다 👏

Team🐥

하소영 (Soyeong Ha)	김민지(Minji Kim)	서현오(Heonoh Seo)	조예빈(Yebin Jo)	최민서(Minseo Choi)
@soyoungxxx	@wing-beat	@ohhyeonn	@Jyebin	@cmsxi
팀장, 기획, 프론트엔드, 백엔드	기획, 프론트엔드, 백엔드	기획, 프론트엔드, 백엔드, 웹 퍼블리싱	기획, 프론트엔드, 백엔드	기획, 프론트엔드, 백엔드, 디자인

Project 목표

• 쇼핑몰 웹 페이지 구현
  • 쇼핑몰을 웹 버전으로 개발한다.
  • Spring, 바닐라 JavaScript를 이용하여 개발한다.
• 웹 CRUD 구현
  • 데이터베이스와 연동하여 사용자 정보와 판매 내역, 생성된 카드를 관리한다.
• 인터넷 결제 서비스 구현
  • 결제 및 결제 취소, 장바구니 기능을 필수로 구현한다.
• 편리한 카드 제작 시스템 제공
  • URL 공유 기능 및 모바일에 최적화 된 축하 카드를 구현한다.
• admin 페이지로 관리자 도구를 제공한다.
• 보안 및 개인정보 보호에 초점을 맞춰 개발한다.
• 시스템 전반에 걸쳐 예외 처리를 적용한다.
• Git 브랜치 전략을 활용하여 협업한다.
• 기능별로 프론트엔드와 백엔드를 모두 구현한다.
• Amazon RDS, EC2, S3를 활용하여 실제 배포를 통해 서비스를 제공한다.
• Github Action으로 CI/CD 구축
  • 배포 자동화를 통하여 서버 운용에 용이하도록 설정한다.

주요 기능 📦

1. 사용자 인증: Javax.mail library를 활용하여 로그인 및 회원가입, 이메일 인증을 통한 사용자 인증 기능 및 탈퇴, 로그아웃 기능 구현
2. 인기카드: 메인페이지에 슬라이더를 적용시켜 실시간으로 인기카드 반영
3. 최신카드: 가장 최근에 생성된 카드를 카테고리별로 1개씩 메인 페이지에 반영
4. 카드 생성: 카드 템플릿 선택 후 이름/날짜/사진/문구/이모티콘 등 여러 항목을 유저가 원하는대로 커스텀해 카드 생성 가능. JS Confetti 라이브러리를 통한 공감 버튼 구현
5. 장바구니: 여러 카드를 생성해 장바구니에 담은 후 한 번에 결제할 수 있는 기능
6. 명예의 전당: 사용자가 공개로 설정해둔 카드를 여러 기준으로(최신순/인기순 등) 정렬해 조회할 수 있는 기능
7. 커뮤니티: 게시판에 글과 댓글을 작성할 수 있는 기능
8. 고객센터: FAQ와 1:1 문의 기능
9. 관리자 페이지: 관리자가 대시보드/주문목록/회원목록/1:1문의를 확인할 수 있는 페이지 구현
10. 결제 : iamport의 토스페이먼츠 결제 api를 활용한 카드 및 각종 페이 결제 기능
11. 보안성 : URL Manipulation 예방, XSS 공격 예방, SQL Injection 예방, 모든 페이지에 Error Page 적용

화면 구성 📺

포스터

메인 페이지

카드 제작 페이지

완성 카드 페이지 1	완성 카드 페이지 2

명예의 전당

커뮤니티

관리자 페이지

Stacks 🛠️

• 프론트엔드: HTML, CSS, JavaScript
• 백엔드: Java, JSP, Spring, EL, JSTL
• AJAX: 비동기 데이터 페칭
• 데이터베이스: MySQL, Amazon RDS
• 서버: Apache Tomcat, Amazon EC2
• 저장소: Amazon S3

Database: ERD

System Process

사용자

관리자	방문객

요구사항 명세서

사진을 클릭하시면 요구사항 명세서 문서로 이동합니다 🛵

유스케이스 다이어그램