Conversation
| h2 { | ||
| font-weight: 700; | ||
| font-size: 20px; | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| p { | ||
| margin-bottom: 16px; | ||
| font-weight: 700; | ||
| font-size: 18px; | ||
| line-height: 26px; | ||
| } | ||
|
|
||
| input { | ||
| border-radius: 12px; | ||
| background-color: #f3f4f6; | ||
| border: none; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| line-height: 26px; | ||
| } | ||
|
|
||
| input:focus { | ||
| outline: 2px solid #3692ff; | ||
| } |
There was a problem hiding this comment.
이런 태그로 되어있는건 전역적으로 적용이 되니 차라리 global.css 같은 곳을 만들어서 사용하는건 어떨까요?
| textarea { | ||
| border-radius: 12px; | ||
| background-color: #f3f4f6; | ||
| border: none; | ||
| resize: none; | ||
| padding: 16px 24px; | ||
| font-family: "Pretendard", sans-serif; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| line-height: 26px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| textarea:focus { | ||
| outline: 2px solid #3692ff; | ||
| } |
There was a problem hiding this comment.
아니면 CommonTextArea 같은 공통 컴포넌트를 만드는것도 방법일것같아요ㅎㅎ!
| } | ||
|
|
||
| .add-item-btn { | ||
| background-color: #9ca3af; |
There was a problem hiding this comment.
저희 색상값들 변수화 했던것처럼 변수화 해두면 좋을것같네요ㅎㅎ
:root {
...
}| <div id="product-container"> | ||
| <p>상품 이미지</p> | ||
| <input className="add-item-img" type="file" /> | ||
| </div> | ||
| <div id="product-container"> | ||
| <p>상품명</p> | ||
| <input | ||
| className="add-item-name" | ||
| type="text" | ||
| placeholder="상품명을 입력해주세요" | ||
| /> | ||
| </div> | ||
| <div id="product-container"> | ||
| <p>상품 소개</p> | ||
| <textarea | ||
| className="add-item-description" | ||
| placeholder="상품 소개를 입력해주세요" | ||
| /> | ||
| </div> | ||
| <div id="product-container"> | ||
| <p>판매가격</p> | ||
| <input | ||
| className="add-item-price" | ||
| type="text" | ||
| placeholder="판매 가격을 주세요" | ||
| /> | ||
| </div> | ||
| <div id="product-container"> | ||
| <p>태그</p> | ||
| <input | ||
| className="add-item-tag" | ||
| type="text" | ||
| placeholder="태그를 입력해주세요" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
각각의 input 과 textarea 에 들어갈 상태값을 만들고 value랑 onChange 를 사용해보면 좋을것같아요ㅎㅎ!
| <div> | ||
| <div className="add-item"> | ||
| <h2>상품 등록하기</h2> | ||
| <button className="add-item-btn">등록</button> |
There was a problem hiding this comment.
그리고 그 상태값이 나오면 거기서 이 버튼이 활성화 되어도 괜찮을지, 안괜찮을지 로직을 짜서 disabled에 true나 false를 주면 더 좋겠죠ㅎㅎ!
| return ( | ||
| <body> | ||
| <BestProduct /> | ||
| <AllProduct /> |
There was a problem hiding this comment.
이렇게 Product영역을 각각 나눠준거 좋네요. 깔끔하구ㅎㅎ
| const [allProduct, setAllProduct] = useState(); | ||
| const [orderBy, setOrderBy] = useState("recent"); | ||
| const [page, setPage] = useState(1); | ||
| const [keyword, setKeyword] = useState(); |
There was a problem hiding this comment.
키워드에 초기값을 넣어주는게 좋을것같아요!
이렇게 안넣으면 undefined가 keyword에 들어가게되어요ㅠ
그래서 처음에 AllProductList에 아무것도 안보이는 이유가 이거에요...ㅠ
초기값은 가능하면 넣어주는게 좋아요ㅎㅎ!
| fetch( | ||
| `https://panda-market-api.vercel.app/products?page=${page}&pageSize=10&orderBy=${orderBy}&keyword=${keyword}` | ||
| ) | ||
| .then((response) => response.json()) | ||
| .then((data) => setAllProduct(data)); |
There was a problem hiding this comment.
이부분도 잘 하시긴 하셨는데, URL을 통해서 바꿔주는것도 좋을것같아요~
const url = new URL("https://panda-market-api.vercel.app/products");
url.searchParams.append("page", page);
url.searchParams.append("pageSize", "10");
url.searchParams.append("orderBy", orderBy);
url.searchParams.append("keyword", keyword);
fetch(url.toString())
.then((response) => response.json())
.then((data) => setAllProduct(data));There was a problem hiding this comment.
그리구 pageSize도 상태값으로 처리하면 더좋겠죠ㅎㅎ!
| <div className="all-item__list"> | ||
| {allProduct?.list.map((product) => { | ||
| const imageUrl = product.images[0]; | ||
|
|
||
| return ( | ||
| <ProductCard | ||
| key={product.id} | ||
| imageUrl={imageUrl} | ||
| title={product.name} | ||
| price={product.price} | ||
| favoriteCount={product.favoriteCount} | ||
| imageSize={221} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> |
There was a problem hiding this comment.
오~ 엄청 잘하셨네요ㅎㅎ!
id값을 key로 사용하는게 좋아요ㅎㅎ!
| <button | ||
| style={{ | ||
| backgroundColor: currentPage === 1 ? "#2f80ed" : "#ffffff", | ||
| color: currentPage === 1 ? "#f9fafb" : "#6b7280", | ||
| }} | ||
| className="page-nation-btn" | ||
| onClick={() => { | ||
| setPage(1); | ||
| }} | ||
| > | ||
| 1 | ||
| </button> |
There was a problem hiding this comment.
이렇게 하면 1~5까지밖에 안나올텐데, 이걸 동적으로 바꾸려면 어떻게 할 수 있을지 고민해보면 좋을것같아요ㅎㅎ
일단 이렇게 처리하신것만으로도 잘하신거긴 해요 ...!!
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게