[Feat] 로그인 & 회원가입 구현 #98

minjeong9919 · 2024-06-20T08:40:04Z

🚀 작업 내용

로그인 모달창과 회원가입 페이지를 구현하였습니다.
토스트 컴포넌트 커스텀 했습니다.
리팩토링 작업 완성하였습니다.

📝 참고 사항

Oauth 기능은 아직 미완성입니다.
회원가입 약관 동의할 때 체크 표시는 디자인 처럼 stroke 처리하면 체크 안쪽이 안채워져 아래 같이 어색해져서

fill 처리 해두었습니다.
로그인 모달창과 헤더 연결 또한 이슈가 생겨서 추후 이루어질 예정입니다.
토스트 컴포넌트에서 아이콘은 하얀색으로 채워보려고 했는데 안채워집니다. 만약 아이콘 넣는다면 하얀 배경 없이 들어가야할 것 같습니다.

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

close [Feat] 로그인 & 회원가입 구현 #82

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

bokeeeey

더이상 가르칠것이 없으니 이제그만 하산하시지요

bokeeeey · 2024-06-20T10:11:34Z

src/api/authAPI.ts

+      },
+      body: JSON.stringify(formData),
+    });


Suggested change

},

body: JSON.stringify(formData),

});

},

body: JSON.stringify(formData),

});

json으로 파싱해서 보내는거면 accept는 없어되지않아요?

bokeeeey · 2024-06-20T10:14:36Z

src/app/(auth)/sign-in/_component/SignInModal.tsx

+      <div className={cn('auth-section-wrapper')}>
+        {AUTH_SECTION.map((text, i) => (
+          <div key={text} className={cn('auth-section')}>
+            <Link href='/sign-up' className={cn('auth-section-text')}>


Suggested change

<Link href='/sign-up' className={cn('auth-section-text')}>

<Link href={ROUTER.AUTH.SUGN_UP} className={cn('auth-section-text')}>

상수로 쓰면 좋을거같아요

bokeeeey · 2024-06-20T10:20:04Z

src/app/(auth)/sign-up/_component/SignupForm.tsx

+      },
+      onBlur: () => handleCheckDuplicatedEmail(),
+    }),


value를 주입하지 않아도 되나요? 저스트 궁금

지니어스! 근데 value가 아니라 event 객체로 들어오네요! 그래도 바아로 도입

bokeeeey · 2024-06-20T10:24:15Z

src/app/(auth)/sign-up/_component/SignupForm.tsx

+            <InputField
+              label='닉네임'
+              placeholder={PLACEHOLDER.NICKNAME}
+              sizeVariant='md'
+              labelSize='sm'
+              errorMessage={errors.nickname?.message}
+              {...registers.nickname}
+            />


currentLength={changedNickname.length}

onChange로 value 감지해서 해당 props 내리면

이거 나와요우

오 대박 오 근데 아직 머지 안된 부분 맞죵? 머지 되면 바로 적용 하겠슴니다

bokeeeey · 2024-06-20T10:25:41Z

src/app/(auth)/sign-up/_component/SignupForm.tsx

+    gender: register('gender', {
+      required: ERROR_MESSAGE.GENDER.required,
+      setValueAs: (value) => (value === '여자' ? 'FEMALE' : 'MALE'),
+    }),


이건 merge되면 한번 이야기해주세요

bokeeeey · 2024-06-20T10:28:24Z

src/app/(auth)/sign-up/_component/SignupForm.tsx

+        disabled={!isValid}
+        className={cn('button')}
+        fontSize={24}
+        backgroundColor={isValid ? 'background-primary' : 'background-gray-40'}


이건 버튼컴포넌트 안에 css에 작성하는게 더 나아보여요우

: disabled {
대충 비활성화 상태 색상
}

오호!! 근데 그럼 prop을 통해 background 설정이 불가하지 않나요?!!?

disabled상태에서만 적용되는 style이라서 지금 하신거랑 똑같을걸요?

bokeeeey · 2024-06-20T10:29:28Z

src/app/(auth)/sign-up/page.tsx

+
+export default function Page() {
+  return (


Suggested change

export default function Page() {

return (

export default function SignUpPage() {

return (

이름은 표현하는게 좋을거같아요

armd482

수고하셨습니다~

armd482 · 2024-06-20T10:19:02Z

src/api/authAPI.ts

+  }
+};
+
+export const postSignup = async (formData: FormData) => {


오호~ formData를 미리 stringify된 걸로 가져오네요~
뭔가 아래 postSignin 함수는 함수 내부에서 string처리하는데 여긴 string으로 처리된 값을 가져오는데, 이 부분 어떻게 생각하시나요?

postSignin이랑 postSignup의 보내주는 데이터 형식이 다릅니다!! signup은 formdata 형식으로 보내주고, signin은 json 형식이라서요,,

armd482 · 2024-06-20T10:25:19Z

src/api/authAPI.ts

+      },
+      body: JSON.stringify(formData),
+    });
+    const data = await response.json();


구조분해해서 data.data로 리턴하는 게 사용할 때 더 쉬울 것 같아요.
responseData.data.accessToken 이런 식으로 불러오는 것을 responseData.accessToken으로 더 쉽게 불러올 수 있을 것 같아요

Suggested change

const data = await response.json();

const { data } = await response.json();

엇 그러면 SignInModal내에서 response의 안의 status하고 Message 확인이 어렵지 않을까요..?!

armd482 · 2024-06-20T10:29:57Z

src/app/(auth)/sign-in/_component/SigninModal.module.scss

include 순서 일치하면 좋을 것 같습니다!

armd482 · 2024-06-20T10:32:42Z

src/app/(auth)/sign-in/page.tsx

+  const handleSignin = () => {
+    setIsOpenModal(true);
+  };


뭔가 이름이 살짝 아쉬운 느낌이네요. handleOpenSignin? handleOpenModal?

여긴 저스트 테스트 페이지라서 임의로 지어봤답니당 😆 로그인은 모달창이라 아마 이 페이지는 삭제될 거예요!!

armd482 · 2024-06-20T10:34:01Z

src/app/(auth)/sign-up/_component/SignupForm.module.scss

+  margin: 0 auto;
+  margin-bottom: 6rem;


합쳐서 쓸 수 있지 않을까요...?

Suggested change

margin: 0 auto;

margin-bottom: 6rem;

margin: 0 auto 6rem;

armd482 · 2024-06-20T10:34:54Z

src/app/(auth)/sign-up/_component/SignupForm.module.scss

+  font-size: 3rem;
+  font-weight: bold;


이것도 font에 등록하는 게 좋을 것 같아요.(글씨체 pretendard 아닌가요?)

맞아요!! 알고보니 파일 안에 정의되어있엇군뇨,,

Young2un

고생하셨습니다 리액트 훅 폼 마스터 되겠아용~!

Young2un · 2024-06-20T09:08:14Z

public/svgs/gitHub.svg

고양이 뚫렸네여?

오모낫 혹시 뚫리면 문제가 될 수 있을까요,,,!?!??!?!

Young2un · 2024-06-20T09:10:20Z

src/app/(auth)/sign-up/_component/SignupForm.module.scss

+.no-show {
+  display: none;
+}
+
+.checkbox-input {
+  display: none;
+}


합쳐서 적을 수 있겠다 정도,,?

Young2un · 2024-06-20T09:16:51Z

src/styles/toast/toastAnimation.scss

와 이게 커스텀 한건가요? 싱기하다

전 그저 복붙만 했을 뿌운,,

Young2un · 2024-06-20T09:22:33Z

src/app/(auth)/sign-in/_component/SignInModal.tsx

+    } catch (error) {
+      console.error('로그인 요청 실패', error);
+    }


여기는 console찍혀도 될랑가용?

어머머머 센스쟁이 바아로 수정 갑니닷

ggjiny

고생 많으셨습니다 👏👏

ggjiny · 2024-06-21T07:44:24Z

src/app/layout.tsx

@@ -27,6 +30,7 @@ export default async function RootLayout({
      <body>
        <Providers>
          <HydrationBoundary state={dehydrate(queryClient)}>
+            <ToastContainer autoClose={2000} theme='dark' position='top-center' transition={Zoom} />


요거는 토스트 사용하려면 꼭 있어야하는 부분일까요?! 토스트 위치가 밑에 있어도 괜찮아보이긴해요🤔

ggjiny · 2024-06-21T07:45:44Z

src/constants/signUpConstants.ts

+  CONFIRM_PASSWORD: '비밀번호를 한번 더 입력해주세요',
+  NICKNAME: '닉네임을 입력해주세요',
+  PHONE_NUMBER: '휴대폰 번호 (-없이)를 입력해주세요',
+  BIRTHDAY: 'YYYY / MM / DD',


아까도 말씀드렸는데 여기를 YYYYMMDD로 하던지 통일시키는게 좋아보여요~!

ggjiny · 2024-06-21T07:46:08Z

src/styles/toast/toastContainer.scss

minjeong9919 added 30 commits June 10, 2024 15:59

Feat: 모달 프레임 구현 및 인풋 컴포넌트 추가

93e357b

Refactor: 'develop' 브랜치 pull

5a6b1e6

Refactor: 'develop' 브랜치 pull

8e1e87c

Feat: 로그인 버튼 및 Oauth 추가

a4eca4b

Feat: 회원가입 모달창 인풋창 삽입

8e053d0

Feat: 체크 svg 추가 및 circle 추가하여 수정

04d67a5

Feat: 체크박스 커스텀

f261641

Feat: 약관 동의 컴포넌트 구현

6632c24

Feat: 약관 체크 유무에 따라 모두 동의 약관이 자동으로 변하도록 수정

11b4dc4

Refactor: 회원가입 모달에서 페이지로 변환

a685b2d

Fix: 속성 camelCase로 수정

70328ce

Design: 전체적인 css 수정

a4ee643

Feat: 로그인 실패 시 에러메세지 출력

5bf7491

Refactor: input들 컴포넌트로 분리

05bef3a

Refactor: develop 브랜치 pull

8908c52

Refactor: 'develop' 브랜치 pull

24d04aa

Refactor: 'develop' 브랜치 pull

21a39c1

Feat: 인풋 값 미입력 후 포커스 해제 시 에러 발생 구현

3393d6c

Feat: 이메일 중복, 닉네임 중복 api 연동

c9dc34b

Refactor: 생년월일, 휴대폰 번호 유효성 검사 추가

aec20ed

Feat: 약관 동의 상태 유무 부모 컴포넌트에 전달

396ca5f

Refactor: dependency 수정

41c71c6

Test: 이메일 중복, 닉네임 중복 API 요청 결과 테스트 확인 완료

e811144

Feat: 약관 동의 후, 버튼 클릭 시 회원가입 API 요청 기능 구현

1975237

Feat: 로그인 react-hook-form 적용

0b39b51

Fix: Radio 버튼 임시로 수정

9ee1236

Refactor: 'develop' 브랜치 pull

ec85ff5

Fix: 충돌 파일 삭제

5c29263

Fix: LikeButton 잘못 제거해서 다시 생성

5d67d4d

Fix: 충돌 해결을 위해 임시 파일 이름 변경

c248b01

minjeong9919 added 11 commits June 19, 2024 14:58

Refactor: 피드백 반영

0105ab6

Refactor: 닉네임 글자 수 제한 및 이름 -> 닉네임 으로 수정

f457938

Fix: ignore 파일에서 .env 제거

6337a56

Refactor: 'develop' 브랜치 pull

0221036

Refactor: signInput과 SignForm 컴포넌트를 하나로 통합

96d1862

Refactor: 상수 분리 및 변수명 수정

9161854

Refactor: 약관 동의 컴포넌트 통합

61a9dfe

Refactor: 'develop' 브랜치 pull

012e4fa

Fix: 충돌 해결 및 수정

ee4df43

Fix: 파일명 수정

a7bbe70

Refactor: 'develop' 브랜치 pull

8ef5ca5

minjeong9919 added 📖 Page 페이지 제작 📬 API 서버 api 통신 ✨ Component 기능 개발 labels Jun 20, 2024

minjeong9919 requested review from devToram, ggjiny, armd482, Young2un and bokeeeey June 20, 2024 08:40

minjeong9919 self-assigned this Jun 20, 2024

bokeeeey approved these changes Jun 20, 2024

View reviewed changes

armd482 approved these changes Jun 20, 2024

View reviewed changes

Young2un approved these changes Jun 20, 2024

View reviewed changes

minjeong9919 added 4 commits June 20, 2024 21:53

Test: push 중 오류 해결 테스트 1

8b46755

Refactor: 피드백 반영2

75355d0

Refactor: 피드백 반영3

c4f518f

Fix: 저장 안 된 파일 추가

78a902c

ggjiny approved these changes Jun 21, 2024

View reviewed changes

minjeong9919 merged commit c036801 into develop Jun 21, 2024

minjeong9919 deleted the 82-feat-로그인-회원가입-구현 branch June 23, 2024 19:21

	<Link href='/sign-up' className={cn('auth-section-text')}>
	<Link href={ROUTER.AUTH.SUGN_UP} className={cn('auth-section-text')}>

	const data = await response.json();
	const { data } = await response.json();

[Feat] 로그인 & 회원가입 구현 #98

[Feat] 로그인 & 회원가입 구현 #98

Conversation

minjeong9919 commented Jun 20, 2024

🚀 작업 내용

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

bokeeeey 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

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

armd482 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

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

Young2un 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ggjiny 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