클론프로젝트 회고록 (작성중)

1차 팀 프로젝트

닥터마틴홈페이지 클론코딩(Team Dr.Heewon)

프로젝트 소개 :

개발 기간 :

2021.12.27.~2022.01.07.

사용된 기술 :

Used DevTools

JavaScript(ES6) / React(v17) Hook / Sass / sider

Collabo Tools

Git&Github / Slack / Trello

Libraries

React-router-dom 외 라이브러리 지양

Code Formatter

eslint / prettier

구현한 내용 및 맡은 역할 :

메인 페이지

• 5초 주기로 이동하며, 버튼을 눌러서도 이동가능한 슬라이더
• 2개 상품, 각각 2개씩의 이미지가 담겨 이동되는 슬라이더
• 장바구니 담기 통신 기능 포함
• Sticky position과 함께 scroll event가 적용된 동적 영역
• Skeleton UI

네비게이션 바 & 햄버거 메뉴

• 상단 버튼을 이용한 라우팅 ( 로그인, 회원가입, 로그아웃 )
• 토큰 존재 유무에 따른 버튼 렌더링 분화. ( 로그인, 회원가입 또는 로그아웃 )
• localStorage 토큰 삭제를 통한 로그아웃
• 햄버거 버튼 클릭시 히든 메뉴 점멸
• 히든 메뉴의 커스텀 수직 / 수평 스크롤바 구현

회원가입

• 필수 입력 사항: 이름, 아이디, 이메일, 비밀번호, 비밀번호 확인, 생년월일, 휴대폰 번호
• 유효성 검사
  아이디: 중복 확인
  비밀번호: 문자, 특수 문자, 숫자가 각각 1개 이상이면서 총 8자 이상
  비밀번호 확인: 비밀번호와 동일해야함

로그인

• 로그인 버튼 활성화
• 아이디 및 비밀번호 유효성 검사

상품 리스트

• 카테고리 선택에 따른 맞춤 상품 리스트 정렬
• 배열형태로 정렬되어진 상품 구조

상품 상세보기

• 이미지 슬라이더 기능 추가 및 레이아웃 개선
• 사이즈, 수량, 컬러 선택 후 장바구니 버튼 클릭 시 백엔드 서버로 유저 데이터 전송
• 상품 후기 무한 스크롤(3개) 구현

장바구니

• 전체 선택 및 제품 선택
• 선택한 제품들, 각각의 제품 직접 삭제 (DB 전송)
• 구매할 시 구매한 상품의 데이터 DB에 전송
• 상품이 존재하지 않는 화면

협업의 경험 :

잘한 점 :

아쉬운 점 :

기록하고 싶은 코드 :