🍶 tumbler shop

📑 목차

• 🚀 프로젝트 실행하기
• 🗓 프로젝트 제작기간
• ✨ 프로젝트 소개
• 👀 데모
  • 목업 링크
  • 주요 페이지 목업
• 🪄 기술 스택
  • 디자인 사용 소프트웨어
  • 프론트앤드 기술 스택
  • 기타 사용 툴
• 🧑‍🤝‍🧑 업무 분배
• ⚙️ 주요 기능 소개

🚀 프로젝트 실행하기

1. 리포 클론하기: git clone https://github.com/hyeonahc/tumbler-shop.git
2. 해당 디렉토리로 이동하기: cd <YOUR_PROJECT_NAME>.
3. 패키지 설치하기: npm install
4. 프로젝트 실행하기: npm run dev

🗓 프로젝트 제작기간

2022년 6월 14일 - 2022년 7월 22일 (6주)

✨ 프로젝트 소개

세상에 있는 모든 텀블러를 한눈에 보고 구매할 수 있는 텀블러 쇼핑몰

• 프로젝트 제안 배경: 텀블러를 구매시 브랜드별로 살 수 있는 쇼핑몰이 달라 한눈에 비교해 구입하기가 어렵다.
• 아이디어: 세상 모든 브랜드의 텀블러를 모아 판매하는 쇼핑몰을 만들면 어떨까?
• 타겟: 다양한 브랜드의 텀블러를 비교하고 싶은 텀블러가 필요한 모든 사람!

👀 데모

목업 링크

🔗 Behance에서 목업 보기

라이브 사이트 링크

🔗 Netlify로 배포한 라이브 사이트 보러가기

주요 페이지 목업

홈페이지	로그인

제품 상세 정보	상품 결제

마이 페이지	관리자 페이지

🧑‍🤝‍🧑 업무 분배

조현아	천희영	유은혜	김채욱
@hyeonahc	@heeyoung-c	@yueunhye	@Kimchaewook
목업 제작 제품 구매 (홈페이지 → 제품 상세 정보 → 상품 결제 → 구매내역 조회) 마이 페이지	회원가입 로그인/로그아웃 내 정보 수정	은행계좌	관리자 페이지

🪄 기술 스택

디자인 사용 소프트웨어

• 와이어프레임, 목업 제작: Adobe XD

프론트앤드 기술 스택

• 라이브러리: Vue.js
• 언어: JavaScript
• 라우터: Vue Router
• 상태관리 라이브러리: Vuex
• API 요청: Axios
• 스타일 적용: Scss
• 기타: Webpack, ESLint, Prettier, day.js

기타 사용 툴

• 이슈관리: Github Issue
• 문서화: Notion
• 커뮤니케이션: Slack, Zoom, Zepp

⚙️ 주요 기능 소개

1️⃣ 사용자

• 회원가입: 이름, 이메일, 비밀번호를 받아 사용자를 등록한다.
• 로그인/로그아웃: 이메일과 비밀번호를 입력해 사용자 정보를 불러온다.
• 내 정보 수정: 회원가입시 사용한 정보를 수정할 수 있다.

2️⃣ 은행계좌

• 은행 계좌 등록/해지: 사용자가 계좌를 등록하면 300만원이 자동으로 입금된다.
• 은행 계좌 조회: 사용자가 등록한 계좌 정보(은행명, 계좌번호, 현재금액)을 조회할 수 있다.

3️⃣ 제품

제품 관리

• 판매 제품 등록/수정/삭제: 관리자 권한을 가진 유저는 판매 제품을 등록, 수정 및 삭제 할 수 있다.
• 판매 제품 조회: 등록한 제품 정보(상품명, 상품 아이디, 가격, 재고)를 조회할 수 있다.
• 판매 내역 조회: 판매된 제품의 정보(구매자, 상품명, 주문일, 구매상태)만 따로 조회 할 수 있다.

제품 구매

1. 홈페이지에서 제품 조회 및 검색
2. 원하는 제품 클릭
3. 제품에 대한 상세 내용이 담긴(이미지, 제목, 가격, 설명글) 페이지로 이동
4. 구매하기 버튼을 클릭
5. 사용자가 등록한 계좌로 제품 구매 (등록된 계좌가 없을 경우 계좌 등록 페이지로 이동)

구매내역 조회

• 사용자가 구매한 제품의 정보를 확인하고 구매확정, 구매취소를 할 수 있다.