[유동환] sprint7 #221
[유동환] sprint7 #221
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
동환님 7번째 미션 수고하셨습니다!
필요한 로직들만 잘 구현하셨습니다.
로그인 구현 이후 코멘트 생성, 수정, 삭제 로직도 추가해보시면 좋겠습니다.
다음 미션도 화이팅입니다!
| <Link to={`/Items/${item.id}`} css={itemLinkStyle} > | ||
| <ItemList key={item.id} item={item} /> |
There was a problem hiding this comment.
❗️ 수정요청
| <Link to={`/Items/${item.id}`} css={itemLinkStyle} > | |
| <ItemList key={item.id} item={item} /> | |
| <Link key={item.id} to={`/Items/${item.id}`} css={itemLinkStyle} > | |
| <ItemList item={item} /> |
| <Link to={`${item.id}`} css={linkStyle}> | ||
| <ItemList key={item.id} item={item}/> |
There was a problem hiding this comment.
❗️ 수정요청
| <Link to={`${item.id}`} css={linkStyle}> | |
| <ItemList key={item.id} item={item}/> | |
| <Link key={item.id} to={`${item.id}`} css={linkStyle}> | |
| <ItemList item={item}/> |
| @media(max-width: 425px) { | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
❗️ 수정요청
| @media(max-width: 425px) { | |
| flex-direction: column; | |
| } | |
| @media(max-width: 425px) { | |
| flex-direction: column; | |
| } |
| const likeSection = css ` | ||
| // display: inline-flex; |
There was a problem hiding this comment.
❗️ 수정요청
사용하지 않는 코드는 지워주세요~
| const likeSection = css ` | |
| // display: inline-flex; | |
| const likeSection = css ` |
| <h3>{item.name}</h3> | ||
| <img src={kebabIcon} css={editIconStyle} /> | ||
| </div> | ||
| <h2>{item.price}원</h2> |
There was a problem hiding this comment.
💊 제안
금액의 경우 (,)를 통해 단위가 구분되도록 아래처럼 작성해주세요!
| <h2>{item.price}원</h2> | |
| <h2>{item.price.toLocaleString()}원</h2> |
| <p>{new Date(item.createdAt).toISOString().slice(0, 10)}</p> | ||
| </div> | ||
| <div css={likeSection}> | ||
| <button>💛</button> |
There was a problem hiding this comment.
💊 제안
노란 하트 이모지가 귀엽네요. 다만 디자인과 다르니 확인해보시고 디자인대로 수정하시면 좋겠습니다!
| </div> | ||
| <div css={userText}> | ||
| <h4>{item.ownerNickname}</h4> | ||
| <p>{new Date(item.createdAt).toISOString().slice(0, 10)}</p> |
There was a problem hiding this comment.
💊 제안
날짜를 formatting하는 로직들은 일반적으로 재사용되는 경우가 많으니 util로 분리하시면 좋을 것 같아요.
| value={commentTextarea} | ||
| onChange={handleChange} | ||
| /> | ||
| <button type="button" css={[commentButtonStyle, isButtonActive && activeButtonStyle]} >등록</button> |
There was a problem hiding this comment.
❗️ 수정요청
지금의 경우 스타일만 disabled처럼 보이게 적용이 된 것이고 실제로는 클릭이 가능하게 처리되어 있습니다.
불필요한 렌더링을 줄이기 위해 commentButtonStyle 내부에 :disabled 가상 클래스로 스타일링해주세요~
| <button type="button" css={[commentButtonStyle, isButtonActive && activeButtonStyle]} >등록</button> | |
| <button type="button" disabled={isButtonActive} css={commentButtonStyle}>등록</button> |
| <Link to={"/items"} css={linkStyle}> | ||
| <button type='button' css={backToListButtonStyle} > | ||
| <p>목록으로 돌아가기</p> | ||
| <img src={backIcon} /> | ||
| </button> | ||
| </Link> |
There was a problem hiding this comment.
💊 제안
단순 페이지 이동이니 Link 태그를 사용하시는 것이 더 적절해보입니다.
디자인이 버튼처럼 보이신다고 꼭 버튼 태그를 사용하실 필요는 없습니다. Link 태그에 css로 디자인대로 스타일링해주세요~
| <Link to={"/items"} css={linkStyle}> | |
| <button type='button' css={backToListButtonStyle} > | |
| <p>목록으로 돌아가기</p> | |
| <img src={backIcon} /> | |
| </button> | |
| </Link> | |
| <Link to={"/items"} css={[linkStyle,backToListButtonStyle]}> | |
| <p>목록으로 돌아가기</p> | |
| <img src={backIcon} /> | |
| </Link> |
| return body | ||
| } | ||
|
|
||
| export async function getProductComments(productId, limit=10) { |
There was a problem hiding this comment.
❗️ 수정요청
지금은 고정값으로 코멘트를 불러오고 있어요~
모든 코멘트가 보이도록 무한스크롤 방식으로 구현해주시면 좋겠습니다!
2 participants
https://scintillating-ganache-14d305.netlify.app/Items
요구사항
기본
상품 상세
상품 문의 댓글
심화
주요 변경사항
스크린샷
데스크탑
모바일
멘토에게