▶클릭 시 해당 특징 설명을 보실 수 있습니다.
-
회원가입
자체 회원가입 & 소셜 로그인 (OAuth2.0)
- OAuth2.0 소셜 회원가입 및 로그인 (네이버, 구글, 카카오 연동)
회원 가입 시 타입 구분
- 중첩 라우팅을 종한 회원타입 구분
- 일반회원(구매만 가능), 판매회원(판매만 가능) 구분
-
결제/등록
상품 결제 (i'm port)
- 아임포트(i'm port) API 연동 결제 기능 구현
- 카드 결제 진행 가능 (데스크탑 한정)
- 결제 진행 시 실제 금액은 빠져나가지 않음
상품 등록 (Toast UI)
- Toast UI editor를 활용한 상품 등록 기능
- Markdown 방식으로 상품 설명 텍스트 꾸미기 가능
-
리스트/배너
무한스크롤
- 메인 페이지 상품 리스트 무한 스크롤 구현
검색 및 인기 검색어
- 최상단 네브바에서 상품명 및 설명으로 검색
- 요청 횟수 TOP5 해당 키워드 '실시간 인기검색어'로 제공
캐러샐 배너(react-slick)
- reack-slick 라이브러리를 활용한 캐러샐 배너 구현
- 배너 클릭 시 해당 상품 또는 목록 페이지로 이동
찜하기 및 리뷰(별점, 상품평, 이미지)
- 상품 찜하기 기능 구현(마이페이지 이동 시 찜하기 목록 확인 가능)
- 상품 구매 고객 대상 상품평 별점 및 텍스트 작성 기능
-
알림
실시간 알림 (socket.IO)
- Socket.IO를 활용한 구매 및 배송 정보 실시간 알림
푸쉬 알림 (Web Notification)
- Web Notification API 활용한 푸쉬 알림
주문/결제 메일 발송 (Node mailer)
- Node mailer를 활용한 메일 발송 (주문/결제정보 안내)
-
반응형 웹/크롤링
반응형 웹
- 기준
1) 모바일 (가로 767px 이하)
2) 타블렛 (가로 768px 이상 1199px 이하)
3) 데스크탑 (가로 1200px 이상)
- 시연 GIF
데이터 크롤링(puppeteer)
- summarycheerio와 puppeteer를 사용한 상품 데이터 크롤링
-
전역 상태 관리 및 환경 변수 관리
전역 상태 관리 (Redux Toolkit)
- redux toolkit을 이용한 전역 상태 관리 (로그인 여부, 회원 정보 등)
- Redux toolkit 코드 바로가기
환경 변수 관리 (.env / config)
- .env : 인증 관련 정보 (gitignore에 포함)
- .env : API url 목록 (gitignore에 미포함)
-
기타
화면 기획 (Pigma)
API 문서 (Swagger)
- 자신의 경쟁력 있는 상품과 서비스로 수익을 창출하고 싶으신가요?
- 저희 comong 오픈마켓에 상품을 올리고 수익을 창출해 보세요.
- 웹 오픈마켓 서비스 'COMONG'
상품 목록
메인 배너 (자동 슬라이드)
상품 목록 (무한스크롤)
상품 목록 (카테고리별 필터)
검색
상품 검색
인기검색어
상품별 상세 페이지
상품 사진
상품 설명
상품평
장바구니
장바구니 담기
장바구니 상품 개수 조절
장바구니 상품 삭제
결제
결제 선택(장바구니)
결제 선택 (상품 페이지)
결제 주소 입력
결제 진행
결제 카드 선택
결제 완료
이메일 회원가입, 로그인, 로그아웃
회원가입 - 일반회원
회원가입 - 판매회원
로그인
로그아웃
Oauth 회원가입, 로그인
네이버 - 회원가입
네이버 - 로그인
카카오 - 회원가입
카카오 - 로그인
구글 - 회원가입
구글 - 로그인
회원 정보 수정, 탈퇴
회원 정보 수정
회원 정보 수정 (프로필 사진 변경)
회원 탈퇴
마이페이지 초기 화면
일반 회원
판매 회원
주문 내역
주문 내역 조회 (상품 상태에 따라)
주문 내역 조회 (상품 상태 + 기간에 따라)
후기
후기 쓰기
후기 쓰기 (사진 첨부)
후기 삭제
찜하기
찜하기 등록
찜하기 해제
알림
알림 - 배송 준비 중
알림 - 배송 시작
알림 읽은 경우 (색 구분, 숫자 변경)
알림 삭제
.png){kind=spacer}