[TASK-30] 로그인/회원가입 페이지 구현 #11

SangWoo9734 · 2024-12-20T16:57:48Z

📝 작업 내용

로그인 / 로그아웃 페이지를 구현하였습니다.
- 폼 관리는 react-hook-form을 사용해서 관리하였습니다.

추가 커밋 사항 ( 12/21 오전 3시 기준 )

EmailInput, PasswordInput, NickNameInput을 react-hook-form 사용과 페이지 별 validationMessage 노출을 위해 수정되었습니다.
페이지별 API 실행 여부를 제한하기 위해 닉네임, 이메일 validation api 내에 enable 옵션을 추가하였습니다.

📸 스크린샷

💬 리뷰 요구사항

( 12/21 02:00 기준 )아직 Validation 관련 수정 내역이 올라와있지 않아 컴포넌트 활용에 이상한 부분이 있을 수 있습니다.
이후 commit 사항에 대해서는 push이후에 작업내용 하위에 작업 내역을 기록해두겠습니다 참고바랍니다.

특이사항

validation 관련 수정 중 발생한 주요 이슈
- 닉네임 검증 & 이메일 검증에 따른 추가 validation 필요
- 동일 UI에 대해서 사용 페이지 별로 보이는 validation 코멘트 다르게 적용하기
- 기존 validation 로직과 react-hook-form 동작 연결하기
기능 구현 + 수정에만 집중하다보니 공통 컴포넌트로 제작한 컴포넌트에 생각보다 너무 많은 의존성이 들어가버리게 되어서 오히려 더 안좋은 방향으로 진행이 된 것 같습니다... 리뷰 중에 의도와 많이 벗어났다고 생각되시면 롤백이나 리팩토링하겠습니다.🥲
주말에 병철님께서 로그인 관련 백엔드 작업하신다고 하셨으니 저희 스케줄과는 별도로 컨택해서 API 연동 먼저 해두겠습니다! 일정관련해서는 12/21 (토) 오전 미팅에 다시 말씀드리겠습니다.

dahyeo-n

코드 리뷰 드렸어요!
이번에 리뷰할 코드가 많아서 시간이 꽤 걸린 점, 양해 부탁드려요 🥲 다음 PR은 더 작은 단위로 부탁드립니다!

PR 리뷰 내용 중, 동의하지 않으시는 부분은 편하게 얘기해주세요.
그리고 각 파일에도 적어두긴 했지만, 전반적으로 확인 및 수정해주시면 좋을 사항은 다음과 같아요 :)

1. 전체적으로 변수명을 명확화 할 필요가 있는 것 같습니다.

: 예를 들어 defaultClient, defaultValues 라면 어떤 것의 default 인지, data 라면 어떤 것의 data 인지 명확히 명시하는 게 좋을 것 같아요.

2. `import` 띄어쓰기

: 어떤 파일은 되어 있고, 어떤 파일은 안 되어 있습니다.

추가적으로, 어떤 파일에선 next 와 react 에서 import 해온 코드가 같은 분류로 붙어 있는데 어떤 파일에선 띄워져 있습니다. 코드 일관성을 위해 확인 부탁드려요 :)

dahyeo-n · 2024-12-22T05:39:07Z

src/apis/user/login.ts

@@ -0,0 +1,26 @@
+import { USER } from '@/constants/API';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';


import 를 한 줄씩 띄우는 게 좋을 것 같은데 어떻게 생각하실까요?

해당 파일에선 같은 import 분류가 없으니 각 import 를 한 줄씩 띄워야 할 것 같아요!
지금은 import 가 3줄뿐이라 띄우기 애매하다고 생각드실 것 같은데, import 라인이 '많다/적다'의 기준을 나눠서 띄우는 것보단 모든 파일에 동일하게 적용하는 게 코드의 일관성 측면에서 좋을 것 같다는 생각이 들어요.

상우님은 어떻게 생각하실까요? 🤔

dahyeo-n · 2024-12-22T05:57:17Z

src/app/auth/(authWithLayout)/signup/page.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import usePostSignUp from '@/apis/user/signUp';


@/apis랑 @/components 간의 import 띄어쓰기가 필요할 듯해요 :)

dahyeo-n · 2024-12-22T05:58:33Z

src/app/auth/(authWithLayout)/signup/page.tsx

+          </div>
+          <SquareButtonL
+            type='submit'
+            textSize={''}


타이포그래피가 들어가면 되는 prop인데 빈칸으로 남겨두신 이유가 있을까요?
엇 혹시 해당 prop의 네이밍이 직관적이지 않았을까요??

해당 부분은 default 사이즈와 같은 크기인 것 같아서 비워두었습니다! default 옵션으로 body1을 설정해두고 그 외의 경우만 옵션을 추가하도록 수정하겠습니다.

아 그렇군요. 네 알겠습니당

dahyeo-n · 2024-12-22T06:07:31Z

src/app/auth/(authWithLayout)/signup/page.tsx

+    mutate(data);
+  };
+
+  const { isValid } = methods.formState;


methods, isValid, mutate, data 의 변수명을 의도를 명확히 표현하는 이름으로 변경하는 건 어떨까요?

물론 해당 파일 내에서 methods, isValid, mutate, data 모두 1개씩이긴 하지만 명확한 변수명을 가져가는 습관을 갖는 게 추후 다시 코드를 읽고, 수정할 때 들 시간 절감에 좋을 것 같습니다 :)

dahyeo-n · 2024-12-22T06:43:14Z

src/apis/user/login.ts

로그인 관련 파일과 코드는 파일명과 함수명을 'login' 으로 작성하고, 회원가입은 'sign up' 으로 나누신 이유가 따로 있을까요?

로그인은 sign in, 회원가입은 sign up으로 이름 일관성을 맞추는 게 좋을 것 같아서요 :)

처음에 signin, signup으로 진행했었는데, 백엔드 API 쪽이 login / sign up을 활용하고 있는 걸 확인하고 통일하기 위해 그렇게 네이밍을 변경했었습니다. front 쪽은 sign in / sing up으로 통일하겠습니다.

아하 그러셨군요
백엔드와도 네이밍 컨벤션을 동일하게 해야 하는 부분이 있네요. sign in 통일 확인했습니다!

dahyeo-n · 2024-12-22T09:27:38Z

src/components/Layout/AppShell.tsx

+            <Navbar />
+            <main className='pt-[60px] min-h-screen h-full'>{children}</main>
+            <Footer />
+          </div>


div 와 main 에 해당 CSS 를 추가하신 이유가 궁금해요

AppShell과 global.css에 수정이 있었던 점이 Nav + <main> 부분이 뷰포트 전체 크기를 가지게끔 레이아웃 크기가 잡혀있어야 한다고 생각했습니다. 그 크기를 잡는 과정에서 일부 CSS 추가가 있었습니다.

dahyeo-n · 2024-12-22T09:37:21Z

src/components/SocialLoginSection.tsx

+import KakaoLogo from '@/../public/images/kakako.svg';
+
+const SocialLoginSection = () => {
+  const handleKakaoLogin = async () => {


비동기 작업의 결과를 처리하지 않는데, async 를 사용하신 이유가 뭘까요?

이부분은 삭제하겠습니다..!

dahyeo-n · 2024-12-22T09:38:40Z

src/components/SocialLoginSection.tsx

+        />
+        <SocialLoginButton
+          children={<Image src={GoogleLogo} alt='kakao logo' />}
+          label='구글'


우리의 염원대로 예림님이 구글, 카카오 라벨 제거해주셨다고 합니당 ㅋㅋㅋㅋㅋㅋㅋ

dahyeo-n · 2024-12-22T09:40:37Z

src/constants/API.ts

+  validateNickname: '/user/validation/nickname',
+};
+
+export { USER };


객체 모두 상수인데 USER 만 대문자인 이유가 뭘까요??

해당 코드 컨벤션을 본적이 있어서 이 형식을 지키다보니 이런 식으로 구성하게 되었습니다!

https://github.com/airbnb/javascript?tab=readme-ov-file#naming--uppercase

// bad - unnecessarily uppercases key while adding no semantic value export const MAPPING = { KEY: 'value' }; // good export const MAPPING = { key: 'value', };

아 이거군요! 네 확인했습니다. 감사해요. 저도 상수 객체는 이 형식 맞춰서 작성할게요 :)

dahyeo-n · 2024-12-22T09:44:31Z

src/mocks/handlers.ts

+      { status: 201 },
+    );
+  }),
+


await 없이 사용해도 동작에 문제가 없긴 한데 http.all, http.post (2개) 총 3개의 함수 async 만 사용하는 이유를 알 수 있을까요?

http.all 에는 delay 로직 떄문에 async/await이 필요한 것으로 보이고 그 외에 현재 가지고 있는 async 키워드는 삭제하겠습니다..!

전반적으로 현재 msw 로직을 어떻게 활용해야하는지 아직 모호한 상태라 성공 케이스 하나에 대해서만 활용하고 있어 로직이 많이 빈약합니다..! 이부분은 차차 보완해나가겠습니다.>!

아하 그렇군요. http.all 은 await 가 있네요 제가 잘못 봤네요 ㅎㅎ
반영 감사해요. 저도 그냥 궁금해서 질문드렸어요 ㅋㅋㅋㅋㅋㅋ

SangWoo9734 added 17 commits December 21, 2024 01:24

setting : 외부 패키지 추가 ( axios, react-hook-form )

e5ec060

style : 페이지 콘텐츠 영역 크기 설정

8c8d1d4

style : default value가 있는 property를 옵셔널로 관리

061b13c

feat : API route 관련 상수 추가

3c668b7

feat : Kakao SDK 활용을 위한 Provider 추가

ee39927

feat : 회원가입 페이지 구현

c28cde9

feat : 일반 회원가입 API 로직 추가

370320a

feat : 이메일 검증 API 로직 추가

097b907

feat : 닉네임 검증 API 로직 추가

c307199

feat: Social Login 영역 컴포넌트 추가

9005a42

feat: Social Login 시 사용되는 redirect 페이지 추가

f86bc2c

feat: Social Login 서버 API 로직 추가

0a2dc8a

feat: 로그인 페이지 추가

dfbfcff

feat: 로그인 API 로직 추가

8f44f34

feat: 로그인/회원가입 Layout 추가

0772ac6

feat: MSW Mocking API 추가

106a1d3

feat: 인증 및 API 응답 관련 타입 추가

358b655

SangWoo9734 added remove 파일을 삭제하는 작업만 수행한 경우 feat 새로운 기능 추가 style 사용자 UI 디자인 변경 setting package.json 파일 수정 및 패키지 설치 Priority: High 우선순위 높음 labels Dec 20, 2024

SangWoo9734 self-assigned this Dec 20, 2024

SangWoo9734 added 4 commits December 21, 2024 03:14

feat: auth 관련 query에 enable 옵션 추가

a83bee1

feat: react-hook-form 사용을 위한 EmailInput 컴포넌트 개선

8d0b4f3

feat: react-hook-form 사용을 위한 NicknameInput 컴포넌트 개선

c59ceb7

feat: react-hook-form 사용을 위한 PasswordInput 컴포넌트 개선

43b9078

dahyeo-n reviewed Dec 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TASK-30] 로그인/회원가입 페이지 구현 #11

[TASK-30] 로그인/회원가입 페이지 구현 #11

SangWoo9734 commented Dec 20, 2024 •

edited

Loading

dahyeo-n left a comment •

edited

Loading

dahyeo-n Dec 22, 2024

dahyeo-n Dec 22, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 22, 2024

dahyeo-n Dec 23, 2024

dahyeo-n Dec 22, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 22, 2024

dahyeo-n Dec 23, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 22, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 22, 2024

dahyeo-n Dec 22, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 22, 2024

dahyeo-n Dec 23, 2024

dahyeo-n Dec 22, 2024

SangWoo9734 Dec 23, 2024

dahyeo-n Dec 24, 2024

		@@ -0,0 +1,59 @@
		'use client';

		import usePostSignUp from '@/apis/user/signUp';

[TASK-30] 로그인/회원가입 페이지 구현 #11

Are you sure you want to change the base?

[TASK-30] 로그인/회원가입 페이지 구현 #11

Conversation

SangWoo9734 commented Dec 20, 2024 • edited Loading

📝 작업 내용

📸 스크린샷

💬 리뷰 요구사항

특이사항

dahyeo-n left a comment • edited Loading

Choose a reason for hiding this comment

1. 전체적으로 변수명을 명확화 할 필요가 있는 것 같습니다.

2. import 띄어쓰기

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SangWoo9734 commented Dec 20, 2024 •

edited

Loading

dahyeo-n left a comment •

edited

Loading

2. `import` 띄어쓰기