[차경훈] sprint7#172
Hidden character warning
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
경훈님 이번 미션도 고생 많으셨습니다~! 👍
관심사 분리를 조금 더 신경 써주시면 더욱 좋을 거 같습니다 :)
|
|
||
| return ( | ||
| <StyledItemCard> | ||
| <StyledItemCard onClick={handleClick} style={{ cursor: "pointer" }}> |
There was a problem hiding this comment.
단순 페이지 이동이라면 Link를 사용해주시는 것이 SEO, 접근성에 좋습니다 :)
| return config; | ||
| }); | ||
|
|
||
| // 응답 인터셉터 - 토큰 만료 처리 |
| </svg> | ||
| ); | ||
|
|
||
| const KebabMenuButton = styled.button` |
There was a problem hiding this comment.
리엑트 컴포넌트 내부에 스타일드 컴포넌트를 정의하는 것은 안티패턴입니다! 😢
이렇게 되면 ProductInfo가 렌더링 될 때 마다 새로운 스타일드 컴포넌트를 생성하게 됩니다.
https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method
| import React from "react"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const Container = styled.div` |
There was a problem hiding this comment.
크게 중요한 것은 아니지만... 개인적으로는 스타일이 위에 있으면 컴포넌트 내용을 보기 힘들어서 불편한 거 같아요 🤣
| const initial = nickname ? nickname[0].toUpperCase() : "?"; | ||
|
|
||
| // 날짜 포맷팅 함수 | ||
| const formatDate = (dateString) => { |
There was a problem hiding this comment.
요런 함수들은 utils 같은 곳에 모아두면 더욱 좋겠죠!
| label="상품명" | ||
| placeholder="상품명을 입력해주세요" | ||
| value={formData.title} | ||
| onChange={(e) => handleTextChange(e, "title")} |
There was a problem hiding this comment.
input에 name 속성 같은 것을 넣어주시면 'title'을 따로 넘겨주지 않으셔도 됩니다!
<input name='title' />
function handleChange(e) {
e.target.name // 'title'
}| }; | ||
|
|
||
| // 판매가격 입력창 키 입력 이벤트 핸들러 | ||
| const handlePriceKeyDown = (e) => { |
There was a problem hiding this comment.
onChange에서 다루는 것으로 충분할 거 같습니다 🤔
| showMenu: false, | ||
| }; | ||
|
|
||
| setComments([newCommentObj, ...comments]); |
There was a problem hiding this comment.
댓글을 추가하면, 댓글들을 다시 요청하는 것도 고려해 보시면 좋습니다 :)
만약 여러 사람이 동시에 댓글을 달고 있다고 가정한다면, 지금은 본인의 댓글만 보이게 되죠!
| setCommentError(null); | ||
|
|
||
| try { | ||
| const { data } = await productAPI.getComments(productId, null, 10); |
There was a problem hiding this comment.
지금은 댓글을 10개만 가져오고 있습니다. 요구사항에는 없지만, 무한스크롤을 제공하는 api입니다. 여유가 되신다면 무한 스크롤을 구현해 보셔도 좋아요 :)
|
|
||
|
|
||
|
|
||
| function ProductDetailPage() { |
There was a problem hiding this comment.
지금도 잘하셨지만, 이 전과 마찬가지로 관심사를 분리해 주시면 더욱 좋겠네요!
코멘트 관련된 모든 부분은 코멘트 컴포넌트로 모아둘 수 있습니다 :)
2 participants
요구사항
기본
상품 상세
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
상품 문의 댓글
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
주요 변경사항
멘토에게