Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] 로그인 페이지 구현 #286

Merged
merged 9 commits into from
Nov 27, 2024
Merged

[Feat] 로그인 페이지 구현 #286

merged 9 commits into from
Nov 27, 2024

Conversation

simeunseo
Copy link
Collaborator

관련 이슈 번호

작업 내용

  • oauth 로그인 구현
  • 게스트 로그인 구현
  • 로그인 로딩 인디케이터 추가
  • 그 외 자잘한 UI 오류 해결

PR 포인트

게스트 로그인이 원래 POST로 구현되어있었는데 CORS에러가 나는 문제로 GET으로 변경했습니다.

고민과 학습내용

스크린샷

2024-11-26.3.16.17.mov

@simeunseo simeunseo added FE Frontend 관련 작업 ✨ Feature 새로운 기능 추가 labels Nov 26, 2024
@simeunseo simeunseo added this to the 사용자 인증 시스템 milestone Nov 26, 2024
@simeunseo simeunseo self-assigned this Nov 26, 2024
Copy link

🎨 스토리북 확인하기

Copy link
Collaborator

@begong313 begong313 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@Post('guest/login')
@Get('guest/login')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q:
cors 에러가 발생한다면 main.ts에서 cors 설정을 진행해주면 되는 것 아닌가요? 메서드를 변경한 이유가 있을까요?

Copy link
Collaborator Author

@simeunseo simeunseo Nov 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cors 설정을 해도 해결되지 않는 문제였습니다. 잠깐 알아보니 상당히 복잡하더라구요... 일단 로그인이 지금 저희가 집중해야할 중요한 부분은 아니라고 생각해서 빠른 조치를 취하게 되었습니다. 현재 로그인 방식이 GET에 어울리기도 하구요..!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.milk717.com/gomterview-2

우연히 발견한게 또 곰터뷰 개발자분의 아티클인데 ㅋㅋㅋ 상당한 트러블 슈팅이 있었던것으로 보입니다 흠 이 부분을 집중해서 해결해봐야할지 고민이 됩니다...

const guestUser = {
username: `guest_${randomNum}`,
password: `guest_password_${randomNum}`,
email: `[email protected]`,
nickname: `guest_${randomNum}`,
introduce: `게스트 사용자입니다. `,
profileImageUrl: `https://cataas.com/cat?${Date.now()}`,
profileImageUrl: catImageUrl,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p2:
기본 프로필 이미지에 경우 nullable하게 변경하거나 /으로 접근시 web/public의 정적 파일에 접근할 수 있는 것을 이용하는 것은 어떨까요? (ex: /cat-image.png, vite에 경우 /로 바로 public 폴더에 접근 가능합니다)

이미지를 가져오기 위해 fetch 요청을 할 이유가 없다고 생각합니다

Copy link
Collaborator Author

@simeunseo simeunseo Nov 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이건 여러 게스트 유저를 만들어서 더미를 쌓아놓을 때 기본 이미지보다는 랜덤한 고양이 이미지 들어오는게 단순히 귀엽고 보기 좋을거같아서 넣기는 했습니다 😅 혹시 우려되는 문제가 있을까요? 🥲

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http 요청으로 인해 성능상 좋지 않을 것으로 생성되지만... 고양이 귀엽죠... 우선 두고 테스트 진행하며 문제 발생시 변경해도 좋을 것 같습니다!!! 고양이 지켜!!

Comment on lines -26 to +33
const oauthLogin = async (provider: 'google' | 'github') => {
await axiosInstance.get(`/auth/${provider}/login`);
const guestLogin = () => {
window.location.href = `${ENV.API_URL}/auth/guest/login`;
};

export { logIn, signUp, oauthLogin, signOut };
const oauthLogin = (provider: 'google' | 'github') => {
window.location.href = `${ENV.API_URL}/auth/${provider}/login`;
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1:
axios를 통해 요청을 진행하지 않는건가요? location을 직접 변경하는 이유가 무엇인가요?

Copy link
Collaborator Author

@simeunseo simeunseo Nov 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인 버튼을 눌렀을 때 해당 주소에서 GET을 해야하기 때문에 axios GET 요청이 아닌 링크 이동으로 구현하게 되었습니다!

Copy link
Collaborator

@seoko97 seoko97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

페어프로그래밍을 통한 질문 답변 완료

@simeunseo simeunseo merged commit a753bc2 into develop Nov 27, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE Frontend 관련 작업 ✨ Feature 새로운 기능 추가 size/m
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feat] 게스트 로그인 구현 [Feat] OAuth 로그인 구현
3 participants