[백승렬] Week14 #463
Merged
[백승렬] Week14 #463
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 17 commits
May 21, 2024 14:16
|
수고 하셨습니다 ! 위클리 미션 하시느라 정말 수고 많으셨어요. |
kiJu2
approved these changes
May 22, 2024
Comment on lines
+8
to
+17
| <SignLayout | ||
| header={ | ||
| <SignHeader | ||
| message="회원이 아니신가요?" | ||
| link={{ text: "회원 가입하기", href: ROUTE.회원가입 }} | ||
| /> | ||
| } | ||
| form={<SignInForm />} | ||
| oauth={<Oauth description="소셜 로그인" />} | ||
| /> |
There was a problem hiding this comment.
Page에 Layout 컴포넌트 하나만 들어가있군요.
Layout은 "제한된 공간에 요소를 배치"하는 데에 사용되며 보편적으로 children을 가지게 됩니다 ! 혹시, Page 내에 Layout의 요소를 작성하지 않은 이유가 있으실까요?
페이지에 직접 컴포넌트를 작성하지 않으신 이유가 궁금합니다 !
Comment on lines
+4
to
+20
| /** | ||
| * useCheckEmailDuplicate 훅은 이메일 중복 확인을 위한 비동기 요청을 처리합니다. | ||
| * | ||
| * @param email - 중복 확인할 이메일 주소입니다. | ||
| * @returns 훅의 반환 객체입니다. | ||
| * @returns return.execute - 이메일 중복 확인을 실행하는 함수입니다. | ||
| * @returns return.loading - 이메일 중복 확인 요청의 로딩 상태입니다. | ||
| * @returns return.error - 이메일 중복 확인 요청 중 발생한 오류입니다. | ||
| * @returns return.data - 이메일 중복 확인 응답 데이터입니다. | ||
| * | ||
| * @example | ||
| * const { execute, loading, error, data } = useCheckEmailDuplicate("[email protected]"); | ||
| * | ||
| * useEffect(() => { | ||
| * execute(); | ||
| * }, [execute]); | ||
| */ |
There was a problem hiding this comment.
와아... ㄷㄷㄷ jsdoc 곳수 시군요 ..
정말 친절하네요.. 동료 개발자셨으면 좋겠다..
| export const useCheckEmailDuplicate = (email: string) => { | ||
| const checkEmailDuplicate = useCallback( | ||
| () => | ||
| instance.post<{ data: { isUsableNickname: boolean } }>("check-email", { |
There was a problem hiding this comment.
타입 제네릭도 놓치지 않았군요 👍👍👍
타입스크립트도 금방금방 적응하시는군요 😊
Comment on lines
+4
to
+30
|
|
||
| /** | ||
| * useGetUser 훅은 사용자 데이터를 가져와 반환합니다. | ||
| * | ||
| * @returns 훅의 반환 객체입니다. | ||
| * @returns return.loading - 사용자 데이터를 가져오는 요청의 로딩 상태입니다. | ||
| * @returns return.error - 사용자 데이터를 가져오는 요청 중 발생한 오류입니다. | ||
| * @returns return.data - 가져온 사용자 데이터입니다. | ||
| * | ||
| * @example | ||
| * const { loading, error, data } = useGetUser(); | ||
| * | ||
| * if (loading) { | ||
| * return <div>Loading...</div>; | ||
| * } | ||
| * | ||
| * if (error) { | ||
| * return <div>Error occurred: {error.message}</div>; | ||
| * } | ||
| * | ||
| * return ( | ||
| * <div> | ||
| * <h1>{data.name}</h1> | ||
| * <p>{data.email}</p> | ||
| * </div> | ||
| * ); | ||
| */ |
There was a problem hiding this comment.
아니 ㅋㅋㅋ 정말 너무 친절한데요 ..? 🫢
웬만한 라이브러리보다 친절하군요 ㄷㄷㄷ
Comment on lines
+32
to
+55
| export const useSignUp = ({ email, password }: UseSignUpParams) => { | ||
| const signUp = useCallback( | ||
| () => | ||
| instance.post<{ data: Token }>("sign-up", { | ||
| email, | ||
| password, | ||
| }), | ||
| [email, password] | ||
| ); | ||
| const { execute, loading, error, data } = useAsync(signUp, true); | ||
|
|
||
| useEffect(() => { | ||
| if (data?.data.accessToken) { | ||
| localStorage.setItem("accessToken", data.data.accessToken); | ||
| } | ||
| }, [data?.data.accessToken]); | ||
|
|
||
| return { | ||
| execute, | ||
| loading, | ||
| error, | ||
| data, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
정말 훌륭합니다...
최적화, 적절한 파라메터 타입 설정, 로딩, 에러 상태 처리, execute를 통하여 함수 지연처리까지..
못 본 사이에 괴물이 되어서 돌아오셨군요?
Comment on lines
+80
to
+87
| const handleKeyDown = useCallback( | ||
| (event: KeyboardEvent<HTMLDivElement>) => { | ||
| if (event.key === "Escape") { | ||
| closeModal(); | ||
| } | ||
| }, | ||
| [closeModal] | ||
| ); |
There was a problem hiding this comment.
사용자 경험 배려까지...🫢
�esc로 종료되도록 만들어두셨군요. 사용자에 대한 배려가 느껴집니다 ㅎㅎㅎ
Comment on lines
+1
to
+4
| export const PLACEHOLDER = { | ||
| email: "이메일을 입력해 주세요.", | ||
| password: "비밀번호를 입력해 주세요.", | ||
| }; |
There was a problem hiding this comment.
오호. 메시지를 상수로 따로 관리하셨군요.
이렇게 한다면 어떠한 이점을 얻을 수 있을까요?
Comment on lines
+13
to
+23
| export const SignLayout = ({ header, form, oauth }: SignLayoutProps) => { | ||
| return ( | ||
| <div className={cx("container")}> | ||
| <div className={cx("items")}> | ||
| {header} | ||
| {form} | ||
| {oauth} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
처음 질문 드렸던 것에 해당하는 레이아웃입니다 !
해당 로직이 page에 있도록 설계하지 않은 이유가 궁금했습니다 😊
Comment on lines
+36
to
+40
| <img | ||
| src={imageSource ?? DEFAULT_IMAGE} | ||
| className={cx("image", { zoomin: isZoomedIn })} | ||
| alt={alt} | ||
| /> |
There was a problem hiding this comment.
Nextjs의 Image 컴포넌트를 사용해볼 수 있습니다 😊
NextJS의 Image를 사용하면 다음과 같은 이점들이 있습니다:
- Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
- Visual Stability: Prevent layout shift automatically when images are loading.
- Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
- Asset Flexibility: On-demand image resizing, even for images stored on remote servers
- 크기 최적화: WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 장치에 대해 정확한 크기의 이미지를 자동으로 제공합니다.
- Visual Stability(시각적 안정성): 이미지를 로드할 때 layout 시프트 를 자동으로 방지합니다.
- 빠른 페이지 로드: 이미지는 기본 브라우저 레이지 로드를 사용하여 뷰포트에 들어갈 때만 로드되며, 블러업 플레이스홀더는 옵션입니다.
- 자산 유연성: 원격 서버에 저장된 이미지의 경우에도 온디맨드 이미지 크기 조정
Comment on lines
+72
to
+74
| if (!isOpen) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
�컴포넌트가 조건에 부합하지 않는다면 빠르게 반환시켰군요 😊👍
|
와.. 승렬님.. ㄷㄷㄷ 코드 정말 놀라면서 봤어요. 특히 관심사 분리를 위한 커스텀 훅 분류 센스와 컴포넌트 구성이 짜임새 있게 짜여있는게 인상깊었습니다 ! 다음 코드도 정말 기대가 되는군요 승렬님 !! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
기본 요구사항
로그인, 회원가입 페이지를 만들어 주세요.
로그인 페이지의 url path는 ‘/signin’, 회원가입 페이지의 url path는 ‘/signup’ 입니다.
Github에 위클리 미션 PR을 만들어 주세요.
React, Next.js를 사용해 진행합니다.
심화 요구사항
로그인, 회원가입 기능에 react-hook-form을 활용해 주세요.
주요 변경사항
-기타 다른 코드 파일 리팩토링
스크린샷
멘토에게