Conversation
| @@ -68,23 +54,29 @@ const BoardItemContainer = styled.div` | |||
| @media (max-width: 744px) { | |||
| grid-template-columns: repeat(2, 1fr); | |||
|
|
|||
| & > div:nth-child(3) { | |||
| & > :nth-child(3) { | |||
There was a problem hiding this comment.
css 선택자 잘 활용해주셨네요! 다만 이렇게 작성하셨을때, 추후에 수정하게 된다면 구조를 바꿔야하는 경우가 생길 수도 있습니다. (데이터 수가 3개보다 많아진다던지 등)
| width={72} | ||
| height={72} |
There was a problem hiding this comment.
Image의 fill 기능도 활용 한번 해보시면 좋을 것 같습니다.
| export default function CommentItemList({ comments }: CommentListPropsType) { | ||
| return ( | ||
| <> | ||
| {comments.map((comment) => ( | ||
| <CommentItem key={comment.id} comment={comment} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
이정도 크기의 컴포넌트는 따로 분리하시지 않아도 괜찮을 것 같습니다.
| <Image | ||
| src={comment.writer.image} | ||
| alt="commentWriter" | ||
| width={32} | ||
| height={32} | ||
| /> | ||
| ) : ( | ||
| <Image src={user} alt="user" /> | ||
| )} |
There was a problem hiding this comment.
Image의 에러 기능을 활용해보시는 것도 추천해드립니다.
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| background-color: #fcfcfc; |
| @@ -0,0 +1,10 @@ | |||
| export interface articleType { | |||
There was a problem hiding this comment.
이 타입의 첫글자도 타입명 작성 규칙의 일관성을 유지하기 위해 대문자로 바꿔주시면 좋을 것 같습니다.
| export interface BoardItemListProps { | ||
| boards: BoardItemType[]; | ||
| } |
There was a problem hiding this comment.
저는 이런 경우 개인적으로 board가 여러개 들어가야하는 곳에 BoardItemType[]을 바로 작성하는 것을 좀 더 선호합니다.
| const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
| setArticleValue((prev) => ({ ...prev, title: e.target.value })); | ||
| }; | ||
|
|
||
| const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| setArticleValue((prev) => ({ ...prev, content: e.target.value })); | ||
| }; |
There was a problem hiding this comment.
두 함수는 하나로 묶어볼 수 있을 것 같습니다!
| if (title && content) { | ||
| setDisabled(false); | ||
| } else { | ||
| setDisabled(true); | ||
| } |
There was a problem hiding this comment.
이 부분은 disabled를 사용하는 곳에 title && content를 바로 넣어보시는 것은 어떨까요?
|
|
||
| useEffect(() => { | ||
| async function fetchArticle() { | ||
| if (typeof id === "string") { |
There was a problem hiding this comment.
이렇게 조건문을 걸어주는 방법도 있지만, await getArticleId(id.toString()) 이런식으로 형변환을 시키는 방법도 있습니다.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게