[#161] ✨ 로그인 페이지 개발 (#175)

* [#161] 🌱 Initialize Login page creation

* [#161] ✨ Implement login page

* [#45] ♻️ labelTextClass to use twMergeEx

* [#43] ♻️ Set fullWidth as the default prop value for components

* [#98] ♻️ Add single checkbox support to FormCheckbox and connect error prop to FormPassword

* [#56] ✨ Add BASE_URL to .env configuration

* [#42] 💄 Add default size to Logo component

Author: yongb2n

.env

@@ -1 +1,2 @@
-# NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BACKEND_BASE_URL=http://43.202.50.174:8080

src/app/(pages)/login/page.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { SignInRequest } from '@/types/api/Auth.types'
+
+import { Button, Link } from '@/components/common/button'
+import { Label } from '@/components/common/label'
+import { Logo } from '@/components/common/logo'
+import { Form } from '@/components/shared/form'
+
+import { useSignInMutation } from '@/queries/auth'
+
+/**
+ * TODO
+ * 1. 유효성 검사 부분 zod로 작업 및 관심사 분리 (name 말고 다른 prop으로)
+ * 2. 로그인, 회원가입 버튼 사이 또는 부분 구분선 컴포넌트 추가되면 지정
+ * 3. 비밀번호 찾기 페이지 디자인 요청 및 구현
+ */
+
+interface SignInForm extends SignInRequest {
+  rememberEmail?: boolean
+}
+
+export default function Login(): JSX.Element {
+  const methods = useForm<SignInForm>({
+    mode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberEmail: false,
+    },
+  })
+
+  const {
+    formState: { isValid },
+    setValue,
+  } = methods
+
+  const { mutate: signIn } = useSignInMutation()
+
+  const onSubmit = (data: SignInForm) => {
+    if (data.rememberEmail) {
+      localStorage.setItem('rememberedEmail', data.email)
+    } else {
+      localStorage.removeItem('rememberedEmail')
+    }
+    signIn({
+      email: data.email,
+      password: data.password,
+    })
+  }
+
+  useEffect(() => {
+    const rememberedEmail = localStorage.getItem('rememberedEmail')
+    if (rememberedEmail) {
+      setValue('email', rememberedEmail)
+      setValue('rememberEmail', true)
+    }
+  }, [setValue])
+
+  return (
+    <div className='m-auto flex h-auto w-420 flex-col pt-238'>
+      <div className='m-auto mb-36'>
+        <Logo />
+      </div>
+      <Form methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
+        <Label labelText='이메일' className='mb-20'>
+          <Form.Text name='email' placeholder='이메일을 입력해주세요' />
+        </Label>
+        <Label labelText='비밀번호' className='mb-20'>
+          <Form.Password
+            name='password'
+            placeholder='비밀번호를 입력해주세요'
+          />
+        </Label>
+        <div className='flex h-24 items-center justify-between'>
+          <Form.Checkbox
+            variant='checkbox'
+            name='rememberEmail'
+            label='이메일 기억하기'
+            className='ml-4 h-20 text-body3 font-medium text-gray-600'
+          />
+          <Link
+            variant='text'
+            href='/find-password'
+            className='p-0 text-body3 font-medium text-gray-600'
+          >
+            비밀번호 찾기
+          </Link>
+        </div>
+        <Button disabled={!isValid} type='submit' fullWidth className='my-20'>
+          로그인
+        </Button>
+        <span className='flex flex-col items-center text-body3 text-gray-600'>
+          또는
+        </span>
+        <Link variant='outlined' href='/sign-up' fullWidth className='mt-20'>
+          회원가입
+        </Link>
+      </Form>
+    </div>
+  )
+}

src/app/(pages)/sign-in/page.tsx

@@ -4,6 +4,7 @@ import { twMerge } from 'tailwind-merge'
 
 import { handleKeyDown } from '@/utils/handleKeyDown'
 import { toggleCheckbox } from '@/utils/toggleCheckbox'
+import { twMergeEx } from '@/lib/twMerge'
 
 export interface CheckboxInputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -59,8 +60,7 @@ export const CheckboxInput = ({
     'focus:outline-none focus:ring-1 focus:ring-primary-normal',
     disabled && 'cursor-not-allowed opacity-50'
   )
-  const labelTextClass = twMerge('ml-10 h-22', className)
-
+  const labelTextClass = twMergeEx('ml-10 h-22', className)
   return (
     <label className={labelClass}>
       <input

src/components/common/input/CheckboxInput.tsx

@@ -23,7 +23,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       startAdornment,
       endAdornment,
       className = '',
-      fullWidth = false,
+      fullWidth = true,
       ...props
     },
     ref

src/components/common/input/TextInput.tsx

@@ -7,9 +7,9 @@ type Variant = 'default' | 'primary' | 'secondary'
 type LogoProps = { variant?: Variant }
 
 const logoByVariant: Record<Variant, React.ReactElement> = {
-  default: <LogoBlack />,
-  primary: <LogoWhite />,
-  secondary: <LogoGray />,
+  default: <LogoBlack width='200px' height='40px' />,
+  primary: <LogoWhite width='200px' height='40px' />,
+  secondary: <LogoGray width='200px' height='40px' />,
 }
 
 export const Logo = ({ variant = 'default' }: LogoProps): JSX.Element => {

src/components/common/logo/Logo.tsx

@@ -73,11 +73,11 @@ const FormText = ({
         </StatusMessage>
       )}
       {/* TODO: 이미 가입된 이메일 확인하는 로직 추가하면서 수정 필요 */}
-      {isSuccess && (
+      {/* {isSuccess && (
         <StatusMessage hasError={false}>
           가입 가능한 이메일입니다.
         </StatusMessage>
-      )}
+      )} */}
     </>
   )
 }
@@ -94,14 +94,19 @@ const FormPassword = ({
     formState: { errors },
     getValues,
   } = useFormContext()
+
   const registerOptions =
     name === 'passwordConfirmation'
       ? PASSWORD_CONFIRM_RULES(getValues('password'))
       : VALIDATION_RULES[name]
 
   return (
     <>
-      <PasswordInput {...register(name, registerOptions)} {...props} />
+      <PasswordInput
+        {...register(name, registerOptions)}
+        {...props}
+        error={Boolean(errors[name])}
+      />
       {errors[name]?.message && (
         <StatusMessage hasError={Boolean(errors[name])}>
           {errors[name].message as string}
@@ -136,11 +141,13 @@ const FormCheckbox = ({
   name,
   rules,
   options,
+  label,
   ...props
 }: {
   name: string
   rules?: Record<string, unknown>
-  options: { label: string; value: string }[]
+  options?: { label: string; value: string }[]
+  label?: string
 } & CheckboxInputProps): JSX.Element => {
   const { control } = useFormContext()
   return (
@@ -150,22 +157,31 @@ const FormCheckbox = ({
       rules={rules}
       render={({ field }) => (
         <>
-          {options.map(option => (
+          {options ? (
+            options.map(option => (
+              <CheckboxInput
+                key={option.value}
+                {...props}
+                value={option.value}
+                label={option.label}
+                checked={(field.value || []).includes(option.value)}
+                onChange={e => {
+                  const currentValue = field.value || []
+                  const newValue = e.target.checked
+                    ? [...currentValue, option.value]
+                    : currentValue.filter((v: string) => v !== option.value)
+                  field.onChange(newValue)
+                }}
+              />
+            ))
+          ) : (
             <CheckboxInput
-              key={option.value}
               {...props}
-              value={option.value}
-              label={option.label}
-              checked={(field.value || []).includes(option.value)}
-              onChange={e => {
-                const currentValue = field.value || []
-                const newValue = e.target.checked
-                  ? [...currentValue, option.value]
-                  : currentValue.filter((v: string) => v !== option.value)
-                field.onChange(newValue)
-              }}
+              label={label}
+              checked={field.value || false}
+              onChange={e => field.onChange(e.target.checked)}
             />
-          ))}
+          )}
         </>
       )}
     />