사용한 플랫폼 : Eclipse, Oracle
>목차<
시작하며
원래는 첫 번째 프로젝트를 보안해서 프로젝트를 이어나가려 했지만 반 전체적으로 조원의 변동도 생기고,
첫번 째 프로젝트가 웹으로 만들기엔 구현하고 싶은 기능을 넣기엔 부족하다 라고 느껴 CRUD의 기능들을 전부
챙기면서도 우리만의 재밌는 특색이 담긴 기능을 구현해보자 라는 생각으로 Bootstrap을 사용하여
난잡하지 않으면서도 모던한 디자인으로 틀을 꾸미면서 각자 구현해보면 재밌을법한 기능들을
아이디어로 모아 웹사이트(DB)를 고안 해보았다.
프로젝트 명 DB는 DataBase의 DB 를 가져와 우리가 만들 테마인 해외 명품 직구 샵의 이미지에 맞게 DirectBuying 과 DiamondBlack이라는 두 개의 이름을 담고 있다.
프로젝트 명세서
- 프로젝트 진행 순서
- 개요
- 기능 별 요구 사항
- DB 설계
- 역할 분담
- 화면 설계서
- 개선 사항 과 느낀 점
1. 프로젝트 진행 순서
DB 설계와 DTO를 먼저 구성하고 팀원들에게 배포 후, 각자 회원 가입과 로그인, 게시판, 상품 등록부터 구매까지
기본적인 CRUD 기능들을 구현하고 핫딜(타임세일), 옥션(경매)같은 특색있는 기능을 구현하면서
팀원들은 구현한 기능들의 테스트를 하며 Detail의 초점을 두고 수정, 보안 한다.
2. 개요
-
프로젝트 명 : DiamondBlack
-
인원 : 4명
-
기간 : 2023.04.10 ~ 2023.04.21
-
기능 :
- 유저
- 회원 가입
- 로그인
- (자유 게시판)게시글 등록, 수정, 삭제
- 마이페이지
- 주문 내역
- 내가 쓴 글 확인
- 회원 정보 수정 및 탈퇴
- 상품 구매
- 경매 및 핫딜 등 상품 구매
- 장바구니 기능 및 결제
- 어드민
- 회원 관리
- 회원 정보 수정
- 회원 탈퇴
- 게시판 관리(자유 게시판, QnA 게시판)
- 게시글 등록, 수정, 삭제
- 상품 관리
- 상품 등록, 삭제
- 옥션, 핫딜 관리
- 옥션 및 핫딜 상품 관리
- 시간 설정 및 할인율 설정 등
- 회원 관리
- 게시판
- 자유 게시판
- CRUD기능, 조회수, 페이징 처리, 댓글, 이미지 첨부
- QnA 게시판
- CRUD기능, 조회수, 페이징 처리, 이미지 첨부
- 자유 게시판
- 상품
- 상품 등록
- 가격, 이미지, 상품 설명, 사이즈, 브랜드
- 장바구니 담기
- 상품 등록
- 장바구니
- 장바구니 담긴 상품 삭제
- 총 상품 가격 확인
- 결제
- 구매자 정보 확인
- 총 결제 금액 확인
- 결제 API를 이용하여 결제
- Contact
- 지도 API를 이용하여 회사 위치 확인
- 회사 정보 확인
- 옥션(경매)
- 어드민이 설정한 상품, 시간, 시작 가 확인
- 입찰이 끝나면 낙찰자에게 구매 권한 부여
- 핫딜(타임세일)
- 어드민이 설정한 상품 갯수, 시간, 할인율 확인
- 해당 시간 안에 할인된 임의의 상품을 구매 가능
- 유저
-
개발 언어 : Java 11, HTML, JavaScript, JSP
-
개발 환경 : Eclipse
-
데이터베이스 : Oracle
-
간단 소개 : 기본적인 기능들을 전부 가진 쇼핑몰 이지만,
몇 가지의 재미있는 기능을 추가로 구현한 해외 직구 샵이다.
3. 기능 별 요구 사항
- 회원 가입
- 유효성 검사
- 이름은 한글(자음+모음)의 조합 2글자 이상
- 아이디는 영문 대소문자와 숫자 4~12 자리의 조합으로 입력
- 아이디 중복 체크 후 사용 가능
- 아이디 중복 시 “이미 사용 중인 아이디입니다.” 메시지 출력
- 이메일 형식은 Emailid 뒤에 @ 과 ###.### 의 형식으로 입력
- 우편번호는 주소API를 이용하여 자신의 집 검색 후 자동 입력
- 비밀번호는 영문과 숫자 조합으로 입력
- 비밀번호는 sha256 알고리즘으로 암호화 되어 DataBase에 저장
- 유효성 검사
- 로그인
- 로그인을 하지 않은 경우 아래 페이지만 이용 가능
- 회원 가입 페이지
- 로그인 페이지
- 게시글 목록 조회 페이지
- 게시글 상세 보기 페이지
- 상품 페이지
- 옥션 페이지
- 핫딜 페이지
- 로그인을 하지 않고 위에 페이지를 제외한 다른 페이지를 이용하려 할 시
“로그인 후 사용 가능 합니다.” 메시지 출력 후 기능 이용 제한
- 로그인 검사
- 아이디와 비밀번호가 일치하지 않을 경우 “비밀 번호가 맞지 않습니다.” 메시지 출력
- 아이디가 존재하지 않을 경우 “존재하지 않는 아이디 입니다.” 메시지 출력
- 아이디와 비밀번호가 일치할 시 메인 페이지로 이동
- 어드민 계정으로 로그인할 시 관리자 페이지 추가
- 로그인을 하지 않은 경우 아래 페이지만 이용 가능
- 유저
- 상품 장바구니 담기
- 장바구니 상품 구매
- 구매 시 이용 약관에 동의 하지 않았거나, 결제 방식을 선택 하지 않았으면
각각의 선택 메시지 출력 - 위의 이용 약관과 결제 방식을 선택 후 구매 버튼을 눌렀다면, 결제API 모듈 실행
- 구매 시 이용 약관에 동의 하지 않았거나, 결제 방식을 선택 하지 않았으면
- 옥션 상품 입찰, 구매
- 낙찰된 최종 입찰자만 구매 가능
- 핫딜 상품 구매
- 자유 게시판 이용
- 등록, 수정, 삭제 가능(수정 과 삭제는 작성한 본인 만 가능)
- QnA 게시판 이용
- 등록, 수정, 삭제는 어드민만 가능
- 마이 페이지
- 내 정보
- 비밀번호 입력 후 수정 페이지로 이동
- 아이디와 이름을 제외한 정보들을 수정 가능
- 수정란에 NOT NULL인 비밀번호를 입력하지 않을 시
“비밀번호를 입력해주세요” 메시지 출력 - 비밀번호를 재차 확인하여 비밀번호 일치 여부 확인
- 회원 탈퇴 가능
- 주문 내역
- 자신이 구매한 주문 번호, 주문 날짜, 상태 목록 출력
- 주문 번호 클릭 시 구매한 해당 주문 번호의 상품과 가격 등의 상세 내역을 확인
- 내가 쓴 글
- 자유 게시판에 작성한 나의 글 확인 및 수정, 삭제 가능
- 내 정보
- 어드민
- 상품관리
- 브랜드 관리
- 브랜드 로고 이미지와 브랜드 명을 추가, 삭제 가능
- 상품 관리
- 브랜드, 상품 카테고리, 상품 이름, 사이즈, 가격, 성별, 이미지,
상품 설명, 재고량 등을 설정하여 추가, 삭제 가능
- 브랜드, 상품 카테고리, 상품 이름, 사이즈, 가격, 성별, 이미지,
- 브랜드 관리
- 회원 관리
- 회원 정보 수정
- 가입 일자를 제외한 모든 정보 수정 가능
- 회원 삭제
- 회원 정보 수정
- 게시판 관리
- 자유 게시판 관리
- 자유 게시판 등록, 수정, 삭제 가능
- QnA 게시판 관리
- QnA 게시판 등록, 수정, 삭제 가능
- 자유 게시판 관리
- 옥션
- 옥션 상품 등록
- 등록할 상품을 선택 후 시작가, 제한시간 설정
- 옥션 상품 등록
- 핫딜
- 핫딜 할인률과 할인할 상품 종류의 갯수, 할인 시간을 설정
- 매출 관리
- 판매한 총 매출 가격과 구매자, 주문 번호 출력
- 상품관리
- 상품
- 브랜드 로고 클릭 시 해당 브랜드의 모든 상품 리스트 출력
- 카테고리 클릭 시 해당 브랜드의 카테고리가 설정된 상품 리스트 출력
- 상품 검색 시 해당 검색어가 들어가는 상품 리스트 출력
- 검색한 상품이 존재 하지 않을 시 “검색 결과 없음” 페이지 출력
- Contact
- Kakao지도API를 활용하여 설정한 임의의 회사 위치를 지도로 확인 가능
- 회사의 상세 정보를 확인 가능
- 디자인
- Bootstrap을 이용하여 모바일과 pc에 따른 반응형 웹으로 제작
4. DB 설계
5. 역할 분담
- 정자윤
- 각자 맡은 기능에 대해 Table을 만들고 취합하여 배포 추가 수정 요청들에 대해 처리
- 장바구니 및 결제 페이지 구현
- PPT 작성
- 마이 페이지 주문 내역 구현
- 박권능
- 회원 가입 구현
- 유효성 검사 스크립트 삽입
- 패스워드 암호화 처리
- 결제API, 지도API 삽입
- 게시판의 페이징 처리
- Contact 페이지 구현
- 회원 가입 구현
- 이규동
- 게시판 구현
- 댓글API인 disqus 스크립트 삽입
- 핫딜(타임세일) 구현
- 상품(로고, 카테고리, 검색)리스트 구현
- 로그인 및 회원 탈퇴 구현
- 마이 페이지 구현
- 내가 쓴 글
- 내 정보 수정
- 팀원들의 파일 취합 후 테스트, 에러 발생 시 에러난 기능 수정
- 전체적인 UI 디자인 통합 및 수정
- 관리자 페이지의 QnA게시판 관리, 매출 관리 구현
- 전체 기능에 로그인이 필요한 기능은 스크립트 처리
- PPT 발표
- 게시판 구현
- 임종민
- 관리자 페이지 구현
- 브랜드, 상품관리
- 회원 관리
- 옥션 관리
- 자유 게시판 관리 구현
- 옥션(경매) 구현
- 관리자 페이지 구현
6. 화면 설계서
로그인을 하지 않았을 경우
로그인을 하지 않았을 경우엔 게시판 등록, 상품 구매, 장바구니등 기능들을 이용할 수 없다.
회원 가입 & 로그인
회원 가입과 로그인은 유효성 검사를 거쳐 진행된다.
회원 가입시 입력한 패스워드는 아래처럼 암호화 되어 저장된다.
어드민
회원 관리, 게시판 관리, 상품 관리, 및 옥션(경매) 상품을 등록 할 수 있다.
상품 검색
검색한 단어를 포함한 상품을 출력하며, 검색한 단어를 포함한 상품이 존재하지 않을 시
검색 결과 없음 페이지를 보여준다.
상품 구매
옥션(경매)에 낙찰되면 낙찰자는 구매버튼을 이용하여 상품을 구매 할 수 있고, 핫딜
을 통해 할인된 상품을 구매, 상품 페이지에서 장바구니에 담은 상품을 일괄적으로 구매할 수 있다.
결제는 실제로 이루어지며, 결제testAPI이기때문에 자정이되면 payback된다.
상품의 금액이 높기 때문에 테스트를 위해 결제를 취소해도 결제 완료 페이지로 넘어가게 구현했다.
게시판 이용
자유 게시판 모든유저가 열람 가능하지만 등록은 회원가입한 유저만 이용 할 수 있고,
본인이 작성한 글만 수정 및 삭제를 할 수 있다.
QnA 게시판은 모든 유저가 열람 가능하지만 등록, 수정, 삭제는 어드민만 가능 하다.
마이 페이지
본인이 구매한 상품들의 주문내역을 확인 할 수 있고, 내가 작성한 글의 목록을 볼 수 있다.
내 정보에 들어가면 내 정보를 수정 할 수 있고, 탈퇴가 가능하다.
7. 개선 사항과 느낀 점
-
개선 사항
- 로그인 부분
- 카카오톡/ 구글 API를 이용하여 로그인 가능하게 구현
- 이메일 인증 기능 구현
- 유저
- 찜하기 기능
- 장바구니에 담은 상품 수를 장바구니 뱃지에 표현
- 결제 시 결제한 금액에 따른 포인트 지급 및 포인트에 따른 회원 등급 조정
- 회원 등급에 따른 상품 할인 쿠폰 지급
- 상품
- 상품 구매 할 시 재고량의 변동을 구현
- 할인 쿠폰 구현
- 취소 및 반품 구현
- 옥션의 낙찰자가 상품 구매 후 해당 상품의 구매하기 버튼을 사라지게 구현
- 상품 페이지의 페이징 처리
- 핫딜 기능을 코드로 직접 고쳐서 반영 시키는게 아닌 어드민 페이지에서
조정 할 수 있게 구현
- 게시판의 답글 달기 및 API를 이용한 댓글이 아닌 웹페이지 자체의 댓글 기능 구현
- 로그인 부분
-
느낀 점 MCV1 패턴과 MVC2 패턴을 이용하여 CRUD 웹 페이지를 구현 해봤는데 확실히
MVC2 패턴이 팀원들과 협업 했을 때에 기능을 나누어 만들기 편했고, 취합 하는 것 또한 수월했다.이번 프로젝트를 진행 하면서 더 완벽하게 더 깔끔한 그런 웹을 작업하고 싶었지만,
현재 배운것들로는 구현하고 싶었던 다른 기능들은 AJAX나 배우지 못한 다른 기능들을 이용해야 해서 구현하지 못한게 아쉬웠다.다음 프로젝트는 Spring과 Framework를 이용하여 이번 프로젝트를 이어서 서버의 응답을 더 빠르게
코드들을 간결화 하여 기능들을 보안하고 정말 운영하고 있는 사이트로 배포할 수 있을 만큼의 퀄리티로
완벽하게 만들 예정이다.