• 이솝은 세심하게 고안되어 효과적이면서도, 감각적인 즐거움을 선사하는 스킨, 헤어, 바디 케어 제품을 제공하는 사이트
• 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인 / 기획 부분만 클론했습니다.
• 개발은 초기 세팅부터 전부 직접 구현 했으며, 아래 데모 영상에서 보이는 부분은 모두 프론트엔드와 백엔드가 통신하여 실제 서비스 수준으로 개발한 것입니다.

개발 인원 및 기간

• 개발기간 : 2023년 1월 2일 ~ 13일 (2주)
• 개발인원 : FE (4명), BE (2명)
  Product Manager: 오현주(F)
  Project Manager: 강서윤(F)
  Teammates: 김상헌(F, Writer), 박환성(F), 김광휘(B), 이민규(B)

프로젝트 선정이유

• 대상 사이트의 깔끔한 UI
• 이솝의 브랜드 이미지와 우리가 구축하기 원하는 사이트의 이미지가 비슷했다

데모 영상

• (넣을 예정. 준비중)
  
  

적용 기술 및 구현 기능

적용 기술

• FE : React.js, sass, figma, phothshop, HTML, JavaScript
• BE : Node.js, JavaScript, MySQL, express, bcrpyt, jwt
• 협업 및 일정관리 : Git, GitHub, Slack, Trello, Notion
  
  
  
  

구현 기능

공통

• 회원가입 / 로그인

  • 담당 : 김상헌
  • 공통 폼 컴포넌트 구현
  • 인풋 애니메이션 기능 구현
  • 실시간 유효성 검사 구현
  • 토큰 로컬스토리지 저장
    
    

• 메인페이지

  • 담당 : 강서윤
  • 캐러셀 슬라이드 구현
  • 신상품 리스트 불러오기 기능 구현
  • 메인 이미지 애니메이션 기능 구현
  • nav 바 로컬스토리지 통해 토큰 유무 확인하여 login / logout 토글 기능 구현
    
    

• 검색페이지

  • 담당 : 강서윤
  • 레이아웃
  • 기능 구현 예정
    
    

• 카테고리 모달창

  • 언더라인 애니메이션 구현
  • 페이지 이동 필터 기능 구현
    
    

• 상품 전체리스트 페이지

  • 더보기 기능 구현
  • 탭 메뉴 이동
  • 필터 모달창 통해 검색 기능 구현
    
    

• 상품 상세페이지

  • 상품상세 정보 불러오기
  • 장바구니 버튼 클릭을 통한 상품유무여부 분기 처리
  • 주문하기 버튼 클릭을 통한 일회성 데이터 넘겨주기 (navigate 내 state 사용)
    
    

• 주문 페이지

  • 인풋 애니메이션 기능 구현
  • 상품 정보 불러오기
  • 커스텀 select box 기능 구현
    
    

• 장바구니 페이지

  • 회원 토큰 검증
  • 장바구니 정보 불러오기
  • 선택된 상품 가격 표기
  • 수량 변경 시 가격 변경 기능 구현
  • 장바구니 아이템 삭제 기능 구현
    
    

• 주문완료 페이지

  • 데이터 정보 불러오기
    
    

Reference

---

이 프로젝트는 이솝 사이트를 참조하여 학습목적으로 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진 대부분은 저작권 무료 이미지입니다.