[김희성] sprint 7#171
Hidden character warning
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
희성님 이번에도 열심히 달려주셨군요! 💯
오랜만에 시맨틱 태그를 다시 점검해 보고 컴포넌트 사용을 좀 더 적극적으로 해보시면 더욱 좋을 거 같습니다 :)
상세 페이지의 경우엔 #FCFCFC의 색상을 가졌기에 이를 적용하려고 했으나, width와 height 100%로 전체에 적용이 되지 않는 문제를 겪었습니다. 이 문제를 어떻게 해결하면 좋을지 조언을 듣고 싶습니다. 제 생각엔 padding의 영향을 받는 것 같은데 간격을 가지면서 배경색을 전체에 씌우는 좋은 방법이 있는지 궁금해요!
-> 지금 잘 해주셨습니다..!? 특별한 방법이 있는 거는 아니고 지금 처럼 상단에 배경색 레이어 하나, 그리고 아래쪽에 레이아웃용 레이어를 작성해 주시면 됩니다 :) 아마 body에 100vh가 들어가 있어서 짤리는 문제가 있었나 싶기도 하네요 🤔
| return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | ||
| }; | ||
|
|
||
| const formatDate = (isoDate) => { |
There was a problem hiding this comment.
이런 함수들은 utils 같은 폴더로 따로 빼시면 좀 더 깔끔하겠죠! :)
| <img src={kebab} alt="케밥" /> | ||
| </section> | ||
| <p className="product-detail-price"> | ||
| {formatPrice(productDetail.price)}원 |
There was a problem hiding this comment.
productDetail?.price?.toLocaleString() localeString을 사용하실 수 있어요!
| <section className="item-detail-container"> | ||
| {productDetail && ( | ||
| <section className="product-detail-info-section"> | ||
| <section> |
There was a problem hiding this comment.
시맨틱 태그를 신경써 주시면 좋을 거 같습니다! section의 경우 독립적인 구획을 나타냅니다! 단순 스타일이나 레이아웃을 위해서라면 div가 적절하겠네요 :)
| <section className="product-detail-content-container"> | ||
| <section className="product-detail-title-container"> | ||
| <section className="product-detail-name-container"> | ||
| <p className="product-detail-name">{productDetail.name}</p> |
There was a problem hiding this comment.
현재 페이지에서 p가 많이 쓰이고 있는데, p는 문단을 나타냅니다! 전반적으로 확인해 주시면 좋을 거 같아요 :)
| setProductDetail(res); | ||
| }; | ||
|
|
||
| const getComments = async (productId) => { |
There was a problem hiding this comment.
지금은 댓글을 5개만 불러오고 있습니다. 요구 사항에는 없지만, 사실 무한스크롤로 구현된 api입니다!
여유가 되시면 추가로 구현해 보세요~!
| <section className="ask-container"> | ||
| <form className="ask-form-container"> | ||
| <p className="ask-form-title">문의하기</p> | ||
| <textarea |
| placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." | ||
| style={{ color: commentInput.trim() ? "#1F2937" : "#9ca3af" }} | ||
| /> | ||
| <button |
There was a problem hiding this comment.
버튼 같은 것들도 미리 컴포넌트화하면 편합니다 :)
| import backIcon from "../../../asset/icon/back.svg"; | ||
| import { commentServices } from "../../../api/commentServices"; | ||
|
|
||
| export default function ItemsDetail() { |
There was a problem hiding this comment.
지금도 괜찮지만,
상품 정보와 댓글이 섞여 있는데 두 관심사를 분리하면 훨씬 깔끔해질 거 같네요 :)
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
PC버전
댓글 작성
댓글 수정
PC 버전 댓글 없을 경우
태블릿 반응형
모바일 반응형
멘토에게
#FCFCFC의 색상을 가졌기에 이를 적용하려고 했으나, width와 height 100%로 전체에 적용이 되지 않는 문제를 겪었습니다. 이 문제를 어떻게 해결하면 좋을지 조언을 듣고 싶습니다. 제 생각엔 padding의 영향을 받는 것 같은데 간격을 가지면서 배경색을 전체에 씌우는 좋은 방법이 있는지 궁금해요!