✅ 내가 구현한 기능 소개

1. Nav

• 마우스 hover시 드롭다운 메뉴가 생성
• 제품 카테고리 클릭 시 해당 페이지로 이동
• '+5000P' 클릭 시 회원 가입 페이지로 이동
• 회원가입 완료 후 로그인 시 '+5000P' text가 유저아이디로 변경
• 로그인 후 장바구니에 담은 제품 개수 표시
• 로그아웃 버튼 클릭시 로그아웃

2. 제품 상세 페이지

• 페이지 스크롤 시 오른쪽 가격정보 부분은 고정되어 있고 왼쪽 이미지 정보만 계속 보여짐
• 계속 스크롤 되다가 Footer 부분에 도달 시에 고정되어 있던 부분이 풀리고 Footer내용만 보여줌
• 작은 이미지 마우스 hover시 큰 이미지에서 보여짐
• 배송/교환/반품/사이즈 정보 버큰 클릭시 펼져보이게 구현
• 수량 버튼 클릭시 자동으로 총 금액 변경
• 장바구니/구매하기 버큰 클릭시 해당 페이지로 이동

3. 구매평

• 제품 상세 페이지 안에 해당 제품에 대한 리뷰평을 각각 작성 가능
• 회원제 사이트이기 때문에 구매를 해야 구매평 작성이 가능하며 한 제품 당 하나의 구매평만 작성이 가능
• 구매평 등록 버큰 클릭시 이미지 업로드와 코멘트 작성이 가능한 모달창이 뜸
• 구매평 작성 완료 후에는 자신이 작성한 구매평에만 수정과 삭제 버튼이 생성
• 수정 버튼 클릭시 작성했던 이미지와 구매평이 적혀있는 모달창이 뜸
• 수정 완료 버튼 클릭 시 구매평 리스트에 수정됨
• 삭제 버튼 클릭 시 해당 구매평 삭제 가능

📌 공유하고 싶은 코드

[1] 모달 컴포넌트 재사용

제품 상세 페이지 내에서 구매평을 작성할 수 있다보니 구매평은 모달창을 생성하여 구현하였다.
이때 등록과 수정하는 모달창의 구조가 같기 때문에 컴포넌트를 재사용할 수 있다는 사실을 알게되었다. 같은 props의 이름이지만 각각 필요한 데이터를 받아와서 구성한다면 충분히 재사용이 가능했다. 단 클릭하였을 때 열리고 닫히는 state값은 따로 관리해야만 독립적으로 열고 닫을 수 있다.

[2] 쿼리스트링으로 매번 요청하지 않는 페이지네이션

1. 쿼리스트링 쓰지 않기

구매명이 제품 상세페이지 내에 존재하다보니 쿼리스트링으로 매번 구매평들을 요청하는 것이 비효율적 이라는 것을 알게 되었다. useEffect로 한번 offset값만 받아와 useSearchParams로 서버에 재요청하는 것이 아니라 useState로 값이 변화했을 때 랜더링 하도록 하였다.

2. 총구매평 활용하기

페이지당 5개씩 구매평을 보여주고 싶기 때문에 총리뷰평 나누기 5를 하고 올림을 해준다. 이 값은 총구매평에서 나올 수 있는 최대 페이지이다. 이를 활용하여 1부터 최대 페이지까지 숫자가 들어간 배열을 만들어 주는 함수를 만든다. 이 배열을 받아온 데이터 개수 만큼 화면에 보여질 수 있도록 map을 돌린다. 그리고 클릭했을 때 그 값이 배열 안의 값과 같을 때는 해당 페이지라는 것을 알려주기 위해 bold 처리를 한 css값을 className에 추가해준다!