Feat/#17 고용인/피고용인 페이지 구현 (#18)

* rename: rename AppProviders

* feat: add breakpoints and responsiveStyles method

* feat: add Layout component

* style: add responsive styles for tablet and mobile to SignIn page

* feat: add SignUp page's path

* feat: add Icon component

* feat: add borderColor prop to Card component

* feat: add bold prop to Typo component

* feat: add bounce global animation style

* feat: add useToggle hooks

* fix: add borderRadius css property

* feat: add onClose prop to Modal

* feat: add SignUp page

* rename: rename directory footer to Footer

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
-import AppProviders from '../src/components/providers';
+import AppProviders from '../src/components/providers/index.provider';
 
 const preview: Preview = {
   parameters: {

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint --cache 'src/**/*.{ts,tsx}'",
-    "tsc": "tsc --noEmit",
+    "tsc": "tsc --noEmit --project ./tsconfig.json",
     "format": "prettier --write --cache 'src/**/*.{ts,tsx}'",
     "lint-staged": "lint-staged",
     "preview": "vite preview",

src/App.tsx

@@ -1,4 +1,4 @@
-import AppProviders from '@components/providers';
+import AppProviders from '@components/providers/index.provider';
 import { Outlet } from 'react-router-dom';
 
 function App() {

src/assets/styles/animations/index.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+export const bounceAnimation = css`
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    transform: translate(-4px, -4px);
+  }
+`;

src/assets/styles/emotion.d.ts

@@ -1,9 +1,11 @@
 // styles/emotion.d.ts
 import '@emotion/react';
 import { palettes } from './global/palettes';
+import { mediaQueries } from './global/breakpoints';
 
 declare module '@emotion/react' {
   export interface Theme {
+    mediaQueries: typeof mediaQueries;
     palettes: typeof palettes;
   }
 }

src/assets/styles/global/breakpoints.ts

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  tablet: '768px',
+  mobile: '480px',
+} as const;
+
+export const mediaQueries = {
+  tablet: `@media (max-width: ${breakpoints.tablet})`,
+  mobile: `@media (max-width: ${breakpoints.mobile})`,
+};

src/assets/styles/global/palettes.ts

@@ -1,7 +1,9 @@
 export const palettes = {
   white: '#fff',
   black: '#000',
+  blue: '#0A65CC',
   gray: '#5E6670',
+  backgroundGray: '#F1F2F4',
   borderGray: '#e4e5e8',
 } as const;
 

src/assets/styles/helpers/responsive.ts

@@ -0,0 +1,27 @@
+import theme from '../theme';
+
+export const responsiveSectionPadding = {
+  default: {
+    padding: '100px 0',
+  },
+  tablet: {
+    padding: '80px 0',
+  },
+  mobile: {
+    padding: '60px 0',
+  },
+};
+
+export const responsiveStyle = (styles: {
+  default?: { [key: string]: string };
+  tablet?: { [key: string]: string };
+  mobile?: { [key: string]: string };
+}) => ({
+  ...styles.default,
+  [theme.mediaQueries.tablet]: {
+    ...styles.tablet,
+  },
+  [theme.mediaQueries.mobile]: {
+    ...styles.mobile,
+  },
+});

src/assets/styles/theme.ts

@@ -1,7 +1,9 @@
 import { Theme } from '@emotion/react';
 import { palettes } from './global/palettes';
+import { mediaQueries } from './global/breakpoints';
 
 const theme: Theme = {
+  mediaQueries,
   palettes,
 };
 

src/components/common/Button/index.tsx

@@ -14,6 +14,7 @@ const Wrapper = styled.button(
     fontSize: '16px',
     fontWeight: 'bold',
     border: 'none',
+    borderRadius: '4px',
     justifyContent: 'center',
     alignItems: 'center',
     cursor: 'pointer',

src/components/common/Card/index.tsx

@@ -1,22 +1,24 @@
 import styled from '@emotion/styled';
+import { PalettesTypes } from '@assets/styles/global/palettes';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
+  borderColor?: PalettesTypes;
   borderRadius?: string;
   children: ReactNode;
 }
 
-export default function Card({ borderRadius = '12px', children, ...rest }: Props) {
+export default function Card({ borderColor, borderRadius = '12px', children, ...rest }: Props) {
   return (
-    <CardContainer borderRadius={borderRadius} {...rest}>
+    <CardContainer borderColor={borderColor} borderRadius={borderRadius} {...rest}>
       {children}
     </CardContainer>
   );
 }
 
-const CardContainer = styled.div<{ borderRadius: string }>`
+const CardContainer = styled.div<Omit<Props, 'children'>>`
   display: inline-block;
-  border: 1px solid ${({ theme }) => theme.palettes.white};
   box-shadow: 0px 12px 32px 0px rgba(24, 25, 28, 0.08);
+  border: 1px solid ${({ borderColor }) => borderColor};
   border-radius: ${({ borderRadius }) => borderRadius};
 `;

src/components/common/Icon/Role.ts

@@ -0,0 +1,9 @@
+import Employer from '@assets/icons/role/employer.svg?react';
+import Worker from '@assets/icons/role/worker.svg?react';
+
+const Role = {
+  Employer,
+  Worker,
+};
+
+export default Role;

src/components/common/Icon/Social.ts

@@ -0,0 +1,15 @@
+import Google from '@assets/icons/social/google.svg?react';
+import Facebook from '@assets/icons/social/facebook.svg?react';
+import Instagram from '@assets/icons/social/instagram.svg?react';
+import Twitter from '@assets/icons/social/twitter.svg?react';
+import Youtube from '@assets/icons/social/youtube.svg?react';
+
+const Social = {
+  Google,
+  Facebook,
+  Instagram,
+  Twitter,
+  Youtube,
+};
+
+export default Social;

src/components/common/Icon/index.ts

@@ -0,0 +1,9 @@
+import Role from './Role';
+import Social from './Social';
+
+const Icon = {
+  Role,
+  Social,
+};
+
+export default Icon;

src/components/common/Modal/index.tsx

@@ -5,26 +5,41 @@ export type Props = {
   textChildren: ReactNode;
   buttonChildren: ReactNode;
   borderRadius?: string;
+  onClose: () => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const Modal = ({ textChildren, buttonChildren, borderRadius = '12px', ...props }: Props) => {
+const Modal = ({ textChildren, buttonChildren, borderRadius = '12px', onClose, ...props }: Props) => {
   return (
-    <Card borderRadius={borderRadius} {...props}>
-      <Wrapper>
-        <TextWrapper>{textChildren}</TextWrapper>
-        <ButtonWrapper>{buttonChildren}</ButtonWrapper>
-      </Wrapper>
-    </Card>
+    <Overlay onClick={onClose}>
+      <Card borderRadius={borderRadius} {...props} onClick={(e) => e.stopPropagation()}>
+        <Wrapper>
+          <TextWrapper>{textChildren}</TextWrapper>
+          <ButtonWrapper>{buttonChildren}</ButtonWrapper>
+        </Wrapper>
+      </Card>
+    </Overlay>
   );
 };
 
-const Card = styled.div<{ borderRadius: string }>`
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+`;
+
+const Card = styled.div<{ borderRadius: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
+  border-radius: ${({ borderRadius }) => borderRadius};
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 `;
 
@@ -37,7 +52,7 @@ const Wrapper = styled.div`
   align-items: center;
 `;
 
-const TextWrapper = styled.p`
+const TextWrapper = styled.div`
   width: 100%;
   font-size: 16px;
   font-weight: bold;

src/components/common/Typo/index.tsx

@@ -7,13 +7,15 @@ type Props = {
   size?: string;
   color?: PalettesTypes;
   style?: React.CSSProperties;
+  bold?: boolean;
   children: React.ReactNode;
 };
 
-export default function Typo({ element = 'div', size, color, children, style }: Props) {
+export default function Typo({ element = 'div', size, color, children, style, bold }: Props) {
   const theme = useTheme();
   const Component = element;
   const textColor = color ? theme.palettes[color] : 'black';
+  const fontWeight = bold ? '700' : '400';
 
-  return <Component style={{ fontSize: size, color: textColor, ...style }}>{children}</Component>;
+  return <Component css={{ fontSize: size, color: textColor, fontWeight, ...style }}>{children}</Component>;
 }

src/components/common/index.ts

@@ -5,3 +5,4 @@ export { default as InnerContainer } from './InnerContainer';
 export { default as Input } from './Input';
 export { default as Modal } from './Modal';
 export { default as Typo } from './Typo';
+export { default as Icon } from './Icon';

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}
+    />
+  );
+}

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>
+  );
+}

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 />
+        사업주 정보를 등록하러 가실까요?
+      </>
+    ),
+  },
+};

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>
+  );
+}