1-1. Overview

에이미 웹사이트를 클론코딩하고 검색 기능을 발전시킨 4인 1조 팀 프로젝트 입니다.

이번 클론코딩은 단순히 따라하는 것에 그치지 않고, 기능을 추가함으로써 완성도를 높일 수 있었다. 영양제는 소비자 맞춤형 제품이다. 따라서 팀원들과 논의를 통해 카테고리, 필터, 검색 기능을 추가하여 소비자들이 자신에게 꼭 맞는 제품을 찾을 수 있도록 하기로 결정했다. 원래 페이지는 왼쪽 사진과 같았다. 에이미의 기존 영양제 테스트에서 영감을 받아 영양제 검색 페이지를 오른쪽과 같이 추가하였다. 또한, 기존에 없던 모달창을 추가하여 소비자들이 상세페이지를 볼 수 있도록 했다.

• [기존 사이트]

  

• [기능이 추가된 클론코딩]

  

  프로젝트 전반에서 TypeScript와 React를 사용했고, Styled-Components로 CSS를 작성한 후, Media query로 모바일에서도 이용 가능한, 반응형 웹을 구현했습니다. 아무래도 팀 프로젝트를 할 때는 TypeScript를 사용하는 것이 서로의 코드를 보고 이해하기 좋기 때문에 지난 프로젝트 이후 계속 사용하고 있다. 검색 기능은 Redux Toolkit을 사용하였는데, 페이지가 많고 컴포넌트가 여러개로 분산되어 있어서 상태 관리를 편하게 하고자 사용하였다.

🔗 웹사이트 확인하기

🔗 소스 코드 확인하기

🔗 간단하게 gif로 보기 👇

• [홈 페이지]

• [검색 페이지]

  

1-2. 기술 스택

• React, Redux Toolkit, TypeScript, Styled-Components

2-1. 맡은 역할과 과정

1. Navbar 만들기

   1. 목표 1 : Navbar 제작 및 미디어쿼리

      • 과정 : PC모드 일 때는 왼쪽은 로고, 오른쪽은 탭 페이지, 하단은 경계선을 주었다. 모바일 모드 일 때는 로고를좀 더 작게 하고, 나머지 요소들은 모두 삭제 하여서 깔끔함을 유지했다.

      

   2. 목표 2 : 탭 클릭 시 페이지 이동 및 현재 탭 강조 표시

      

      

      • 문제 : window.location.pathname 은 react-dom-router 라이브러리에서 에러 → 해결 ⭕