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

minjeong9919 · 2024-06-18T17:10:07Z

🚀 작업 내용

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

📝 참고 사항

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

fill 처리 해두었습니다.
로그인 부분에서 눈알을 누르면 모달창이 아예 꺼지는 이슈 발견했습니다. 이 부분 머지전까지 해결해볼게요
추후 accessToken은 Tanstack query로 관리해야해서 이 부분은 해당 브랜치 머지 후 추가적으로 수정 들어갈 것 같습니다.
로그인 모달창과 헤더 연결 또한 이슈가 생겨서 추후 이루어질 예정입니다.
토스트 컴포넌트에서 아이콘은 하얀색으로 채워보려고 했는데 안채워집니다. 만약 아이콘 넣는다면 하얀 배경 없이 들어가야할 것 같습니다.

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

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

✅ 체크리스트

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

bokeeeey · 2024-06-18T17:31:51Z

package.json

@@ -24,6 +24,7 @@
    "react-colorful": "^5.6.1",
    "react-dom": "^18",
    "react-hook-form": "^7.51.4",
+    "react-router-dom": "^6.23.1",


next.js에서 react-router-dom사용은 좀 찾아보니까 일반적이진 않은거같아요
충돌문제도 있고 해서 이건 다른 방법을 찾아보거나,
주강사님이나 멘토님이 사용 ok하면 사용하는게 좋을거같스빈다

보니까 router-dom 설치만 하고 사용은 안한 것 같네요 useRouter 때문에 깔았던 것 같은데 'next/navigation'에 있는 useRouter로 사용했어요! 이 부분 uninstall 하겠습니다!

bokeeeey · 2024-06-18T17:32:21Z

public/index.ts

@@ -4,6 +4,11 @@ export { default as EyeOffIcon } from './svgs/eyeOff.svg';
 export { default as EyeOnIcon } from './svgs/eyeOn.svg';
 export { default as LogoIcon } from './svgs/logo.svg';
 export { default as SearchIcon } from './svgs/search.svg';
+
+export { default as GitIcon } from '@/public/svgs/gitHub.svg';


Suggested change

export { default as GitIcon } from '@/public/svgs/gitHub.svg';

export { default as GitIcon } from '@/public/svgs/github.svg';

github 아이콘과 git 아이콘은 서로 다른걸로 알고있어요 더 명확히 사용하는게 좋을거같읍니다

옹 그렇군여 네넹 바로 수정하겠습니다

bokeeeey · 2024-06-18T17:33:29Z

src/api/authAPI.ts

@@ -0,0 +1,51 @@
+import { FetchSigninInfoTypes } from '@/types';


Suggested change

import { FetchSigninInfoTypes } from '@/types';

import type { FetchSigninInfoTypes } from '@/types';

bokeeeey · 2024-06-18T17:35:50Z

src/api/authAPI.ts

+    const data = await response.json();
+    return data;
+  } catch (error) {
+    throw new Error('회원가입 실패!');


catch로 error을 받아오도록 만드셨으면 new Error을 생성할 필요 없이
catch로 들어오는 error을 던져줘도 되요

오호,, 그게 더 간단하겠네요!

bokeeeey · 2024-06-18T17:37:33Z

src/api/authAPI.ts

+      headers: {
+        accept: 'application/json',
+      },
+      body: formData,
+    });


Suggested change

headers: {

accept: 'application/json',

},

body: formData,

});

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify(formData),

});

이렇게 보내야하지 않나요? 처음보는 방식이네유

보내는 바디 형식이 form-data 형식이라 저렇게 보냈어요!! 혹시 몰라서 Json.stringify로 시도해봤는데 에러 뜨네욤,,

https://damagucci-juice.tistory.com/entry/HTTP-Accept-type-header-%EC%99%80-Content-Type-header-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
이것도 일반적인 사용은 아닌거같아요

아 네넵 그러네요 header의 content type 으로 json이 들어가면 안되겠네요! 이 부분은 Formdata 타입으로 맞춰놓겠습니다!

bokeeeey · 2024-06-18T18:09:06Z

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

요소가 form보다는 checkbox에 더 가까운거같아요

네넵 네이밍 수정 하겠습니다

bokeeeey · 2024-06-18T18:09:47Z

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

+.not-checked {
+  color: red;
+}


글로벌 변수로 사용가능할거같아요

bokeeeey · 2024-06-18T18:21:12Z

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

inputs가 아니라 form이 되어야 맞는거같아요

이렇게 가는건 어떠신가요?

Signup -> SignupForm

SignupInputs는 그대로

SignupForm으로 바꾸면 Signup 컴포넌트 이름이 애매해져서 이런 식으로 생각해봤습니다!

bokeeeey · 2024-06-18T18:29:38Z

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

+  isAgreementAllChecked: boolean;
+  setIsAllValid: Dispatch<SetStateAction<boolean>>;
+}
+export default forwardRef<HTMLFormElement, SignupInputProps>(function SignupInputs(


혹시 forwardRef가 필요한 경우가 있을까요?
외부에서 참조하고있는것 같지 않아서 여쭤옵니다

현재 Signup 컴포넌트에서 ref 참조하고 있습니다! 회원가입의 폼 제출 버튼은 SignupInputs 컴포넌트의 외부에 있기 때문에 ref를 통해 form을 참조함으로써 외부로부터 제출이 가능하게끔 만들었습니다!

bokeeeey · 2024-06-18T18:38:49Z

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

일반적인 네이밍이 아닌거같아요

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 12 commits June 16, 2024 21:11

Test: Oauth 로그인 시도

0fb8ed2

Test: 회원가입 API 요청 테스트 완료

6d4941d

Refactor: 이메일 중복, 닉네임 중복 응답 관리 코드 수정

49d375d

Refactor: 로그인 성공 시 화면 새로고침

5d46156

Feat: 로그인, 회원가입 상태에 따른 리다이렉트 구현

11b1294

Refactor: hook form 상태에 따른 회원가입 버튼 색 실시간으로 변동

425a56b

Refactor: 'develop' 브랜치 pull

8d327dc

Style: 토스트 커스텀 완료

8221876

Refactor: 머지된 폰 넘버 컴포넌트 삽입

1f0b183

Fix: 토스트 띄우고 페이지 이동

6cf4083

Refactor: 로그인, 회원가입 파일 위치 변경

b15189d

Refactor: 컨벤션에 맞게 전반적인 코드 수정

994ade9

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

minjeong9919 requested review from devToram, ggjiny, armd482, Young2un and bokeeeey June 18, 2024 17:10

minjeong9919 self-assigned this Jun 18, 2024

minjeong9919 linked an issue Jun 18, 2024 that may be closed by this pull request

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

Closed

Refactor: api 네트워크 오류, 응답 상태 처리

024dedc

bokeeeey reviewed Jun 18, 2024

View reviewed changes

minjeong9919 added 5 commits June 19, 2024 13:19

Refactor: 피드백 반영

f54e8eb

Fix: .env 파일 제거

8dd4f47

Refactor: 피드백 반영

0105ab6

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

f457938

Fix: ignore 파일에서 .env 제거

6337a56

minjeong9919 closed this Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

minjeong9919 commented Jun 18, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 19, 2024

minjeong9919 Jun 19, 2024 •

edited

Loading

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

minjeong9919 Jun 19, 2024

bokeeeey Jun 18, 2024

	export { default as GitIcon } from '@/public/svgs/gitHub.svg';
	export { default as GitIcon } from '@/public/svgs/github.svg';

		@@ -0,0 +1,51 @@
		import { FetchSigninInfoTypes } from '@/types';

	import { FetchSigninInfoTypes } from '@/types';
	import type { FetchSigninInfoTypes } from '@/types';

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

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

Conversation

minjeong9919 commented Jun 18, 2024

🚀 작업 내용

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

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

minjeong9919 Jun 19, 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

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

minjeong9919 Jun 19, 2024 •

edited

Loading