[문주영] Sprint7 #222
[문주영] Sprint7 #222
Conversation
enter 입력 시 tag 추가, tag input이 아닌 실질적인 tag가 있을 때 form 활성화
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
주영님 7번째 미션 작업 고생하셨습니다~
그 전에 코멘트 드린 것들도 반영해주셨네요.
이번에 요구사항들은 잘 구현하셨는데 코드 정리 등이 아쉬웠어요~
다음에는 일관성과 가독성도 고민해보시면 더 좋을 것 같아요!
다음 미션도 화이팅입니다!
There was a problem hiding this comment.
💊 제안
동일한 이미지를 사이즈별로 저장해서 사용하셔야할 필요가 있을까요? 제가 보기엔 하나로 충분해보입니다~
| <Button styleType="large" className="complete-btn" disabled={!isValid} | ||
| onClick={(e) => {e.preventDefault(); navigate("/login");}}> | ||
| 회원가입 | ||
| </Button> |
There was a problem hiding this comment.
💊 제안
지금 코드만으로 보면 버튼 태그보다 Link 태그를 쓰는게 더 적절해보여요.
단순 페이지 이동이 아니라 특정 로직을 실행해야한다면 지금처럼 버튼 태그를 사용하셔도 좋지만 아니라면 Link 태그로 변경해주세요~
링크 태그를 사용하시면 마우스 오른쪽 클릭이나 새탭 기능도 제공이 가능해서 UX 측면에서도 좋습니다.
|
|
||
| useEffect(() => { | ||
| (async () => { | ||
| const { list } = await getProductComments({ productId, limit: 9999 }); |
There was a problem hiding this comment.
❗️ 수정요청
지금은 고정값으로 코멘트를 불러오고 있어요~
모든 코멘트를 불러오기 위해 이렇게 처리해주신 것 같아요. 다만 이렇게 되면 한번에 너무 많은 데이터를 가지고 와야합니다.
추후 부분 부분 나눠서 가지고 오는 방식으로 수정해서 무한 스크롤 방식으로 구현하시면 더 좋을 것 같아요!
| return (<div id="item-product"> | ||
| <Nav type="profile" /> |
There was a problem hiding this comment.
❗️ 수정요청
| return (<div id="item-product"> | |
| <Nav type="profile" /> | |
| return ( | |
| <div id="item-product"> | |
| <Nav type="profile" /> |
| <form className="inquiry" onChange={handleChange}> | ||
| <Input label="문의하기" name="comment" type="textarea" required placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." /> | ||
| <Button type="button" disabled={disabled}>등록</Button> | ||
| </form> |
There was a problem hiding this comment.
💊 제안
form 으로 감싸주신 점 좋습니다~ 다만 등록 버튼의 type은 submit이 더 적절할 것 같아요!
| <form className="inquiry" onChange={handleChange}> | |
| <Input label="문의하기" name="comment" type="textarea" required placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." /> | |
| <Button type="button" disabled={disabled}>등록</Button> | |
| </form> | |
| <form className="inquiry" onChange={handleChange}> | |
| <Input label="문의하기" name="comment" type="textarea" required placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." /> | |
| <Button type="submit" disabled={disabled}>등록</Button> | |
| </form> |
| {children} | ||
| <img src={icX} /> | ||
| function Tag({ onXClick, children, className, ...props }) { | ||
| return (<div className={styles.tag+' '+className+' '+(onXClick ? styles.x : '')} {...props}> |
There was a problem hiding this comment.
💊 제안
아래처럼 작성하시는 것도 가능합니다~
| return (<div className={styles.tag+' '+className+' '+(onXClick ? styles.x : '')} {...props}> | |
| return ( | |
| <div className={`${styles.tag} ${className} ${onXClick ? styles.x : ''}`} {...props}> |
| import styles from "./Input.module.css"; | ||
|
|
||
| function Input ({ label, name, className, inputClassName, type, children, ...props }) { | ||
| function Input ({ label, name, className, inputClassName, type, inputRef, children, ...props }) { |
There was a problem hiding this comment.
💊 제안
컴포넌트에 ref를 전달하고 싶을때 React 18에서는 문서에서 권장하는 방식은 forwardRef를 사용하시는 것이 좋습니다.
추가로 React 19에서는 더이상 사용되지 않는다고 하니 염두에 두시고 사용하시면 좋겠습니다.
| const option = { recent: "최신순", favorite: "좋아요순", } | ||
|
|
||
| function Dropdown({ state, setState, mode }) { | ||
| const [isOpen, setIsOpen] = useState(false); |
There was a problem hiding this comment.
💬 여담
reducer 를 사용해 아래처럼 간단하게도 작성 가능합니다~
| const [isOpen, setIsOpen] = useState(false); | |
| const [isOpen, toggleIsOpen] = useReducer((prev) => !prev, false); |
2 participants
요구사항
기본
상품 상세
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
상품 문의 댓글
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> updatedAt : 문의글 마지막 업데이트 시간
심화
주요 변경사항
스크린샷
멘토에게