모나미 홈페이지 클론 코딩

모나미 홈페이지 클론코딩 및 기능을 추가한 프로젝트입니다.

📚 목차

1. ✒️ 프로젝트 주제 선정
2. 💻 기술 스택
3. 🛠️ 추가 기능들
   • 로그인
   • 회원가입
   • 위시리스트
   • 장바구니
   • 결제
   • 마이페이지
4. ⏩프로젝트 실행 방법
5. 👨‍👩‍👧‍👦 팀원 소개
   
   

✒️ 프로젝트 주제 선정

50여년의 역사를 가진 대한민국 대표 문구 브랜드인 모나미는, 그 명성에 걸맞게 깔끔하고 멋진 홈페이지를 가지고 있습니다.

모나미 홈페이지는 크게 브랜드 소개와 제품 소개로 이루어져 있습니다.

홈페이지의 UI가 프론트엔드 측면에서 다양한 기능을 배워볼 수 있을거라는 판단에, 모나미 홈페이지를 클론 코딩 해보기로 결정했습니다.

하지만 프론트엔드뿐만 아니라, 백엔드와의 협업을 위해 홈페이지를 더 디벨롭 해보기로 결정했습니다.

💻 기술 스택

⭐Frond-end

⭐Back-end

🛠️ 추가 기능들

모나미 홈페이지에 어떤 기능을 추가할 수 있을까?

• 로그인

: 로그인 기능을 추가해 유저 데이터베이스에서 해당하는 유저가 있을 시 로그인에 성공하도록 했습니다. 로그인을 하고 난 후 많은 기능을 더 사용할 수 있습니다!

• 회원가입

: 회원가입 기능을 통해 사이트에 유저를 저장하고, 유저별로 다양한 상호작용이 가능하도록 했습니다.

• 위시리스트

: 기존 모나미 홈페이지에서는 제품 소개 페이지만 있고, 해당 제품을 따로 저장(위시리스트 기능)하려면 네이버 스토어로 이동했어야만 했습니다. 이 부분을 해결하기 위해 위시 리스트 기능을 추가했습니다.

• 장바구니

: 기존 홈페이지에서 직접 상품을 구매하는 것이 불가능했기 때문에, 제품 페이지에서 바로 구매로 이어지도록 장바구니 기능을 추가했습니다!

• 결제

: 결제창을 구현해 결제가 이루어지도록 했습니다. 결제 방법은 카카오페이로만 진행되고 개발자 버전이기 때문에 실제 결제는 이루어지지 않습니다. 주소 입력 후 결제 진행 시 QR코드를 이용한 결제창과 임시 결제, 결제 확인 문자가 발송됩니다.

1. 주문 결제 페이지

2. 결제 QR코드 입력 후 모바일 화면

결제 QR코드 입력 시 최초 화면	테스트 결제 창	결제 확인 메세지

3. 결제 완료 시 페이지

• 마이페이지

: 왼쪽 사이드바에 자신의 이메일이 표기되고 중앙에는 위시리스트, 하단에는 결제 내역이 나오도록 하였습니다. 위시리스트는 가로 스크롤바를 이용하여 표기하였습니다. 또한 결제 내역은 주문번호, 상품이름, 결제금액, 처리 상태가 나오도록 표기하였으며 결제 내역 클릭 시 주문했던 품목들을 주문번호별로 표기하였습니다.

1. 마이페이지 전체

2. 결제 내역 클릭 시

⏩ 프로젝트 실행 방법

npm start

👨‍👩‍👧‍👦 팀원 소개

FE	FE	BE	BE
시은	건우	동규	태열
❤️visit profile	💛visit profile	💚visit profile	💙visit profile