✨ feat: auto

focus input in form login/ register

:%s

src/components/common/Header/Header.tsx

@@ -40,7 +40,6 @@ const Header = memo(() => {
                 </div>
             </header>
             <HeaderSubMenuMobile />
-            visible = {visibleModalAuthen.toString()}
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
         </>
     )

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { Inputcommon, ButtonCommon } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
 import s from '../FormAuthen.module.scss'
 import styles from './FormLogin.module.scss'
 import classNames from 'classnames'
+import { CustomInputCommon } from 'src/utils/type.utils'
 
 interface Props {
     isHide: boolean,
@@ -13,6 +14,14 @@ interface Props {
 }
 
 const FormLogin = ({ onSwitch, isHide }: Props) => {
+    const emailRef = useRef<CustomInputCommon>(null)
+
+    useEffect(() => {
+        if (!isHide) {
+            emailRef.current?.focus()
+        }
+    }, [isHide])
+
     return (
         <section className={classNames({
             [s.formAuthen]: true,
@@ -20,7 +29,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
-                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Email Address' type='email' ref={emailRef} />
                     <Inputcommon placeholder='Password' type='password' />
                 </div>
                 <div className={styles.bottom}>

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss

@@ -6,10 +6,9 @@
         transform: none;
     }
     .passwordNote {
-        @apply text-center caption;
+    @apply text-center caption text-label;
         margin-top: 0.8rem;
     }
-    
     .bottom {
         @apply flex justify-between items-center w-full;
         margin: 4rem auto;

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { ButtonCommon, Inputcommon } from 'src/components/common'
 import s from '../FormAuthen.module.scss'
 import styles from './FormRegister.module.scss'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
 import classNames from 'classnames'
+import { CustomInputCommon } from 'src/utils/type.utils'
 
 interface Props {
     isHide: boolean,
@@ -11,6 +12,14 @@ interface Props {
 }
 
 const FormRegister = ({ onSwitch, isHide }: Props) => {
+    const emailRef = useRef<CustomInputCommon>(null)
+
+    useEffect(() => {
+        if (!isHide) {
+            emailRef.current?.focus()
+        }
+    }, [isHide])
+
     return (
         <section className={classNames({
             [s.formAuthen]: true,

src/components/common/ModalCommon/ModalCommon.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/utilities';
+
 .background{
     @apply fixed inset-0 overflow-y-auto;
     background: rgba(20, 20, 20, 0.65);
@@ -10,10 +12,12 @@
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
+            .top {
+                margin-bottom: 4rem;
+            }
             .title{
+                @apply font-heading heading-3;
                 padding: 0 0.8rem 0 0.8rem;
-                font-size: 3.2rem;
-                line-height: 4rem;
             }
             .close{
                 @apply absolute;