Page/signin

public/locales/en/common.json

@@ -19,6 +19,21 @@
         "pattern": "Please enter a valid email address."
       }
     },
+    "emailOrPhone": {
+      "placeholder": "Email or mobile number",
+      "error": {
+        "required": "Please enter a valid email or phone number.",
+        "patternEmail": "Please enter a valid email.",
+        "validatePhone": "Please enter a valid phone number."
+      }
+    },
+    "password": {
+      "placeholder": "Password",
+      "error": {
+        "required": "Your password must contain between 4 and 60 characters.",
+        "pattern": "Your password must contain between 4 and 60 characters."
+      }
+    },
     "policy": {
       "label": "Yes, I consent to collection and use of my personal information in accordance with the <a href=\"#\">Privacy Statemenet</a>. <a href=\"#\">(Details)</a>",
       "error": {

public/locales/en/page-signin.json

@@ -0,0 +1,13 @@
+{
+  "title": "Sign In",
+  "loginBtn": "Sign In",
+  "loginCodeDesc": "Message and data rates may apply",
+  "sendLoginCode": "Send Sign-In Code",
+  "or": "OR",
+  "useLogincodeBtn": "Use Sign-In Code",
+  "usePasswordBtn": "Use Password",
+  "findPassword": "Forgot password?",
+  "saveLoginInfo": "Remember me",
+  "areYouGuest": "New to Netflix?",
+  "gotoSignup": "Sign up now."
+}

public/locales/kr/common.json

@@ -19,6 +19,21 @@
         "pattern": "유효한 이메일 주소를 입력하세요."
       }
     },
+    "emailOrPhone": {
+      "placeholder": "이메일 주소 또는 휴대폰 번호",
+      "error": {
+        "required": "정확한 이메일 주소나 전화번호를 입력하세요.",
+        "patternEmail": "정확한 이메일 주소를 입력하세요.",
+        "validatePhone": "정확한 전화번호를 입력하세요."
+      }
+    },
+    "password": {
+      "placeholder": "비밀번호",
+      "error": {
+        "required": "비밀번호는 4~60자 사이여야 합니다.",
+        "pattern": "비밀번호는 4~60자 사이여야 합니다."
+      }
+    },
     "policy": {
       "label": "예, 저는 <a href=\"#\">개인정보 처리방침</a>에 따른 개인정보 수집 및 활용에 동의합니다. <a href=\"#\">(상세 정보)</a>",
       "error": {

public/locales/kr/page-signin.json

@@ -0,0 +1,13 @@
+{
+  "title": "로그인",
+  "loginBtn": "로그인",
+  "loginCodeDesc": "문자 또는 데이터 요금이 부과될 수 있습니다",
+  "sendLoginCode": "로그인 코드 받기",
+  "or": "또는",
+  "useLogincodeBtn": "로그인 코드 사용하기",
+  "usePasswordBtn": "비밀번호 사용하기",
+  "findPassword": "비밀번호를 잊으셨나요?",
+  "saveLoginInfo": "로그인 정보 저장",
+  "areYouGuest": "Netflix 회원이 아닌가요?",
+  "gotoSignup": "지금 가입하세요."
+}

src/components/pages/Home/styles/HeroHead.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import Link from 'next/link';
 import { MediaPoint } from '@/components/styled/layout';
-import { DarkButtonInteractionCss, DefaultButtonCss } from '@/components/ui/Button/ButtonStyle';
+import { DefaultButtonCss, RedButtonCss } from '@/components/ui/Button/ButtonStyle';
 import { TextDisplayCss } from '@/components/ui/Font/TextDisplayStyle';
 import { theme } from '@/components/ui/theme';
 import TopLogo from '@assets/netflix/top-logo.svg'
@@ -59,7 +59,8 @@ export const HeroHeadRightSide = styled.div([{
 export const HeroHeadSigninLink = styled(Link)([
   TextDisplayCss,
   DefaultButtonCss,
-  DarkButtonInteractionCss,
+  RedButtonCss.color,
+  RedButtonCss.interaction.dark,
   {
     minHeight: '2rem',
     borderRadius: theme.borderRadius.xs,

src/components/pages/Signin/SigninPage.tsx

@@ -1,7 +1,89 @@
 import type { NextPageWithLayout } from '@/pages/_app';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import BaseLayout from '@/components/layout/BaseLayout';
+import { HeaderLinkStyleCss } from '@/components/layout/styles/SignupLayoutStyle';
+import DarkCheckbox from '@/components/ui/Form/DarkCheckbox';
+import ConditionalRender from '@/components/ui/utils/ConditionalRender';
+import NetflixLogo from '@assets/netflix/top-logo.svg'
+import ButtonGroup from './component/ButtonGroup';
+import LoginCodeForm from './component/LoginCodeForm';
+import PasswordForm from './component/PasswordForm';
+import { backgroundCss, forgotPasswordCss, formAreaCss, formGridCss, formPositionAreaCss, formTitleCss, headerAreaCss, rememberSigninInfoCss, signinPageBaseCss, signupLinkCss } from './styles/signinPageStyle';
 
 const SigninPage: NextPageWithLayout = () => {
-  return <div></div>
+  const [isLoginCodeForm, setIsLoginCodeForm] = useState(false)
+  const { t } = useTranslation(['common', 'page-signin'])
+
+  return <div css={signinPageBaseCss}>
+    <div css={backgroundCss}>
+      <Image width={2000} height={1125} src="/signin/signin-bg.jpg" alt="bg" />
+    </div>
+    <header css={headerAreaCss}>
+      <Link css={HeaderLinkStyleCss} href="/">
+        <NetflixLogo />
+      </Link>
+    </header>
+    <div css={formPositionAreaCss}>
+      <div css={formAreaCss}>
+        <header>
+          <h1 css={formTitleCss}>
+            {t('page-signin:title')}
+          </h1>
+        </header>
+        <ConditionalRender.Boolean
+          condition={isLoginCodeForm}
+          render={{
+            true: <LoginCodeForm
+              css={formGridCss}
+              buttonArea={
+                <>
+                  <p>{t('page-signin:loginCodeDesc')}</p>
+                  <ButtonGroup
+                    submitText={t('page-signin:sendLoginCode')}
+                    or={t('page-signin:or')}
+                    buttonText={t('page-signin:usePasswordBtn')}
+                    onButtonClick={() => {
+                      setIsLoginCodeForm(false)
+                    }}
+                  />
+                </>
+              }
+            />,
+            false: <PasswordForm
+              css={formGridCss}
+              buttonArea={<ButtonGroup
+                submitText={t('page-signin:loginBtn')}
+                or={t('page-signin:or')}
+                buttonText={t('page-signin:useLogincodeBtn')}
+                onButtonClick={() => {
+                  setIsLoginCodeForm(true)
+                }}
+              />}
+            />
+          }}
+        />
+        <footer>
+          <Link href="/findPassword" css={forgotPasswordCss}>
+            {t('page-signin:findPassword')}
+          </Link>
+          <DarkCheckbox css={rememberSigninInfoCss} placeholder={t('page-signin:saveLoginInfo')} />
+          <p css={signupLinkCss}>
+            {t('page-signin:areYouGuest')}&nbsp;
+            <Link href="/">
+              {t('page-signin:gotoSignup')}
+            </Link>
+          </p>
+        </footer>
+      </div>
+    </div>
+
+  </div>
+}
+SigninPage.getLayout = (page) => {
+  return <BaseLayout >{page}</BaseLayout>
 }
 
 export default SigninPage

src/components/pages/Signin/component/ButtonGroup.tsx

@@ -0,0 +1,29 @@
+import type { MouseEventHandler } from 'react';
+import { ButtonActionCss, ButtonSubmitCss } from '../styles/ButtonGroupStyle';
+
+interface ButtonGroupProps {
+  submitText: string
+  or: string
+  buttonText: string
+  onSubmitClick?: MouseEventHandler
+  onButtonClick?: MouseEventHandler
+}
+export default function ButtonGroup({
+  submitText,
+  onSubmitClick,
+  or,
+  buttonText,
+  onButtonClick
+}: ButtonGroupProps) {
+  return <>
+    <button css={ButtonSubmitCss} type="submit" onClick={onSubmitClick}>
+      {submitText}
+    </button>
+    <p>
+      {or}
+    </p>
+    <button css={ButtonActionCss} type='button' onClick={onButtonClick}>
+      {buttonText}
+    </button>
+  </>
+}

src/components/pages/Signin/component/LoginCodeForm.tsx

@@ -0,0 +1,51 @@
+import type { SigninWithCodeRequestType } from '@/lib/network/types/account';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'next-i18next';
+import { useForm } from 'react-hook-form';
+import DarkTextInput from '@/components/ui/Form/DarkTextInput';
+import RHFValidErrorHelper from '@/components/ui/Form/utils/RHFValidErrorHelper';
+import validators from '@/lib/validators';
+import useSendSigninWithCodeRequest from '../hooks/useSendSigninWithCodeRequest';
+
+interface LoginCodeFormProps {
+  buttonArea: ReactNode
+}
+export default function LoginCodeForm({
+  buttonArea,
+  className
+}: LoginCodeFormProps & CssProps) {
+  const { t } = useTranslation(['common'])
+  const { signinWithLoginCodeMutate } = useSendSigninWithCodeRequest()
+  const { register, handleSubmit, formState } = useForm<SigninWithCodeRequestType>({
+    mode: 'onBlur',
+    defaultValues: {
+      emailOrPhone: ''
+    }
+  })
+  const signinFunction = (obj: SigninWithCodeRequestType) => {
+    signinWithLoginCodeMutate(obj)
+  }
+
+  return <form onSubmit={handleSubmit(signinFunction)} className={className}>
+    {/* TODO: need to change type between phone and email */}
+    <DarkTextInput
+      {...register('emailOrPhone', {
+        required: t('common:form.emailOrPhone.error.required'),
+        validate: (v) => {
+          if (validators.emailOrPhoneNumberType(v)) return true
+          if (isNaN(Number(v))) {
+            return t('common:form.emailOrPhone.error.patternEmail')
+          } else {
+            return t('common:form.emailOrPhone.error.validatePhone')
+          }
+        },
+      })}
+      {...RHFValidErrorHelper(
+        formState.errors.emailOrPhone?.message,
+        formState.touchedFields.emailOrPhone
+      )}
+      placeholder={t('common:form.emailOrPhone.placeholder')}
+    />
+    {buttonArea}
+  </form>
+}

src/components/pages/Signin/component/PasswordForm.tsx

@@ -0,0 +1,64 @@
+import type { SigninRequestType } from '@/lib/network/types/account';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'next-i18next';
+import { useForm } from 'react-hook-form';
+import DarkTextInput from '@/components/ui/Form/DarkTextInput';
+import RHFValidErrorHelper from '@/components/ui/Form/utils/RHFValidErrorHelper';
+import validators, { pattern } from '@/lib/validators';
+import useSigninWIthPasswordMutate from '../hooks/useSigninWIthPasswordMutate';
+
+interface PasswordFormProps {
+  buttonArea: ReactNode
+}
+export default function PasswordForm({
+  buttonArea,
+  className
+}: PasswordFormProps & CssProps) {
+  const { t } = useTranslation(['common'])
+
+  const { register, handleSubmit, formState } = useForm<SigninRequestType>({
+    mode: 'onBlur'
+  })
+  const { signinMutate } = useSigninWIthPasswordMutate()
+  const signinFunction = (obj: SigninRequestType) => {
+    signinMutate(obj)
+  }
+
+  return <form onSubmit={handleSubmit(signinFunction)} className={className}>
+    {/* TODO: need to change type between phone and email */}
+    <DarkTextInput
+      {...register('emailOrPhone', {
+        required: t('common:form.emailOrPhone.error.required'),
+        validate: (v) => {
+          if (validators.emailOrPhoneNumberType(v)) return true
+          if (isNaN(Number(v))) {
+            return t('common:form.emailOrPhone.error.patternEmail')
+          } else {
+            return t('common:form.emailOrPhone.error.validatePhone')
+          }
+        },
+      })}
+      {...RHFValidErrorHelper(
+        formState.errors.emailOrPhone?.message,
+        formState.touchedFields.emailOrPhone
+      )}
+      placeholder={t('common:form.emailOrPhone.placeholder')}
+    />
+    <DarkTextInput
+      {...register('password', {
+        required: t('common:form.password.error.required'),
+        pattern: {
+          value: pattern.password,
+          message: t('common:form.password.error.pattern')
+        }
+      })}
+      type="password"
+      {...RHFValidErrorHelper(
+        formState.errors.password?.message,
+        formState.touchedFields.password
+      )}
+      placeholder={t('common:form.password.placeholder')}
+    />
+    {buttonArea}
+  </form>
+}

src/components/pages/Signin/hooks/useSendSigninWithCodeRequest.ts

@@ -0,0 +1,32 @@
+import type { SigninWithCodeResponseType } from '@/lib/network/types/account';
+import { useMutation } from '@tanstack/react-query'
+import { useAtom } from 'jotai'
+import { useRouter } from 'next/router';
+import { SigninWithLoginCodeApi } from '@/lib/network/account/SigninWithLoginCodeApi'
+import { signinEmailOrPhoneAtom } from '@/state/Account'
+
+export default function useSendSigninWithCodeRequest() {
+  const router = useRouter()
+  const [, setSigninEmailOrPhone] = useAtom(signinEmailOrPhoneAtom)
+  const { mutate: signinWithLoginCodeMutate } = useMutation({
+    mutationFn: SigninWithLoginCodeApi,
+    onMutate(variables) {
+      setSigninEmailOrPhone(variables.emailOrPhone)
+      return () => {
+        setSigninEmailOrPhone('')
+      }
+    },
+    onSuccess: loginWithCodeAction,
+    onError(_error, _variables, context) {
+      if (context) context()
+    }
+  })
+  function loginWithCodeAction(data: SigninWithCodeResponseType) {
+    if (data.result) {
+      router.push('/signinWithLoginCode')
+    }
+  }
+  return {
+    signinWithLoginCodeMutate
+  }
+}