[유용민] sprint7 #206

Yongmin0423 · 2025-05-11T08:40:57Z

요구사항

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다

https://15-sprint-mission-tawny.vercel.app/

기본

상품 상세

상품 상세 페이지 주소는 "/items/{productId}" 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.

=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명

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

상품 문의 댓글

문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
response 로 받은 아래의 데이터로 화면을 구현합니다

=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간

심화

주요 변경사항

스크린샷

멘토에게

수정하기는 해당 댓글을 수정할 수 있도록 input만 나오도록 해 놓았는데, 이는 원래 로그인 한 사람만 가능하게 해야 하지 않을까 싶어서 api까지 구현해 놓지는 않았습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

GANGYIKIM

용민님 7번째 미션 작업 고생하셨습니다.
Date 관련 로직들도 분리해주시고 가독성을 신경쓰신 부분들이 많이 보여 좋았습니다.
다음 미션도 화이팅입니다!

수정하기는 해당 댓글을 수정할 수 있도록 input만 나오도록 해 놓았는데, 이는 원래 로그인 한 사람만 가능하게 해야 하지 않을까 싶어서 api까지 구현해 놓지는 않았습니다.:
말씀하신 것처럼 댓글 디자인에 유저 정보가 있어 로그인 한 사람만 댓글을 달 수 있는 것이 맞습니다. 추후 로그인 기능을 구현하시고 12주차에서 댓글 달기, 수정, 삭제 기능을 구현할 수 있게 되어 있으니 그때 추가하시면 될 것 같아요!

GANGYIKIM · 2025-05-15T01:26:23Z

src/assets/utils.js

+  const now = new Date().getTime();
+  const diff = Math.round((time - now) / dayInMs);
+
+  const formatter = new Intl.RelativeTimeFormat("ko");


👍 칭찬
내장 메소드로 간단하게 코드 작성하신 것 너무 좋아요~
다만 지금 코드의 경우 ${day}일 전의 형태로만 나오고 있어요.
디자인을 확인해보시면, days, months 등의 다양한 형태로 나오고 있으니
추후 기획대로 변경해보시면 더 좋을 것 같아요!

GANGYIKIM · 2025-05-15T01:26:58Z

src/assets/utils.js

👍 칭찬
이런 formatting 로직들은 사이트에서 재사용되는 경우가 대부분이니 따로 분리해주신 점 좋아요!

GANGYIKIM · 2025-05-15T01:46:25Z

src/assets/utils.js

+  return formatter.format(diff, "days");
+}
+
+export function formatDateToYMD(dateString) {


💊 제안
formatToTimeAgo 함수에서 Intl 을 이용하신 것처럼 지금 함수에서도 Intl.DateTimeFormat을 이용해서 작성하실 수 있습니다~

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

GANGYIKIM · 2025-05-15T01:49:05Z

src/pages/ProductDetail.jsx

+              {item.tags &&
+                item.tags.map((tag) => (


💊 제안
item 의 기본값이 null이므로 아래처럼 optional chaining을 이용해서 작성하셔도 됩니다~

Suggested change

{item.tags &&

item.tags.map((tag) => (

{item?.tags?.map((tag) => (

GANGYIKIM · 2025-05-15T01:49:49Z

src/pages/ProductDetail.jsx

+            <div className="flex border border-[#E5E7EB] rounded-full px-2 py-0.5">
+              <HeartIcon />
+              <p>{item.favoriteCount}</p>
+            </div>


💊 제안
추후 좋아요 버튼으로 활용될 영역이니 button 태그가 더 적절할 것 같아요~

GANGYIKIM · 2025-05-15T02:17:03Z

src/pages/ProductDetail.jsx

+          <button
+            type="submit"
+            className={`py-2.5 px-4 rounded-md transition-all text-white cursor-pointer
+    ${
+      commentText.trim() === ""
+        ? "bg-gray-300 cursor-not-allowed"
+        : "bg-[#3692FF] hover:scale-120"
+    }
+  `}


💊 제안

Suggested change

<button

type="submit"

className={`py-2.5 px-4 rounded-md transition-all text-white cursor-pointer

${

commentText.trim() === ""

? "bg-gray-300 cursor-not-allowed"

: "bg-[#3692FF] hover:scale-120"

}

`}

<button

type="submit"

className={`py-2.5 px-4 rounded-md transition-all text-white cursor-pointer ${commentText.trim() === "" ? "bg-gray-300 cursor-not-allowed" : "bg-[#3692FF] hover:scale-120"}`}

GANGYIKIM · 2025-05-15T02:19:05Z

src/pages/ProductDetail.jsx

+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}


💊 제안
지금처럼 textarea 값을 useState로 제어하면 사용자가 입력할 때마다 컴포넌트가 리렌더링됩니다.
지금 코드상에서는 textarea 값을 바꿔주는 것이 아니라 제어 컴포넌트로 관리할 필요가 없을 것 같아요!
이를 비제어 컴포넌트로 바꾸셔서 불필요한 리렌더링을 줄이시는 것을 추천드려요!

등록 버튼의 활성화를 위해서는 isValidComment와 같은 다른 props를 만드시는게 더 적절할 것 같아요.

GANGYIKIM · 2025-05-15T02:20:16Z

src/pages/ProductDetail.jsx

+          comments.map((comment) => (
+            <div className="flex flex-col gap-10 border-b border-b-gray-200 pb-5">


❗️ 수정요청

Suggested change

comments.map((comment) => (

<div className="flex flex-col gap-10 border-b border-b-gray-200 pb-5">

comments.map((comment) => (

<div key={comment.id} className="flex flex-col gap-10 border-b border-b-gray-200 pb-5">

GANGYIKIM · 2025-05-15T02:22:29Z

src/pages/ProductDetail.jsx

+                      취소
+                    </button>
+                    <button
+                      className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl"


❗️ 수정요청

Suggested change

className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl"

className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl cursor-pointer"

GANGYIKIM · 2025-05-15T02:23:29Z

src/pages/ProductDetail.jsx

+                    <VerticalEllipsis />
+                  </button>
+                  {openMenuId === comment.id && (
+                    <div className="absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded shadow-md z-10">


💊 제안
메뉴 외의 영역을 눌렀을때도 닫히게 해주시면 더 사용성이 좋아질 것 같아요.

Yongmin0423 added 6 commits May 10, 2025 18:16

feat: detail 페이지 상품 소개 및 문의하기

1cbc633

feat: comment section

2c14c37

feat: 수정하기/삭제하기 드롭다운 및 수정하기 인풋

1a8b169

feat: 반응형 디자인

db941c0

feat: 문의하기 내용 추가 시 버튼 비활성화 제거

a23d2cf

feat: 날짜 포맷터 추가 및 vercel.json 추가

4f4efaa

Yongmin0423 requested a review from GANGYIKIM May 11, 2025 08:41

Yongmin0423 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 11, 2025

GANGYIKIM approved these changes May 15, 2025

View reviewed changes

GANGYIKIM merged commit 671b44c into codeit-bootcamp-frontend:React-유용민 May 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[유용민] sprint7 #206

[유용민] sprint7 #206

Uh oh!

Yongmin0423 commented May 11, 2025

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

GANGYIKIM May 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		value={commentText}
		onChange={(e) => setCommentText(e.target.value)}

		comments.map((comment) => (
		<div className="flex flex-col gap-10 border-b border-b-gray-200 pb-5">

	className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl"
	className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl cursor-pointer"

[유용민] sprint7 #206

[유용민] sprint7 #206

Uh oh!

Conversation

Yongmin0423 commented May 11, 2025

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

GANGYIKIM left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants