refactor: 회원가입 로그인페이지 리팩토링 #185

hakyoung12 · 2024-10-14T05:29:36Z

✏️ 작업 내용

인증오류 메시지 상수로 변경
auth 페이지 이미지 잘림 문제 해결
user context 삭제
Input, PasswordInput 컴포넌트 통합

📷 스크린샷

모바일 및 태블릿사이즈에서 이미지 잘림

해결

close #125

hakyoung12 · 2024-10-14T05:32:07Z

src/app/(auth)/signin/_component/SignInForm.tsx

+        switch (true) {
+          case error.message.includes('잘못된 이메일 또는 비밀번호입니다'):
+            setError('email', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            setError('password', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            break;
+          case error.message.includes('유효한 이메일 주소를 입력하세요'):
+            setError('email', {
+              type: 'manual',
+              message: '유효한 이메일 주소를 입력하세요',
+            });
+            break;
+          default:
+            console.error('Error:', error.message);
+            break;


if else문으로 되어있던 로직 switch문으로 변경

훨씬 보기 좋은 것 같아요!

switch에 true는 처음 보는 유형이네요 ~

P4) 좋은 방법인 것 같습니다! 혹시 if-else 문으로 안 쓰신 이슈가 있으실까요? 직관성을 위해서일까요?
궁금해서 여쭤봅니다..!

성능보다는 가독성과 직관성때문에 switch문으로 바꿨습니다!
그리고 만약 다른 에러메시지를 추가할 때에 추가하기 용이하기 때문이기도 합니다

그리고 쿠키는 파일을 옮겨놓겠습니다!

hakyoung12 · 2024-10-14T05:35:01Z

src/app/components/Input/Input.tsx

+    {
+      hasError = false,
+      className = '',
+      isPassword = false,


isPassword prop은 입력 필드가 비밀번호 입력용인지 여부를 전달하여 비밀번호 토글버튼을 렌더링할지 결정합니다.

hakyoung12 · 2024-10-14T05:36:05Z

public/images/login-img.svg

고정값으로 되어있던 width와 height를 삭제했습니다.

yunchaeney

리팩토링 고수시네요 👍 고생하셨습니다!

yunchaeney · 2024-10-14T09:04:46Z

src/app/(auth)/_component/FormValidation.ts

+const ERROR_MESSAGES = {
+  REQUIRED_EMAIL: '이메일을 입력해주세요.',
+  INVALID_EMAIL: '이메일 형식을 입력해주세요.',
+  REQUIRED_PASSWORD: '비밀번호를 입력해주세요.',
+  REQUIRED_NAME: '이름을 입력해주세요.',
+  REQUIRED_COMPANY: '회사명을 입력해주세요.',
+  INVALID_PASSWORD:
+    '비밀번호는 영문과 숫자가 포함된 8자 이상이 되도록 해 주세요.',
+  PASSWORD_MISMATCH: '비밀번호가 일치하지 않습니다.',
+};


yunchaeney · 2024-10-14T09:05:23Z

src/app/(auth)/signin/_component/SignInForm.tsx

+        switch (true) {
+          case error.message.includes('잘못된 이메일 또는 비밀번호입니다'):
+            setError('email', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            setError('password', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            break;
+          case error.message.includes('유효한 이메일 주소를 입력하세요'):
+            setError('email', {
+              type: 'manual',
+              message: '유효한 이메일 주소를 입력하세요',
+            });
+            break;
+          default:
+            console.error('Error:', error.message);
+            break;


훨씬 보기 좋은 것 같아요!

BeMatthewsong

고생하셨습니다! LGTM 👏

BeMatthewsong · 2024-10-14T09:06:34Z

src/app/(auth)/signin/_component/SignInForm.tsx

+        switch (true) {
+          case error.message.includes('잘못된 이메일 또는 비밀번호입니다'):
+            setError('email', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            setError('password', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            break;
+          case error.message.includes('유효한 이메일 주소를 입력하세요'):
+            setError('email', {
+              type: 'manual',
+              message: '유효한 이메일 주소를 입력하세요',
+            });
+            break;
+          default:
+            console.error('Error:', error.message);
+            break;


switch에 true는 처음 보는 유형이네요 ~

HMRyu

리팩토링 하면서 코드가 훨씬 더 깔끔해진 것 같습니다!

고생 많으셨습니다...! 👍👍

코멘트 확인 한 번 부탁드립니다!

HMRyu · 2024-10-14T09:23:30Z

src/app/(auth)/_component/FormValidation.ts

👍 훨씬 더 간단하게 사용할 수 있겠네요!

HMRyu · 2024-10-14T09:25:35Z

src/app/(auth)/signin/_component/SignInForm.tsx

+        switch (true) {
+          case error.message.includes('잘못된 이메일 또는 비밀번호입니다'):
+            setError('email', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            setError('password', {
+              type: 'manual',
+              message: '잘못된 이메일 또는 비밀번호입니다',
+            });
+            break;
+          case error.message.includes('유효한 이메일 주소를 입력하세요'):
+            setError('email', {
+              type: 'manual',
+              message: '유효한 이메일 주소를 입력하세요',
+            });
+            break;
+          default:
+            console.error('Error:', error.message);
+            break;


P4) 좋은 방법인 것 같습니다! 혹시 if-else 문으로 안 쓰신 이슈가 있으실까요? 직관성을 위해서일까요?
궁금해서 여쭤봅니다..!

HMRyu · 2024-10-14T09:28:08Z

src/app/providers.tsx

+      <SavedGatheringProvider>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </SavedGatheringProvider>


P4) 유저 정보를 최상위 서버 컴포넌트에서 받기 때문에 UserProvider 는 삭제하신 걸까요?

넵 이제 사용하시는 분이 없어서 제거했습니다!

HMRyu · 2024-10-14T09:32:48Z

그리고 혹시 cookie.ts 파일 위치 변경을 요청드려도 될까요?

현재

src/actions/auth/cookie

현재는 이곳에 저장되고 있는데,

actions 폴더가 중복인 점 (/api/actions)
server actions 를 사용하고는 있지만 쿠키는 일반적인 CRUD 와 구분하면 좋을 것 같다는 생각

위 두 이유로 쿠키는 api/auths/ 쪽에 저장되어도 괜찮을 것 같다는 생각이 들었습니다..!

hakyoung12 added 8 commits October 14, 2024 09:25

[KAN-103] refactor: 유효성검사 문구 상수화

a3aaabd

[KAN-103] remove: user context 삭제

1d97be1

[KAN-103] style: 로그인 이미지 svg 수정

99fbfb0

[KAN-103] refactor: 로그임폼 오류메시지 리팩토링

edcdd20

[KAN-103] refactor: input 컴포넌트 통합

80e4ebe

[KAN-103] remove: PasswordInput 컴포넌트 삭제

306c9bb

[KAN-103] test: Input 테스트패스워드 관련 코드 추가

b146ee3

[KAN-103] chore: 잘못 import 된 코드 삭제

88bb28e

hakyoung12 added the 🧩 Refactor 리팩토링 label Oct 14, 2024

hakyoung12 self-assigned this Oct 14, 2024

hakyoung12 requested review from BeMatthewsong, HMRyu and yunchaeney as code owners October 14, 2024 05:29

hakyoung12 commented Oct 14, 2024

View reviewed changes

yunchaeney approved these changes Oct 14, 2024

View reviewed changes

BeMatthewsong approved these changes Oct 14, 2024

View reviewed changes

HMRyu approved these changes Oct 14, 2024

View reviewed changes

hakyoung12 and others added 2 commits October 15, 2024 09:40

[KAN-103] chore: 쿠키파일 위치 수정

d978dc8

Merge branch 'develop' into refactor/go/KAN-103-refactor-auth-pages

5c12c1d

hakyoung12 merged commit ec192e5 into develop Oct 15, 2024
4 checks passed

hakyoung12 deleted the refactor/go/KAN-103-refactor-auth-pages branch October 16, 2024 06:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: 회원가입 로그인페이지 리팩토링 #185

refactor: 회원가입 로그인페이지 리팩토링 #185

hakyoung12 commented Oct 14, 2024 •

edited

Loading

hakyoung12 Oct 14, 2024

yunchaeney Oct 14, 2024

BeMatthewsong Oct 14, 2024

HMRyu Oct 14, 2024

hakyoung12 Oct 14, 2024

hakyoung12 Oct 14, 2024 •

edited

Loading

hakyoung12 Oct 14, 2024

yunchaeney left a comment

yunchaeney Oct 14, 2024

yunchaeney Oct 14, 2024

BeMatthewsong left a comment

BeMatthewsong Oct 14, 2024

HMRyu left a comment

HMRyu Oct 14, 2024

HMRyu Oct 14, 2024

HMRyu Oct 14, 2024

hakyoung12 Oct 14, 2024

HMRyu commented Oct 14, 2024

refactor: 회원가입 로그인페이지 리팩토링 #185

refactor: 회원가입 로그인페이지 리팩토링 #185

Conversation

hakyoung12 commented Oct 14, 2024 • edited Loading

✏️ 작업 내용

📷 스크린샷

모바일 및 태블릿사이즈에서 이미지 잘림

해결

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

hakyoung12 Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yunchaeney left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BeMatthewsong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HMRyu left a 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

HMRyu commented Oct 14, 2024

현재

hakyoung12 commented Oct 14, 2024 •

edited

Loading

hakyoung12 Oct 14, 2024 •

edited

Loading