Conversation
| "@types/jest": "^29.5.12", | ||
| "@types/node": "^22.0.2", | ||
| "@types/react": "^18.3.3", | ||
| "@types/react-dom": "^18.3.0", |
There was a problem hiding this comment.
@types/* 의존성들은 devDependacny에 추가를 해주세요. devDependancy에 포함된 패키지들은 최종 번들에서 제외되기 때문에 번들 사이즈가 줄어듭니다.
| const getNavLinkClassName = (isActive: boolean) => | ||
| isActive ? "menu active" : "menu"; | ||
|
|
||
| function Nav() { | ||
| const [isLogin, setIsLogin] = useState<boolean>(true); |
| interface Writer { | ||
| image: string; | ||
| nickname: string; | ||
| } |
There was a problem hiding this comment.
API 명세를 봤을때 Writer라는 데이터 구조에 id 속성이 있는데 해당 코드에는 없네요.
API 응답값이랑 동일하게 타입을 지정해준다고 생각하시면 편할 것 같습니다.
| interface Writer { | |
| image: string; | |
| nickname: string; | |
| } | |
| interface Writer { | |
| image: string; | |
| nickname: string; | |
| id: number | |
| } |
| interface IComment { | ||
| writer: Writer; | ||
| content: string; | ||
| updatedAt: string; | ||
| } |
There was a problem hiding this comment.
Comment도 API 명세를 보면 다른 프로퍼티들이 더 있습니다. API명세를 보고 빠진 프로퍼티 다 작성해주셔야합니다.
| const [isInputFill, setIsInputFill] = useState(false); | ||
|
|
||
| const handleValueChange = (e) => { | ||
| const handleValueChange = (e: ChangeEvent<HTMLTextAreaElement>) => { |
| import "./TextInput.css"; | ||
|
|
||
| function TextInput({ isTextArea, name, label, placeholder, onChange }) { | ||
| interface Props { |
There was a problem hiding this comment.
그냥 Props 보다 어떤 컴포넌트의 Props인지 이름을 명확하게 주면 좋을 것 같습니다 !
| interface Props { | |
| interface TextInputProps { |
| interface Product { | ||
| id: string; | ||
| name: string; | ||
| description: string; | ||
| price: number; | ||
| images: string; | ||
| favoriteCount: number; | ||
| tags?: string[]; | ||
| createdAt: string; | ||
| } |
There was a problem hiding this comment.
다른 파일에서 Product 타입을 정의를 했었습니다. 타입도 재사용성을 고려해서 한번 정의한 타입은 import해서 계속 재사용을 해야합니다.
| interface Product { | ||
| id: string; | ||
| name: string; | ||
| description: string; | ||
| price: number; | ||
| images: string; | ||
| favoriteCount: number; | ||
| tags?: string[]; | ||
| createdAt: string; | ||
| } |
There was a problem hiding this comment.
Product 타입 재사용을 해야하는 부분입니다 !
| interface Item { | ||
| id: string; | ||
| name: string; | ||
| price: number; | ||
| images: string; | ||
| favoriteCount: number; | ||
| } |
There was a problem hiding this comment.
이 부분은 Product를 그대로 재사용하거나 Product 타입의 일부이기때문에 Product 타입을 잘 조작해서 타입을 만들어 줘야합니다. 멘토링 시간에 다뤄볼께요 ~
| interface ProductDetails { | ||
| id: string; | ||
| name: string; | ||
| description: string; | ||
| price: number; | ||
| images: string; | ||
| favoriteCount: number; | ||
| tags?: string[]; | ||
| } | ||
|
|
||
| interface Writer { | ||
| image: string; | ||
| nickname: string; | ||
| } | ||
|
|
||
| interface ProductComments { | ||
| writer: Writer; | ||
| content: string; | ||
| updatedAt: string; | ||
| } |
There was a problem hiding this comment.
이 부분도 역시 재사용을 해야하는 부분입니다 !
|
스프린트 미션 수고하셨습니다. 타입을 꼼꼼하게 지정해주려고 노력하셨네요! 재사용성을 고려하시면 더 잘 사용하실 것 같습니다 ! |
요구사항
기본
체크리스트 [기본]
주요 변경사항
멘토에게