[김창희] sprint7 #103

changhui-chan · 2024-09-21T14:47:56Z

요구사항

기본

상품 상세

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

상품 문의 댓글

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

주요 변경사항

배포 사이트

https://cheerful-salamander-19dcbf.netlify.app/

멘토에게

저번 코드리뷰 내용은 반영하지 못했습니다

GANGYIKIM

창희님 이번 스프린트 미션하시느라 고생하셨습니다.
코드리뷰는 조언일 뿐이니 원하시는 방향으로 작업하시면 좋겠습니다~

이번에 상품 상세 페이지를 구현해주셨는데, products/{productId} api를 확인해보니 해당 데이터에 isFavorite 값이 있습니다. 제 생각에는 items 페이지에서는 좋아요 버튼 클릭이 안되게 하고(해당 데이터 값 -products api-에서는 isFavorite`가 없기 때문에) 상품 상세 페이지에서 해당 데이터 기반으로 좋아요 버튼 로직을 구현하시면 더 좋을 것 같습니다.

GANGYIKIM · 2024-09-23T00:22:18Z

src/components/items/productId/BackButton.jsx

+
+  return (
+    <div className={styles['container']}>
+      <Link to='/items'><button className={styles['back-button']}>목록으로 돌아가기<Back /></button></Link>


P2:
link 태그안에 기능없는 button 태그를 사용하시기 보다 link태그를 원하시는 디자인으로 스타일링해서 사용하시길 추천드립니다.
의미없는 button, link태그는 가독성에 좋지 않습니다.

Suggested change

<Link to='/items'><button className={styles['back-button']}>목록으로 돌아가기<Back /></button></Link>

<Link to='/items' className={styles['back-button']}>목록으로 돌아가기<Back /></Link>

GANGYIKIM · 2024-09-23T00:25:11Z

src/components/items/productId/ProductImage.jsx

+    <div>
+      <img className={styles['container']} src={productImage} alt="상품 이미지" />
+    </div>


P2:
div 가 아무런 역할이 없는 것 같은데 필요한가요? 만약 불필요한 태그라면 없는 것이 더 좋겠습니다.

GANGYIKIM · 2024-09-23T00:26:44Z

src/components/items/productId/Line.jsx

+
+const Line = ({marginTop = 0, marginBottom = 0}) => {
+  return (
+    <hr style={{marginTop:marginTop, marginBottom: marginBottom}} className={styles['line']} />


P2:

Suggested change

<hr style={{marginTop:marginTop, marginBottom: marginBottom}} className={styles['line']} />

<hr style={{marginTop, marginBottom}} className={styles['line']} />

GANGYIKIM · 2024-09-23T00:29:03Z

src/components/items/productId/useProductIdState.js

+  const [commentCount, setCommentCount] = useState();
+  const [commentData, setCommentData] = useState([]);
+  const [createAt, setCreateAt] = useState();
+  const [updateAt, setUpdateAt] = useState('2024. 01. 02');


P2:
default value인 2024.01.12 가 어떤 의미일까요? 만약 고정값이 아니라면 createAt처럼 초기값을 undefined하시는게 더 좋지 않을까합니다.

GANGYIKIM · 2024-09-23T00:30:11Z

src/components/items/productId/ProductSummary.jsx

+          <span key={index}className={styles['product-tag']}>#{tag}</span>
+        ))}
+      </div>
+      {productTags.length === 0 && <span className={styles['empty-tag']}></span>}


P3:
아래 코드도 동일동작합니다.

Suggested change

{productTags.length === 0 && <span className={styles['empty-tag']}></span>}

{!productTags.length && <span className={styles['empty-tag']}></span>}

GANGYIKIM · 2024-09-23T00:35:55Z

src/pages/items/productId/ProductId.jsx

+      setProductName(product.name);
+      setProductPrice(product.price);
+      setProductDescription(product.description);
+      setProductImage(product.images);
+      setProductTags(product.tags);
+      setProductFavoriteCount(product.favoriteCount);


P2:
각 데이터의 항목을 다 state로 쪼개 저장하니 코드를 파악하기 어려운 것 같습니다.
하나의 state로 관리하시기를 추천드려요.

Suggested change

setProductName(product.name);

setProductPrice(product.price);

setProductDescription(product.description);

setProductImage(product.images);

setProductTags(product.tags);

setProductFavoriteCount(product.favoriteCount);

setProductData(product);

GANGYIKIM · 2024-09-23T00:37:21Z

src/pages/items/productId/ProductId.jsx

+      {
+        commentData && commentData.map((user, index) => (
+          <>
+            <InquireItem
+              key={index}
+              content={user.content}
+              userNickname={user.writer.nickname}
+              userImage={user.writer.image}
+              updateAt={user.updatedAt}
+              commentData={commentData}
+              setCommentData={setCommentData}
+              />
+            <Line marginTop={12} marginBottom={24}/>
+          </>
+        ))
+      }
+      {
+        commentData.length <= 0 && <div className={styles['no-inquire']}><NoInquire />아직 문의가 없어요</div>
+      }


P2:
해당 페이지에서 comment부분과 상품 데이터 부분을 분리하면 위의 로직들도 분리되어서 더 깔끔할 것 같습니다.

Suggested change

{

commentData && commentData.map((user, index) => (

<>

<InquireItem

key={index}

content={user.content}

userNickname={user.writer.nickname}

userImage={user.writer.image}

updateAt={user.updatedAt}

commentData={commentData}

setCommentData={setCommentData}

/>

<Line marginTop={12} marginBottom={24}/>

</>

))

}

{

commentData.length <= 0 && <div className={styles['no-inquire']}><NoInquire />아직 문의가 없어요</div>

}

<ProductComment /> // 컴포넌트 분리하며 관련 데이터 호출 함수도 분리

만약 dataFetch를 page에서만 하기로 규칙을 세우신 거라면 코멘트와 상품 관련 부분을 나눠 커스텀 훅으로 분리하시면 더 깔금할 것 같습니다.

GANGYIKIM · 2024-09-23T00:43:00Z

src/pages/items/productId/ProductId.jsx

+  useEffect(() => {
+    const asyncFunction = async () => {
+      const response = await fetchData(`${API_USER_COMMENTS}/${id}/comments`, {productId: id, limit: 3});
+      setCommentCount(response.data.list.length);


P2:
따로 state로 빼지않고 commentData.length로 판별가능한 사항이라 없으면 더 좋을 것 같네요~

Suggested change

setCommentCount(response.data.list.length);

changhui-chan added 13 commits September 21, 2024 17:37

feat: 스프린트 7 미션 진행

b9e01aa

fix: 미수정 부분 수정

33c7a19

chore: 디렉토리 경로 수정

e938887

feat: productId 컴포넌트 분리 파일 생성

60aaece

feat: productid 페이지 api, 커스텀 훅, 컴포넌트 연결

963cae0

feat: ProductImage 컴포넌트 jsx css 작성

f77b010

feat: ProductSummary 컴포넌트 jsx css 구현

53d86cb

fix: ProdjctSummary jsx 버그 수정

0eb545e

chore: ProductSummary css 수정

2b79de6

feat: Inquire 컴포넌트 jsx css 추가 및 에러 수정

343912f

chore: Line 반응형 적용 문제 해결

af1c0a6

feat: Inquire 수정/삭제 기능 추가

4ddb038

feat: BackButton 추가 및 디자인 적용 문제 수정

bd7994c

changhui-chan changed the base branch from main to React-김창희 September 21, 2024 14:48

changhui-chan requested a review from GANGYIKIM September 21, 2024 14:48

changhui-chan added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Sep 21, 2024

changhui-chan added 4 commits September 21, 2024 23:51

chore: BackButton 마진 바텀 수정

14416ac

chore: BackButton 마진 탑 수정

3b339d8

feat: no inquire 이미지 추가 및 관련 로직 작성

4e31299

fix: ProductSummary toLocalString

a4cc55f

GANGYIKIM approved these changes Sep 23, 2024

View reviewed changes

GANGYIKIM merged commit c6905e6 into codeit-bootcamp-frontend:React-김창희 Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김창희] sprint7 #103

[김창희] sprint7 #103

changhui-chan commented Sep 21, 2024

GANGYIKIM left a comment

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

GANGYIKIM Sep 23, 2024

	<Link to='/items'><button className={styles['back-button']}>목록으로 돌아가기<Back /></button></Link>
	<Link to='/items' className={styles['back-button']}>목록으로 돌아가기<Back /></Link>

	<hr style={{marginTop:marginTop, marginBottom: marginBottom}} className={styles['line']} />
	<hr style={{marginTop, marginBottom}} className={styles['line']} />

	{productTags.length === 0 && <span className={styles['empty-tag']}></span>}
	{!productTags.length && <span className={styles['empty-tag']}></span>}

[김창희] sprint7 #103

[김창희] sprint7 #103

Conversation

changhui-chan commented Sep 21, 2024

요구사항

기본

주요 변경사항

배포 사이트

멘토에게

GANGYIKIM left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment