Merge pull request #103 from imaginer-dev/12-비밀번호-변경-페이지

비밀번호 변경 페이지 추가합니다.

Author: CreatorDodo

src/components/EditPw/EditPwButton.tsx

@@ -0,0 +1,18 @@
+import { useEditPwState } from '../../stores/editPwStore.ts';
+
+const EditPwButton = () => {
+  const { email, name } = useEditPwState();
+
+  const onClick = () => {
+    console.log('email: ', email);
+    console.log('name: ', name);
+  };
+
+  return (
+    <button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
+      비밀번호 변경
+    </button>
+  );
+};
+
+export default EditPwButton;

src/components/EditPw/EmailInput.tsx

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

src/components/EditPw/NameInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useEditPwState } from '../../stores/editPwStore.ts';
+
+const NameInput = () => {
+  const { name, nameHandler } = useEditPwState();
+
+  return (
+    <InputForm
+      defaultValue={name}
+      title={'이름'}
+      placeholder={'이름을 입력하세요'}
+      hint={'Hint Text'}
+      onChange={(e) => nameHandler(e.target.value)}
+      type={'name'}
+      name={'name'}
+    />
+  );
+};
+
+export default NameInput;

src/layouts/CenterPageLayout.tsx

@@ -4,7 +4,7 @@ interface Props {
   children: ReactNode;
 }
 
-const LoginPageLayout: FC<Props> = ({ children }) => {
+const CenterPageLayout: 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'}>
@@ -14,4 +14,4 @@ const LoginPageLayout: FC<Props> = ({ children }) => {
   );
 };
 
-export default LoginPageLayout;
+export default CenterPageLayout;

src/main.tsx

@@ -9,12 +9,25 @@ import { NotFound } from './pages/Notfound.tsx';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import JoinPage from './pages/JoinPage.tsx';
 import LoginPage from './pages/LoginPage.tsx';
+import EditPwPage from './pages/EditPwPage.tsx';
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
   },
+  {
+    path: '/login',
+    element: <LoginPage />,
+  },
+  {
+    path: '/join',
+    element: <JoinPage />,
+  },
+  {
+    path: '/editPw',
+    element: <EditPwPage />,
+  },
   {
     path: '*',
     element: <NotFound />,
@@ -28,14 +41,6 @@ const router = createBrowserRouter([
       },
     ],
   },
-  {
-    path: 'login',
-    element: <LoginPage />,
-  },
-  {
-    path: 'join',
-    element: <JoinPage />,
-  },
 ]);
 const queryClient = new QueryClient();
 

src/pages/EditPwPage.tsx

@@ -0,0 +1,22 @@
+import CenterPageLayout from '../layouts/CenterPageLayout.tsx';
+import LoginForm from '../components/login/LoginForm.tsx';
+import EmailInput from '../components/EditPw/EmailInput.tsx';
+import NameInput from '../components/EditPw/NameInput.tsx';
+import LoginFormActions from '../components/login/LoginFormActions.tsx';
+import EditPwButton from '../components/EditPw/EditPwButton.tsx';
+
+const EditPwPage = () => {
+  return (
+    <CenterPageLayout>
+      <LoginForm>
+        <NameInput />
+        <EmailInput />
+      </LoginForm>
+      <LoginFormActions>
+        <EditPwButton />
+      </LoginFormActions>
+    </CenterPageLayout>
+  );
+};
+
+export default EditPwPage;

src/pages/LoginPage.tsx

@@ -1,29 +1,29 @@
-import LoginPageLayout from '../layouts/CenterPageLayout.tsx';
+import CenterPageLayout from '../layouts/CenterPageLayout.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';
+import NameInput from '../components/Join/NameInput.tsx';
 
 const LoginPage = () => {
   return (
-    <LoginPageLayout>
+    <CenterPageLayout>
       <VerticalLogo />
       <LoginForm>
+        <NameInput />
         <EmailInput />
-        <PasswordInput />
       </LoginForm>
       <LoginFormActions>
         <LoginButton />
         <LoginNavigation>
-          <LoginNavigationLink text={'비밀번호 찾기'} to={'/'} />
-          <LoginNavigationLink text={'회원가입'} to={'/'} />
+          <LoginNavigationLink text={'비밀번호 찾기'} to={'/editPw'} />
+          <LoginNavigationLink text={'회원가입'} to={'/join'} />
         </LoginNavigation>
       </LoginFormActions>
-    </LoginPageLayout>
+    </CenterPageLayout>
   );
 };
 

src/stores/editPwStore.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+interface EditPwState {
+  email: string;
+  name: string;
+
+  emailHandler: (email: string) => void;
+  nameHandler: (name: string) => void;
+}
+
+export const useEditPwState = create<EditPwState>()((set) => ({
+  email: '',
+  name: '',
+
+  emailHandler: (email: string) => set((state) => ({ email, name: state.name })),
+  nameHandler: (name: string) => set((state) => ({ email: state.email, name })),
+}));