update

frontend/portal/src/pages/api/login/[...path].ts

@@ -70,7 +70,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
 
         res.status(200).json(payload)
       } else {
-        res.status(401).json({ message: 'Invalid Credentials 🥺' })
+        res.status(result.status).json({ message: 'Invalid Credentials 🥺' })
       }
     } else {
       res.status(401).json({ message: 'Invalid Credentials 🥺' })

frontend/portal/src/pages/auth/join/form.tsx

@@ -2,12 +2,13 @@ import CustomAlert, { CustomAlertPrpps } from '@components/CustomAlert'
 import { DLWrapper } from '@components/WriteDLFields'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import Alert from '@material-ui/lab/Alert'
-import { userService } from '@service'
+import { ISocialUser, userService } from '@service'
 import { format, isValidPassword } from '@utils'
 import { useRouter } from 'next/router'
-import React, { createRef, useState } from 'react'
+import React, { createRef, useEffect, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { GetServerSideProps } from 'next'
 
 const useStyles = makeStyles((theme: Theme) => ({
   alert: {
@@ -20,9 +21,17 @@ interface IUserForm {
   password: string
   passwordConfirm: string
   userName: string
+  provider?: string
+  token?: string
 }
 
-const Form = () => {
+interface FormProps {
+  socialUser: ISocialUser
+}
+
+const Form = (props: FormProps) => {
+  const { socialUser } = props
+
   const router = useRouter()
   const classes = useStyles()
   const { t } = useTranslation()
@@ -44,10 +53,12 @@ const Form = () => {
   // form hook
   const methods = useForm<IUserForm>({
     defaultValues: {
-      email: '',
+      email: socialUser.email || '',
       password: '',
       passwordConfirm: '',
-      userName: '',
+      userName: socialUser.name || '',
+      provider: router.query.provider as string,
+      token: router.query.token as string,
     },
   })
   const {
@@ -67,6 +78,14 @@ const Form = () => {
     })
   }
 
+  useEffect(() => {
+    if (socialUser) {
+      if (socialUser.name) {
+
+      }
+    }
+  }, [socialUser])
+
   // 이메일중복확인
   const handleCheckEmail = event => {
     event.preventDefault()
@@ -156,6 +175,7 @@ const Form = () => {
                     <input
                       ref={emailRef}
                       type="text"
+                      readOnly={/*typeof socialUser.email !== 'undefined' && socialUser.email !== null*/false}
                       value={field.value}
                       onChange={field.onChange}
                       placeholder={t('user.email')}
@@ -264,6 +284,7 @@ const Form = () => {
                   >
                     <input
                       type="text"
+                      readOnly={/*typeof socialUser.name !== 'undefined' && socialUser.name !== null*/false}
                       value={field.value}
                       onChange={field.onChange}
                       placeholder={t('label.title.name')}
@@ -310,4 +331,33 @@ const Form = () => {
   )
 }
 
+export const getServerSideProps: GetServerSideProps = async context => {
+  const provider = context.query.provider as string
+  const token = context.query.token as string
+
+  let socialUser = {}
+
+  try {
+    if (provider && token) {
+      const result = await userService.social(provider, token)
+      if (result) {
+        socialUser = (await result.data) as ISocialUser
+      }
+    }
+  } catch (error) {
+    console.error(`social item query error ${error.message}`)
+    if (error.response?.data?.code === 'E003') {
+      return {
+        notFound: true,
+      }
+    }
+  }
+
+  return {
+    props: {
+      socialUser
+    },
+  }
+}
+
 export default Form

frontend/portal/src/pages/auth/join/index.tsx

@@ -61,7 +61,7 @@ const Join = ({ policyPP, policyTOS }: IJoinProps) => {
       return
     }
 
-    router.push('/auth/join/form')
+    router.push(`/auth/join/form?provider=${router.query.provider}&token=${router.query.token}`)
   }
 
   return (

frontend/portal/src/pages/auth/login/index.tsx

@@ -9,17 +9,26 @@ import Loader from '@components/Loader'
 import useUser from '@hooks/useUser'
 import { ILogin, loginSerivce } from '@service'
 import { userAtom } from '@stores'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'
+import CustomConfirm, { CustomConfirmPrpps } from '@components/CustomConfirm'
+
+interface AlertProps extends CustomConfirmPrpps {
+  message: string
+}
 
 const Login = () => {
   const { t } = useTranslation()
+  const router = useRouter()
 
   const { isLogin, mutate } = useUser()
   const user = useRecoilValue(userAtom)
+
+  const [customConfirm, setCustomConfirm] = useState<AlertProps | null>(null)
   const [errorState, setErrorState] = useState<string | null>(null)
+  const [kakaoLoginMode, setKakaoLoginMode] = useState<string | null>(null)
 
   useEffect(() => {
     if (isLogin && user) {
@@ -42,7 +51,29 @@ const Login = () => {
         setErrorState(result)
       }
     } catch (error) {
-      setErrorState(t('err.user.login'))
+      if (error === 'join') {
+        setCustomConfirm({
+          open: true,
+          message: t('msg.confirm.join.social'),
+          handleConfirm: () => {
+            setCustomConfirm({
+              ...customConfirm,
+              open: false,
+            })
+
+            // recoil 쓰려했는데 회원가입에 스탭이 있어서 진행중에 새로고침하면 상태가 삭제되면서 일반회원으로 가입될 수 있어서 소셜 정보를 파라미터로 넘김
+            router.push(`/auth/join?provider=${data.provider}&token=${data.token}`)
+          },
+          handleCancel: () => {
+            if (data.provider === 'kakao') {
+              setKakaoLoginMode('logout')
+            }
+            setCustomConfirm({ ...customConfirm, open: false })
+          },
+        })
+      } else {
+        setErrorState(t('err.user.login'))
+      }
     }
   }
 
@@ -105,11 +136,19 @@ const Login = () => {
           <span>{t('label.title.login.oauth')}</span>
         </h3>
         <div>
-          <KakaoLoginButton handleClick={handleKakaoLogin} />
+          <KakaoLoginButton handleClick={handleKakaoLogin} kakaoLoginMode={kakaoLoginMode} setKakaoLoginMode={setKakaoLoginMode} />
           <NaverLoginButton handleClick={handleNaverLogin} />
           <GoogleLoginButton handleClick={handleGoogleLogin} />
         </div>
       </article>
+      {customConfirm && (
+        <CustomConfirm
+          handleConfirm={customConfirm.handleConfirm}
+          handleCancel={customConfirm.handleCancel}
+          contentText={customConfirm.message}
+          open={customConfirm.open}
+        />
+      )}
     </section>
   )
 }

frontend/portal/src/pages/auth/login/naver.tsx

@@ -14,7 +14,7 @@ const LoginNaver = () => {
 
   return <></> */
 
-  return <NaverLoginButton handleClick={() => {}} />
+  return <div style={{ display: 'none' }}><NaverLoginButton handleClick={() => {}} /></div>
 }
 
 export default LoginNaver

frontend/portal/src/pages/user/info/index.tsx

@@ -150,9 +150,8 @@ const UserInfo = () => {
           token: response.response.access_token,
         },
       })
-      setErrorState(null)
     } else {
-      setErrorState(t('err.user.login.social'))
+      setErrorState({ message: t('err.user.login.social') })
     }
   }
 
@@ -173,9 +172,8 @@ const UserInfo = () => {
           token: response.accessToken,
         },
       })
-      setErrorState(null)
     } else {
-      setErrorState(t('err.user.login.social'))
+      setErrorState({ message: t('err.user.login.social') })
     }
   }
 
@@ -193,9 +191,8 @@ const UserInfo = () => {
           token: response.tokenId,
         },
       })
-      setErrorState(null)
     } else {
-      setErrorState(t('err.user.login.social'))
+      setErrorState({ message: t('err.user.login.social') })
     }
   }