useRegister 훅 구현

• 사용자 등록 요청을 처리하는 훅으로, RegisterRequest 타입의 데이터를 받아 서버에 전송하고, RegisterResponse 데이터를 반환합니다.
• 서버 요청은 AUTH_PATH.REGISTER 경로로 전송됩니다.
• 성공 및 실패 시의 후속 작업은 onSuccess, onError 콜백에서 처리할 수 있습니다.

export const useRegister = (): UseMutationResult<RegisterResponse, AxiosError, RegisterRequest> => {
  return useMutation<RegisterResponse, AxiosError, RegisterRequest>({
    mutationFn: postRegister, // postRegister 함수는 RegisterRequest를 받아 RegisterResponse를 반환
  });
};

API 관리 구조 정리

• /auth/mutations에 훅을 관리하였습니다.
• API 응답 및 요청 타입은 types/response.ts types/request.ts에서 관리합니다.

auth
├── mutations
│   └── useRegister.tsx
├── path.ts
└── types
    ├── request.ts
    └── response.ts

• 해당 훅은 RoleSelector 컴포넌트에서 사용되어지고 있습니다.

// @features/auth/SignUp/components/common/RoleSelector

...
import { roleConfig } from './index.config';
import useModals from '@components/common/Modal/hooks/useModals';
import { modals } from '@/components/common/Modal/Modals';
import { useRegister } from '@/apis/auth/mutations/useRegister';

type Props = {
  role: 'employer' | 'employee';
};

export default function RoleSelector({ role }: Props) {
  const navigate = useNavigate();
  const { openModal } = useModals();
  const { mutate } = useRegister();

  const handleRegister = () => {
    mutate(
      { type: role },
      {
        onSuccess: () => {
          handleOpenModal();
        },
      },
    );
  };

  const handleOpenModal = () =>
    openModal(modals.roleModal, {
      content: roleConfig[role].modalContent,
      onSubmit: () => navigate(roleConfig[role].toNavigate),
      onClose: () => navigate(ROUTE_PATH.HOME),
    });

  return (
    <Card borderColor="blue" borderRadius="12px" css={[bounceAnimation, cardStyle]} onClick={handleRegister}>
      <Flex direction="column" alignItems="center">
        <div css={iconStyle}>{roleConfig[role].icon}</div>
        <Typo element="h2" color="blue" size="18px" bold>
          {roleConfig[role].text}
        </Typo>
      </Flex>
    </Card>
  );
}