Skip to content

Conversation

@eunkyung01
Copy link
Collaborator

요구사항

스프린트 7

기본

상품 상세

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

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

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

상품 문의 댓글

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

심화

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

스프린트 8

기본

  • 스프린트 미션 1 ~ 7에 대해 typescript를 적용해주세요 (5~7 만 진행했습니다.)

심화

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

주요 변경사항

  • 앞으로 css와 반응형을 추가하여 더 수정할 예정입니다.
  • 아직 미완성인 부분이 많지만 차근차근 구현해 갈 예정입니다!

멘토에게

  • 타입스크립트 사용이 처음이라서 제가 제대로 적용을 한 것이 맞는지 잘 모르겠습니다! 이상한 부분이 있다면 말씀해주세요.

@eunkyung01 eunkyung01 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 8, 2025
Copy link
Contributor

@withyj-codeit withyj-codeit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

타입스크립트 적용하느라 수고 많으셨어요~👏🏻

"react-dom": "^18.2.0",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1",
"typescript": "^5.7.2",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typescript 및 @types 라이브러리들은 프로덕션에 필요한게 아니라 빌드할 때만 필요해서
devDependencies로 변경해주시면 좋을 것 같아요.

pageSize: number;
orderBy: string;
keyword?: string;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

인터페이스의 값들이 query parameter들로 보이는데 ProductQueryParams 같이 이름으로 어떤 값들이 있는지 예상가능한 타입 이름이면 좋을 것 같아요.

interface Comment {
productSlug: string;
limit: number;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

위 내용과 같은 맥락에서 적절한 이름으로 수정해보시면 좋을 것 같아요.

pageSize = 4,
orderBy = "favorite",
keyword = "",
}: Product) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

함수의 return 타입도 명시하면 함수를 사용하는 곳에서 어떤 타입의 값을 받게 되는지 알 수 있어 좋을 것 같아요.

) : (
"로딩중..."
)}
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트화 할 수 있는 것들은 컴포넌트로 추상화 하면 이후에 페이지에 있는 요소들을 빠르게 파악하고 수정하기 좋을 것 같아요.

@withyj-codeit withyj-codeit merged commit e6d0113 into codeit-bootcamp-frontend:React-김은경 Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

순한맛🐑 마음이 많이 여립니다..

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants