무신사 클론 쇼핑몰 서비스

로그인, 상품 검색 및 정렬, 장바구니 기능, 상품 결제 및 결제취소 등
전반적인 쇼핑몰의 구성부터 기능까지 무신사 클론코딩을 통해 구현해 보았습니다.

사이트  |   위키  |   PPT

🧪 테스트 아이디

아이디	비밀번호
test	test

💻 기능 소개

📌 Pages with many features

• 로그인 페이지

소셜로그인, 유효성검사, 아이디/비밀번호 찾기를 할 수 있어요.

• 회원가입 페이지

주소검색, 휴대폰/이메일 인증을 할수 있어요.

📌 Check all products

• 메인페이지

상품을 검색하고 조건에 따라 필터링/정렬을 할 수 있어요.

📌 All the functions of the product

• 상세페이지

상품의 상세정보를 확인하고 상품의 구매, 좋아요, 장바구니에 담을 수 있고 이미지도 줌도 가능해요.

📌 Check the status of all products

• 마이페이지

주문내역, 좋아요, 장바구니를 확인하고 상품을 관리 할 수 있어요.

🎨 Skills

🧶 Front

• React
• React Router
• Styled Component
• UseConText
• USESWR

🛠 Back

• Node
• JWT
• Jenkins
• Redis
• S3
• MySql
• Express
• Sequelize
• 결제 API(IAMPORT)

👨‍👨‍👧‍👦 팀원 소개

송민지	서경주	김우혁	이다노
GitHub	GitHub	GitHub	GitHub
FrontEnd	FrontEnd	FrontEnd	FrontEnd

이민서	이준영
GitHub	GitHub
BackEnd(메인 개발)	BackEnd(서브 개발)

　

🛠 기술적 도전

Front

• useSWR를 이용하여 realTime 데이터 연동
• useContext를 사용하여 props의 간소화 및 유지보수 개선
• 카카오 API를 이용한 소셜회원가입 및 소셜 로그인
• 메인페이지 filter, sort Click 이벤트를 통한 url query 변경, 이후 Axios를 통해 query문을 통한 데이터 통신
• 데테일 페이지 onMouseOver 이벤트를 활용한 상품 이미지 줌 기능
• 최적화 진행
  • CDN 이미지를 활용한 이미지 최적화
  • react-icons 대신 @react-icons/all-files를 활용한 아이콘 최적화
• 아임포트를 이용한 test 결제 기능
• 장바구니 기능 구현(삭제, 결제, 수량변경 등)

Backend

• 휴대폰 인증, 이메일 인증, 소셜 로그인 등 인증 절차가 필요한 부분은 모두 토큰 도입
• 2만 여개의 가데이터를 생성하여 실제 사이트처럼 제작
• Jenkins를 사용하여 CI/CD 구축
• Vultr을 사용한 서버 배포