feat: 로그인 기능 구현

- zustand 스토어를 통해 로그인 변수 관리
- 컴파운드 컴포넌트 패턴 적용
- 공용 input 최대 너비 제한 제거

Author: gihwan-dev

src/components/common/InputForm.tsx

@@ -9,11 +9,11 @@ interface Props extends HTMLProps<HTMLInputElement> {
 
 const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange, ...rest }) => {
   return (
-    <label className="form-control w-full max-w-xs">
+    <label className="form-control w-full">
       <div className="label">
         <span className="label-text">{title}</span>
       </div>
-      <input placeholder={placeholder} className="input input-bordered w-full max-w-xs" onChange={onChange} {...rest} />
+      <input placeholder={placeholder} className="input input-bordered w-full" onChange={onChange} {...rest} />
       <div className="label">
         <span className="label-text-alt">{hint}</span>
       </div>

src/components/common/VerticalLogo.tsx

@@ -1,6 +1,13 @@
 const VerticalLogo = () => {
   return (
-    <svg width="173" height="132" viewBox="0 0 173 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={'shrink-0'}
+      width="173"
+      height="132"
+      viewBox="0 0 173 132"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M101.162 42.3332C98.9018 42.3332 96.3478 42.3332 93.5461 42.5167C86.4412 42.9754 76.8287 42.165 74.8474 32.1346C72.0302 17.8842 80.2031 6.20248 79.3518 9.04646C72.3398 32.3946 85.2493 37.9143 95.6667 40.7736C98.809 41.6298 100.574 41.8286 103.344 37.5626C106.905 32.1041 110.109 21.9055 107.57 16.9209C102.292 6.66119 82.6643 5.42268 83.8407 1.06498C85.1874 -3.88904 63.4083 8.74065 64.5228 32.7004C65.1575 46.3392 77.4169 52.1648 98.9947 44.7643C101.177 44.0151 101.162 42.3485 101.162 42.3485V42.3332Z"
         fill="#B8EA00"

src/components/login/EmailInput.tsx

@@ -1,7 +1,20 @@
 import InputForm from '../common/InputForm.tsx';
+import { useLoginState } from '../../stores/loginStore.ts';
 
 const EmailInput = () => {
-  return <InputForm title={'Email'} placeholder={'이메일을 입력하세요'} hint={'Hint Text'} onChange={() => {}} />;
+  const { email, emailHandler } = useLoginState();
+
+  return (
+    <InputForm
+      defaultValue={email}
+      title={'Email'}
+      placeholder={'이메일을 입력하세요'}
+      hint={'Hint Text'}
+      onChange={(e) => emailHandler(e.target.value)}
+      type={'email'}
+      name={'email'}
+    />
+  );
 };
 
 export default EmailInput;

src/components/login/LoginButton.tsx

@@ -0,0 +1,18 @@
+import { useLoginState } from '../../stores/loginStore.ts';
+
+const LoginButton = () => {
+  const { email, password } = useLoginState();
+
+  const onClick = () => {
+    console.log('email: ', email);
+    console.log('password: ', password);
+  };
+
+  return (
+    <button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
+      SIGN IN
+    </button>
+  );
+};
+
+export default LoginButton;

src/components/login/LoginForm.tsx

@@ -1,46 +1,11 @@
-import { ChangeEventHandler, createContext, FC, ReactNode, useState } from 'react';
+import { FC, ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
 }
 
-interface LoginFormState {
-  email: string;
-  password: string;
-}
-
-interface State {
-  formChangeHandler: ChangeEventHandler<HTMLInputElement>;
-  loginFormState: LoginFormState;
-}
-
-export const LoginContext = createContext<State>();
-
 const LoginForm: FC<Props> = ({ children }) => {
-  const [formState, setFormState] = useState<LoginFormState>({
-    email: '',
-    password: '',
-  });
-
-  const formChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const name = e.target.name as 'email' | 'password';
-    const value = e.target.value;
-    setFormState((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  return (
-    <LoginContext.Provider
-      value={{
-        loginFormState: formState,
-        formChangeHandler,
-      }}
-    >
-      <form>{children}</form>
-    </LoginContext.Provider>
-  );
+  return <form className={'flex w-full flex-col gap-4'}>{children}</form>;
 };
 
 export default LoginForm;

src/components/login/LoginFormActions.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const LoginFormActions: FC<Props> = ({ children }) => {
+  return <div className={'flex w-full flex-col gap-2'}>{children}</div>;
+};
+
+export default LoginFormActions;

src/components/login/LoginNavigation.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const LoginNavigation: FC<Props> = ({ children }) => {
+  return <div className={'flex flex-row justify-between'}>{children}</div>;
+};
+
+export default LoginNavigation;

src/components/login/LoginNavigationLink.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+interface LoginNavigationLinkProps {
+  text: string;
+  to: string;
+}
+
+const LoginNavigationLink: FC<LoginNavigationLinkProps> = ({ text, to }) => {
+  return (
+    <Link className={'text-xs font-medium'} to={to}>
+      {text}
+    </Link>
+  );
+};
+
+export default LoginNavigationLink;

src/components/login/PasswordInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useLoginState } from '../../stores/loginStore.ts';
+
+const PasswordInput = () => {
+  const { password, passwordHandler } = useLoginState();
+
+  return (
+    <InputForm
+      defaultValue={password}
+      title={'Password'}
+      placeholder={'패스워드를 입력해 주세요.'}
+      hint={'Hint text.'}
+      onChange={(e) => passwordHandler(e.target.value)}
+      name={'password'}
+      type={'password'}
+    />
+  );
+};
+
+export default PasswordInput;

src/layouts/LoginPageLayout.tsx

@@ -5,7 +5,13 @@ interface Props {
 }
 
 const LoginPageLayout: FC<Props> = ({ children }) => {
-  return <div>{children}</div>;
+  return (
+    <main className={'flex h-screen w-screen items-center justify-center'}>
+      <div className={'flex h-full w-full max-w-md flex-col items-center justify-around overflow-hidden px-8 py-8'}>
+        {children}
+      </div>
+    </main>
+  );
 };
 
 export default LoginPageLayout;