[김수연] sprint10 #175
[김수연] sprint10 #175
Conversation
ramong26
added
순한맛🐑
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
수연님 요즘 정말 열심히 달리고 계시는군요..!! 👍 👍 👍
어마어마한 작업량에 깜짝 놀랐습니다 🤣
리팩토링도 잘 하고 계시고, 서서히 정리되는 거 같으니 다음 스프린트도 화이팅입니다!
| const [productTitle, setProductTitle] = useState('') | ||
| const [productDescription, setProductDescription] = useState('') | ||
|
|
||
| const isState = productTitle.length >= 1 && productDescription.length >= 1 |
There was a problem hiding this comment.
isDisabled, isValid 등이 좀 더 명확할 거 같습니다! (변수, 함수명은 늘 중요하죠 🤣)
| <TextInputPlaceholder | ||
| placeholder={'제목을 입력해주세요'} | ||
| height="58px" | ||
| padding="16px 24px 16px 24px" |
There was a problem hiding this comment.
padding 같은 것들은 공통 스타일로 맞출 수 있을 거 같네요 🤔
| const BoardDetailArrary = ({ article }: BestBoardsProps) => { | ||
| console.log('BoardDetailArrary', article) | ||
| const router = useRouter() | ||
| const handleClickBoardID = () => { |
There was a problem hiding this comment.
단순 페이지 이동이라면 Link를 사용하는 것이 SEO, 접근성에 좋습니다!
| <div> | ||
| <ItemsNavVar isItemsPage={false} isBoardsPage={true} /> | ||
|
|
||
| <div className={styles['bone']}> |
| /> | ||
| )} | ||
| </Bone> | ||
| <div className={styles['bone']}> |
There was a problem hiding this comment.
여기도 깔끔! 👍 👍
이제 필요한 코드 구조 파악도 쉽고 필요한 로직을 찾으러 가기도 좋아보여요!!
| onIconClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | ||
| validate?: (value: string) => string | ||
| value: string | ||
| onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void |
There was a problem hiding this comment.
onChange?: React.ChangeEventHandler<HTMLInputElement>)
이렇게 쓰실 수 있어요!
| import styles from './LoginField.module.scss' | ||
| import clsx from 'clsx' | ||
|
|
||
| interface LoginFieldtProps { |
There was a problem hiding this comment.
기존에 존재하는 HTML 속성들이라면 타입을 따로 넣지 않고,
interface LoginFieldtProps extends React.InputHTMLAttributes<HTMLInputElement> {
//.. HTML 속성 제외 프랍들..
}| onChange={onChange} | ||
| onBlur={handleBlur} | ||
| /> | ||
| {icon && ( |
There was a problem hiding this comment.
어떤 아이콘을 쓸 지, 아이콘을 눌렀을 때 어떤 일이 발생하는지를 밖에서 받았다면 기존에 만드셨던 인풋 컴포넌트를 충분히 활용할 수 있었을 거 같습니다 🤔
공통 컴포넌트를 확장성 있고 재사용 가능하게 만드는 것과, 잘 활용하는 것 모두 중요합니다!
회사에는 보통 내부 디자인 시스템을 가지고 있는데, 잘 활용이 안된다면 유지 보수가 힘들어지죠..!
| const [articleComment, setArticleComment] = useState('') | ||
| const [productQuestion, setProductQuestion] = useState([]) | ||
| const { id } = useParams() | ||
| useEffect(() => { |
There was a problem hiding this comment.
여기는 무한 스크롤 구현이 가능하도록 api가 되어있습니다 🤣
| import BackIcon from '../../../../public/assets/svg/back_icon.svg' | ||
| import NoComment from '../../../../public/assets/svg/no_comment.svg' | ||
|
|
||
| import styles from './BoardCommentList.module.scss' |
There was a problem hiding this comment.
classnames 같은 라이브러리와 함께 하면 동적으로 스타일 주는 것이 조금 더 편합니다
2 participants
요구사항
기본
게시글 등록 페이지 주소는 “/addboard” 입니다.
게시판 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다
게시글 상세 페이지 주소는 “/board/{id}” 입니다.
댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
자유게시판 페이지에서 게시글을 누르면 게시물 상세 페이지로 이동합니다.
게시글 상세 페이지 주소는 “/board/{id}” 입니다.
댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
심화
주요 변경사항
스크린샷
멘토에게