Skip to content

Commit

Permalink
feat(shelter, volunteer): SigninPage 컴포넌트 msw 관련 로직 추가 (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sukvvon
sukvvon committed Nov 18, 2023
1 parent 056b270 commit bdd9471
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 8 deletions.
52 changes: 48 additions & 4 deletions apps/shelter/src/pages/signin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,30 @@ import {
Input,
InputGroup,
InputRightElement,
useToast,
VStack,
} from '@chakra-ui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import { AxiosError } from 'axios';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import AnimalfriendsLogo from 'shared/assets/image-anifriends-logo.png';
import IoEyeOff from 'shared/assets/IoEyeOff';
import IoEyeSharp from 'shared/assets/IoEyeSharp';
import useToggle from 'shared/hooks/useToggle';
import type {
SigninRequestData,
SigninResponseData,
} from 'shared/types/apis/auth';
import { ErrorResponseData } from 'shared/types/apis/error';
import * as z from 'zod';

import { signinShelter } from '@/apis/auth';
import PATH from '@/constants/path';

type Schema = z.infer<typeof schema>;

const schema = z.object({
Expand All @@ -31,19 +45,48 @@ const schema = z.object({
});

export default function SigninPage() {
const [isShow, toggleInputType] = useToggle();
const navigate = useNavigate();
const toast = useToast();
const [isShow, toggleInputShow] = useToggle();
const {
register,
handleSubmit,
formState: { errors },
setFocus,
} = useForm<Schema>({
resolver: zodResolver(schema),
});
const { mutate } = useMutation<
AxiosResponse<SigninResponseData>,
AxiosError<ErrorResponseData>,
SigninRequestData
>({
mutationFn: (data) => signinShelter(data),
onSuccess: () => {
navigate(`/${PATH.VOLUNTEERS.INDEX}`);
},
onError: (error) => {
toast({
position: 'top',
description: error.response?.data.message,
status: 'error',
duration: 1500,
});

setFocus('email');
},
});

const onSubmit = (data: Schema) => {
console.log(data);
const goSignupPage = () => {
navigate(`/${PATH.SIGNUP}`);
};

const onSubmit = async (data: Schema) => {
mutate(data);
};

useEffect(() => setFocus('email'), [setFocus]);

return (
<Box px={4} pb="104px">
<Center w="100%" py={10}>
Expand Down Expand Up @@ -73,7 +116,7 @@ export default function SigninPage() {
placeholder="비밀번호를 입력하세요"
type={isShow ? 'text' : 'password'}
/>
<InputRightElement onClick={toggleInputType}>
<InputRightElement onClick={toggleInputShow}>
<Icon as={isShow ? IoEyeOff : IoEyeSharp} />
</InputRightElement>
</InputGroup>
Expand Down Expand Up @@ -121,6 +164,7 @@ export default function SigninPage() {
_active={{
bg: undefined,
}}
onClick={goSignupPage}
>
회원가입
</Button>
Expand Down
57 changes: 53 additions & 4 deletions apps/volunteer/src/pages/signin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,30 @@ import {
Input,
InputGroup,
InputRightElement,
useToast,
VStack,
} from '@chakra-ui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import { AxiosError } from 'axios';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import AnimalfriendsLogo from 'shared/assets/image-anifriends-logo.png';
import IoEyeOff from 'shared/assets/IoEyeOff';
import IoEyeSharp from 'shared/assets/IoEyeSharp';
import useToggle from 'shared/hooks/useToggle';
import type {
SigninRequestData,
SigninResponseData,
} from 'shared/types/apis/auth';
import { ErrorResponseData } from 'shared/types/apis/error';
import * as z from 'zod';

import { signinVolunteer } from '@/apis/auth';
import PATH from '@/constants/path';

type Schema = z.infer<typeof schema>;

const schema = z.object({
Expand All @@ -31,19 +45,52 @@ const schema = z.object({
});

export default function SigninPage() {
const [isShow, toggleInputType] = useToggle();
const navigate = useNavigate();
const toast = useToast();
const [isShow, toggleInputShow] = useToggle();
const {
register,
handleSubmit,
formState: { errors },
setFocus,
} = useForm<Schema>({
resolver: zodResolver(schema),
});
const { mutate } = useMutation<
AxiosResponse<SigninResponseData>,
AxiosError<ErrorResponseData>,
SigninRequestData
>({
mutationFn: (data) => signinVolunteer(data),
onSuccess: () => {
navigate(`/${PATH.VOLUNTEERS.INDEX}`);
},
onError: (error) => {
toast({
position: 'top',
description: error.response?.data.message,
status: 'error',
duration: 1500,
});

setFocus('email');
},
});

const goSignupPage = () => {
navigate(`/${PATH.SIGNUP}`);
};

const goVolunteersPage = () => {
navigate(`/${PATH.VOLUNTEERS.INDEX}`);
};

const onSubmit = (data: Schema) => {
console.log(data);
const onSubmit = async (data: Schema) => {
mutate(data);
};

useEffect(() => setFocus('email'), [setFocus]);

return (
<Box px={4} pb="152px">
<Center w="100%" py={10}>
Expand Down Expand Up @@ -73,7 +120,7 @@ export default function SigninPage() {
placeholder="비밀번호를 입력하세요"
type={isShow ? 'text' : 'password'}
/>
<InputRightElement onClick={toggleInputType}>
<InputRightElement onClick={toggleInputShow}>
<Icon as={isShow ? IoEyeOff : IoEyeSharp} />
</InputRightElement>
</InputGroup>
Expand Down Expand Up @@ -121,6 +168,7 @@ export default function SigninPage() {
_active={{
bg: undefined,
}}
onClick={goSignupPage}
>
회원가입
</Button>
Expand All @@ -134,6 +182,7 @@ export default function SigninPage() {
_active={{
bg: undefined,
}}
onClick={goVolunteersPage}
>
비회원으로 사용하기
</Button>
Expand Down

1 comment on commit bdd9471

@vercel
Copy link

@vercel vercel bot commented on bdd9471 Nov 18, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

anifriends-frontend-volunteer – ./apps/volunteer

anifriends-frontend-volunteer-git-main-dongja.vercel.app
anifriends-frontend-volunteer-dongja.vercel.app
anifriends-frontend-volunteer.vercel.app

Please sign in to comment.