4차 플젝 팀 "일아쌰이마쎄 " 이커머스 프로젝트 설명

목차

 

1. 팀 "일아쌰이마쎄 "

 

2. 구현 화면

  2.1 공통 기능

  2.2 유저 기능 설명

  2.3 어드민 기능 설명

  2.4 상담기능

 

3. 소감

  3.1맘에 든 코드

 

4. 프로젝트 SA 

 

 

 

 

 

1. 팀 "일아쌰이마쎄 "

 

안녕하십니까 a반 1조 일아쌰이마쎄 입니다
이커머스 프로젝트의 저희 조 결과물을 발표하겠습니다

저희 조는 이번 프로젝트의 방향성을 개인이 운영하는 웹 쇼핑몰을 컨셉으로 잡았습니다

 

 

 저희 조 역할 분담 정보를 보여드리겠습니다

 

 

 

 

 

 

2. 기능 설명

 

2.1 공통기능

 

 

메인 페이지

 

 

  윗 이미지는 이해를 돕기 위해 화면 비율을 확대 캡쳐한 것으로 실재 화면과 다릅니다

간결하고 보편적인 스타일의 쇼핑몰 메인 페이지의 이미지 구현을 목표로 했습니다

 

  아래의 new arrival은 등록 된 상품을 최신 순으로 불러오고 있으며 페이지네이션을 사용하여

 부분적으로 상품을 가져오고 있습니다.

 

Office

 

 

 

 

  상품 속성에 office로 설정 된 상품을 불러오는 페이지 입니다

 

 

Design

 

 

 

    상품 속성에 design으로 설정 된 상품을 불러오는 페이지 입니다

 

 

 

Developer

 

    상품 속성에 developer로 설정 된 상품을 불러오는 페이지 입니다

 

 

 

Music

 

    상품 속성에 Music으로 설정 된 상품을 불러오는 페이지 입니다

 

 

 

Sports

 

 

    상품 속성에 Sports로 설정 된 상품을 불러오는 페이지 입니다

 

 

 

  몇몇 분들은 눈치 채셨을텐데

어떤 상품들은 여러 카테고리에 중복되어 들어가고 있습니다

이는 저희가 기능을 구현함에 있어 상품을 등록 시 카테고리를 boolean값으로 넣었는데

 

예시 사진

여러 카테고리로 할당이 필요할 것 같은 상품을 빼두기 위함입니다

 

 

 

 

로그인 화면

 

 

 

  로그인 화면입니다

 

엄밀히는 유저의 로그인 화면으로 이후의 유저 기능에 상세한 내용을 보여드려야 하지만

서순 상 미리 보여 드리고 있습니다

 

정보 미입력 시 메세지

 

로그인 성공 메시지

 

 

 

회원가입 화면

 

 

 

  회원가입 화면입니다

 

역시 이 또한 유저의 가입 화면으로 이후의 유저 기능에 상세한 내용을 보여드려야 하지만

서순 상 미리 보여 드리고 있습니다

 

 

 

 

또한 비밀번호는 단방향 암호화를 통하여 db에도 암호화 된 비밀번호만 남게 됩니다

 

메시지: 빈 칸이 있다면

메시지: 이메일 형식이 틀리다면

 

메시지: 가입완료

 

회원가입 절차가 완료되면 로그인 페이지로 이동하게 됩니다

 

다음은 유저 기능에 대해 로그인 후 발표하겠습니다

 

 

2.2 유저 기능 설명

 

 

유저 메인화면

  로그인 이후의 메인 페이지입니다

 

보시면 상단 헤더의 우측이 기존과 다른 걸 보실 수 있습니다

각각 로그아웃, 장바구니 마이페이지, 그리고 약간 하단에 잔여 포인트 1000000원이 있습니다

 

로그아웃은 즉각적으로 쿠키를 지우고 메인페이지로 이동합니다

 

장바구니

 

장바구니 = 위시리스트 란 입니다 

 

카테고리 란에서 상품을 눌러 들어가면 이와 같은 화면을 보시게 될텐데 

장바구니 담기를 하면 

 

장바구니에 담기게 됩니다

장바구니의 총 가격에는 바구니 속 모든 가격을 합산하여 나옵니다

 

삭제 버튼으로 목록에서 삭제가 가능하고, 주문하기를 누르면

 

 

 

모달창으로 주문정보를 입력하실 수 있습니다

 

주문을 하게 되면 포인트가 금액만큼 차감되는 걸 보실 수 있습니다

 

 

주문배송내역

 

 

이후 주문 배송내역으로 이동되어 관리 됩니다

상품의 상태는 결재완료- 배송 준비중- 배송 중- 배송완료의 4개 상태가 있습니다

 

 

 

회원정보수정

 

 

회원정보 수정란입니다

성함, 주소, 전화번호를 변경하실 수 있고

비밀번호는 현재의 비밀번호와 새로운 비밀번호, 새로운 비밀번호를 다시 입력하는 것으로 비밀번호가 변경됩니다

 

 

 

이런 식으로 회원 정보 확인을 하실 수 있게 됩니다

 

 

 

 

2. 3. 어드민 기능 설명 

관리자 로그인

 

 

 

 

관리자 로그인은 버튼이 아닌 다른 방식을 이용해 접근하게 하였습니다

관리자 테이블을 따로 구축한 만큼 관리자 계정 탈취를 통한 기능 무력화는

상대적으로 안전하지 않을까 생각학 있습니다

 

 

 

관리자 마이페이지

 

주문관리

 

로그인 성공후 관리자 마이페이지로 진입하게 됩니다

첫 화면은  주문관리 페이지 입니다

 

현재상태를 클릭함으로서 주문의 상태를 변경할 수있습니다

 

 

상품관리

 

 

 

상품 관리 페이지 입니다

 

역시 최신 상품이 상단에 오도록 되어있습니다

상품의 정보를 수정, 삭제 하실 수 있습니다

 

 

상품등록은 이런 페이지를 통해 생성하게 됩니다

 

 

이번엔 이 아이템을 종이 트리라는 이름으로 오피스 카테고리로 넣어보겠습니다

 

 

 

 

 

 

 

즉시 추가가 된 걸 보실 수 있습니다

 

이번엔 수정을 보여드리겠습니다

 

 

수정 클릭시 수정 화면으로 진입하게 됩니다

 

 

 

이번엔 붉은 종이트리를 넣어보겠습니다

 

 

바로 올라오는 걸 보실 수 있습니다

 

이번엔 붉은 종이 트리를 삭제해보겠습니다

 

메시지- 삭제

 

 

 

해당 상품이 없어진 걸 확인하실 수 있습니다

 

 

회원관리

 

 

회원관리 페이지 입니다

회원들의 성함, 연락처, 주소 를 볼 수 있고 블랙리스트 여부를 선택할 수 있는 기능이 있습니다

 

 

 

선택시

 

 

 

블랙리스트에 boolean값이 들어가는 걸 보실 수 있습니다

향후 업체 운영에 도움이 되리라 생각합니다

 

 

 

매출관리

 

 

 

매출관리 페이지입니다

앞서 말씀드린 것 처럼 상품의 상태를 배송완료로 선택시 물품이 매출로 잡히게 됩니다

 

만약 물품이 매출로 잡힌다면

 

 

유저 234 주문 배송내역

 

 

 

관리자 주문관리

 

 

배송완료 순으로 고치면

 

 

관리자 매출관리

매출로 잡히는 걸 보실 수 있습니다

 

 

 

3.상담하기

 

 

 

항상 우하단에 있던 상담하기에 대해 설명드리겠습니다

 

금번 발제 중 선택 구현사항중에 저희 조는 사이트 내 실시간 소통 상담을 선택하였습니다

소켓으로 구현하였습니다

 

 

 

 

성함을 입력하시면 해당 이름이 나오지만 입력하지 않을 시에는 익명이 됩니다

 

 

 

브라우저를 둘 사용하여 한 쪽은 관리자로 들어왔습니다

 

만약에 상담중 한명이 창을 나간다면

 

 

 

바로 표시에 뜹니다

 

이런식으로 실시간 소통이 가능합니다, 자세한 시연은 영상을 통해 확인 바랍니다

3. 소감

 

 

발표를 위해 전체적으로 돌이켜 보게 되었는데

개인적인 소감으로 처음부터 api, 와이어프레임에 전원이 매달려 이해도를 높인게

도움이 된거 같다, 거의 그대로 되었다



3.1 마음에 든 코드/기능 설명

김정민 님

 

 

기능: 장바구니의 총 금액이 내 포인트보다 클때 결제 안되는 것

 

소감: 동시성 문제에 처음 직면해서 해결했던 것이 뿌듯했다.

 

 

 

 

한정훈 님

 

1. 기능: 관리자 페이지

 

         주문관리 : 주문관리 테이블 안에 있는 각각의 현재상태를 클릭하면 셀렉트 박스로 주문상태

                           업데이트 시킬 수 있도록 구현. (DB 상태값 달라짐)

 

          회원관리 : 블랙리스트로 등록할 수 있는 체크박스를 구현 (DB 상태값 달라짐)

 

           매출관리 : 구매 확정된 리스트만 보여줌

 

 

2.마음에 드는 코드

 

 

 

사용자 로그인 시 헤더에 로그아웃/ 위시리스트/ 마이페이지 3개의 카테고리가 뜨고,

어드민으로 로그인 시 로그아웃과 마이페이지(관리자 페이지) 2개의 카테고리가 뜬다.

 

 

 

 

 

조해빈 님

 

 

1. socket 기능 구현

 

 

 

2. 

 

 

설명: 카테고리를 상품목록 테이블에 넣으면 카테고리 이름이 아닌 true, false로 출력되어 카테고리 이름이 출력되게 만듦

 

 

김형섭 님

 

 

 

 

DB에서 가져온 상품들의 데이터가 하나의 카드에 전부 들어가는 현상이 생겨서 카드 하나당 한개씩 들어가게 만듬.

 

 

 

조봉진 님

 

 

 

설명: 회원정보 수정 기능, 가장 참고 덜 받고 만든 코드라서

         이후 버그가 생겼지만 나름 복잡한 기능을 썬더 클라이언트에서 의도한 대로 나와 감격

 

 

 

4.SA

 

일아쌰이마쎄 (いらっしゃいませ) (notion.so)

일아쌰이마쎄 (いらっしゃいませ)

 

 

상세한 과정은 저희 조 SA를 통해 더욱 자세히 보실 수 있습니다