Merge pull request #26 from process/signin-process

Process/signin process

public/locales/en/page-home.json

@@ -6,6 +6,7 @@
   },
   "emailForm": {
     "label": "Email address",
-    "button": "Get Started"
+    "button": "Get Started",
+    "finishRegist": "Finish Sign-Up"
   }
 }

public/locales/kr/page-home.json

@@ -6,6 +6,7 @@
   },
   "emailForm": {
     "label": "이메일 주소",
-    "button": "시작하기"
+    "button": "시작하기",
+    "finishRegist": "가입 마무리하기"
   }
 }

src/components/pages/Home/component/EmailSubmitForm.tsx

@@ -2,10 +2,12 @@ import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
-import DarkTextInput from '@/components/ui/Form/DarkTextInput';
+import TextInput from '@/components/ui/Form/TextInput';
+import ConditionalRender from '@/components/ui/utils/ConditionalRender';
+import useJWTs from '@/hooks/account/useJWTs';
 import { EmailCheckApi } from '@/lib/network/account/EmailCheckApi';
 import { pattern } from '@/lib/validators';
-import { EmailFormRowLayoutCss, EmailFormSubmitBtnCss } from '../styles/EmailSubmitFormCss';
+import { EmailFormFinishSignupBtnCss, EmailFormRowLayoutCss, EmailFormSubmitBtnCss } from '../styles/EmailSubmitFormCss';
 import { HeroDescrpition2 } from '../styles/HeroSection';
 
 interface FormData {
@@ -21,6 +23,8 @@ export default function EmailSubmitForm() {
     shouldUseNativeValidation: false,
   })
 
+  const { hasLogin } = useJWTs()
+
   const { invalid, error, isTouched } = getFieldState('email')
   const { mutate, isPending } = useMutation({
     mutationFn: EmailCheckApi,
@@ -36,27 +40,43 @@ export default function EmailSubmitForm() {
     sessionStorage.setItem('sign-tryed-email', obj.email)
     mutate(obj.email)
   }
+  function gotoRegistMembershipWithPaymentMethod() {
+    router.push('/signup')
+  }
   return <form onSubmit={handleSubmit(submitAction)}>
     <HeroDescrpition2>
       {t('page-home:section1.desc2')}
     </HeroDescrpition2>
     <div css={EmailFormRowLayoutCss}>
-      <DarkTextInput
-        isValid={isTouched && !invalid}
-        error={error?.message}
-        placeholder={t('page-home:emailForm.label')}
-        {...register('email', {
-          required: t('form.email.error.required'),
-          pattern: {
-            value: pattern.email,
-            message: t('common:form.email.error.pattern')
-          }
-        })}
-      ></DarkTextInput>
-      <button type="submit" css={EmailFormSubmitBtnCss}>
-        {/* TODO: add spinner */}
-        {isPending ? <div></div> : t('page-home:emailForm.button')}
-      </button>
+      <ConditionalRender.Boolean
+        condition={hasLogin}
+        render={{
+          true: <button
+            onClick={gotoRegistMembershipWithPaymentMethod}
+            css={EmailFormFinishSignupBtnCss}
+          >
+            {t('page-home:emailForm.finishRegist')}
+          </button>,
+          false: <>
+            <TextInput.Dark
+              isValid={isTouched && !invalid}
+              error={error?.message}
+              label={t('page-home:emailForm.label')}
+              {...register('email', {
+                required: t('form.email.error.required'),
+                pattern: {
+                  value: pattern.email,
+                  message: t('common:form.email.error.pattern')
+                }
+              })}
+            />
+            <button type="submit" css={EmailFormSubmitBtnCss}>
+              {/* TODO: add spinner */}
+              {isPending ? <div></div> : t('page-home:emailForm.button')}
+            </button>
+          </>
+        }}
+      />
     </div>
   </form>
 }

src/components/pages/Home/styles/EmailSubmitFormCss.tsx

@@ -7,7 +7,8 @@ export const EmailFormRowLayoutCss = css([{
   paddingTop: '1.625rem',
   display: 'flex',
   rowGap: '1rem',
-  columnGap: '0.5rem'
+  columnGap: '0.5rem',
+  justifyContent: 'center',
 }, MediaPoint({
   alignItems: ['center', 'start'],
   flexDirection: ['column', 'row'],
@@ -19,4 +20,12 @@ export const EmailFormSubmitBtnCss = css([DefaultButtonCss, RedButtonCss.color,
   minHeight: '3.5rem'
 }, MediaPoint({
   padding: ['0.5rem 1rem', '0.75rem 1.5rem']
+})])
+
+export const EmailFormFinishSignupBtnCss = css([DefaultButtonCss, RedButtonCss.color, RedButtonCss.interaction.dark, {
+  fontSize: '1.125rem',
+  fontWeight: 700,
+  minHeight: '3.5rem'
+}, MediaPoint({
+  padding: ['0.5rem 1rem', '0.75rem 1.5rem']
 })])

src/components/pages/Signin/hooks/useSigninWIthPasswordMutate.tsx

@@ -1,25 +1,50 @@
 import type { SigninResponseType } from '@/lib/network/types/account';
 import type { ErrorResponse } from '@/lib/network/types/error';
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router';
+import { MY_INFO_QUERY_KEY } from '@/hooks/Query/keys/account';
+import useGetSigninAccountInfo from '@/hooks/Query/useGetLoginAccountInfo';
 import { SigninApi } from '@/lib/network/account/SigninApi'
 import { ErrorCode } from '@/mocks/middleware/ErrorHandler';
+import { currentProfileAtom } from '@/state/Profile';
 import { accessTokenAtom, refreshTokenAtom } from '@/state/Token'
 
 export default function useSigninWIthPasswordMutate() {
   const router = useRouter()
+  const queryClient = useQueryClient()
+  const { data: accountInfo } = useGetSigninAccountInfo({
+    enabled: false
+  })
+  const [, setCurrentProfile] = useAtom(currentProfileAtom)
   const [, setAccessToken] = useAtom(accessTokenAtom)
   const [, setRefreshToken] = useAtom(refreshTokenAtom)
   const { mutate: signinMutate } = useMutation({
     mutationFn: SigninApi,
     onSuccess: loginSuccessAction,
     onError: loginFailedAction
   })
-  function loginSuccessAction(data: SigninResponseType) {
+  async function loginSuccessAction(data: SigninResponseType) {
     setAccessToken(data.accessToken)
     setRefreshToken(data.refreshToken)
-    router.push('/')
+    queryClient.invalidateQueries({
+      queryKey: MY_INFO_QUERY_KEY,
+      refetchType: 'inactive',
+    })
+    if (!accountInfo?.accountInfo.membership) {
+      if (!accountInfo?.accountInfo.profiles?.length) {
+        router.push('/firstProfile')
+      } else if (accountInfo.accountInfo.profiles.length === 1) {
+        if (accountInfo.accountInfo.profiles[0]) {
+          setCurrentProfile(accountInfo.accountInfo.profiles[0])
+        }
+        router.push('/browse')
+      } else {
+        router.push('/selectProfile')
+      }
+    } else {
+      router.push('/')
+    }
   }
   function loginFailedAction(error: Error) {
     const errorState: ErrorResponse = JSON.parse(error.message)

src/components/pages/Signup/platform.tsx

@@ -1,10 +1,13 @@
 import type { NextPageWithLayout } from '@/pages/_app';
+import { useAtom } from 'jotai';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import SignupLayout from '@/components/layout/SignupLayout';
 import ConditionalRender from '@/components/ui/utils/ConditionalRender';
+import useJWTs from '@/hooks/account/useJWTs';
 import useWindowResize from '@/hooks/useWindowResize';
+import { signupMembershipTier } from '@/state/Signup';
 import StepHeader from './component/StepHeader';
 import PlatformDetailLarge from './component/platform/PlatfomDetailLarge';
 import PlatformDetailSlim from './component/platform/PlatfomDetailSlim';
@@ -14,6 +17,8 @@ import { SignupPlatformContentCss, SignupPlatformContentLargeCss } from './style
 const PlatformPage: NextPageWithLayout = () => {
   const { t } = useTranslation(['page-signup'])
 
+  const { hasLogin } = useJWTs()
+  const [, setMembershipTier] = useAtom(signupMembershipTier)
   // on resize display width > over 1050px change contents as full width mode
   const {
     isLarge
@@ -24,9 +29,13 @@ const PlatformPage: NextPageWithLayout = () => {
   useEffect(() => {
     setIsClient(true)
   }, [])
+
+  const goNextAction = () => {
+    setMembershipTier(selectedType)
+  }
   return <>
     <div css={[SignupPlatformContentCss, isLarge ? SignupPlatformContentLargeCss : {}]}>
-      <StepHeader css={{ marginBottom: '.5rem' }} step={1} title={t('page-signup:platform.title')} />
+      <StepHeader css={{ marginBottom: '.5rem' }} step={2} title={t('page-signup:platform.title')} />
       <ConditionalRender.Boolean
         condition={isClient}
         render={{
@@ -41,7 +50,7 @@ const PlatformPage: NextPageWithLayout = () => {
       />
     </div>
     <div css={[SignupMainContentCss, { marginTop: '24px' }]}>
-      <Link css={SignupMainNextButtonCss} href="/signup/registration">
+      <Link css={SignupMainNextButtonCss} href={hasLogin ? '/signup/payment/regist/' : '/signup/registration'} onClick={goNextAction}>
         Next
       </Link>
     </div>

src/components/pages/Signup/registration.tsx

@@ -12,7 +12,7 @@ const RegistrationPage: NextPageWithLayout = () => {
     <div css={SignupMainContentCss}>
       <div css={[RegistrationLogoImageCss, StepLogoPositionCss]}>
       </div>
-      <StepHeader title={t('page-signup:registration.title')} step={3} />
+      <StepHeader title={t('page-signup:registration.title')} step={2} />
       <div>{t('page-signup:registration.desc')}</div>
     </div>
     <div css={[SignupMainContentCss, { marginTop: '24px' }]}>

src/components/ui/Button/SignInOutBtn.tsx

@@ -1,6 +1,5 @@
 import type { AnchorHTMLAttributes } from 'react';
 import Link from 'next/link';
-import { useMemo } from 'react';
 import ConditionalRender from '@/components/ui/utils/ConditionalRender';
 import useJWTs from '@/hooks/account/useJWTs';
 
@@ -10,10 +9,9 @@ interface SignInOutBtnProps {
 }
 
 export default function SignInOutBtn({ signInText, signOutText, ...props }: SignInOutBtnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & CssProps) {
-  const { accessToken, removeJWT } = useJWTs()
-  const hasSignined = useMemo(() => Boolean(accessToken), [accessToken])
+  const { removeJWT, hasLogin } = useJWTs()
   return <ConditionalRender.Boolean
-    condition={hasSignined}
+    condition={hasLogin}
     render={{
       true: <Link {...props} onClick={removeJWT} href="/signout">
         {signOutText}

src/hooks/Query/keys/account.ts

@@ -0,0 +1,3 @@
+import type { QueryKey } from '@tanstack/react-query';
+
+export const MY_INFO_QUERY_KEY: QueryKey = ['account-my-info']

src/hooks/Query/useGetLoginAccountInfo.ts

@@ -0,0 +1,17 @@
+import type { MyInfoResponseType } from '@/lib/network/types/account';
+import { useQuery } from '@tanstack/react-query';
+import { GetAccountInfoApi } from '@/lib/network/account/GetAccountInfoApi';
+import { MY_INFO_QUERY_KEY } from './keys/account';
+
+export default function useGetSigninAccountInfo(options: {
+  enabled: boolean
+}) {
+  return useQuery<MyInfoResponseType>({
+    queryKey: MY_INFO_QUERY_KEY,
+    queryFn: async () => {
+      const result = await GetAccountInfoApi()
+      return result
+    },
+    ...options
+  })
+}

src/hooks/account/useJWTs.ts

@@ -1,5 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useAtom } from 'jotai';
+import { useMemo } from 'react';
 import { accessTokenAtom, refreshTokenAtom } from '@/state/Token';
 
 interface UpdateJWTParams {
@@ -11,13 +12,15 @@ export default function useJWTs() {
   const queryClient = useQueryClient()
   const [accessToken, setAccessToken] = useAtom(accessTokenAtom)
   const [, setRefreshToken] = useAtom(refreshTokenAtom)
+  const hasLogin = useMemo(() => Boolean(accessToken), [accessToken])
   const updateJWT = ({ accessToken, refreshToken }: UpdateJWTParams) => {
     setAccessToken(accessToken)
     setRefreshToken(refreshToken)
     queryClient.clear()
   }
   const removeJWT = () => updateJWT({ accessToken: '', refreshToken: '' })
   return {
+    hasLogin,
     accessToken,
     updateJWT,
     removeJWT

src/lib/network/account/GetAccountInfoApi.ts

@@ -0,0 +1,7 @@
+import type { MyInfoResponseType } from '../types/account';
+import api from '..'
+
+export const GetAccountInfoApi = async () => {
+  const result = await api.get<MyInfoResponseType>('account/me').json()
+  return result
+}

src/lib/network/index.ts

@@ -21,7 +21,7 @@ const baseApi = ky.extend({
     beforeRequest: [
       (request) => {
         if (typeof window !== 'undefined') {
-          const token = localStorage.getItem(ACCESS_TOKEN_KEY)
+          const token = localStorage.getItem(ACCESS_TOKEN_KEY)?.replace(/"/g, '')
           if (token) {
             request.headers.set('Authorization', `Bearer ${token}`)
           }
@@ -40,7 +40,7 @@ const api = baseApi.extend({
   hooks: {
     beforeRetry: [
       async ({ request }) => {
-        const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY)
+        const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY)?.replace(/"/g, '')
         if (!refreshToken) return ky.stop
         const tokens = await baseApi.post('account/refresh', {
           json: {

src/lib/network/utils.ts

@@ -1,4 +1,8 @@
 export const ACCESS_TOKEN_KEY = 'access-token'
 export const REFRESH_TOKEN_KEY = 'refresh-token'
 
-export const SIGNIN_EMAIL_OR_PHONE = 'signin-emailOrPhone'
+export const SIGNIN_EMAIL_OR_PHONE = 'signin-emailOrPhone'
+
+export const SIGNIN_CURRENT_PROFILE = 'profile-current-position'
+
+export const SIGNUP_MEMBERSHIP_TIER = 'signup-membership-tier'

src/mocks/middleware/token.ts

@@ -1,6 +1,6 @@
 import type { JWTPayload } from 'jose';
 import type { DefaultBodyType, HttpResponseResolver, PathParams } from 'msw';
-import { jwtDecrypt, jwtVerify, SignJWT } from 'jose'
+import { jwtVerify, SignJWT } from 'jose'
 import ErrorException from '../type/ErrorResponse';
 import { ErrorCode } from './ErrorHandler';
 
@@ -73,11 +73,11 @@ export function withAuth<RequestBodyType extends DefaultBodyType, ResponseBodyTy
 export async function parseAuth(header: Headers) {
   const parsedHeader = String(header.get('Authorization') || ' ').split(' ');
   try {
-    const result = await jwtDecrypt<JwtPayloadType>(parsedHeader[1], secret)
+    const result = await jwtVerify<JwtPayloadType>(parsedHeader[1], secret)
     if (!result) throw new Error()
     return result
   } catch {
-    throw new ErrorException('Token Verification failed, Please check token', ErrorCode.AUTH_EXPIRED)
+    throw new ErrorException('Token Parse failed, Please check token', ErrorCode.AUTH_EXPIRED)
   }
 }
 

src/state/Account.ts

@@ -2,4 +2,4 @@ import { atomWithStorage } from 'jotai/utils';
 import { SIGNIN_EMAIL_OR_PHONE } from '@/lib/network/utils';
 import { JotaiSessionStorage } from './util/Storage';
 
-export const signinEmailOrPhoneAtom = atomWithStorage(SIGNIN_EMAIL_OR_PHONE, '', JotaiSessionStorage)
+export const signinEmailOrPhoneAtom = atomWithStorage(SIGNIN_EMAIL_OR_PHONE, '', JotaiSessionStorage<string>())

src/state/Profile.ts

@@ -0,0 +1,6 @@
+import { atomWithStorage } from 'jotai/utils';
+import { SIGNIN_CURRENT_PROFILE } from '@/lib/network/utils';
+import { JotaiSessionStorage } from './util/Storage';
+
+// TODO: with sessionStorage
+export const currentProfileAtom = atomWithStorage(SIGNIN_CURRENT_PROFILE, undefined, JotaiSessionStorage<Profile | undefined>())

src/state/Signup.ts

@@ -0,0 +1,5 @@
+import { atomWithStorage } from 'jotai/utils';
+import { SIGNUP_MEMBERSHIP_TIER } from '@/lib/network/utils';
+import { JotaiSessionStorage } from './util/Storage';
+
+export const signupMembershipTier = atomWithStorage(SIGNUP_MEMBERSHIP_TIER, undefined, JotaiSessionStorage<MembershipPlanTier | undefined>())

src/state/Token.ts

@@ -2,5 +2,5 @@ import { atomWithStorage } from 'jotai/utils';
 import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from '@/lib/network/utils';
 import { JotaiLocalStorage } from './util/Storage';
 
-export const accessTokenAtom = atomWithStorage(ACCESS_TOKEN_KEY, '', JotaiLocalStorage)
-export const refreshTokenAtom = atomWithStorage(REFRESH_TOKEN_KEY, '', JotaiLocalStorage)
+export const accessTokenAtom = atomWithStorage(ACCESS_TOKEN_KEY, '', JotaiLocalStorage<string>())
+export const refreshTokenAtom = atomWithStorage(REFRESH_TOKEN_KEY, '', JotaiLocalStorage<string>())