fix: change role prop value

kakao-tech-campus-2nd-step3 · Oct 23, 2024 · 5c59902 · 5c59902
1 parent 8fe1bd7
commit 5c59902
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/src/features/auth/SignUp/components/RoleSelection.tsx b/src/features/auth/SignUp/components/RoleSelection.tsx
@@ -7,7 +7,7 @@ export default function RoleSelection() {
   return (
     <Flex justifyContent="center" alignItems="center" gap={FLEX_GAP_CONFIG}>
       <RoleSelector role="employer" />
-      <RoleSelector role="worker" />
+      <RoleSelector role="employee" />
     </Flex>
   );
 }
diff --git a/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx b/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx
@@ -1,5 +1,6 @@
 import { responsiveStyle } from '@utils/responsive';
 import { Icon } from '@components/common';
+import ROUTE_PATH from '@/routes/path';
 
 export const roleConfig = {
   employer: {
@@ -20,8 +21,9 @@ export const roleConfig = {
         이력서 정보를 등록하러 가실까요?
       </>
     ),
+    toNavigate: ROUTE_PATH.HOME, // 이력서 등록 페이지로 변경
   },
-  worker: {
+  employee: {
     icon: (
       <Icon.Role.Worker
         css={responsiveStyle({
@@ -39,5 +41,6 @@ export const roleConfig = {
         사업주 정보를 등록하러 가실까요?
       </>
     ),
+    toNavigate: ROUTE_PATH.HOME, // 회사 등록 페이지로 변경
   },
 };
diff --git a/src/features/auth/SignUp/components/common/RoleSelector/index.tsx b/src/features/auth/SignUp/components/common/RoleSelector/index.tsx
@@ -4,6 +4,9 @@ import { bounceAnimation } from '@assets/styles/animations';
 import { responsiveStyle } from '@utils/responsive';
 import useModals from '@components/common/Modal/hooks/useModals';
 import { modals } from '@/components/common/Modal/Modals';
+import { useRegister } from '@/apis/auth/mutations/useRegister';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
 const cardStyle = responsiveStyle({
   default: { padding: '60px 120px', cursor: 'pointer' },
@@ -18,21 +21,34 @@ const iconStyle = responsiveStyle({
 });
 
 type Props = {
-  role: 'employer' | 'worker';
+  role: 'employer' | 'employee';
 };
 
 export default function RoleSelector({ role }: Props) {
+  const navigate = useNavigate();
   const { openModal } = useModals();
+  const { mutate } = useRegister();
 
-  const handleClick = () => {
+  const handleRegister = () => {
+    mutate(
+      { type: role },
+      {
+        onSuccess: () => {
+          handleOpenModal();
+        },
+      },
+    );
+  };
+
+  const handleOpenModal = () =>
     openModal(modals.roleModal, {
       content: roleConfig[role].modalContent,
-      onSubmit: () => console.log('이력서 등록 페이지로 이동'),
+      onSubmit: () => navigate(roleConfig[role].toNavigate),
+      onClose: () => navigate(ROUTE_PATH.HOME),
     });
-  };
 
   return (
-    <Card borderColor="blue" borderRadius="12px" css={[bounceAnimation, cardStyle]} onClick={handleClick}>
+    <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>