Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김정현] Sprint7 #223

Conversation

kjh9852
Copy link
Collaborator

@kjh9852 kjh9852 commented Jul 5, 2024

요구사항

기본

상품 상세

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

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

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

상품 문의 댓글

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

심화

  • [x]
  • []

주요 변경사항

  • 최대한 이전 미션 코드 리뷰 반영해보았습니다
  • router의 loader를 써서 구현해보았습니다.

스크린샷

screencapture-localhost-3000-items-9-2024-07-06-18_58_08

멘토에게

  • 폴더를 뭔가 더 잘 구분하고 싶은데 잘 안되는 것 같습니다
  • 이전 목록으로 가기를 누르면 보고 있던 상품페이지가 2페이지 였을때도 1페이지로 초기화 되는데 한 번 수정해보겠습니다.
  • 한 두번 커스텀 훅을 만들어 본 적이 있긴한데, 아직 익숙치 않아서 이번엔 적용해보진 못했습니다

@kjh9852 kjh9852 requested a review from JaeSang1998 July 5, 2024 14:50
@kjh9852 kjh9852 self-assigned this Jul 5, 2024
@kjh9852 kjh9852 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jul 5, 2024
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

엇. .쓰지 않은 파일인데 잘못 push 됐습니다 ㅠ

Copy link
Collaborator

@JaeSang1998 JaeSang1998 left a comment

Choose a reason for hiding this comment

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

좋아요 정현님 이번주차도 고생많으셨습니다 :) 점점 잘해지시는것 같군요

const comment = commentList.length ? (
<ul className={styles.commentContainer}>
{commentList.map((comment) => (
<li className={styles.commentList}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

key 값이 없어요! map 을 사용할때는 무조건 key 값이 들어갈 수 있도록 해주세요!

import styles from "./DetailProduct.module.css";

export default function DetailProduct({ product }) {
const productPrice = product.price && product.price.toLocaleString("kr");
Copy link
Collaborator

Choose a reason for hiding this comment

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

product 의 price 가 없는 경우가 있나요? props 로 내려주는 data 은 최대한 null or undefined 에서 안전한 값을 내려주면 좋습니다.

@@ -9,17 +9,17 @@ import Section from '../../ui/Section/Section.jsx';
import Loading from '../../ui/Loading/Loading.jsx';
import styles from './AllProduct.module.css';

const deviceSize = {
const DEVICE_SIZE = {
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

};

useEffect(() => {
const handleResize = () => {
setSize(getResponseProducts());
setOptions(prevOption => ({
...prevOption,
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분은 멘토링때 말씀드렸던 부분 반영해보시면 좋을것 같아요~


useEffect(() => {
const handleResize = () => {
if (typeof window === "undefined") {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 if 문이 true 인 케이스가 있나요?

const { product, comment } = useRouteLoaderData('product-detail');
return (
<Section>
<Suspense fallback={<Loading />}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 Suspese 와 Await 를 함께 잘 사용하셨군요 매우매우 좋습니다.

);
}

async function loadProduct(id) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

loadProduct , loadComment 모두 이 곳에 선언해주어도 나쁘지 않지만, 앞으로는 이런 data fetching 로직을 분리해서 모듈화하는 습관을 들여봐도 좋을것 같습니다

tags && tags.some((tag) => tag.name === tagValue.trim());
if (existingTag) {
setTagValue("");
return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

return setTagValue("") 로 하면 미세하게 한 줄 줄일 수 있습니다 :)

@@ -0,0 +1,18 @@
export default function convertTime(getTime) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

@JaeSang1998 JaeSang1998 merged commit cd30275 into codeit-bootcamp-frontend:React-김정현 Jul 8, 2024
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