-
Team Name : Agile
-
Project Name : Esteem-up
-
Product Manager: 김준섭(F)
-
Project Manager: 이지은(B)
-
Teammates: 김희연(F), 박현아(F), 오승민(F), 오진석(B), 이소진(F)
로그인 / 회원 가입 기능 - 이소진 ✨✨✨
회원가입 기능
[FE] : ● 회원 가입시 적어야 할 사항들을 다 적은 후 필수 체크박스를 선택하지 않은 후 가입하기를 누르면 필수 선택을 선택해 달라고 합니다.
로그인 기능
[FE] : ● 로그인시 회원가입에 적었던 정보와 일치하지 않으면아이디와 비밀번호를 다시 확인해달라고 알림창이 뜹니다.
Header :
- 토큰값이 없을때는 "로그인"이라는 글씨가 나오고 토큰값이 있을때는 "로그아웃"이라는 버튼이 나옵니다. 각 버튼은 적절한 기능이 분배되어 있어 고객이 쉽게 로그인 로그아웃을 할 수 있도록 합니다.
- 토큰값이 없을때는 "회원가입"이라는 글씨가 나오고 토큰값이 있을때는 "마이페이지"라는 버튼이 나옵니다. 각 버튼은 적절한 기능이 분배되어 있어 고객이 쉽게 마이페이지, 회원가입 페이지에 접근하도록 돕습니다.
Nav :
- 스크롤의 높이에 따라 nav 바가 등장했다 사라졌다 하는 로직을 구현하여 ux적으로 고객에게 만족감을 부여합니다.
- 비디오 태그를 추가하여 동적인 화면 구현
- 상품 호버시 상품과 가격이름을 크게 만드는 ux구현
- 상품리스트 동적 배열
- 버튼 클릭시 좌우 이동하는 로직 구현
- nav 클릭시 바뀌는 상품 리스트 로직 구현
- 쿼리스트링을 이용해 하나의 컴포넌트로 여러 정보를 제공
- uselocation 을 이용해 페이지네이션 구현
- 쿼리스트링을 이용해 productlist 소팅 기능 구현
- hover 시 등장하는 모달창 구현
- 캐러샐 기능
- 컴포넌츠 교체방식으로 한공간에서 여러정보 노출
- 카테고리 모달
- 페이지네이션
- 소팅 기능
장바구니 페이지 - 오승민
기능
- 체크박스 개별선택, 전체선택, 선택삭제
- 구독제품과 일반배송 제품 구분
- 수량변경에 따른 가격변동
- 4만원 이상 구매 시 무료배송으로 변경
구독 옵션 설정 후 장바구니 담기
체크박스 전체선택 후 선택삭제
수량 변경 후 선택삭제
x 버튼으로 개별삭제
구매하기 버튼 클릭 시 결제페이지로 이동
- '주문 제품'에서 주문 제품 리스트 구현
- '주문자 정보'에서 서버와의 통신을 통해서 현재 고객정보를 받아와 노출
- '배송 정보'에서 현재 고객정보를 초기값으로 설정하고, 라디오 버튼으로 '새로운 배송지' 입력 가능, '요청사항'을 select로 구현하여 선택가능
- 휴대폰 번호 입력시 '000-0000-0000' 꼴을 사용하기 위해 숫자만 입력했을때, 자동으로 해당 꼴로 변환
- 구독상품 구매시 '정기배송 시작일' 설정가능, 초기값으로 접속일+1일로 정기구독을 신청하도록 설정
- '결제수단'에서 현재, 사용, 적립, 예상잔여 포인트를 보여주고, 약관 동의 체크박스 구현 (사용 포인트 70000점 이상시 포인트 적립)
- 입력값 미입력시(미선택시) 재요청하는 메시지 노출
- '결제정보'에서 주문제품의 가격과 배송비, 총 결제금액 노출
- 백엔드에 결제 요청하고 요청 불가시 에러페이지 노출, 성공시 주문완료페이지에서 주문번호와 결제금액 노출
-
결제페이지 레이아웃
-
배송정보 변경
-
결제하기
- 마이페이지의 메뉴바 UI 노출
- 해당 메뉴 hover시 배경색 변화 및 클릭시 해당 메뉴 컴포넌트로 변경
- 메인페이지에서 고객센터 방문시 자동으로 '고객센터' 메뉴로 설정
- 메인페이지에서 관심상품 방문시 자동으로 '관심상품' 메뉴로 설정
- 고객센터 메뉴는 로그인, 로그아웃 모든 모드에서 이용가능
- 나머지 메뉴는 로그아웃 상태에서 이용불가, 해당 메뉴 클릭시 로그인 페이지로 이동
- '주문배송 현황, 조회' 메뉴에서 해당 고객의 주문건에 따라 백엔드에서 통신하여 주문 제품 노출, 구독 상품 주문시, 구독 주기 노출
- '정기구독 관리' 메뉴에서 백엔드에서 통신하여 해당 구독 상품에 대한 구독 시작 및 주기, 가격 노출
- '관심상품' 메뉴에서 상세페이지에서 관심상품 누른 상품에 대해서 백엔드에서 통신하여 노출, 해당 상품 개별 삭제 및 장바구니 추가 가능, query string을 이용해 선택상품 삭제 가능, 백엔드에 변경된 관심상품 리스트 통신 구현
- '정보수정' 기능으로 모달창에서 현재 비밀번호 입력 후 수정가능 구현(백엔드와 해당 비밀번호 일치 기능 통신)
- '정보수정' 기능으로 비밀번호와 비밀번호 확인 유효성 검사 구현과 비밀번호 변경을 백엔드와 통신하여 구현
- '정보수정' 기능으로 휴대폰 번호, 주소 정보 수정을 백엔드와 통신하여 구현
-
마이페이지 레이아웃
-
주문배송 조회
-
정기구독 관리
-
관심상품 보기
-
관심상품 삭제 및 장바구니 추가
-
정보수정 페이지 이동
-
비밀번호 수정
-
회원정보수정(주소, 휴대폰번호)
