Conversation
There was a problem hiding this comment.
바쁜 와중에도 불구하고 제출하느라 고생 많으셨습니다. 사실 코드에서도 열심히 고군분투하신 흔적이 보이는 것 같습니다. js로 되어 있는 반응형 로직을 걷어내는 것도 잘 하셨습니다.
CSS도 전체적으로 안 맞는 부분이 많아서 시간적으로 여유가 되신다면 이 부분도 꼼꼼하게 완성해보시면 좋을 듯 합니다. 특히 말씀드리고 싶은 건 프로젝트 전체 폰트는 Pretendard여야 되는데 이 설정도 안 되어 있어서 페이지를 열었을 때 시안과 많은 차이가 나는 것 같습니다. 이외에 몇 가지 피드백도 남겨드렸으니 확인해보세요. 고생하셨습니다.
| const BestArticle: React.FC<Article> = ({ ...article }) => { | ||
| const { title, image, likeCount, createdAt, writer, id } = article; |
There was a problem hiding this comment.
| const BestArticle: React.FC<Article> = ({ ...article }) => { | |
| const { title, image, likeCount, createdAt, writer, id } = article; | |
| const BestArticle: React.FC<Article> = ({ title, image, likeCount, createdAt, writer, id }) => { |
처럼 하시면 됩니다 😅
| const handleClick = () => { | ||
| router.push(`/boards/${id}`); | ||
| }; | ||
| const truncateTitle = (title: string) => { |
There was a problem hiding this comment.
함수 이름은 잘 지으셨는데, css의 text-overflow: ellipsis;를 사용하시는 게 좋습니다. 항상 29자를 기준으로 끊어야 한다는 보장은 없기 때문입니다. 한 번 검색해보세요. https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
| return title; | ||
| }; | ||
| return ( | ||
| <div className={style.OutContainer} onClick={handleClick}> |
There was a problem hiding this comment.
router.push가 아닌 Link 요소를 사용하는 게 좋을 것 같습니다.
| <h2 className={style.Title}>{truncateTitle(title)}</h2> | ||
| {image && ( | ||
| <div className={style.ImageContainer}> | ||
| <Image |
There was a problem hiding this comment.
이렇게 외부 URL을 통해 넣는 이미지는 Next.js의 Image 컴포넌트를 쓸 때 오류가 날 수 있어서 그냥 <img>로 처리하셔도 될 것 같습니다.
| {writer.image ? ( | ||
| <Image | ||
| src={writer.image} | ||
| alt={'UserProfileImg'} | ||
| className={style.UserImg} | ||
| /> | ||
| ) : ( | ||
| <Image | ||
| src={profile} | ||
| alt={'BasicUserProfile'} | ||
| className={style.UserImg} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
| {writer.image ? ( | |
| <Image | |
| src={writer.image} | |
| alt={'UserProfileImg'} | |
| className={style.UserImg} | |
| /> | |
| ) : ( | |
| <Image | |
| src={profile} | |
| alt={'BasicUserProfile'} | |
| className={style.UserImg} | |
| /> | |
| )} | |
| <Image | |
| src={writer.image || profile} | |
| alt={writer.image ? 'UserProfileImg' : 'BasicUserProfile'} | |
| className={style.UserImg} | |
| /> |
처럼 한 번에 쓰셔도 되겠네요.
| onChange={handleChange} | ||
| > | ||
| {options.map((option, index) => ( | ||
| <option key={index} value={option}> |
There was a problem hiding this comment.
key가 index가 되는 건 지양해야 합니다. 여기선 그냥 key={option} 해도 될 것 같네요.
| import style from './Dropdown.module.css'; | ||
|
|
||
| interface DropdownProps { | ||
| options: string[]; |
There was a problem hiding this comment.
이것도 저번에 말씀드렸던 것처럼 label과 value를 별도로 받게 구성해 보세요.
| setCommentText(event.target.value); // input 값 변경 시 상태 업데이트 | ||
| }; | ||
|
|
||
| const goToBoards = () => { |
There was a problem hiding this comment.
이건 그냥 '+' 기호만 이미지로 export하고 아래 글자는 그냥 HTML에 텍스트로 적는 게 맞는 것 같습니다. 게다가 현재 삽입된 화면을 보면 이미지의 비율이 안 맞습니다 😅
| .BestArticleContainer { | ||
| justify-content: space-around; | ||
| } | ||
| .BestArticleContainer > :nth-child(3) { |
|
원래 작업하는 브런치명이 |
미션9와 10 같이 진행하였습니다.
기본
Sprint 9
자유 게시판 페이지 주소는 “/boards” 입니다.
전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
게시글 title에 검색어가 일부 포함되면 검색이 됩니다.
반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
resize 보다는, 미디어 쿼리를 사용해 nth-child로 display none 사용하였습니다.
next의 prefetch 기능을 사용해봅니다.
Sprint 10
상품 등록 페이지 주소는 “/addboard” 입니다.
게시판 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.
상품 상세 페이지 주소는 “/addboard/{id}” 입니다.
댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다
주요 변경사항
스크린샷
멘토에게