Conversation
| {/* <Image | ||
| src={board.image} | ||
| <Image | ||
| src={board.image || defaultImage} |
There was a problem hiding this comment.
board에 image가 없는 경우 defaultImage를 잘 넣어주셨네요!
추가로 board에 image가 있더라도 이미지 로딩 시 에러가 발생했을때 defaultImage를 넣어주는 것도 반영해주시면 좋을 것 같습니다.
| @@ -31,7 +32,8 @@ function FileInput({ value, onChange }: FileInputType) { | |||
| const nextpreview = URL.createObjectURL(value); | |||
|
|
|||
| setPreview(nextpreview); | |||
| console.log(nextpreview); | |||
| previewChange(nextpreview); | |||
| // console.log(nextpreview); | |||
There was a problem hiding this comment.
불필요한 주석은 지워주시면 좋을 것 같습니다.
| @@ -12,7 +12,11 @@ export default function PrimaryButton({ | |||
| disabled: disabled = false, | |||
There was a problem hiding this comment.
여기는 disabled = false 이런식으로 작성해주셔도 똑같이 동작합니다!
| border-radius: 12px; | ||
| padding: 16px 24px; | ||
| background-color: #f3f4f6; | ||
| color: #9ca3af; |
There was a problem hiding this comment.
컬러 변수가 누락된 곳이 종종 있는데, 혹시 사용하지 않고 계시다면 사용해보셔도 좋을 것 같습니다. 컬러를 변수로 관리 하신다면 색상 수정할때 한번에 수정할 수 있거든요.
| color: #9ca3af; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| border: ${({ hasError }) => (hasError ? "1px solid red" : "none")}; |
There was a problem hiding this comment.
hasError가 undefined가 올 수도 있기 때문에 !!hasError 이런식으로 작성해주시면 확실하게 boolean으로 판단이 가능해집니다.
| @@ -55,6 +59,20 @@ export default function Board() { | |||
| setCommentContent(e.target.value); | |||
| }; | |||
|
|
|||
| const handleCommentClick = async (e: React.MouseEvent<HTMLButtonElement>) => { | |||
| e.preventDefault(); | |||
| if (typeof id === "string") { | |||
There was a problem hiding this comment.
id의 타입을 검사하는 방법도 있지만, id.toString() 해서 id의 타입을 강제하는 방법도 있습니다!
| <CommentTextarea | ||
| placeholder="댓글을 입력해주세요." | ||
| onChange={handleCommentChange} | ||
| value={commentContent} | ||
| ></CommentTextarea> |
There was a problem hiding this comment.
컴포넌트의 children이 없는 경우는 이렇게 하나로 축약해주셔도 좋습니다.
| 확인해보세요{" "} | ||
| </ElementMainText> | ||
| <ElementSubText> | ||
| {" "} |
There was a problem hiding this comment.
띄어쓰기가 들어가져 있는데, 의도하신게 아니라면 지워주시면 좋을 것 같습니다!
| useEffect(() => { | ||
| const { email, nickname, password } = signupInfo; | ||
| if ( | ||
| email && | ||
| nickname && | ||
| password && | ||
| !error.email && | ||
| !error.password && | ||
| !error.passwordConfirmation | ||
| ) { | ||
| setSignupDisable(false); | ||
| } else { | ||
| setSignupDisable(true); | ||
| } | ||
| }, [signupInfo]); |
There was a problem hiding this comment.
이 로직을
const signupDisabled = email &&
nickname &&
password &&
!error.email &&
!error.password &&
!error.passwordConfirmation
이런식으로 변수에 담아서 바로 사용해도 좋을 것 같습니다!
| { | ||
| headers: { | ||
| Authorization: `Bearer ${accessToken}`, | ||
| "Content-Type": "application/json", | ||
| }, | ||
| } |
There was a problem hiding this comment.
이런 헤더 같은 부분은 axios instance를 만들때 미리 같이 작성해두셔도 좋습니다.
요구사항
기본
회원가입
로그인
메인
심화
주요 변경사항
스크린샷
멘토에게