[최권진] sprint7, 8

[kwonjin2]

미션 7 요구사항

기본

상품 상세

• 상품 상세 페이지 주소는 "/items/{productId}" 입니다.

• response 로 받은 아래의 데이터로 화면을 구현합니다.
  => favoriteCount : 하트 개수
  => images : 상품 이미지
  => tags : 상품태그
  => name : 상품 이름
  => description : 상품 설명

• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다

상품 문의 댓글

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

심화

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

미션 8 요구사항

기본

• 네모 박스 안의 화면을 TypeScript로 마이그레이션해 주세요.

심화

• any타입을 최소한으로 써주세요.

[dongqui]

권진님!
기본적인 구현은 역시 잘 하셨습니다! 👍 공통 컴포넌트를 활용해서 재사용성을 높이고 jsx를 정리하면 더 좋을 거 같습니다 :)

타입스크립트는 아직 작업중이신 거 같군요!? 🤣 (혹시 푸쉬가 덜 된거라면 언제든 추가로 올려주세요!)

hooks/useProducts.js 파일 보시면 파일명에 띄어쓰기가 한 칸 들어갔는데 이부분 수정 부탁드립니다 🤣 윈도우에서는 파일을 읽을 수가 없네요 ㅎㅎ

[dongqui]

import { InputHTMLAttributes } from "react";

export interface FormInputType extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {}

이렇게 타입을 정의하시면 기본적인 input type들(id, type, value, placeholder 등)은 추가로 정의하지 않으셔도 됩니다!

[dongqui]

이벤트핸들러 타입을 가져다 쓰셔도 됩니다 :)

onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;

[dongqui]

위 textarea도 그렇고, 공통 컴포넌트를 최대한 활용해 주시면 좋을 거 같아요!
jsx가 정리되고 유지보수가 쉬운 이점이 있습니다 :)

[dongqui]

api 호출을 함수로 정리하면 좀 더 깔끔하게 정리할 수 있죠~! 🤣

[dongqui]

훅으로 깔끔하게 잘 정리하셨네요 👍

[dongqui]

이건 중요한 거는 아닌데 컴포넌트 프랍스는 보통 컴포넌트 안에서만 쓰이다보니 컴포넌트 안에 정의하는 게 편할 때가 많습니다 :)

[dongqui]

특정 도메인과 관련된 isEditing은 제거하고 img는 밖에서 받아오면 좀 더 확장성 있는 컴포넌트가 될 거 같네요 :)

[dongqui]

혹시 에러 바운더리로 올리시기 위해 try catch로 안 잡으셨다면, error는 useEffect 내부에 있으면 안됩니다.

function useInquiries() {
  const [error, setError] = useState(null);
  
  useEffect(() => {
  ...
  }, [...])
  
  if (error) {
    throw new Error('')
  }
  
  return ...
}