배포 사이트

프로젝트 소개

1. 프로젝트 개요

REST API를 활용하여 Vanilla JavaScript로 제작한 안경 쇼핑몰입니다.

1.1 프로젝트 멤버

박희수<조장>	김선미	송지윤	장현준	박현준

박희수	김선미	송지윤	장현준	박현준
라우터 연결 로그인 및 회원가입 페이지 검색 및 태그에 따른 상품페이지	장바구니 페이지 위시리스트 마이페이지 계좌관리 페이지	메인페이지 관리자 페이지 전반적인 디자인 관리	제품 상세페이지 결제 페이지 결제 완료 페이지 관리자 유저 목록 페이지 관리자 대시보드 페이지 404(NotFound)페이지 카카오톡 공유하기	정보 변경 페이지 구매목록 페이지

1.2 프로젝트 실행 방법

1. $ git clone https://github.com/TwoCircle-Team5/TwoCircle.git
2. $ cd TwoCircle-Team5
3. $ npm i
4. root경로에 .env 파일 생성 후, api관련 정보(API_KEY, ADMIN) 입력
5. $ npm run dev

관리자 .env

ADMIN = admin@naver.com

테스트 계정

사용자

ID : test@naver.com
PW : abcd1234

관리자

ID : admin@naver.com
PW : abcd1234

1.3 프로젝트 문서

wiki

1.4 프로젝트 링크

TwoCircle

1.5 작업 기간

2023.01.30 ~ 2023.03.10

2. 프로젝트 스택

Basic: HTML SCSS JAVASCRIPT
Library: Swiper Navigo chart.js
Deploy: Netlify
Bundler: Parcel 1

3. 프로젝트 구조

3.1 폴더 구조

TwoCircle
├─ image
├─ index.html
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ pages
│  ├─ admin
│  ├─ admin_wrap.js
│  ├─ header.js
│  ├─ notfound
│  └─ user
├─ README.md
├─ scss
├─ source
│  ├─ api
│  │  ├─ account
│  │  ├─ certified
│  │  ├─ products
│  │  │  ├─ admin
│  │  │  ├─ common
│  │  │  └─ user
│  │  └─ requests.js
│  └─ js
│     ├─ 404page.js
│     ├─ account.js
│     ├─ admin
│     │  ├─ admin.js
│     │  ├─ admin_dashboard.js
│     │  ├─ admin_products_data.js
│     │  ├─ product.js
│     │  ├─ product_add.js
│     │  ├─ product_list.js
│     │  ├─ product_update.js
│     │  └─ user_list.js
│     ├─ bankImage.js
│     ├─ cart.js
│     ├─ event_badge.js
│     ├─ header.js
│     ├─ loading.js
│     ├─ login.js
│     ├─ main.js
│     ├─ order_completed.js
│     ├─ pagination.js
│     ├─ payment.js
│     ├─ product_details.js
│     ├─ product_list.js
│     ├─ purchase_history.js
│     ├─ pw_check.js
│     ├─ signup.js
│     ├─ user_info.js
│     └─ wish_list.js
└─ static

3.2 아키텍쳐

3.3 Figma

Figma

4. 프로젝트 기능

로그인, 회원가입, 비밀번호 확인
메인페이지에서 상품을 확인
라이트모드, 다크모드 지원
원하는 상품 장바구니에 담기 및 구매하기
장바구니 페이지에서 담은 물건 구매 및 삭제
결제페이지에서 가상의 화폐를 이용하여 결제 및 주문 정보 확인
마이페이지에서 쇼핑정보, 회원정보 수정, 계좌등록 및 삭제, 찜 목록 확인
상품에 대해 카카오톡 공유하기
상품 찜하기
검색 및 필터를 통해 검색
관리자 페이지 지원
- 상품리스트 추가 및 삭제
- 상품 정보 수정
- 회원 목록 확인
- 대시보드로 상품 수량 현황 차트로 확인, 상품 판매 현황(구매 및 환불) 확인, 요약 정보(판매 갯수 상품, 총 판매 매출, 회원 수) 확인