[박광민] Sprint7

[minimo-9]

https://minimo-sprint7.netlify.app/items/834

요구사항

기본

상품 상세

• 상품 상세 페이지 주소는 "/items/{productId}" 입니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다.
  => favoriteCount : 하트 개수
  => images : 상품 이미지
  => tags : 상품태그
  => name : 상품 이름
  => description : 상품 설명
• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다

상품 문의 댓글

• 문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다
  => image : 작성자 이미지
  => nickname : 작성자 닉네임
  => content : 작성자가 남긴 문구
  => description : 상품 설명
  => updatedAt : 문의글 마지막 업데이트 시간

심화

• []모든 버튼에 자유롭게 Hover효과를 적용하세요.

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[GANGYIKIM]

광민님 7번째 미션 작업 고생하셨습니다.
요구사항도 다 잘 적용하시고 좋았습니다. 추가적으로 로직 분리에 대해 신경써주시면 더 좋을 것 같아요.
다음 미션도 화이팅입니다!

[GANGYIKIM]

💊 제안
URLSearchParams 함수를 사용하신 것 좋아요! 아래처럼 초기값으로 limit를 넘겨주셔도 됩니다.

Suggested change

	const params = new URLSearchParams();
	params.append("limit", limit);
	const params = new URLSearchParams({ limit });

[GANGYIKIM]

💊 제안
하나의 파일이 너무 큰 것 같아요~
내부적으로 util,custom hook으로 로직을 분리하고 UI 들도 컴포넌트로 분리되면, 가독성과 재사용성 측면에서 더 좋을 것 같아요.
또한 코드를 분리하는 것은 생각의 단위를 나누는 효과도 있습니다. 다른 파일들처럼 분리하시는 것을 고려해보세요~

[GANGYIKIM]

💊 제안
제 생각에는 아래처럼 비슷한 부분들을 모아두시는 것이 가독성 측면에서 더 좋을 것 같아요~

const ProductDetail = () => {
  const { productId } = useParams();
  const navigate = useNavigate();

  const [product, setProduct] = useState(null);
  const [comments, setComments] = useState([]);
  const [commentInput, setCommentInput] = useState("");
  const [editingCommentId, setEditingCommentId] = useState(null);
  const [editingContent, setEditingContent] = useState("");
  const [openMenuId, setOpenMenuId] = useState(null);

  const handleUpdateComment = (commentId) => {...}

  useEffect(() => { ... }, [productId]);

  if (!product) return <div>로딩 중...</div>;
  return (...)
}

[GANGYIKIM]

👍 칭찬
프론트에서 수정하기를 구현하시기 위해 이렇게 작업하신 것 같아요.
추후 로그인 기능을 구현하시고 API를 이용해 기능을 완성하시면 더 좋을 것 같습니다.

[GANGYIKIM]

❗️ 수정요청

Suggested change

	<img src={kebabIcon} alt="점 아이콘" className={styles.kebabIcon} />
	<button type="button"><img src={kebabIcon} alt="점 아이콘" className={styles.kebabIcon} /></button>

[GANGYIKIM]

💊 제안
지금 코드만으로 보면 버튼 태그보다 Link 태그를 쓰는게 더 적절해보여요.
단순 페이지 이동이 아니라 특정 로직을 실행해야 할때 지금처럼 버튼 태그를 사용하시면 좋을 것 같습니다.
링크 태그를 사용하시면 마우스 오른쪽 클릭이나 새탭 기능도 제공이 가능해서 UX 측면에서도 좋습니다.

Suggested change

	<button
	type="button"
	onClick={() => navigate("/items")}
	className={styles.backButton}
	>
	목록으로 돌아가기
	<img src={backIcon} alt="돌아가기 아이콘" className={styles.back} />
	</button>
	<Link to="/items" className={styles.backButton}>
	목록으로 돌아가기
	<img src={backIcon} alt="돌아가기 아이콘" className={styles.back} />
	</Link>

[GANGYIKIM]

❗️ 수정요청
지금은 limit를 넘겨주지 않아 기본값인 10개의 코멘트만을 불러오고 있네요.
모든 코멘트가 보이도록 무한스크롤 방식으로 구현해주시면 좋겠습니다!