feat: onboarding ui flow (#464)

* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug

front/src/modules/auth/components/ui/Modal.tsx

@@ -3,23 +3,23 @@ import styled from '@emotion/styled';
 
 import { Modal as UIModal } from '@/ui/components/modal/Modal';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  padding-top: ${({ theme }) => theme.spacing(10)};
-  width: 400px;
+  padding: ${({ theme }) => theme.spacing(10)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
-export function Modal({ children }: OwnProps): JSX.Element {
+export function AuthModal({ children, ...restProps }: Props) {
   return (
-    <UIModal>
-      <StyledContainer>{children}</StyledContainer>
+    <UIModal isOpen={true}>
+      <StyledContainer {...restProps}>{children}</StyledContainer>
     </UIModal>
   );
 }