Conversation
just-codingbaby
added
매운맛🔥
just-codingbaby
force-pushed
the
next-정해찬-sprint8
branch
from
0dcffb5 to
f0f7575
Compare
just-codingbaby
added
제출일 이후 제출한PR
|
|
| **/._.DS_Store | ||
|
|
||
| pandamarket/ | ||
| .vscode/ |
There was a problem hiding this comment.
.vscode 폴더 내용은 프로젝트의 성격에 따라 공유되어야할때도 있긴 합니다.
|
|
||
| export default function Button({ children, handleClick, disabled = false}) { | ||
| return ( | ||
| <> | ||
| <button onClick={handleClick} disabled={disabled} | ||
| className={`${ disabled ? "bg-gray-400" : "bg-custom_blue"} w-[88px] h-[42px] rounded-lg px-[23px] py-3 text-base font-semibold leading-[19.09px] text-white`}> | ||
| {children} | ||
| </button> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
생각보다 Button은 다양한 형태가 있고, 단 하나의 형태를 위해 컴포넌트를 사용하실거라면 이렇게 파일로 만드실 필요는 없습니다. 게다가 width, height도 픽셀고정이라 좋은 컴포넌트 형태가 아닙니다.
| isOpen, | ||
| setIsOpen, |
There was a problem hiding this comment.
나중에 Dropdown 컴포넌트가 깊어지거나 할 가능성이 있는데요, 그럴땐 이렇게 props drilling을 유발할 수 있는 prop보다는 Context 사용을 고려해보세요.
| selectedOption, | ||
| isOpen, | ||
| setIsOpen, | ||
| isKebab, |
There was a problem hiding this comment.
Dropdown의 성질이 kebab만 있는게 아니고 다른 형태도 있을 수 있습니다. type={"kebab"} 이런식으로 prop을 받게끔 한다면 좀 더 명확하고 확장성있겠습니다.
| {isKebab ? ( | ||
| <button onClick={toggleOpen} className="pl-[155px]"> | ||
| <Image src="/img/btn_dropDown.png" width={3} height={13} alt="드롭다운 케밥 아이콘" /> | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| onClick={toggleOpen} | ||
| className="w-full text-left px-4 py-2 border rounded-lg bg-white focus:outline-none" | ||
| > | ||
| {selectedOption} | ||
| </button> | ||
| )} | ||
|
|
||
| {!isKebab && ( | ||
| <Image | ||
| src="/img/drop_arrow.png" | ||
| alt="drop-arrow" | ||
| width={15.7} | ||
| height={14.2} | ||
| className="absolute right-5 top-4" | ||
| /> | ||
| )} |
There was a problem hiding this comment.
isKebab 조건이 둘로 나뉩니다. 이런 경우, 차라리 if(isKebab) return (... ) 이후 return (...) 하는 느낌으로 아예 isKebab일 때의 모습을 한쪽으로 몰아놓는게 가독성과 Testability가 좋습니다.
There was a problem hiding this comment.
pages 아래의 파일들은 신중하게 만들고 사용하셔야합니다.
| import Button from "@/components/Button"; | ||
| import { useRouter } from "next/router"; | ||
|
|
||
| export async function getServerSideProps(context) { |
There was a problem hiding this comment.
getServerSideProps는 request time에 실행되는 함수입니다. 그렇기때문에 이 함수의 실행비용은 굉장히 큽니다. 사용에 주의하세요.
| } catch (err) { | ||
| console.error("Error fetching data:", err); | ||
| return { | ||
| notFound: true, | ||
| }; | ||
| } |
There was a problem hiding this comment.
모든 에러를 notFound로 처리해선 안됩니다. 어떤 에러는 에러의 정체를 밝혀야할 때가 있는데 https://nextjs.org/docs/pages/building-your-application/routing/custom-error#500-page 를 참고하세요
| try { | ||
| const res = await axios.post(`articles/${data.id}/comments`, commentData); | ||
| if (res.status === 201) { | ||
| alert("댓글 등록 완료!"); |
There was a problem hiding this comment.
React를 사용하신다면 alert사용은 자제하세요. UI/UX를 크게 해칩니다.
| const toggleDropdown = (id) => { | ||
| setIsOpenMap((prev) => ({ | ||
| ...prev, | ||
| [id]: !prev[id], | ||
| })); | ||
| }; |
There was a problem hiding this comment.
[id]로 key설정 하려면 id가 key에 들어갈 수 있는 값인지 명확히 validation하세요.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게