feat: add SignUp page

kakao-tech-campus-2nd-step3 · Oct 2, 2024 · 1512462 · 1512462
1 parent 80e1770
commit 1512462
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 9 deletions.
diff --git a/src/features/auth/components/RoleModal.tsx b/src/features/auth/components/RoleModal.tsx
@@ -0,0 +1,34 @@
+import { Modal, Typo, Flex, Button } from '@components/common';
+import { ReactNode } from 'react';
+
+type Props = {
+  content: ReactNode;
+  onClose: () => void;
+};
+
+export default function RoleModal({ content, onClose }: Props) {
+  return (
+    <Modal
+      textChildren={
+        <div css={{ textAlign: 'center' }}>
+          <Typo element="strong" size="18px" bold>
+            정보를 입력해주세요. <br />
+            <br />
+            {content}
+            <br />
+            <br />
+            <span css={{ fontWeight: '400' }}>* 추후 마이페이지에서 수정 할 수 있습니다.</span>
+          </Typo>
+          <br />
+        </div>
+      }
+      buttonChildren={
+        <Flex gap={{ x: '16px' }}>
+          <Button theme="default">등록할게요</Button>
+          <Button theme="outlined">괜찮아요</Button>
+        </Flex>
+      }
+      onClose={onClose}
+    />
+  );
+}
diff --git a/src/features/auth/components/RoleSelection.tsx b/src/features/auth/components/RoleSelection.tsx
@@ -0,0 +1,16 @@
+import { Flex } from '@components/common';
+import RoleSelector from './RoleSelector';
+import { ReactNode } from 'react';
+
+type Props = {
+  onRoleSelect: (modalContent: ReactNode) => void;
+};
+
+export default function RoleSelection({ onRoleSelect }: Props) {
+  return (
+    <Flex justifyContent="center" alignItems="center" gap={{ x: '30px' }}>
+      <RoleSelector role="employer" onClick={onRoleSelect} />
+      <RoleSelector role="worker" onClick={onRoleSelect} />
+    </Flex>
+  );
+}
diff --git a/src/features/auth/components/RoleSelector/index.config.tsx b/src/features/auth/components/RoleSelector/index.config.tsx
@@ -0,0 +1,26 @@
+import { Icon } from '@components/common';
+
+export const roleConfig = {
+  employer: {
+    icon: <Icon.Role.Employer />,
+    text: '사업주 가입',
+    modalContent: (
+      <>
+        이력서에 대한 정보가 필요해요.
+        <br />
+        이력서 정보를 등록하러 가실까요?
+      </>
+    ),
+  },
+  worker: {
+    icon: <Icon.Role.Worker />,
+    text: '근로자 가입',
+    modalContent: (
+      <>
+        사업장에 대한 정보가 필요해요.
+        <br />
+        사업주 정보를 등록하러 가실까요?
+      </>
+    ),
+  },
+};
diff --git a/src/features/auth/components/RoleSelector/index.tsx b/src/features/auth/components/RoleSelector/index.tsx
@@ -0,0 +1,27 @@
+import { Card, Flex, Typo } from '@components/common';
+import { roleConfig } from './index.config';
+import { bounceAnimation } from '@assets/styles/animations';
+import { ReactNode } from 'react';
+
+type Props = {
+  role: 'employer' | 'worker';
+  onClick: (modalContent: ReactNode) => void;
+};
+
+export default function RoleSelector({ role, onClick }: Props) {
+  return (
+    <Card
+      borderColor="blue"
+      borderRadius="12px"
+      css={[bounceAnimation, { padding: '60px 120px', cursor: 'pointer' }]}
+      onClick={() => onClick(roleConfig[role].modalContent)}
+    >
+      <Flex direction="column" alignItems="center">
+        <div css={{ marginBottom: '24px' }}>{roleConfig[role].icon}</div>
+        <Typo element="h2" color="blue" size="18px" bold>
+          {roleConfig[role].text}
+        </Typo>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/pages/auth/SignIn/index.tsx b/src/pages/auth/SignIn/index.tsx
@@ -19,7 +19,7 @@ export default function SignIn() {
             alignItems="center"
             css={responsiveStyle({
               mobile: {
-                'flex-direction': 'column',
+                flexDirection: 'column',
               },
             })}
           >
@@ -28,31 +28,32 @@ export default function SignIn() {
               css={{
                 marginRight: '24px',
                 ...responsiveStyle({
-                  mobile: { 'margin-right': '0', 'align-items': 'center', 'margin-bottom': '32px' },
+                  mobile: { marginRight: '0', alignItems: 'center', marginBottom: '32px' },
                 }),
               }}
             >
               <Flex
                 direction="column"
                 css={responsiveStyle({
                   default: {
-                    'margin-bottom': '72px',
+                    marginBottom: '72px',
                   },
                   tablet: {
-                    'margin-bottom': '56px',
+                    marginBottom: '56px',
                   },
                   mobile: {
-                    'margin-bottom': '42px',
-                    'align-items': 'center',
+                    marginBottom: '42px',
+                    alignItems: 'center',
                   },
                 })}
               >
                 <Typo
                   element="h1"
                   size="58px"
+                  bold
                   style={{
                     marginBottom: '24px',
-                    ...responsiveStyle({ tablet: { 'font-size': '32px' }, mobile: { 'font-size': '28px' } }),
+                    ...responsiveStyle({ tablet: { fontSize: '32px' }, mobile: { fontSize: '28px' } }),
                   }}
                 >
                   지금 바로 시작하세요. 🚀
@@ -61,7 +62,7 @@ export default function SignIn() {
                   element="p"
                   size="18px"
                   color="gray"
-                  style={responsiveStyle({ tablet: { 'font-size': '16px' }, mobile: { 'font-size': '14px' } })}
+                  style={responsiveStyle({ tablet: { fontSize: '16px' }, mobile: { fontSize: '14px' } })}
                 >
                   안정적이고 투명한 고용 관계의 시작, 지금 바로 경험해보세요!
                 </Typo>

diff --git a/src/pages/auth/SignUp/index.tsx b/src/pages/auth/SignUp/index.tsx
@@ -1,9 +1,68 @@
+import { ReactNode, useState } from 'react';
 import Layout from '@features/layout';
+import { Flex, Typo, InnerContainer } from '@components/common';
+import { responsiveStyle, responsiveSectionPadding } from '@assets/styles/helpers/responsive';
+import RoleSelection from '@features/auth/components/RoleSelection';
+import RoleModal from '@features/auth/components/RoleModal';
+import useToggle from '@hooks/useToggle';
 
 export default function SignUp() {
+  const [isToggle, toggle] = useToggle();
+  const [modalContent, setModalContent] = useState<ReactNode>();
+
+  const handleRoleSelect = (modalContent: ReactNode) => {
+    toggle();
+    setModalContent(modalContent);
+  };
+
   return (
     <Layout>
-      <h1>hello World</h1>
+      <section css={responsiveStyle(responsiveSectionPadding)}>
+        <InnerContainer maxWidth="1300px">
+          <Flex direction="column" justifyContent="center" alignItems="center">
+            <Typo
+              element="h1"
+              size="24px"
+              bold
+              style={{
+                marginBottom: '38px',
+                ...responsiveStyle({
+                  tablet: {
+                    marginBottom: '28px',
+                  },
+                  mobile: {
+                    marginBottom: '20px',
+                    fontSize: '20px',
+                  },
+                }),
+              }}
+            >
+              가입자 정보 선택
+            </Typo>
+            <Typo
+              element="p"
+              size="20px"
+              color="gray"
+              style={{
+                marginBottom: '38px',
+                ...responsiveStyle({
+                  tablet: {
+                    marginBottom: '28px',
+                  },
+                  mobile: {
+                    marginBottom: '20px',
+                    fontSize: '16px',
+                  },
+                }),
+              }}
+            >
+              대상에 해당하는 가입자 정보를 선택해주세요.
+            </Typo>
+          </Flex>
+          <RoleSelection onRoleSelect={handleRoleSelect} />
+        </InnerContainer>
+      </section>
+      {isToggle && <RoleModal content={modalContent} onClose={toggle} />}
     </Layout>
   );
 }