해당 프로젝트는 기본적인 쇼핑몰 기능에 open ai 챗봇 기능과 결제 모듈 등 기능을 추가한 프로젝트입니다.
https://anyshop-three.vercel.app/
Next.js, Tailwinds.css, Tanstack-query, react-hook-form, axios, next-ui, zustand, typescript, open ai chat gpt api
상단 헤더
배너 이미지 캐러셀
인기 상품 목록
전체 상품 라우팅 버튼
푸터
챗봇 버튼
open ai의 api에게 쇼핑몰 상품 데이터를 json 파일 형식으로 전달하여 기존 채팅 ai 기능에 추가적으로 쇼핑몰 상품 데이터에 관련한 질문/답변이 가능합니다.
관리자가 생성한 상품들을 무한스크롤 기능으로 조회할 수 있습니다. 상단엔 제품 카테고리들이 있습니다.
각 제품카드에는 제품이름, 제품가격, 좋아요/상품평 갯수 및 좋아요 여부등을 조회할 수 있습니다.
상단엔 제품 썸네일 여러 장과 제품 풀네임, 가격, 수량버튼, 구매버튼, 장바구니 추가 버튼, 좋아요 버튼이 있습니다.
기본적으로 상세 정보 탭이 노출되며, 리뷰탭으로 이동할 수 있는 UI가 있습니다.
제품 상세 정보 탭에서는 상세 이미지를 접었다 펼칠 수 있는 버튼과 제품 등록일, 상세 이미지가 존재합니다.
상품에 대한 리뷰 갯수, 정렬 select UI, 개별 리뷰가 있습니다.
개별 리뷰 카드에는 닉네임, 작성일, 별점, 제목, 이미지, 내용, 추천등이 있습니다.
제품 썸네일, 이름
상품평 제목
상품평 본문
상품평 이미지 추가 버튼
상품평 별점
등록버튼
먼저 장바구니에 상품이 없을 때 화면입니다.
좋아요한 상품 보기 버튼
추천 상품
전체 상품 이동 버튼이 있습니다.
장바구니에 상품이 있다면 총 장바구니 상품 갯수
전체 선택 및 개별 선택 option버튼
선택 삭제 버튼
장바구니 개별 상품 카드
개별 카드에는 상품명, 상품 가격, 갯수, 상품 총 가격, 장바구니 삭제 버튼이 있습니다.
장바구니 페이지에서 제품 선택을 한 후 구매하기 버튼을 누르면 주문서 페이지로 이동됩니다.
배송지 선택 버튼
선택된 상품 카드
결제 금액
마이페이지에는 본인 프로필 정보
프로필 이미지 변경
닉네임 변경
주문내역 조회
비밀번호 변경
배송지 관리
리뷰 관리
회원탈퇴가 있습니다.
일을 기준으로 주문 내역이 나누어져 조회됩니다.
주문 시간, 주문 제품, 각 제품 가격, 총 가격이 표시됩니다.
내가 쓴 리뷰들이 제품을 기준으로 조회되고, 수정 삭제를 할 수 있습니다.
사용자의 이메일과 비밀번호를 입력하고 탈퇴버튼을 눌러 계정 탈퇴를 진행합니다.
관리자 페이지는 관리자 계정만으로만 접속할 수 있습니다.
게시글 등록: 실제 상품 등록할 수 있습니다.
상품 목록: 게시글에 등록되기전 준비되어 있는 상품들의 목록입니다.
상품 등록: 게시글에 등록되기 전 상품을 등록합니다.
카테고리 관리: 상품의 카테고리를 미리 생성할 수 있습니다.
게시글 제목
상품 선택
카테고리 선택
상세 이미지 추가
등록
게시글에 등록되기 전 상품들의 목록입니다.
무한스크롤로 조회합니다.
상품명
가격
수량
헤더 이미지 추가
상품 등록
현재 등록되어 있는 카테고리가 조회되며, 추가/삭제를 할 수 있습니다.
