1차 프로젝트 SPAOGAME

개발.log·2021년 10월 17일
1
post-thumbnail

SPAO Clone Project

  • Trends meet Basic Be Transic! - 스파오(SPAO) 사이트 클론.

🎇 팀명 : SPAOGAME - 스파오게임

  • 팀원들 각자의 기술에 익숙해지는 것을 목표로 하여, 페이지 단위로 개발.
  • 팀원들 수준별로 적절한 역할 분담과 애자일한 스크럼 방식의 미팅, 그리고 규칙적이고 능동적인 의사소통으로 프로젝트를 성공적으로 마무리.
  • 기획 과정 없이 짧은 기간 안에 기술 습득 및 기본 기능 구현에 집중하기 위해서 SPAO 사이트를 참고.

📅 개발 기간 및 개발 인원

🎬 프로젝트 구현 영상

  • 🔗 [영상 링크]

⚙ 적용 기술

  • Front-End : HTML5, CSS3, React, SASS, JSX
  • Back-End : Python, Django, MySQL, jwt, bcypt, AWS RDS, AWS EC2
  • Common : Git, Github, Slack, Trello, Postman or Insomnia

🗜 데이터베이스 DIAGRAM

💻 구현 기능

김현진

  • 상품리스트 레이아웃 구현
  • 페이지네이션으로 상품데이터를 받아오는 기능
  • 높은가격순, 낮은가격순,이름순,최신등록순,컬러순 ordering 기능
  • 상세페이지의 레이아웃 구현
  • query string url 을 사용한 상세페이지 연결 구현
  • fetch post로 장바구니페이지에 데이터 전달 기능
  • review form 레이아웃 구현
  • fetch get/delete를 통한 후기 게시글, 댓글 등록/삭제 기능

강성구

  • 메인페이지 레이아웃 구현
  • 네브바 각 메뉴별 호버 시, 메뉴에 맞는 내용들 드롭다운(Two Depth)
  • 스크롤 감지시 네브바 색 변경
  • Carousel방식으로 버튼 클릭시 이미지 너비 규격만큼 이동(마지막 사진에서는 첫번째 사진으로 이동)
  • radio 형식으로 사진 이동기능 추가
  • 페이지업,페이지 다운 컴포넌트 화면 우측하단 고정

❗ Reference

  • 이 프로젝트는 SPAO 사이트를 참조하여 학습목적으로 만들었습니다.

🙏 help

  • 프로젝트 상품 이미지 출처원 : MIDEOCK-미덕 , SARNO-사르노 *이미지 사용을 허가해주신 대표님들께 감사합니다.

// 조금더 수정 예정

profile
Think Big Aim High Act Now

0개의 댓글