3dasset-ecommerce / 3d-fe Goto Github PK

이용약관

• 약관동의 체크박스를 클릭하면 체크 표시 및 활성화 되어야한다
  • 클릭하자마자 모달창이 출력되어야한다
• 약관에 동의하겠냐는 체크박스를 클릭하면 활성화 되어야한다
• 취소버튼을 클릭하면 모달창이 사라지고 회원가입화면으로 돌아가야한다
• 동의버튼을 클릭하면 모달창이 사라지고 회원가입화면으로 돌아가야한다

• 이름, 성 Input 입력
• 이메일인증
  • 이메일 인증하기 버튼을 누르면 수신함 공지 Alert을 띄운다
  • Aler의 확인 버튼을 누르면 인증코드 타이머 10분이 시작된다.
  • 이메일 수신함에 메일이 온다
  • 메일코드를 입력한다
  • 인증코드 확인 버튼을 누르면 통과여부 Aler을 띄운다
  • 비밀번호를 입력한다
• 비밀번호 확인의 Value와 일치하면 버튼이 활성화 된다.
• 변경된 비밀번호로 로그인이 된다.

• 레이아웃 컴포넌트가 보여진다
• 계정관리 페이지와 결제내역 페이지 탭바가 보여진다
• 마이페이지로 진입 시, 계졍관리 페이지가 보여진다
  • 계정관리 페이지에서는 성, 이름 인풋이 보여진다
  • 이메일 인풋은 비활성화 처리한다
  • 비밀번호 인풋이 보여진다]
  • 비밀번호 확인 인풋이 보여진다
  • 수정하기 버튼이 보여진다
• 주문내역 탭을 눌러야 주문내역 페이지가 보여진다
  • 주문 내역 타이틀과 갯수가 보여진다
  • 구매일자, 주문 번호, 구매한 에셋 갯 수, 결제금액, 상세보기가 리스트로 보여진다
  • 주문 내역은 페이지네이션 된다.

• 이용약관 동의 체크 버튼을 클릭하면 모달이 출력된다
  • 출력된 모달에서 이용약관이 보여진다
  • 이용약관은 스크롤된다
  • 이용약관에 동의하는 체크박스를 출력한다
  • 체크박스를 체크 할 수 있다.
  • 취소, 동의 버튼이 출력된다
    • 취소 버튼을 클릭 하면 모달 창은 닫힌다
    • 동의 버튼을 클릭하면 모달 창은 닫힌다

• 결제 페이지 UI

  • 주문자 정보 input
  • 결제 수단 radio
  • 상세정보 asset list 결제금액 표시

• 결제완료 UI

  • 결제가 완료되었습니다
  • 결제된 asset list table
  • 메인으로 가기, 내 에셋으로 가기 버튼

• 타이틀 및 내 에셋 개수
• 전체 에셋을 불러오기
• 드롭다운
• 최신순으로 필터링
• 다운로드필터링
• 검색
• 내에셋 리스트
  • 개별에셋 선택버튼
  • 개별에셋이 각각 선택되기
  • 개별에셋 다운로드버튼
  • 개별에셋 디테일 Drawer
  • 페이지네이션
  • 전체다운로드버튼
  • 선택다운로드버튼

• 성과 이름을 입력할 input을 생성해야한다
• 이메일 input을 생성해야한다
• 인증코드 보내기 버튼을 생성해야한다
• 인증코드입력 input을 생성해야한다
• 인증코드 확인 버튼을 생성해야한다
• 비밀번호 인풋을 생성해야한다
  • 비밀번호 인풋에는 눈모양 아이콘이 있어야한다
• 비밀번호 확인 인풋을 생성해야한다
  • 비밀번호 인풋에는 눈모양 아이콘이 있어야한다
• 이용약관 동의 체크박스를 생성해야한다
• Sign up버튼이 생성되어야한다
• 로그인하러가기 텍스트버튼을 생성해야한다

• 불러온 주문내역을 클릭 시 Dropdown형태로 주문내역 상세가 출력된다
• 출력 된 주문내역을 다시 클릭하면 출력된 Dropdown이 사라진다.

• 버튼은 input이 비어있을 때 BG색과 같은 상태여야한다
• 마우스 호버 시, 메인컬러로 색이 바뀌어야 한다
• 이메일 validation이 구현되어야한다
• 비밀번호 validation이 구현되어야한다
  • 비밀번호 란에 눈 로고 추가
• 로그인 상태 유지를 위해 리프레시 토큰을 쿠키에 저장되어야한다
• 구글 간편가입이 되어야한다 - 기업 요청 불가로 진행하지 못함 230604
  • 구글 간편가입으로 가입한 회원은 개별 회원가입이 강제 진행이 되어야한다(통합회원의 이유로)

• header

  • 로그인 전 로그인 버튼 추가
  • 로그인시 다른 버튼들 나오도록
  • 로그아웃 클릭시 cookie 삭제

• footer

  • asset 상세보기가 나올 시 footer 안보이게

• common

  • CustomInput rename CustomCheckbox

• 타이틀 및 내 에셋 개수
• 드롭다운
• 검색
• 내에셋 리스트
  • 개별에셋 선택버튼
  • 개별에셋 다운로드버튼
  • 개별에셋 디테일 Drawer
  • 페이지네이션
  • 전체다운로드버튼
  • 선택다운로드버튼

• Stars 컴포넌트 작성( 크기, 색상 props)
• WriteRating 컴포넌트 작성( 평점 쓰기)
• Rating 컴포넌트 작성(평점 표시)

• 이메일 인풋을 생성한다.
• 패스워드 인풋을 생성한다
• 로그인 상태유지 체크박스를 생성한다
• 구글로 가입하기 버튼을 생성한다
• Log in 버튼을 생성한다
• 로그인 버튼 아래 ‘회원가입’, ‘아이디/비밀번호 찾기’ 텍스트 버튼이 있어야 한다

• 로그인시 id 값 캐싱
• 다른 페이지 에서 로그인한 유저정보 가져오기

• 장바구니 개수 (헤더)
• cart list 데이터 가져오기
• check box 연결
• check 된 장바구니 개수 / 총 장바구니 개수
• 장바구니 삭제
• 장바구니 전체 삭제, 선택 삭제
• 결제 정보 연결하기
• check 된 asset 구매하러 가기
• 장바구니에 담기

• 이메일인증
  • 이메일 인증하기 버튼을 누르면 수신함 공지 Alert을 띄운다
  • Aler의 확인 버튼을 누르면 인증코드 타이머 10분이 시작된다.
  • 이메일 수신함에 메일이 온다
  • 메일코드를 입력한다
  • 인증코드 확인 버튼을 누르면 통과여부 Aler을 띄운다

• axios instance 작성
• login 시 토큰 쿠키 저장
• 로그인한 유저 정보 캐싱

• 내 장바구니에 담긴 개수와 현재 체크한 개수 표시한다
• 장바구니에 담긴 상품, 가격 및 상세 데이터 표시한다
• 결제 정보 표시한다
  • 결제 금액
  • 할인금액
  • 쿠폰? (사용안함)

• 최신순을 기준으로 기본 나열된다.
• 낮은가격을 클릭하면 낮은 가격의 에셋으로 나열된다.
• 높은가격을 클릭하면 높은 가격의 에셋으로 나열된다.

• 상위 카테고리 2개씩 불러오기 스크룰 시 다음 꺼 불러옴
• 에셋 swiper 기능
• 무한 스크롤

• 에셋 리스트 가져오기
• 페이지네이션

• 에셋 평점 출력
• 리뷰 작성
• 리뷰 리스트 출력

레이아웃 UI

• sideNav(GNB) 생성한다

  • 에셋리스트? (진행되는건가요?)
    • 개별 에셋 (메인이라고 하지 않았)
    • 패키지 에셋
  • 카테고리별
    • tast1 / tast2 별 카테고리
    • 카테고리별 개수표시

• 헤더를 생성한다

  • 검색창 생성
  • 위시리스트로 이동하는 아이콘 생성
  • 장바구니로 이동하는 아이콘 생성
  • 나의 에셋으로 이동하는 아이콘 생성
  • 마이페이지로 이동하는 아이콘 생성

카테고리 클릭시 해당 url 이동

• 테이블 헤더
• 테이블 아이템
• 아이콘
• 버튼
• 아이콘 버튼 (？)

• 내 에셋의 리스트가 불러와진다.
• 개별 에셋은 .fbx로 다운로드가 된다.
• 한 개의 에셋의 다운로드 버튼을 클릭했을 때 한 개 만 다운로드 된다.
• 여러 개 에셋을 선택 후 선택 다운로드를 눌렀을 때 클릭한 에셋 만큼 다운로드 된다.
• 전체 다운로드 버튼을 눌렀을 때 에셋 클릭과 상관없이 전체가 다운로드 된다.
• 여러 개 체크 버튼은 선택과 해제가 가능하다

• 해당 에셋 평점 보여주는 기능 구현
• 해당 에셋 리뷰 보여주는 기능 구현
• 리뷰 작성

• 결제/구매내역 API로 구매내역 리스트를 가져온다
• 가져온 구매내역을 주문번호 리스트로 랜더링한다
• 주문내역 타이틀 옆 주문내역 갯수가 보여져야한다
• 주문내역은 한 페이지 당 7개의 리스트가 보여진다.
• 년, 월, 일, dropdown을 통해 주문내역을 조회 할 수 있다.
• 가져온 주문번호를 클릭하면 주문상세내역 페이지로 넘어간다

UI

• 에셋 리스트 35개 가져와 출력(7x5)
• 페이지네이션 버튼
• 상세페이지 Drawer
• Drawer 디테일 페이지
• Drawer 리뷰 페이지
• 장바구니 아이콘
• 위시리스트 아이콘

Logic

• 에셋 아이템 클릭 시 상세페이지 Drawer 띄움
• 로그인한 유저 리뷰 작성, 추가, 삭제
• 해당 애셋에 작성한 리뷰 글, 평점, 리뷰 개수 출력
• 모든 유저 평점 평균
• 페이지네이션

• 체크로 선택한 결제 데이터 가져오기
• 결제 데이터 정보 출력하기
• input 정보
• 결제 수단 내용 api로 전송
• 카카오 페이 연결

• 해당 에셋 평점 출력
• 평점 주기 기능

• 서비스 소개 README 수정 및 완성
• 어드민 소개 README 수정 및 완성

작업분류

• 버그수정
• 신규 기능
• 리팩토링
• 기타

작업내용

• Assets Mock 데이터 json 생성
• 모든 Assets 데이터 가져오는 비동기 함수 작성

리뷰 요구사항

기타

이메일인증

UI

• 이메일을 인풋에 이메일 양식이 맞다면 인증코드 보내기 버튼이 활성화 되어야한다
• 인증코드버튼 보내기를 클릭하자마자 전송완료 버튼으로 바뀌어야한다
• 인증코드 인풋 끝엔 타이머가 보여야한다
  • 인증시간은 10분으로 한다
• 인증코드 인풋 아래 오류멘트가 보여야한다
• 전송완료 버튼은 비활성화(BG, Click disable) 처리되어야한다

Logic

• 이메일 인풋의 값은 이메일 형식에 맞아야한다
• 인증코드 보내기를 클릭 시, 인증번호 전송 API로 데이터가 POST되어야한다
• 인증코드 입력 후 인증코드 확인 버튼을 눌렀을 때
  • 틀렸다면 에러메시지가 나와야한다
  • 맞다면 에러메시지가 나오지 않아야한다

비밀번호인증코드, 페이지

• 비밀번호는 유효성 조건에 맞기 전 까지 에러메시지가 나와야한다
• 눈모양 아이콘은 클릭 할 때마다
  • 활성화 모양이 되어야한다
    • 비밀번호가 노출되어야한다
      • 비밀번호는 유효성 조건에 맞기 전 까지 에러메시지가 나와야한다
  • 비활성화 모양이 되어야한다
    • 비밀번호가 감춰저야한다

• 구조 잡기 ( 컴포넌트화 시키기 )
• UI 작업
• 기능 구현 - 장바구니기능, 삭제기능, 일괄 삭제, 일괄 장바구니 , 클릭시 페이지 이동 ..
• 테스트

layout UI

• header mypage 드롭다운
• 로그인전
• 태그
• 푸터

• debounce를 활용해 value가 입력될 때마다 코드가 한 번 실행되도록 로직 구성
• 검색어는 에셋 타이틀만 가능하다