Next 엄성민 - 스프린트 미션 8#55
Hidden character warning
Conversation
수정 완료했습니다. |
app/(auth)/_components/InputBox.jsx
Outdated
| "md:w-[640px] md:h-p[56px] rounded-xl px-6 py-4 bg-[#F3F4F6] w-[343px] h-14 focus:outline-blue" | ||
| )} | ||
| placeholder={placeholder} | ||
| value={userData[name]} |
There was a problem hiding this comment.
userData[name] 를 접근할 때 만약 name 이 잘못들어와 userData에서 값을 꺼내지 못하는 경우도 존재할 수 있으니
추가적인 처리를 해주시면 좋겠습니다!
만약 null or undefined 인 경우
userData[name] || "" 를 통해 대체되는 string 을 주입할 수 있습니다.
There was a problem hiding this comment.
다른 코드들을 살펴보니
userData를 객체로 념겨주고 있는데 객체가 아닌 사용될 value 를 직접 받는다면 page 에서 객체로 상태관리를 해주지 않을 경우에도 같이 사용이 가능할 것 같아요!
There was a problem hiding this comment.
value로 직접 받는 방법으로 한번 시도해보겠습니다!
| const [isActive, setIsActive] = useState("inactive"); | ||
|
|
||
| useEffect(() => { | ||
| if (userData.email === "" || userData.password === "") { |
There was a problem hiding this comment.
disabled 상태만 button 컴포넌트로 넘겨도 될 것 같습니다
�해당 값으로 css 버튼 color 를 설정 해주는게 가능해 보여서 isActive 상태는 다른 페이지들에서도 관리 안하셔도 될 걸로 보여집니다!
아니라면 혹시라도 다른 의도가 있는지 궁금합니다
There was a problem hiding this comment.
다른 의도가 있는건 아니였고 clsx 처음 써서 헷갈렸던거 같아요. 로그인이랑 회원가입은 미션9이기 때문에 미션을 진행하면서 수정해 보겠습니다!
->수정해보니까 disable은 원하지 않으면서 색깔만 항상 회색인 경우를 만들고 싶어서 그랬던거 같습니다.
| passwordCheck: "", | ||
| }); | ||
|
|
||
| const [disabled, setDisabled] = useState(true); |
There was a problem hiding this comment.
isActive 필요한지 같이 확인부탁드릴게요
There was a problem hiding this comment.
공통으로 Dropdown 구현을 의도하신 걸로 보입니다.
사용하는곳이 많지 않은 경우에는 다음과 같이 작성하셔도 괜찮지만 추후에 dropdown 사용하는곳이 늘어나게되면 그때마다 type이 추가되어 분기구문이 추가될거고 로직도 추가되면서 컴포넌트의 의존성이 커질거 같습니다
렌더링 하는것과 공통으로 기능이 동작하는 부분들만 공통으로 모으고 각 페이지(컴포넌트)에서 하는 역활들은 해당 페이지에 로직이 들어있으면 좋겠습니다!
There was a problem hiding this comment.
다른 파트에서 비슷한 Dropdown이 있어서 컴포넌트화를 연습할겸 의도 해서 만들었습니다. 아직 어떤 부분을 컴포넌트화 해야하는지 어렵네요ㅠㅠ
| const articleId = param.articleId; | ||
| const article = await api.getArticle(articleId); | ||
| const createDate = article.createdAt; | ||
| const date = createDate.split("T")[0]; |
There was a problem hiding this comment.
추후에 배우실수도 있지만 dayjs 라이브러리를 활용하면 iso 날짜를 편하게 format하셔서 사용하실 수 있습니다
참고 : dayjs
|
고생 많으셨습니다 성민님! 대체로 잘 작업 해주셔서 리뷰 남긴 부분들만 확인해주시면 될 것 같네요! |
리뷰 남겨주신 부분 확인했습니다!! auth 관련부분은 미션9(현재 진행중) 랑 관련있어서 수정하고 미션 9 PR 올리겠습니다 |
5 participants
요구사항
기본 요구사항
공통
Github에 스프린트 미션 PR을 만들어 주세요.
Next.js를 사용해 진행합니다.
자유 게시판 페이지
게시글 목록에서 드롭다운을 사용하여 "최신 순"으로 정렬할 수 있도록 합니다.
본인이 이전 미션에서 생성한 게시글 목록 조회 API를 활용해 GET 메서드로 데이터를 가져옵니다.
게시글 제목에 검색어가 일부 포함되면 해당 게시글을 검색할 수 있도록 합니다.
이미지는 디폴트 이미지로 프론트엔드에서 처리해 주세요.
게시글 닉네임 및 좋아요 개수 역시 임의값으로 프론트엔드에서 처리해주세요.
베스트 게시글은 최신순 3개 게시글을 요청으로 데이터를 가져와 구현해주세요.
자유게시판 페이지에서 특정 게시글을 클릭하면 해당 게시물의 상세 페이지로 이동합니다.
게시글 등록 & 수정 페이지
각 input 필드에 정확한 placeholder 값을 입력합니다.
모든 input 필드에 값을 입력하면 '등록' 버튼이 활성화됩니다.
본인이 이전 미션에서 생성한 게시글 생성 API를 활용해 POST 메서드로 게시글을 등록합니다.
'등록' 버튼을 누르면 해당 게시물 상세 페이지로 이동합니다.
게시글 수정 페이지 UI는 게시글 등록 페이지와 동일합니다.
본인이 이전 미션에서 생성한 게시글 상세 API의 PATCH 메소드를 사용하여 게시물을 수정합니다.
게시글 상세 페이지
본인이 이전 미션에서 생성한 게시글 상세 API의 GET 메소드를 사용하여 데이터를 가져옵니다.
본인이 이전 미션에서 생성한 게시글 상세 API의 DELETE 메소드를 사용하여 게시물을 삭제합니다.
댓글 input에 값을 입력하면 '등록' 버튼이 활성화됩니다.
본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 POST 메소드로 댓글을 등록합니다.
본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 PATCH 메소드로 댓글을 수정합니다.
본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 DELETE 메소드로 댓글을 삭제합니다.
심화 요구사항
공통
디자인 시안에 따라 반응형 디자인을 구현합니다.
(생략 가능) 원한다면 지금까지 진행한 모든 React 코드를 Next.js로 마이그레이션 해주세요.
마이그레이션에 상당한 시간이 소요될 수 있으므로 진행을 권장하지 않습니다.
주요 변경사항
스크린샷
멘토에게
-(auth)폴더는 미션이 아니고 마이그레이션 진행중입니다.