Conversation
…ithub-actions [Fix] delete merged branch github action
…sion into React-배현지-sprint7
| import "./BestProductsListItem.css"; | ||
| import favoriteImg from "../assets/favorite.png"; | ||
|
|
||
| function BestProductsListItem({ product }) { |
There was a problem hiding this comment.
[참고해주세요]
사소한 부분이지만
BestProductsListItem -> BestProductListItem
이렇게 ProductList로 해주시는게 조금더 자연스러워 보입니다.
src/components/FileInput.css
Outdated
| margin: 99px auto; | ||
| } | ||
|
|
||
| image-upload-frame-wrapper img { |
There was a problem hiding this comment.
[수정해주세요]
앞에 .을 추가해주세요.
src/components/FileInput.js
Outdated
| {preview && ( | ||
| <img className="image-upload__image" src={preview} alt="이미지" /> | ||
| )} | ||
| {value && ( |
There was a problem hiding this comment.
[수정해주세요]
preview는 있는데, value는 없고,
value는 있는데 preview는 없는 상황이 있나요?
preview만 활용해서 프리뷰 이미지와 클리어 버튼의 조건부 렌더링을 처리해주면 좋을것 같습니다.
| import FileInput from "./FileInput"; | ||
| import "./ProductRagistrationForm.css"; | ||
|
|
||
| function ProductRagistrationForm() { |
There was a problem hiding this comment.
[수정해주세요]
ProductRagistrationForm -> ProductRegistrationForm
a -> e로 바꿔주세요.
| import "./ProductRagistrationForm.css"; | ||
|
|
||
| function ProductRagistrationForm() { | ||
| const [values, setValues] = useState({ |
There was a problem hiding this comment.
[수정해주세요]
변수명은 최대한 정체성이 잘 들어나도록 짓는편이 유지보수에 유리합니다.
value보다는 더 구체적인 이름으로 변경해주세요.
만약에 이름짓기가 어렵다면 state를 조금 더 쪼개보세요!
| <form className="product-ragistration-form" onSubmit={handleSubmit}> | ||
| <div className="product-ragistration-form-wrapper"> | ||
| <form className={styles.product_ragistration_form} onSubmit={handleSubmit}> | ||
| <div className={styles.product_ragistration_form_wrapper}> |
There was a problem hiding this comment.
[참고해주세요]
보통 안에 있는 경우에는 wrapper보다는 inner 라는 용어를 더 많이 사용합니다.
wrapper는 바깥에서 감쌀 때 사용합니다.
| @@ -51,6 +30,7 @@ function ProductRagistrationForm() { | |||
| type="text" | |||
| placeholder="상품명을 입력해주세요" | |||
| required | |||
| autoComplete="off" | |||
There was a problem hiding this comment.
사용성을 위해 autoComplete를 꺼주셨군요 👍
| ></input> | ||
| {values.productTag && ( | ||
| <p className={styles.tag}> |
There was a problem hiding this comment.
[참고해주세요]
태그는 p태그 보다는 span을 더 많이 사용한답니다!
| } | ||
| } | ||
| }; | ||
| detailedComment(); |
There was a problem hiding this comment.
[수정해주세요]
함수명은 동사를 사용해주세요!
| @@ -10,7 +10,7 @@ function ListContainer() { | |||
|
|
|||
| const sortedProducts = products.sort((a, b) => b[order] - a[order]); | |||
|
|
|||
| const handleLoad = async () => { | |||
| const loadList = async () => { | |||
요구사항
기본
상품 상세
response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
상품 문의 댓글
문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
response 로 받은 아래의 데이터로 화면을 구현합니다
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
멘토에게
-sprint6 commit 이후에 있는 것들만 봐주시면 됩니다!