Webiting

:leaves: 친환경 가구 쇼핑몰 ECOFUN

프로젝트 소개

• ECOFUN은 eco funiture heaven의 줄임말로, 친환경 가구 쇼핑몰 프로젝트입니다.
• 쇼핑몰의 기본적인 CRUD 기능을 갖추고 있습니다.
• 쇼핑몰을 회원과 관리자의 입장에서 기능을 나눠 구현했습니다.
• 기존 쇼핑몰의 기능들을 최대한 구현해보고자 하였고 naver aitems를 통한 개인화추천, 인기상품추천 기능과 결제,마이페이지 등의 기능을 구현했습니다.

팀원 구성

| **구민수** | **김진엽** | **손예진** | | :------: | :------: | :------: | | [
@MinSu](https://github.com/KuMinSoo) | [
@JinYeop](https://github.com/Airvnas) |[
@YeJin](https://github.com/yejin0990) |

1. 개발 환경

• MainLanguage :
• IDE : STS 3.X
• Framework : Spring
• Front : HTML, BootStrap
• Database : oracle DB(11xe)
• WAS : TOMCAT 8.0
• 버전 및 이슈관리 : Github, Source Tree
• 협업 툴 : Discord, Notion
  

2. 채택한 개발 기술과 브랜치 전략

Spring MVC

• Spring MVC Model 2
  • Controller, View, Model로 나누면 Business Logic 과 View가 분리되기 때문에 코드가 간결해진다.
  • DispatcherServlet로 들어온 요청을 해당하는 Controller로 보내 작업을 처리하기 때문에 분업이 용이하다.
  • 이러한 특징을 이용해 분업을 하기 때문에 유지,보수가 용이하다.

브랜치 전략

• main, 개인브랜치로 나누어 개인별 커밋 후 main에서 통합했습니다.
• 이후, 통합된 버전의 프로젝트를 pull 받아 동일한 환경의 프로젝트로 작업을 진행했습니다.
• 이를 경험해봄으로써 다음 프로젝트부터는 Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용할 예정입니다.

3. 역할 분담

👻구민수

• UI
  • 회원게시판 CRUD 관련 페이지, 관리자게시판 CRUD 관련 페이지, 주문목록 페이지
  • 취소관리 페이지, 배송현황 페이지, 관리자/마이페이지 네비게이션
• 기능
  • 게시판 (등록/삭제/수정/답글/파일업로드/비밀번호설정), 게시판 글등록시 유효성 검사, 게시판 검색기능, 페이지사이즈별 보기 및 페이징처리
  • 아임포트 결제 API 구현(1차/2차 ), 주문목록 조건 검색(배송상태, 주문상태, 기간설정, 키워트 검색), 배송상태 변경, 취소상태 변경

😎김진엽

• UI
  • 회원가입, 로그인, 메인페이지, 상품 정렬, 상품 상세페이지, 폐가구 수거 신청,목록 페이지
• 기능
  • 회원관리(CRUD), 리뷰 CRUD, 폐가구 수거 CRD
  • 상품 CRUD, 카테고리별 상품(출력,검색,정렬,페이징 처리) ,상품 좋아요 기능,Naver AITEMS를 통한 개인화,인기 상품 추천

🍊 손예진

• UI
  • 마이페이지 : 장바구니, 관심 상품 목록, 결제, 주문 내역 조회, 연매출 통계 페이지
  • 관리자 페이지 : 회원 조회/수정, 매출 통계 페이지
• 기능
  • 장바구니/관심 상품 등록 시 중복 방지, 테이블에 저장된 데이터 출력, 페이징 처리
  • 구글차트를 이용해 데이터 시각화, 회원 데이터 수정,삭제 처리

4. 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2022-12-19 ~ 2023-01-25
• WBS

작업 관리

• 각자 맡은 파트를 Notion TeamSpace에 예정,진행중,완료로 나누어 팀원 모두 확인할 수 있게 했습니다.
• 주간회의를 진행하며 코드를 병합하고 작업 순서와 방향성에 대한 고민을 나누고 Notion에 회의 내용을 기록했습니다.
• 강사님, 멘토님의 피드백 내용을 적극 반영했습니다.

5. 페이지별 기능

회원기준

[회원가입]

• 회원가입 페이지에 있는 내용을 모두 입력하고, 정규식에 위배되지 않는 조건의 내용일 때 회원가입이 가능하도록 유효성을 체크했습니다.
• 카카오로그인을 이용하기 위해서 이메일을 입력받았고, 카카오API를 통해 받아온 이메일과 비교해 일치할 경우 로그인이 완료되도록 구현했습니다.
• 정보이용 동의에 동의를 해야 회원가입이 가능합니다.

회원가입

[로그인]

• 회원가입을 통한 정보에 일치하고, 카카오로그인 조건에 일치할 때 로그인이 가능합니다.

로그인

[카테고리 선택/ 정렬]

• 상단의 카테고리 메뉴를 선택해 원하는 상품들의 목록을 확인할 수 있고, 최신순,가격순 정렬을 할 수 있습니다.

카테고리 선택

[검색]

• 상품명과 태그검색어를 통해 검색 할 수 있습니다.

검색

[상품 상세페이지]

• 상세페이지에서는 좋아요 버튼을 누를 수 있으며, 좋아요 버튼을 누르면 해당 상품이 관심상품목록에 추가되도록 구현했습니다.
• 개수를 선택하면 그에 따른 가격을 출력해주고, 장바구니, 주문하기 버튼을 통해 해당 페이지로 이동할 수 있습니다.

상품 상세페이지

[리뷰]

• 상품 이미지, 리뷰 내용, 상품 평가점수를 입력할 수 있고, 수정, 삭제가 가능합니다.

리뷰

[마이페이지 - 관심 상품 목록]

• 제품 상세페이지에서 좋아요 버튼을 누르면 회원의 관심목록에 제품이 저장됩니다.
• 체크박스를 이용해서 삭제하거나 장바구니로 이동할 수 있습니다.

관심 상품 목록

[장바구니]

• 구매 예정인 물품을 장바구니로 옮길 수 있습니다.

장바구니

[결제하기]

• 결제는 아임포트 API로 설정했으며, 아임포트에서 요구하는 필수정보와 선택정보를 담아 Javascript에서 1차 전송할 수 있도록 했습니다.
• 이후 아임포트의 결제번호를 이용해 JAVA 컨트롤러에서 2차 전송하며, 1차/ 2차 검증을 통해 총 결제금액이 참일 경우 DB에 저장할 수 있도록 구성했습니다.

결제하기

[주문, 취소 내역 확인]

• 로그인한 회원의 주문 내역을 리스트에 저장해서 보여줍니다.

주문 내역

• 상세 주문 내역보기를 누르면 주문번호와 매핑되는 정보를 출력해서 보여줍니다.

상세 주문 내역보기

• 주문 취소/환불하기를 누르면 환불사유를 선택해 취소 신청을 할 수 있습니다.

주문 취소/환불하기

• 취소한 내역들은 취소/환불 내역에서 확인할 수 있습니다.

취소, 환불 내역

[회원정보 수정]

• 회원의 정보가 출력되며, 정보 수정 후 수정하기 버튼을 누르면 회원의 정보가 수정됩니다.

회원정보 수정

[폐가구 수거 신청]

• 시청/구청으로의 신청은 구현되지 않았지만, 쇼핑몰의 확장성을 위해 폐가구의 종류, 사이즈를 입력받아 정보를 저장할 수 있습니다.

폐가구 수거 신청

[폐가구 수거 신청 목록]

• 신청한 목록을 확인할 수 있고, 삭제할 수 있습니다.

폐가구 수거 신청 목록

[연도별 구매내역-마이페이지]

• 구글 차트를 이용해 회원별로 연도별 구매내역을 확인할 수 있게 하였습니다.

연도별 구매내역

[고객게시판 홈화면]

• 고객게시판에서는 ‘자주 묻는 질문’을 카테고리별로 나눴고 해당 버튼을 클릭하면 질문에 대한 답을 볼 수 있도록 처리했습니다.
• 만약 다른 카테고리로 이동을 하게 되면 전에 열렸던 질문에 대한 답들은 ‘자동 숨김’ 처리됩니다.
• 게시판 등록 또는 리스트로 바로 갈 수 있는 버튼을 만들었습니다

고객게시판 홈화면

[고객문의 글등록]

• 문의유형별 선택하여 글을 등록할 수 있으며 이름, 제목, 비밀번호, 공개 체크 여부 중 하나라도 작성하지 않으면 글 등록이 되지 않도록 처리했습니다.
• 파일은 고객이 원하면 업로드해서 등록할 수 있도록 했습니다.
• 비밀번호는 글을 삭제하거나 수정하거나 비밀글 설정할때 해당 비밀번호를 입력해야 볼 수 있도록 하는 역할을 합니다.

고객문의 글등록

[게시글 편집하기 / 삭제하기]

• 해당 글 비밀번호를 입력해야 글을 수정할 수 있고 글 등록과 마찬가지로 이름, 제목 등 입력해야 글을 작성할 수 있도록 했습니다.
• 제목 또는 이름을 빈 공백 또는 스페이스바로 공백 처리하여 입력할 경우 글 등록할 수 없게 처리했습니다.
• 기타 파일 변경, 비밀번호, 공개 글 여부 또한 변경 가능합니다.
• 삭제하기는 해당 비밀번호를 입력하고 일치하면 삭제가능합니다.

게시글 편집하기 / 삭제하기

[게시글 목록]

• 페이지 사이즈별로 [5, 10, 15, 20] 개씩 볼 수 있으며, 만약 검색어를 입력하고 사이즈를 변경할 경우 해당 검색어에 반영하여 페이지 사이즈가 달라집니다.
• 페이지 사이즈 기준으로 페이징 처리했으며 페이지 블록 개수가 5개를 초과하면 [Next] 페이지 버튼이 생기며, 누르면 현 페이지 블록의 마지막 페이지 기준에서 다음 페이지로 넘어갈 수 있도록 처리했습니다.
• 고객이 게시글을 등록하면 관리자 공지사항보다 아래 순번으로 들어갈 수 있도록 했습니다.

게시글 목록

관리자 기준

좌측의 관리자 메뉴를 통해 원하는 작업을 선택할 수 있습니다.

1. 유저 정보 검색,수정

• 유저들의 정보를 조회, 수정할 수 있도록 하였습니다.

유저 정보 검색, 수정

2. 상품 등록

• 상품 이미지, 상품명, 가격 등 상품의 정보를 입력합니다.

상품 등록

3. 상품 수정 및 삭제

• 계정이 관리자 계정이라면 상품 목록에 수정|삭제 버튼이 활성화되며, 수정 클릭시 수정폼으로 이동하고, 삭제 클릭시 해당 상품이 삭제됩니다.

상품 수정 & 삭제

4.매출 통계-관리자 페이지

• 구글차트를 이용해서 테이블에 저장된 데이터들을 출력해보았습니다.

회원 성별, 나이대 비율

제일 많이 팔린 가구 Best 10

연도별 공급가, 판매가, 순이익 확인

설정한 연도의 월별 총매출액 확인

5. 주문목록

• 주문목록 페이지에서는 주문한 결제에 대한 정보를 볼 수 있으며 배송상태, 주문 상태, 기간 설정, 검색유형에 맞는 키워드에 조건을 맞춰 조회 가능합니다.
• 좀 더 자세히 설명하자면 배송상태와 주문상태는 필수적으로 체크를 해야 되며, 기간 설정 및 키워드 검색은 선택사항임. 만약 구체적인 상세기간을 설정하고 싶으면 해당 버튼을 클릭하고 설정하면 됩니다.
• 조회한 이후에도 관리자가 클릭한 조건들을 정보를 기억하고 다시 체크해서 보여줍니다.
• 상품명을 클릭하면 제품 상세페이지로 넘어가고 고객 아이디를 클릭하면 해당 고객의 기본정보 페이지가 나옴. 그리고 페이지 사이즈별로 선택해서 주문목록을 볼 수 있으며 페이지 사이즈 기준으로 페이지 처리합니다.

주문목록

6. 배송관리

• 배송관리도 주문목록과 같이 조건을 걸어 표현할 수 있음. 배송처리 필드에 있는 배송버튼을 누르면 배송상태가 변경됩니다.
• 예를 들면, [배송대기] -> 클릭 ->[배송중] -> 클릭 -> [배송완료] 순으로 변경됩니다
• 배송상태에서 ‘배송대기’나 ‘배송중’ 조건을 걸고 조회를 하면 전체선택 또는 원하는 주문 건수를 선택하는 체크박스가 나오며 해당 버튼을 눌러 일괄적으로 배송처리를 할 수 있습니다.

배송관리

7. 취소관리

• 취소관리에서는 고객이 취소 신청한 목록과 고객의 취소신청이 없는 물품 또한 관리자 권한으로 취소를 할 수 있도록 구성하고 취소신청은 버튼 또는 체크박스를 통해 일관적으로 할 수 있습니다.
• 고객의 취소신청이 없는 상태에서 취소처리를 하려면 주문상태의 ‘주문완료’ 조건을 체크하고 조회를 한 후 취소상태 아래에 있는 ‘주문완료’ 버튼 또는 체크박스를 통해 원하는 상품을 일괄적으로 취소할 수 있습니다.
• 고객이 취소 신청한 물품을 처리하고 싶으면 ‘취소/환불대기’ 조건을 체크하고 조회를 함. 그 이후 취소 사유를 클릭해서 해당 사유를 확인도 가능하며, 해당 상품을 버튼 또는 체크박스를 통해 일괄적으로 취소 처리할 수 있습니다.

취소관리

8. 관리자 게시판 / 공지사항

• 관리자 게시판에서는 공지사항 작성, 고객문의 답변, 삭제가 가능함. 먼저, 공지사항 작성시 관리자 글을 우선순위가 높아 고객이 등록한 글보다 상단에 위치시킵니다.
• 관리자는 비밀글 설정한 고객의 글 전부를 공개처리로 전환되어 볼 수 있습니다.
• 그 외 다른 기능(검색기능, 페이지사이즈별 목록 처리, 페이징처리 등)들은 일반게시판과 동일하게 기능할 수 있도록 처리했습니다.

관리자 게시판 / 공지사항

9. 관리자 게시판 답글

• 고객이 등록한 문의 글에 답변 가능함. 만약 답변시 해당 글이 비공개일 경우 자동으로 비공개로 답변 처리되며, 해당 답변 글의 비밀번호는 고객이 문의한 작성글에 입력한 비밀번호와 동일하게 설정했습니다.
• 이에 본인이 글 작성시 입력한 비밀번호와 일치해야 해당 답변글을 볼 수 있도록 했습니다

관리자 게시판 / 공지사항

6. 프로젝트 평가

• 가구 쇼핑몰의 기본기능과 더불어 사용자 구매 이력이나 클릭한 상품이력 데이터 머신러닝을 활용한 개인화 추천 시스템, 인기추천 시스템을 구현한 것이 돋보임. 개별화 추천 시스템을 좀 더 시각적으로 차별성있게 달라지는 부분을 보여줬으면 더 좋았을 것. 관리자 페이지의 관리 기능도 완성도 있게 구현함
• Aitems 활용하여 다양한 상품추천이 구현되었으나 실질적으로 정확한 데이터인지 판별할 ref가 없음 폐가구 수거 기능 처럼 기존의 쇼핑몰 과는 차별성을 두려는 시도가 보였음
• 전반적으로 구현이 완벽하게 이루어졌으며, 특히 결제API를 활용하여 결제 정보를 구현하고, 네이버 AITEMS를 이용하여 개인별 추천 기능을 구현한 점에서 높은 평가를 함
• 폐가구 기능 추가는 참신한 아이디어로 보임. 사용자에게 보여주는 정보는 그 활용도를 충분히 고려하여 결정하면 좋을 것 같음. (개인별 구매이력은 의미가 없어 보임)

7. 프로젝트 소감

👻 구민수

프로젝트를 마무리하면서 백엔드 관련 코딩하기 전에 먼저 선행되어야 할 작업이 있다는 것을 깨달았습니다. 선행되어야 하는 작업 첫 번째로는 프로그램 UI의 전체적인 틀을 먼저 구성하는 것과 두 번째 해당 프로젝트의 시나리오를 미리 만들어 보는 것, 세 번째는 이에 필요한 DB 구조와 테이블을 구성하는 것입니다. 그리고 이 모든 것이 잘 구성되어야 코딩을 할 때 좀 더 편하게 할 수 있고 모든 팀원이 해당 프로젝트에 대해 더 잘 이해할 수 있다는 것을 알게 되었습니다. 하지만 프로젝트를 처음 만드는 과정이기에 부딪치면서 이것저것 하면서 배울 수 밖에 없었지만 다음에 또 프로젝트를 진행한다면 전체적인 틀과 구성에 대해 미리 점검하고 치밀하게 고민 필요가 있다는 것을 느꼈습니다. 그리고 무엇보다 같이 소통하면서 각자의 업무를 충실하게 진행한 팀원들이 있었기에 기한 안에 표현하고자 한 필수적인 기능을 모두 표현할 수 있었습니다.

😎 김진엽

혼자하는 코딩 작업은 익숙했지만 팀 단위로 진행되는 프로젝트는 처음 경험해봤습니다.이 과정을 통해서 코드작성은 필수이고 협동을 위해 사용하는 여러가지 Tool을 사용하고, 맡은 파트에 대해 팀원들에게 설명하는것 등 개발자는 자기 혼자 잘하는 것보다 팀원과의 의사소통, 협동심이 중요하다는 것을 깨달았습니다. 수업에서 배운 내용을 모두 프로젝트 내에서 반영하고 기성 쇼핑몰들의 기능을 모두 구현해보고자 하였고, 프로젝트를 통해서 기본기를 탄탄하게 만들어보자는 의견을 팀원들 모두 받아들여 기본에 충실한 결과물을 얻을 수 있었습니다. 프로젝트를 끝까지 함께 진행한 팀원들에게 감사합니다! 처음 팀장의 역할을 맡았기 때문에 프로젝트를 잘 마무리해야한다는 생각이 커 처음부터 급하게 진행하려 했었습니다. 그래서 처음 설계단계에서 꼼꼼하게 체크하지 못한 UI설계가 아쉽게 느껴집니다. 설계 단계에서의 체크하지 못한 점들을 해결하고자 시간을 들여 마무리 단계에서 진행을 했고, 이것을 처음부터 잘 설계했다면 더욱 완성도 높은 UI를 구현할 수 있었을 것이라 생각합니다. 이 점을 잊지않고, 다음 프로젝트에서는 초반 단계의 설계를 더욱 꼼꼼하게 임해야겠습니다.

🍊 손예진

이번 프로젝트로 제가 할 수 있는 것과 아직은 더 배워야하는 곳을 알 수 있었고 또 프로젝트를 진행할 때 어떻게 진행하면 좋을지 알게됐습니다. 정말 큰 배움을 얻고 갑니다. 초기 세팅 부족이나 기능 구현을 좀 더 완벽하게 하지않은 아쉬움이 있지만 그래도 계획했던 큰 기능들은 다 구현하고 마주한 이슈들을 해결해서 이번 프로젝트를 마친 것이 뿌듯합니다. 앞으로도 계속 전문성을 기르고 멋진 개발자가 되고 싶습니다. 웹이팅 팀원분들 고생하셨습니다!