[조규진] Sprint7

[gjrefa9139]

기본

상품 상세

• 상품 상세 페이지 주소는 “/items/{productId}” 입니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다.
  • favoriteCount : 하트 개수
  • images : 상품 이미지
  • tags : 상품태그
  • name : 상품 이름
  • description : 상품 설명
• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다

상품 문의 댓글

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

심화

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[201steve]

수고많으셨습니다 :-)

[201steve]

• 인라인 스타일링은 지양하는게 좋습니다.
• styled-component를 사용하면 component의 스타일링도 가능합니다.

import {NavLink} from 'react-router-dom'
import styled from 'styled-components'

const StyledNavLink = styled(NavLink)`
color : ${({isActive,theme})=>isActive? theme.colors.blue : undefined}
`

styled(NavLink) 이 부분에 인자로 스타일링 할 컴포넌트를 전달하는게 가능합니다 :-)
공식문서 Styling any component 를 참고 해 보세요! :-)

[201steve]

url만 다른 함수 2개가 같은 동작을 하고있어서, 공통 함수로 분리하면 반복 코드를 줄일 수 있을것같네요

const fetchData =async(url)=>{
 try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const body = await response.json();
    return body;
  } catch (error) {
    console.error('Failed to fetch product detail:', error);
    throw error;
  }
}
}

export async function getProductDetail(productId){
if (!productId) {
    throw new Error('Invalid product ID');
  }
const url = `https://panda-market-api.vercel.app/products/${productId}`
return fetchData(url)
}

export async function getProductComments({ productId, params }) {
if (!productId) {
    throw new Error('Invalid product ID');
  }
const query = new URLSearchParams(params).toString();
const url = `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
return fetchData(url)
}

[201steve]

아직은 css로도 변수 선언이나 할당이 가능하지만 styled-components를 도입하면 더욱 편하게 사용하실 수 있습니다 :-)

• 공식문서의 ThemeProvider를 참고 해 보세요!

//Main.js
render(
<ThemeProvider theme={{ color: 'mediumseagreen' }}>
   <Router/>
</ThemeProvider>
)

theme에 전달하려는 객체를 보내면
필요로 하는 컴포넌트에서 props로 받는 theme에 접근해서 원하는 값을 쓸 수 있습니다.

const Box = styled.div`
  color: ${props => props.theme.color};
`

[201steve]

이 속성은 주석처리만 되어있어서
언제 다시 사용될지, 혹은 사용이 안될지를 주석에 같이 적어주시거나
혹은 사용이 영영 안될 코드라면 삭제 해주시면 좋을것같아요 :-)

[201steve]

지금은 괜찮지만 나중에 회사에 가서는 테스트는 로컬에서만 하고, commit에는 남지 않도록 해주세요. :-)

[201steve]

변수로 중복되는 코드를 잘 할당 해주셨는데,
구조분해할당을 쓰면

const {
writer : {image, nickname},
content
} = item 

이렇게도 표현할 수 있고, 원하는 프로퍼티에 직접 접근도 가능해서 사용하기 편리해집니다

[201steve]

이부분도 위에 리뷰처럼 기획서에는 없는 부분인것같은데 확인 바랍니다~

[201steve]

상수로 처리 잘 해주셨습니다 👍

[201steve]

여기는 만들어지나다 만 것 같은 함수네요~ :-)

[201steve]

이런 전역에서 쓰이는 컬러값을 ThemeProvider로 받아서 써보세요 :-) 훨씬 간편할꺼에요!