Conversation
There was a problem hiding this comment.
창희님 이번주차 스프린트 미션 고생하셨습니다~
기존에 작업하셨던 양이 꽤 되는데 그것도 다 옮기시고 손이 정말 빠르시군요 👍
다음주 스프린트 미션과 분리작업도 화이팅입니다~
아무튼 시간이 필요한 작업들이 많네요.. 드롭다운의 디테일한 동작이라던지 키보드로만 홈페이지를 탐색하는 사용자를 위한 기능 고려와 같이 제가 놓친 구현하면 좋은 동작이나 기능들 있으면 첨언해주시면 감사하겠습니다.: 컴포넌트의 동작은 생각보다 세세한 부분까지 고려해야합니다. 제가 코멘트로 남긴 상품 가격 인풋만해도, 창희님께서 사용자를 위해 ','를 추가하고 나서는 이에 따라 필요한 로직들이 여러개가 발생되지요. dropdown도 그러합니다. esc 키를 눌렀을 때 dropdown이 닫히게 하기, dropdown에 focus가 있을 시 arrowDown, arrowUp key로 option들을 탐색하게 하기, dropdown option에서 key enter 이벤트 발생시 해당 option이 적용되게 하기 등 다양한 기능이 있으므로 한번 고민해보시고 창희님이 생각하시는 좋은 동작에 대해 고민해보시는것을 추천드려요~
| <NavLink | ||
| to="/free" | ||
| className={ | ||
| isFreeBoardPath ? `${styles['nav-link']} ${styles['active']}` : styles['nav-link'] | ||
| } | ||
| > |
There was a problem hiding this comment.
P1:
NavLink 태그에서 to 값과 현재 페이지가 일치하는지에 대한 값을 제공합니다.
아래처럼 사용하시는 것을 추천드립니다.
| <NavLink | |
| to="/free" | |
| className={ | |
| isFreeBoardPath ? `${styles['nav-link']} ${styles['active']}` : styles['nav-link'] | |
| } | |
| > | |
| <NavLink | |
| to="/free" | |
| className={({ isActive }) | |
| isActive ? `${styles['nav-link']} ${styles['active']}` : styles['nav-link'] | |
| } | |
| > |
*react-router-dom NavLink
https://reactrouter.com/en/main/components/nav-link
| import styles from "./AddProduct.module.css"; | ||
|
|
||
| const AddProduct = ({ | ||
| productImage, |
There was a problem hiding this comment.
P2:
사용하지 않는 속성은 지워주시는게 가독성에 더 좋습니다.
| productImage, |
| productTitle, | ||
| productDescription, | ||
| productPrice, | ||
| productTags, |
There was a problem hiding this comment.
P2:
속성값을 모두 받는 것보다 아래처럼 disabled 값을 받아서 전달만 해주시면 좋겟습니다.
해당 컴포넌트에서 이러한 속성을 모두 알 필요가 없으니까요~
| productTitle, | |
| productDescription, | |
| productPrice, | |
| productTags, | |
| isDisabled |
|
|
||
| const AddProductImage = ({ productImage, setProductImage }) => { | ||
| const imageContentRef = useRef(null); | ||
| const errorMessageRef = useRef(null); |
There was a problem hiding this comment.
P1:
react에서 useRef는 특수한 경우 사용되는 escape hatch 입니다.
이러한 경우는 useState를 사용하시는 것을 추천드립니다.
https://ko.react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state
| <p>이미지 등록</p> | ||
| </div> | ||
| </label> | ||
| <input className={styles['image-upload-input']} onChange={handleFileRead} type="file" id="file" accept="image/*" /> |
There was a problem hiding this comment.
P2:
accept 속성은 유저가 파일선택시 가능한 파일 확장자를 "제안"하는 역할을 합니다.
여기서 중요한점은 제한하는 것이 아니라는 것입니다. 유저는 해당 속성외의 파일을 업로드할 수 있습니다.
따라서 accept로 제안한 확장자 이외의 것을 업로드할 시 onChange같은 함수에서 이를 확인해
업로드하지 않는 로직이 필요합니다.
| const ProductTagList = ({ productTags, setProductTags}) => { | ||
|
|
||
| const deleteTag = (tag) => { | ||
| setProductTags(productTags.filter((e) => e !== tag)); |
There was a problem hiding this comment.
P1:
e는 일반적으로 event를 의미하는 것이니 다른 이름으로 하시는것이 가독성에 더 좋습니다.
const deleteTag = (selectedTag) => {
setProductTags(productTags.filter((tag) => tag !== selectedTag));
| @@ -0,0 +1,22 @@ | |||
| import { useState } from "react"; | |||
|
|
|||
| export const useAddItemSharedData = () => { | |||
There was a problem hiding this comment.
P2:
data보다 state가 더 적절한 이름인 것 같습니다.
| export const useAddItemSharedData = () => { | |
| export const useAddItemState= () => { |
| <SearchIcon className={styles['search-icon']} /> | ||
| <input className={styles['search-input']} type="text" placeholder="검색할 상품을 입력해주세요" /> | ||
| </div> | ||
| <Link to='/additem'><button className={styles['search-button']}>상품 등록하기</button></Link> |
There was a problem hiding this comment.
P2:
Link태그안에 button태그가 있기보다 아래처럼 하시는 것을 추천드립니다.
| <Link to='/additem'><button className={styles['search-button']}>상품 등록하기</button></Link> | |
| <Link to='/additem' className={styles['search-button']}>상품 등록하기</Link> |
| { | ||
| isDropdown && | ||
| <ul className={styles['search-dropdown-list']}> | ||
| <li onClick={() => { setSortProduct('최신순'); setIsDropdown(!isDropdown) }}>최신순</li> |
There was a problem hiding this comment.
P2:
li보다 clickable tag로 사용하시길 추천드립니다.
| <li onClick={() => { setSortProduct('최신순'); setIsDropdown(!isDropdown) }}>최신순</li> | |
| <li> | |
| <button type='button' | |
| value='최신순' | |
| // 해당 함수 좋아요와 공통으로 사용가능 | |
| onClick={(e) => { | |
| setSortProduct(e.target.value); | |
| setIsDropdown(!isDropdown) | |
| }}>최신순</button> | |
| </li> |
There was a problem hiding this comment.
P1:
페이지네이션이 tablet,moblie에서 20 page에 있다고 가정해봅시다.
그러다가 pc 사이즈로 화면 사이즈가 커지게 되면 해당 사이즈에서는 20 page가 없기 때문에 빈 화면이 노출됩니다.
이와 관련된 로직도 추가해주시면 좋을 것 같고, 컴포넌트 작성후 동작에 대한 테스트를 해보시기를 추천드립니다~
기본
베스트 상품
Desktop : 4개 보이기
Tablet : 2개 보이기
Mobile : 1개 보이기
전체 상품
Desktop : 12개 보이기
Tablet : 6개 보이기
Mobile : 4개 보이기
심화
주요 변경사항
배포 사이트
https://cheerful-salamander-19dcbf.netlify.app/
멘토에게