Conversation
src/router/ProductDetailPage.jsx
Outdated
There was a problem hiding this comment.
react-router-dom을 잘 사용하고 계신 것 같아요 !! 어떻게 Suspense와 Await 컴포넌트를 함께 사용하려고 하셨죠 !?
|
|
||
| export default function Comment({ comment }) { | ||
| return ( | ||
| <article style={{ marginBottom: '10rem' }}> |
There was a problem hiding this comment.
스타일이 간단해도 인라인 스타일은 지양해주세요 ㅎㅎ
| <TextArea | ||
| id="comment" | ||
| name="comment" | ||
| type="text" | ||
| variant="comment" | ||
| label="문의하기" | ||
| value={commentValue} | ||
| placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유표시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." | ||
| changeValue={handleChangeValue} | ||
| /> |
There was a problem hiding this comment.
공통 컴포넌트를 만들어서 사용을 하고 계셨네요 ㅎㅎ 잘하시는데요?
| import CommnetForm from './CommentForm'; | ||
| import CommentList from './CommentList'; | ||
|
|
||
| export default function Comment({ comment }) { |
There was a problem hiding this comment.
commentList를 뜻하는 props이니까 comment보다는 commentList 나 comments 라고 복수형임을 나타내주시면 더 좋을 것 같아요.
| import backIcon from '../../../assets/images/ic_back.png'; | ||
|
|
||
| export default function CommentList({ commentList }) { | ||
| const comment = commentList.length ? ( |
There was a problem hiding this comment.
변수 comment가 ReactNode인 하나의 컴포넌트를 가르키고 있으므로 이 경우 COMMENT라고 대문자로 써 줌으로서 일반 변수가 아닌걸 나타내주시면 더 가독성이 좋아집니다.
There was a problem hiding this comment.
제가 정확한 이유는 다시 찾아보도록 할께요. 경험상 컴포넌트 내부에서 comment와 같이 컴포넌트를 정의하는 것은 좋지 않다고 본적이 있네요 ㅎㅎ
| <div className={styles.userComment}> | ||
| <div className={styles.userName}>{comment.writer.nickname}</div> | ||
| <div className={styles.commentTime}> | ||
| {convertTime(comment.updatedAt)} |
There was a problem hiding this comment.
리렌더링과 관련없는 유틸성 함수를 다른 파일에 선언하신 것 잘 하셨습니다 !
|
다솜님 ! React-Router-Dom의 기능을 적극활용하여 loader와 suspense,await 컴포넌트를 사용하신 부분이 너무 흥미로웠습니다 ! |
요구사항
기본
상품 상세 페이지 주소는 “/items/{productId}” 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
상품 문의 댓글
문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
response 로 받은 아래의 데이터로 화면을 구현합니다
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
심화
주요 변경사항
스크린샷
멘토에게