Skip to content

Commit 1a64528

Browse files
yummjinyummjin
authored
Merge pull request #24 from KGU-Vote-System/feature/21
[FEAT] : 로그인, 회원가입 기능 연동
2 parents b73ba35 + 4fc3268 commit 1a64528

File tree

9 files changed

+116
-92
lines changed

9 files changed

+116
-92
lines changed

‎src/features/join/api/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './join';

‎src/features/join/api/join.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useSetAtom } from 'jotai';
2+
import { useMutation } from '@tanstack/react-query';
3+
4+
import { post, REQUEST } from '@/shared/api';
5+
import { RAW_PATH } from '@/shared/constants';
6+
import { replace } from '@/shared/utils';
7+
import { userTokenAtom } from '@/shared/atom';
8+
import type { Token, User } from '@/shared/types';
9+
10+
const submitUserJoin = async (data: User) => {
11+
const response = await post<User, Token>({
12+
request: REQUEST.JOIN,
13+
data: data,
14+
});
15+
return response.data;
16+
};
17+
18+
export const useUserJoin = () => {
19+
const setUserToken = useSetAtom(userTokenAtom);
20+
return useMutation<Token, Error, { data: User }>({
21+
mutationFn: ({ data }) => submitUserJoin(data),
22+
onSuccess: data => {
23+
const accessToken = data.accessToken;
24+
setUserToken({
25+
accessToken: accessToken,
26+
});
27+
replace(RAW_PATH.SIGNUP_LOADING);
28+
},
29+
onError: () => {
30+
alert('회원가입에 실패했어요. 다시 시도해 주세요!');
31+
replace(RAW_PATH.HOME);
32+
},
33+
});
34+
};

‎src/features/join/ui/JoinForm.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { useAtomValue, useSetAtom } from 'jotai';
2+
import { useForm } from 'react-hook-form';
3+
4+
import { userEmailAtom, userModeAtom } from '@/shared/atom';
5+
import { Button, Input } from '@/shared/ui';
6+
import type { User } from '@/shared/types';
7+
import { useUserJoin } from '../api';
8+
9+
export default function JoinForm() {
10+
const setUserMode = useSetAtom(userModeAtom);
11+
const { kakaoEmail } = useAtomValue(userEmailAtom);
12+
const { mutate } = useUserJoin();
13+
const { register, handleSubmit } = useForm<User>({
14+
defaultValues: {
15+
kakaoEmail: kakaoEmail,
16+
name: '',
17+
collegeMajorName: '컴퓨터공학전공',
18+
studentEmail: 'faker@kyonggi.ac.kr',
19+
walletAddress: '0x1234abcd5678',
20+
keyId: 'kas-key-id',
21+
krn: 'krn:1001:abcd',
22+
},
23+
});
24+
25+
return (
26+
<form
27+
className="flex flex-col gap-y-12"
28+
onSubmit={handleSubmit(data => {
29+
mutate({ data });
30+
})}
31+
>
32+
<div className="w-full space-y-3">
33+
<Input
34+
intent="login"
35+
placeholder="이름"
36+
{...register('name', { required: true })}
37+
/>
38+
<Input intent="login" placeholder="비밀번호" type="password" />
39+
</div>
40+
<div className="space-y-3">
41+
<div className="flex items-center gap-3">
42+
<div className="bg-s h-[0.5px] flex-1" />
43+
<span className="text-s text-sm">가입 방식</span>
44+
<div className="bg-s h-[0.5px] flex-1" />
45+
</div>
46+
<Button
47+
intent="login"
48+
className="py-[14px] text-lg"
49+
type="submit"
50+
onClick={() => {
51+
setUserMode({ mode: 'STUDENT' as const });
52+
}}
53+
>
54+
학생으로 시작하기
55+
</Button>
56+
<Button
57+
intent="loginWhite"
58+
className="py-[14px] text-lg"
59+
type="submit"
60+
onClick={() => {
61+
setUserMode({ mode: 'ADMIN' as const });
62+
}}
63+
>
64+
관리자로 시작하기
65+
</Button>
66+
</div>
67+
</form>
68+
);
69+
}

‎src/features/join/ui/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as JoinForm } from './JoinForm';

‎src/screen/auth/api/auth.ts‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,3 @@
1-
// import { useMutation } from '@tanstack/react-query';
2-
3-
// import { post, REQUEST } from '@/shared/api';
4-
// import { RAW_PATH } from '@/shared/constants';
5-
// import { replace } from '@/shared/utils';
6-
// import { userTokenAtom } from '@/shared/atom';
7-
// import { useSetAtom } from 'jotai';
8-
9-
// interface KakaoLoginRequest {
10-
// code: string;
11-
// }
12-
13-
// interface KakaoLoginResponse {
14-
// kakaoEmail: string;
15-
// tokenDto: {
16-
// grantType: string;
17-
// accessToken: string;
18-
// accessTokenExpiresIn: number;
19-
// refreshToken: string;
20-
// };
21-
// signedUp: boolean;
22-
// }
23-
24-
// const submitKakaoLogin = async (code: string) => {
25-
// const response = await post<KakaoLoginRequest, KakaoLoginResponse>({
26-
// request: REQUEST.LOGIN,
27-
// data: { code: code },
28-
// });
29-
// return response.data;
30-
// };
31-
32-
// export const useKakaoLogin = () => {
33-
// const setKakaoLogin = useSetAtom(userTokenAtom);
34-
// return useMutation<KakaoLoginResponse, Error, { code: string }>({
35-
// mutationFn: ({ code }) => submitKakaoLogin(code),
36-
// onSuccess: data => {
37-
// const kakaoAccessToken = data.tokenDto.accessToken;
38-
// setKakaoLogin({
39-
// accessToken: kakaoAccessToken,
40-
// });
41-
// if (data.signedUp) replace(RAW_PATH.HOME);
42-
// else {
43-
// alert('회원가입 화면으로 이동합니다!');
44-
// replace(RAW_PATH.SIGNUP);
45-
// }
46-
// },
47-
// onError: () => {
48-
// alert('로그인에 실패했어요. 다시 시도해 주세요!');
49-
// replace(RAW_PATH.HOME);
50-
// },
51-
// });
52-
// };
53-
541
import { useQuery } from '@tanstack/react-query';
552

563
import { get, REQUEST } from '@/shared/api';

‎src/screen/auth/ui/AuthScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { LoginBg } from '@/assets/image';
66
import { replace } from '@/shared/utils';
77
import { RAW_PATH } from '@/shared/constants';
88
import { userEmailAtom, userTokenAtom } from '@/shared/atom';
9-
import Loader from '@/shared/ui/Loader';
9+
import { Loader } from '@/shared/ui';
1010

1111
export default function AuthScreen() {
1212
const setUserToken = useSetAtom(userTokenAtom);

‎src/shared/types/user.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,10 @@ export type User = {
77
keyId: string;
88
krn: string;
99
};
10+
11+
export type Token = {
12+
grantType: string;
13+
accessToken: string;
14+
accessTokenExpiresIn: number;
15+
refreshToken: string;
16+
};

‎src/shared/ui/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export { default as Button } from './Button';
44
export { default as Card } from './Card';
55
export { default as DateBadge } from './DateBadge';
66
export { default as Input } from './Input';
7+
export { default as Loader } from './Loader';

‎src/widgets/join/ui/JoinContainer.tsx‎

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import { userModeAtom } from '@/shared/atom';
2-
import { RAW_PATH } from '@/shared/constants';
3-
import { Button, Input } from '@/shared/ui';
4-
import { replace } from '@/shared/utils';
5-
import { useSetAtom } from 'jotai';
1+
import { JoinForm } from '@/features/join/ui';
62

73
export default function LoginContainer() {
8-
const setUserMode = useSetAtom(userModeAtom);
94
return (
105
<div className="p-normal z-10 grid size-full place-items-center">
116
<div className="shadow-login box-border grid h-[530px] w-full place-items-center rounded-lg border-[1px] border-white bg-white/50 p-6 backdrop-blur-sm">
@@ -15,38 +10,7 @@ export default function LoginContainer() {
1510
<br />
1611
선거에 참여할 수 있어요!
1712
</p>
18-
<div className="w-full space-y-3">
19-
<Input intent="login" placeholder="학번" />
20-
<Input intent="login" placeholder="비밀번호" type="password" />
21-
</div>
22-
23-
<div className="space-y-3">
24-
<div className="flex items-center gap-3">
25-
<div className="bg-s h-[0.5px] flex-1" />
26-
<span className="text-s text-sm">가입 방식</span>
27-
<div className="bg-s h-[0.5px] flex-1" />
28-
</div>
29-
<Button
30-
intent="login"
31-
className="py-[14px] text-lg"
32-
onClick={() => {
33-
setUserMode({ mode: 'STUDENT' as const });
34-
replace(RAW_PATH.SIGNUP_LOADING);
35-
}}
36-
>
37-
학생으로 시작하기
38-
</Button>
39-
<Button
40-
intent="loginWhite"
41-
className="py-[14px] text-lg"
42-
onClick={() => {
43-
setUserMode({ mode: 'ADMIN' as const });
44-
replace(RAW_PATH.SIGNUP_LOADING);
45-
}}
46-
>
47-
관리자로 시작하기
48-
</Button>
49-
</div>
13+
<JoinForm />
5014
</div>
5115
</div>
5216
</div>

0 commit comments

Comments
 (0)