본 프로젝트는 2023년 3월 위코드에서 진행항 1차 프로젝트입니다
- 개발 기간: 2023.3.6 ~ 2023.3.17 (2주)
- 개발 인원:
- FrontEnd : 이기태(Product Manager), 김수미, 홍태훈
- BackEnd : 김승태(Project Manager), 최원식
"닥터마틴"은 전통적인 부츠와는 다른 디자인과 튼튼한 소재, 특유의 소울을 가진 제품으로 유명해요.
이러한 특징들이 제품의 차별성과 독특한 이미지를 형성하는 데 도움을 주었기 때문에, "닥터마틴"을 참고하여 기획하였어요.
일반적인 부츠의 개념을 깨고 새로운 스타일과 트렌드를 선보인 브랜드로써, 혁신과 독창성을 추구하는 저희의 기획 의도와 부합하여 선택했어요!
반항적이지만 클래식하고 캐주얼하지만 자아 표현에 자부심을 가지고있는 사람들이 신는 신발을 판매하는 서비스예요!
소비자들로하여금 부츠와 슈즈를 그들 자신만의 유니크한 스타일을 표현해주는것이 soleMates 포인트예요!
- 로그인 회원가입
- 메인, 헤더, 푸터
- 상품 리스트
- 상품 상세페이지
- 장바구니
- 로컬스토리지에 저장된 토큰 유무에따라 로그인 로그아웃, 마이페이지, 찜하기 구현했어요.
- 정규식을 사용하여 회원가입유효성 검사를 했어요.
- React의 useState와 useEffect를 활용하여 백엔드에서 보내준 데이터를 확인하여
장바구니에 담긴 상품의 수량을 계산하고 표시하고 삼항연산자를 사용하여 장바구니에 담긴 총 수량이 99개를 초과할경우 99+로 표시했어요. - 토큰이 생성되면 로그인페이지로 이동되게 했어요.
- 슬라이드하여 보여주는 케러셀 기능을 라이브러리를 사용하지 않고 React의 useRef, useState, useEffect를 활용해서
슬라이드의 애니메이션 효과를 transition과 transform을 사용하여 구현했어요. - position:sticky를 사용하여 스크롤 내렸을때도 고정되도록 구현했어요.
- 카테고리 대분류, 중분류, 소분류를 map 함수를 사용하여 배열 데이터를
동적으로 렌더링 조건부 렌더링을 위해 삼항 연산자를 사용하여 구현했어요. - React의 useState와 useEffect를 활용하여 백엔드에서 보내준 데이터를 확인하여 장바구니에 담긴 상품의 수량을 계산하고 표시하고
삼항연산자를 사용하여 장바구니에 담긴 총 수량이 99개를 초과할경우 99+로 표시했어요.
- 상품을 찜할수 있어요.
- 상품호버시 모달이 노출되어, 상세페이지로 가지 않아도 장바구니로 바로 갈수있게 했어요.
- 좌측에 필터를 선택하면 필터를 선택하면 상품이 바뀌도록 했어요.
- 상품의 수량을 증가할수 있도록했어요.
- 상품의 색상, 사이즈를 고를수 있도록 했어요.
- 상품을 찜할수 있도록 했어요.
- 선택한 상품의 정보를 장바구니 버튼을 누르면 모달이 나오도록했어요.
- 장바구니 확인 버튼 클릭 시 DB로 데이터 전송 및 장바구니에 담길수있도록 했어요
- 상품을 구매했다면, 리뷰와 평점을 남길수 있도록 했어요.
- 상품의 갯수의 따라 가격이 바뀌도록 했어요.
- useState와 useEffect를 활용하여 장바구니 데이터를 서버로부터 가져와 화면에 표시했어요.
- 백엔드에서 보내준 데이터의 길이를 체크하여 빈배열일경우 빈화면 마크업이되어있는 컴포넌트를랜더링하고
빈배열이 아닐경우, 장바구니 컴포넌트를 렌더링되게 구현했어요. - 장바구니에 담긴 수량을 백엔드에서 보내준 데이터의 길이를 체크하여 구현했어요.
- useState 훅을 사용하여 count 상태 변수를 관리하고, 수량을 표시 하고 조절했어요.
- useEffect 훅을 사용하여 총 가격이 변경될 때마다 useState에 저장되어있는 함수를 호출하고
콜백함수를 사용하여 총 가격을 업데이트되도록 구현했어요. - 총가격의 값을 toLocaleString() 메소드를 사용하여 천 단위로 쉼표를 추가한 문자열로 변환했어요.
- e.target 이벤트를 사용하여 클릭된 버튼의 className을 확인하고, useState를 사용하여 수량과 총 가격을 업데이트했어요.
- fetch 함수를 사용하여 서버에 DELETE 요청을 보내고, 응답 데이터를 처리하여 useState를 업데이트하고,
총 가격을 감소, 및 filter를 사용하여 삭제 구현했어요. - useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때, 길이만큼 true로 채워진 새로운 배열을 설정하는 함수를 실행하여
처음 접속했을때 전체 선택 버튼이 체크된 상태가 되도록 구현했어요. - fill을 사용하여 전체 값을 반전시키고 체크박스 전체선택 전체해제기능 구현했어요.
React와 Scss를 사용했어요!
- nesting과 extend을 사용하여 css 속성들을 묶어서 재사용이 가능하게 했어요.
React의 hook을 사용했어요!
- React의 hook중에 useState와, useEffect를 사용하여 짧은 코드로 구현했어요.
이미지 스프라이트 기법을 사용했어요!
- 이미지 스프라이트 기법을 이용하여, 페이지 로딩속도를 향상시키켰어요.
useRef를 사용하여 DOM 요소에 접근하고 조작하는 방법을 배웠어요!
- useRef를 활용하여 라이브러리 없이 케러셀을 구현하는 방법을 배웠어요.
- useRef를 사용하여 DOM 요소에 접근하고 조작하는 방법을 배웠어요.
- 동적인 UI를 구현하는 데 유용하게 활용할 수 있었어요.
fill 함수를 활용하여 전체를 변경할 수 있다는 점을 배웠어요!
- fill 함수를 사용하여 배열의 모든 요소를 특정 값으로 채울 수 있다는 점을 알게 되었어요.
- 이를 활용하여 체크박스의 전체 선택/해제 기능을 구현하는 데 효과적으로 활용할 수 있었어요.
API 요청 및 응답의 처리 방식에 대한 이해를 높일 수 있었어요!
- 백엔드와의 통신을 통해 데이터를 주고받는 방법을 배울수 있었어요.
활발한 커뮤니케이션이 진행되지 않았어요!
- 첫 프로젝트이다보니 서로가 잘 모르는게 많아서 활발한 커뮤니케이션이 안됐어요.
- 다음 프로젝트에서는 팀원들과의 의견 교환을 더 활발히 하고, 서로의 의견을 존중하며 효과적인 팀 협력을 구현하는 데 노력하고싶어요.
기능구현을 많이 못했어요!
- 기술에 대한 이해가 부족하여 구현이 어려웠던 경우가 있었어요.
- 다음 프로젝트에서는 해당 기술에 대한 학습을 강화하고, 미리 준비된 라이브러리나 도구를 더 적극적으로 활용하여 업무 효율성을 높이고 싶어요.
백엔드와의 커뮤니케이션을 더 원활하게 이루어내고싶어요!
- 백엔드와의 통신이 처음이었기 때문에, 백엔드와의 협업에서 경험이 부족하다는 점이 있었어요.
- 서로의 역할과 책임을 명확히 파악하여 더 효율적으로 협업하는 방향으로 나아가고싶어요.
프론트엔드 팀원들과의 소통을 더 적극적으로 이루어내고싶어요!
- 커뮤니케이션 부족으로 기능 구현이 제대로 이루어지지 않은 경우가 많았어요.
- 다음 프로젝트에서는 팀원들과의 소통을 더 적극적으로 이루어내고, 서로의 의견을 공유하며 원활한 커뮤니케이션을 통해 효과적인 팀 협력을 하고싶어요.
협업의 중요성을 더 깨닫게 되었어요!
- 팀원들과의 커뮤니케이션 부족으로 인해 기능 구현에 어려움을 겪었지만, 이를 통해 팀 협업의 중요성을 더 깨닫게 되었어요.
- 다음 프로젝트에서는 팀원들과의 소통을 더 강화하고, 팀원들을 도와서 완성도 있는 프로젝트를 구현하는데 더 적극적으로 참여하고싶어요