Conversation
There was a problem hiding this comment.
itemList를 가져오기 위해서 컨텍스트에서 전역적으로 데이터 fetching을 하셨네요. fetching을 하는건 좋다고 생각하는데 App 파일보다 ProductDetail로 컨텍스트의 범위를 좁히는게 더 나을 것 같아요.
App 파일은 리액트 프로젝트가 시작될때 가장 먼저 실행되는 루트파일이라서 itemList가 필요없는 페이지에서도 데이터를 호출하고 들고있어야 해서 효율적이지 못하다고 생각합니다.
| function DetailCard() { | ||
| const { id } = useParams(); | ||
| const itemList = useContext(ItemContext); | ||
| const item = itemList.find((item) => item.id === parseInt(id)); |
There was a problem hiding this comment.
컨텍스트에 itemList를 저장해놓고 필터링을 하기보다 API문서에 있는대로 productId를 이용해 id를 가져오는 방법이 더 좋을 것 같아요.
아래의 API를 이용해 필요한 아이템 하나만 가져오세요
https://panda-market-api.vercel.app/docs/#/Product/RetrieveProduct
컨텍스트를 쓴것도 좋다고 한것은 그것도 요구사항을 어떻게든 만족시키는 방법이긴 하지만
정석적으로는 id값을 이용해 하나만 가져와야합니다. ㅎㅎ
There was a problem hiding this comment.
const fetchProduct = async (productId) => {
// fetch product detail
const response = await fetch(
`https://panda-market-api.vercel.app/products/${productId}`
);
if (!response.ok) {
throw new Error("제품을 불러오는데 실패했습니다");
}
const result = await response.json();
return result;
};| <input | ||
| type="text" | ||
| value={inputValue} | ||
| onChange={handleInputChange} | ||
| placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." | ||
| /> |
There was a problem hiding this comment.
댓글작성과 같이 긴 텍스트를 작성해야 할 경우 input 태그보다 textarea 태그를 이용하면 좀 더 요구사항에 맞다고 생각합니다. 한 예로 textarea는 입력인풋의 크기를 조절 할 수 있어 긴 문장을 유저가 한눈에 볼 수 있습니다.
| const timeSince = (date) => { | ||
| const now = new Date(); | ||
| const updatedAt = new Date(date); | ||
| const seconds = Math.floor((now - updatedAt) / 1000); | ||
|
|
||
| let interval = Math.floor(seconds / 31536000); | ||
| if (interval > 1) return `${interval}년 전`; | ||
|
|
||
| interval = Math.floor(seconds / 2592000); | ||
| if (interval > 1) return `${interval}개월 전`; | ||
|
|
||
| interval = Math.floor(seconds / 86400); | ||
| if (interval > 1) return `${interval}일 전`; | ||
|
|
||
| interval = Math.floor(seconds / 3600); | ||
| if (interval > 1) return `${interval}시간 전`; | ||
|
|
||
| interval = Math.floor(seconds / 60); | ||
| if (interval > 1) return `${interval}분 전`; | ||
|
|
||
| return `${Math.floor(seconds)}초 전`; | ||
| }; |
There was a problem hiding this comment.
화면의 리렌더링과 관계없는 유틸성함수는 따로 빼주신 점 좋습니다 !!
| const { id } = useParams(); // URL에서 id 값을 가져옴 | ||
| const [itemList, setItemList] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| const fetchAndProcessData = async () => { | ||
| try { | ||
| const data = await getComments(id); | ||
| setItemList(data.list); | ||
| } catch (error) { | ||
| console.error("데이터를 가져오지 못했습니다", error); | ||
| } | ||
| }; | ||
| fetchAndProcessData(); | ||
| }, [id]); |
There was a problem hiding this comment.
이렇게 id를 기반으로 댓글을 가져올때 이렇게 하는것이 맞습니다 ~ !! ㅎㅎ
조금 더 도전해서 이 로직을 커스텀훅으로 분리해보는건 어떨까요?
const path = `/products/${productId}/comments?`;
const query = `limit=${limit}`;
const response = await fetch(
`https://panda-market-api.vercel.app${path}${query}`
);용한님이 하신 방법이 맞습니다 ! |
|
끝까지 로직을 작성하려고 하신 노력이 보입니다 ! 수고하셨어요 ! |
요구사항
기본
상품 상세 페이지 주소는 “/items/{productId}” 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
response 로 받은 아래의 데이터로 화면을 구현합니다
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
멘토에게