7 이메일 패스워드를 입력할 수 있어야한다

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

@@ -0,0 +1,59 @@
+const VerticalLogo = () => {
+  return (
+    <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"
+      />
+      <path
+        d="M66.4128 125.93C66.1128 125.97 65.8328 126 65.6828 125.94C64.6828 125.52 64.0928 125.08 63.9828 124.67C63.8628 124.24 64.1628 123.53 64.8628 122.56C66.3228 120.36 66.6028 114.17 64.3128 112.18C63.7928 111.73 62.4728 110.94 60.5328 112.25C57.3328 109.74 52.4028 109.73 49.2828 112.38C44.1528 116.92 44.6728 123.76 48.1328 127.76C49.7228 129.6 52.0328 130.79 54.6528 130.84C56.7228 130.88 59.2128 130.01 61.4928 127.98C61.8028 128.31 62.3228 128.86 62.9828 129.13C63.9028 129.66 66.1928 130.46 67.7528 129.68C68.5928 129.26 68.9228 128.5 68.9828 128.19L69.2828 127.94L69.0128 127.21C68.4428 125.64 67.0128 125.82 66.4028 125.9L66.4128 125.93ZM58.4628 115.86C58.2228 118.28 58.4928 121.88 59.1928 123.36C59.7828 124.63 59.3928 124.69 59.3928 124.69C57.8928 127.01 55.5528 127.74 53.1228 126.64C50.5828 125.49 48.5328 122.49 49.5528 118.89C50.0028 116.59 51.9828 114.47 54.3128 114.17C56.2028 113.93 57.4228 114.43 58.4628 115.86ZM62.2128 118.13C62.2028 117.56 62.2128 117.02 62.2428 116.59C62.2628 117.06 62.2428 117.6 62.2128 118.13Z"
+        fill="#429400"
+      />
+      <path
+        d="M99.3527 123.49L98.5627 123.36C97.5527 123.19 96.8227 123.82 96.2927 124.27C96.1127 124.42 95.8427 124.65 95.7327 124.69L95.5527 124.73L95.3927 124.83C93.3727 126.16 90.8327 125.3 89.2127 123.86C87.8827 122.67 86.6827 120.61 87.3527 118.47C90.8627 118.77 96.2127 118.47 98.4427 114.36C99.0927 112.72 98.5927 110.29 96.6027 109.42C93.5227 108.07 87.9327 110.16 85.0527 113.85C82.1927 117.52 82.3927 121.93 85.6027 125.98C86.7027 128.04 89.9827 129.16 93.0627 129.16C94.1527 129.16 95.2127 129.02 96.1427 128.73C98.5327 127.99 99.7727 126.32 99.4627 124.26L99.3427 123.47L99.3527 123.49ZM93.9327 113.91C92.8427 114.61 91.1527 114.87 89.6227 114.81C90.6927 113.85 92.0627 113.03 93.3327 112.88C93.8727 112.81 94.3527 112.88 94.7827 113.06C94.5927 113.39 94.3027 113.67 93.9227 113.91H93.9327Z"
+        fill="#429400"
+      />
+      <path
+        d="M152.073 114.3C151.773 114.34 151.493 114.37 151.343 114.31C150.343 113.89 149.753 113.45 149.643 113.04C149.523 112.61 149.823 111.9 150.523 110.93C151.983 108.73 152.263 102.54 149.973 100.55C149.453 100.1 148.133 99.3098 146.193 100.62C142.993 98.1098 138.063 98.0998 134.943 100.75C129.813 105.29 130.333 112.13 133.793 116.13C135.383 117.97 137.693 119.16 140.313 119.21C142.383 119.25 144.873 118.38 147.153 116.35C147.463 116.68 147.983 117.23 148.643 117.5C149.563 118.03 151.853 118.83 153.413 118.05C154.253 117.63 154.583 116.87 154.643 116.56L154.943 116.31L154.673 115.58C154.103 114.01 152.673 114.19 152.063 114.27L152.073 114.3ZM144.123 104.23C143.883 106.65 144.153 110.25 144.853 111.73C145.443 113 145.053 113.06 145.053 113.06C143.553 115.38 141.213 116.11 138.783 115.01C136.243 113.86 134.193 110.86 135.213 107.26C135.663 104.96 137.643 102.84 139.973 102.54C141.863 102.3 143.083 102.8 144.123 104.23ZM147.883 106.51C147.873 105.94 147.883 105.4 147.913 104.97C147.933 105.44 147.913 105.98 147.883 106.51Z"
+        fill="#429400"
+      />
+      <path
+        d="M132.133 116.6L131.343 116.47C130.333 116.3 129.603 116.93 129.073 117.38C128.893 117.53 128.623 117.76 128.513 117.8L128.333 117.84L128.173 117.94C126.153 119.27 123.613 118.41 121.993 116.97C120.663 115.78 119.463 113.72 120.133 111.58C123.643 111.88 128.993 111.58 131.223 107.47C131.873 105.83 131.373 103.4 129.383 102.53C126.303 101.18 120.713 103.27 117.833 106.96C114.973 110.63 115.173 115.04 118.383 119.09C119.483 121.15 122.763 122.27 125.843 122.27C126.933 122.27 127.993 122.13 128.923 121.84C131.313 121.1 132.553 119.43 132.243 117.37L132.123 116.58L132.133 116.6ZM126.723 107.02C125.633 107.72 123.943 107.98 122.413 107.92C123.483 106.96 124.853 106.14 126.123 105.99C126.663 105.92 127.143 105.99 127.573 106.17C127.383 106.5 127.093 106.78 126.713 107.02H126.723Z"
+        fill="#429400"
+      />
+      <path
+        d="M77.6526 107.89L73.7026 107.8L73.6126 119.08C73.6126 122 73.7226 123.9 73.9426 124.79C74.1626 125.65 74.8026 126.15 75.8426 126.07C76.9626 125.99 77.9626 125.33 78.9426 125.07C79.5826 124.9 79.9426 125.4 79.9426 126.07C79.9426 126.74 79.3526 127.42 78.1826 128.12C77.0026 128.82 75.8526 129.17 74.7126 129.17C71.9526 129.17 70.5726 127.14 70.5726 123.08L70.5226 107.8C69.4726 107.89 68.7426 107.94 68.3326 107.94C66.7426 107.94 65.9526 107.41 65.9526 106.37C65.9526 105.33 66.7526 104.8 68.3326 104.8L70.4326 104.89L70.3426 99.5597C70.3426 97.9697 70.9426 97.1797 72.1526 97.1797C73.3626 97.1797 73.9626 97.9797 73.9626 99.5597L73.8226 104.94L77.6726 104.75C79.2626 104.75 80.0526 105.29 80.0526 106.37C80.0526 107.38 79.2526 107.89 77.6726 107.89H77.6526Z"
+        fill="#429400"
+      />
+      <path
+        d="M170.243 112.19L165.713 112.28L165.603 101C165.603 98.0799 165.733 96.1799 165.983 95.2899C166.233 94.4299 166.963 94.0099 168.163 94.0099C168.743 94.0099 169.433 94.1699 170.243 94.4899C171.043 94.8399 171.533 95.0199 171.713 95.0199C172.483 95.0199 172.853 94.6899 172.853 94.0199C172.853 93.3499 172.183 92.6699 170.833 91.9699C169.483 91.2699 168.163 90.9199 166.843 90.9199C163.673 90.9199 162.093 92.9499 162.093 97.0099L162.043 112.29C160.843 112.2 160.003 112.15 159.533 112.15C157.713 112.15 156.803 112.68 156.803 113.72C156.803 114.76 157.713 115.29 159.533 115.29L161.933 115.2L161.823 129.15C161.823 130.74 162.513 131.53 163.903 131.53C165.293 131.53 165.973 130.73 165.973 129.15L165.813 115.16L170.233 115.35C172.053 115.35 172.963 114.81 172.963 113.73C172.963 112.72 172.053 112.21 170.233 112.21L170.243 112.19Z"
+        fill="#429400"
+      />
+      <path
+        d="M44.3326 101.35C41.8126 95.6398 35.0726 90.7798 32.1126 89.0398C26.8026 85.4998 19.4226 82.4798 15.8226 81.1698C13.2326 80.1798 10.9126 79.3198 8.88262 78.5798C8.88262 78.5798 5.45262 78.2998 5.26262 78.2998H4.15261C2.01261 78.2598 1.22262 78.6398 0.732617 78.9498C0.0726166 79.4098 -0.217383 79.9698 0.182617 81.0798C0.372617 81.3898 1.28262 83.3298 1.76262 83.8598L5.46262 129.96C5.52262 129.96 5.99262 129.99 6.85262 130.05C13.6826 130.53 17.7826 130.36 21.7526 129.87C27.7926 129.06 32.6526 127.24 35.1726 125.89C40.7026 123.38 43.7126 118.88 44.8026 116.64C47.7226 109.94 45.7126 103.96 44.3426 101.37V101.35H44.3326ZM26.1826 125.79C23.1226 126.58 19.1026 127.2 8.87262 126.53C8.87262 125.54 7.02262 83.3898 7.02262 83.3898C9.18262 83.3898 11.4926 83.6698 13.9626 84.2198C27.6926 87.8898 32.9126 93.5298 34.9726 95.5098C40.8726 102.15 41.0826 106.07 41.0826 108.47C41.0826 111.74 40.5426 121.67 26.1826 125.78V125.79Z"
+        fill="#429400"
+      />
+      <path
+        d="M106.033 68.02L109.553 126.71C115.043 126.71 120.543 126.37 126.033 125.69C131.593 124.95 137.263 124.27 143.063 123.65L143.433 126.7C143.373 126.7 142.783 126.79 141.673 126.98C140.623 127.1 127.043 128.68 124.823 128.93C122.603 129.17 114.643 130.1 113.163 130.23L110.203 130.32C108.843 130.32 107.733 129.61 106.873 128.19C106.013 126.71 105.293 124.74 104.743 122.26C103.663 117.98 103.113 106.99 102.983 103.46C102.863 99.94 102.863 76.61 102.793 74.02C102.793 71.43 102.703 69.42 102.513 68H106.033V68.02Z"
+        fill="#429400"
+      />
+      <path
+        d="M75.4625 100.2C75.6225 100.18 75.8325 100.08 75.9125 99.8696C76.1525 99.2496 76.4225 97.5196 76.5325 97.1396C76.8425 96.0596 77.5425 94.7096 79.5625 95.1496C82.4425 95.7596 84.2125 97.8096 83.7225 97.4796C79.6625 94.7596 77.8825 96.2596 76.7425 97.5796C76.4025 97.9796 76.2625 98.2296 76.9225 98.9396C77.7625 99.8596 79.5325 101.07 80.6225 101.05C82.8825 101.02 84.2125 98.2296 84.9825 98.7196C85.8525 99.2796 84.6625 95.1696 80.0325 93.5996C77.6525 92.7896 75.9525 93.8296 75.7925 96.7596C75.7725 97.0796 75.9025 98.5496 75.6425 98.8096C74.6325 99.8296 74.5225 100.34 75.4525 100.21L75.4625 100.2Z"
+        fill="#B8EA00"
+      />
+      <path
+        d="M151.633 100.18C151.693 100.03 151.853 99.8397 152.103 99.8097C152.833 99.6997 154.733 99.7897 155.163 99.7697C156.383 99.6897 158.003 99.2797 158.053 97.2097C158.123 94.2597 156.383 92.1097 156.613 92.6597C158.483 97.1997 156.443 98.6397 154.753 99.4697C154.243 99.7197 153.943 99.7997 153.353 99.0097C152.593 97.9997 151.743 96.0097 152.033 94.9497C152.633 92.7397 155.943 92.0097 155.613 91.1497C155.243 90.1797 159.313 92.1997 159.823 97.0597C160.083 99.5597 158.553 101.01 155.393 100.57C155.053 100.52 153.513 100.09 153.173 100.29C151.833 101.07 151.263 101.08 151.633 100.19H151.623L151.633 100.18Z"
+        fill="#B8EA00"
+      />
+    </svg>
+  );
+};
+
+export default VerticalLogo;

src/components/login/EmailInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useLoginState } from '../../stores/loginStore.ts';
+
+const EmailInput = () => {
+  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

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const LoginForm: FC<Props> = ({ children }) => {
+  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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const LoginPageLayout: FC<Props> = ({ children }) => {
+  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;

src/main.tsx

@@ -6,6 +6,7 @@ import App from './App.tsx';
 import TextInputForm from './pages/InputFormTest.tsx';
 
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import LoginPage from './pages/LoginPage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
     path: '/test/inputForm',
     element: <TextInputForm />,
   },
+  {
+    path: 'login',
+    element: <LoginPage />,
+  },
 ]);
 const queryClient = new QueryClient();
 

src/pages/LoginPage.tsx

@@ -0,0 +1,30 @@
+import LoginPageLayout from '../layouts/LoginPageLayout.tsx';
+import VerticalLogo from '../components/common/VerticalLogo.tsx';
+import LoginForm from '../components/login/LoginForm.tsx';
+import EmailInput from '../components/login/EmailInput.tsx';
+import PasswordInput from '../components/login/PasswordInput.tsx';
+import LoginFormActions from '../components/login/LoginFormActions.tsx';
+import LoginButton from '../components/login/LoginButton.tsx';
+import LoginNavigation from '../components/login/LoginNavigation.tsx';
+import LoginNavigationLink from '../components/login/LoginNavigationLink.tsx';
+
+const LoginPage = () => {
+  return (
+    <LoginPageLayout>
+      <VerticalLogo />
+      <LoginForm>
+        <EmailInput />
+        <PasswordInput />
+      </LoginForm>
+      <LoginFormActions>
+        <LoginButton />
+        <LoginNavigation>
+          <LoginNavigationLink text={'비밀번호 찾기'} to={'/'} />
+          <LoginNavigationLink text={'회원가입'} to={'/'} />
+        </LoginNavigation>
+      </LoginFormActions>
+    </LoginPageLayout>
+  );
+};
+
+export default LoginPage;

src/stores/loginStore.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+interface LoginState {
+  email: string;
+  password: string;
+
+  emailHandler: (email: string) => void;
+  passwordHandler: (password: string) => void;
+}
+
+export const useLoginState = create<LoginState>()((set) => ({
+  email: '',
+  password: '',
+
+  emailHandler: (email: string) => set((state) => ({ email, password: state.password })),
+  passwordHandler: (password: string) => set((state) => ({ email: state.email, password })),
+}));