login.mp4

<aside> 🦾 로그인 과정

</aside>

로그인이 되어있지 않은 상태에서 메인페이지 진입 시, 헤더에 로그인 버튼이 보입니다.로그인버튼을 눌러 로그인페이지에서 유효성 검증 진행 후 로그인을 합니다. 로그인을 성공하면 해당유저의 헤더 서비스 페이지로 상태가 바뀝니다.

signup.mp4

<aside> 🦾 회원가입 과정

</aside>

헤더의 로그인 버튼을 눌러 로그인 페이지 아래 회원가입 텍스트 버튼을 누릅니다. 회원가입 시 필요한 내용을 입력하고 유효성검사를 실시하며 회원가입을 진행합니다. 회원가입이 완료되면, 다시 로그인 페이지로 렌더링 됩니다.

category.mp4

<aside> 🦾 메인페이지 에셋 출력 과정

</aside>

메인페이지에서 모든 에셋을 출력하고, 사이드바의 카테고리 메뉴 클릭 시, 해당 카테고리마다 해당되는 에셋으로 필터링이 되어 출력됩니다. 에셋마다 태깅 된 태그도 달라집니다.

cartandpayment.mp4

<aside> 🦾 장바구니 및 결제 과정

</aside>

장바구니에 담아둔 에셋들을 전체결제 또는 선택 결제가 가능합니다. 결제페이지에서 주문자의 정보를 입력하지 않으면 결제가 진행되지 않고 상세정보란에 어떤 에셋을 결제하는지 간략한 에셋 정보를 보여줍니다. 구매 완료 후 구매한 에셋의 정보와 메인페이지, 내에셋 페이지로 리랜더링 버튼을 보여줍니다.

mypage.mp4

<aside> 🦾 마이페이지: 내계정, 주문내역페이지

</aside>

헤더에 있는 아바타에 마우스 호버를 해 내계정 페이지에 들어갈 수 있습니다. 내계정페이지에서 회원가입당시 입력한 정보들을 볼 수 있고, 비밀번호 변경이 가능합니다. 주문내역에선 내가 주문했던 내역과 해당 주문 내역 클릭 시, 상세 내역을 볼 수 있습니다.