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

회원가입 / 로그인 페이지 구현, 기능 구현 #284

Merged
merged 68 commits into from
Aug 6, 2024

Conversation

Jaymyong66
Copy link
Contributor

⚡️ 관련 이슈

#197, #198

📍주요 변경 사항

  1. useInput 훅 생성
  • useInput의 인자로 value와 validate 함수를 받아 실제 값과 에러 상태를 보유하게 하였습니다.
  1. 회원가입
  • 이메일, 닉네임, 비밀번호, 비밀번호 확인 입력 기능 및 유효성 검사
  • 이메일, 닉네임의 경우 onBlur 이벤트 발생 시 서버로 중복 검사 요청
    • 중복 검사 버튼을 만드는 것보다 UX, 디자인 관점에서 낫다고 판단
  • 비밀번호의 경우 요구사항에 따라 비밀번호 보기 버튼 구현
  • 비밀번호 검사(confirmPassword)의 경우 비밀번호만 바뀌어도 비밀번호 검사의 유효성이 실행되도록 useEffect로 구현
  1. 로그인
  • 이메일, 비밀번호 유효성 검사
  1. localStorage 같은 경우, 만약 백엔드가 Basic token + httponly 쿠키로 구현이 된다면 필요 없어보입니다. JWT 토큰을 가정하고 구현된 부분입니다.

  2. user 정보 관리

  • 현재 Context로 user 정보(username, id)를 관리할까 하였으나 다른 템플릿 부분에서 구체적으로 필요한 정보와 인증 토큰 부분이 확정되지 않아 확정 이후 push 예정
    • 만약 httponly 쿠키로 인증 / 인가 처리를 한다면 username만 관리 필요하다고 생각

🎸기타

  1. 회원가입, 로그인 시 Heading 문구
  • 현재는 임의로 Hello Codezap으로 해두었습니다. 추후 로고나 다른 문구로 교체 가능합니다.
  1. 헤더의 Signup, Login 링크
  • Button 컴포넌트 리팩토링 완료 후 추가 예정입니다.
  1. 로그아웃
  • 백엔드 로직 구현, 드롭다운 UI 완료되면 함께 추가 예정입니다.
  1. 토스트 메시지
  • 회원가입, 로그인 완료 후 다음 페이지로 라우팅되지만, 각각 완료되었음을 나타내는 토스트 메시지 필요해보입니다.
  1. route 경로 매직넘버
  • 로그인, 회원가입 완료 후 넘어가는 route의 경로가 현재 매직넘버로 작성. 추후 해당 endpoint를 관리할 필요성이 있어 보입니다.

@Jaymyong66 Jaymyong66 added feature 기능 추가 FE 프론트엔드 labels Aug 6, 2024
@Jaymyong66 Jaymyong66 added this to the 3차 스프린트 🐤 milestone Aug 6, 2024
@Jaymyong66 Jaymyong66 requested a review from Hain-tain August 6, 2024 04:01
@Jaymyong66 Jaymyong66 self-assigned this Aug 6, 2024
@Jaymyong66 Jaymyong66 requested a review from vi-wolhwa August 6, 2024 04:01
Comment on lines +1 to +20
import { useCallback, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import { useLoginStateQuery } from '@/queries/authentication/useLoginStateQuery';

export const useCheckLoginState = () => {
const { error, isError } = useLoginStateQuery();
const navigate = useNavigate();

const handleLoginNavigate = useCallback(() => {
navigate('/login');
}, [navigate]);

useEffect(() => {
if (isError) {
alert(error.message);
handleLoginNavigate();
}
}, [error, isError, handleLoginNavigate]);
};
Copy link
Contributor

Choose a reason for hiding this comment

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

접근 권한을 제어하는 다른 방법도 있더라구요! 링크 첨부해요!
이와 같이 router.ts에서 설정하면 각 페이지에서 인가 여부를 판단하지 않아도 됩니다!

https://github.com/noveogroup-amorgunov/nukeapp/blob/main/src/app/appRouter.tsx

Copy link
Contributor

@Hain-tain Hain-tain left a comment

Choose a reason for hiding this comment

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

이전 PR 리뷰 참고 부탁드립니다.
새로 반영된 사항들은 오늘 중간 컴펌 끝나고 마저 리뷰 달게요!

@Hain-tain Hain-tain merged commit 23bf890 into woowacourse-teams:dev/fe Aug 6, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트엔드 feature 기능 추가
Projects
Status: Weekend Done
Development

Successfully merging this pull request may close these issues.

3 participants