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: 회원가입 페이지, 로그인 페이지 OAuth, 모든 등록 내역페이지 기능 구현 #33

Merged
merged 7 commits into from
Aug 25, 2024

Conversation

aquaman122
Copy link
Contributor

@aquaman122 aquaman122 commented Aug 15, 2024

💡 작업 내용

  • 회원가입 페이지
  • 로그인 페이지 OAuth
  • 모든 등록 내역페이지 기능 구현

💡 자세한 설명

🛠️ 회원가입 페이지

// Signup.tsx
const Signup = () => {
  const [bank, setBank] = useState('');
  const formRef = useRef<HTMLFormElement>(null);
  const navigate = useNavigate();
  const {
    register,
    errors,
    watch,
    activeButtonSheet,
    setActiveButtonSheet,
    onCloseBottomSheet,
    onSubmit,
  } = useSignup();

  const handleSubmitClick = () => {
    if (formRef.current) {
      formRef.current.dispatchEvent(
        new Event('submit', { cancelable: true, bubbles: true }),
      );
    }
  };

  const nickname = watch('nickname');
  const region = watch('region');
  const introduction = watch('introduction');

  const isFormValid = nickname && region && introduction;

  return (
    <Layout>
      <Layout.Header handleBack={() => navigate('/')}>회원가입</Layout.Header>
      <Layout.Main>
        <form
          ref={formRef}
          onSubmit={onSubmit}
          className="flex flex-col px-2 py-4 space-y-4"
        >
          <h2 className="pb-4 text-lg font-bold">기본 정보 입력</h2>
          <ProfileInput
            title="닉네임 *"
            placeholder="닉네임을 입력해주세요 (공백 제외 15글자 이내)"
            registerProps={register('nickname', { required: true })}
            error={errors.nickname}
          />
          <div className="relative">
            <ProfileInput
              title="은행 선택"
              value={bank}
              placeholder="은행을 선택해주세요"
              registerProps={register('bank')}
            />
            <FaCaretDown
              className="text-gray-400 text-2xl absolute right-2 bottom-2.5"
              data-testid="bank-dropdown-icon"
              onClick={() => setActiveButtonSheet(!activeButtonSheet)}
            />
          </div>
          {activeButtonSheet && (
            <SelectBank onClose={onCloseBottomSheet} setBank={setBank} />
          )}
          <ProfileInput
            title="계좌번호"
            placeholder="계좌번호를 입력해주세요."
            registerProps={register('accountNumber')}
          />
          <ProfileInput
            title="자기소개 *"
            placeholder="간단한 자기 소개를 입력해주세요."
            registerProps={register('introduction', { required: true })}
            error={errors.introduction}
          />
          <ProfileInput
            title="링크"
            placeholder="http://"
            registerProps={register('link')}
          />
        </form>
      </Layout.Main>
      <Layout.Footer>
        <Button
          type="submit"
          className="w-full h-[47px] rounded-lg"
          color={isFormValid ? 'cheeseYellow' : 'gray2'}
          onClick={handleSubmitClick}
        >
          회원 가입 완료
        </Button>
      </Layout.Footer>
    </Layout>
  );
};

🛠️ 로그인 페이지 Oauth

// Login.tsx
const Login = () => {
  const navigate = useNavigate();

  const handleKakaoLogin = () => {
    if ((window as Window).Kakao) {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (window as any).Kakao.Auth.authorize({
        redirectUri: 'http://localhost:5173/login/kakao/code',
      });
    }
  };

  return (
    <Layout>
      <Layout.Header handleBack={() => navigate('/')}>로그인</Layout.Header>
      <Layout.Main>
        <div className="flex flex-col items-center h-full">
          {/* <img /> */}
          <div className="w-full h-[52px]">
            <button className="w-full h-[52px]" onClick={handleKakaoLogin}>
              <img
                src="/kakao_login_large_wide.png"
                alt="kakaoButton"
                className="w-full h-full object-contain "
              />
            </button>
            <Button
              type='button'
              className="relative flex items-center justify-center w-full border-none rounded-md bg-mainCheeseYellow"
              size="large"
              color="black"
            >
              <SiNaver className="absolute text-2xl text-white left-3" />
              <p>네이버로 시작하기</p>
            </Button>
          </div>
        </div>
      </Layout.Main>
    </Layout>
  );
};

🛠️ 모든 등록 내역페이지

// 

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

  • PR 제목을 형식에 맞게 작성했나요?
  • 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
  • 이슈는 close 했나요?
  • Reviewers, Labels, Projects를 등록했나요?
  • 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
  • 테스트는 잘 통과했나요?
  • 불필요한 코드는 제거했나요?

closes #이슈번호

@aquaman122 aquaman122 added the ✨feature 구현, 개선 사항 관련 부분 label Aug 15, 2024
@aquaman122 aquaman122 self-assigned this Aug 15, 2024
@aquaman122 aquaman122 marked this pull request as draft August 15, 2024 01:18
Copy link
Contributor

@CLOUDoort CLOUDoort left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

@aquaman122 aquaman122 marked this pull request as ready for review August 25, 2024 05:01
@aquaman122 aquaman122 merged commit 938a34c into dev Aug 25, 2024
@aquaman122 aquaman122 deleted the feat/login-feature branch September 3, 2024 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨feature 구현, 개선 사항 관련 부분
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants