feat: 비밀번호 변경 페이지 디자인 작업

Author: gihwan-dev

src/apis/updateUserApi.ts

@@ -0,0 +1,13 @@
+import supabase from '@/supabase';
+
+const updateUser = async (password: string) => {
+  const { data, error } = await supabase.auth.updateUser({ password });
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};
+
+export default updateUser;

src/components/ChangePassword/ChangePasswordButton.tsx

@@ -0,0 +1,17 @@
+import { Loading } from '@/pages';
+import Dialog from '../Dialog';
+import useUpdateUser from '@/react-queries/useUpdateUser';
+const ChangePasswordButton = () => {
+  const { onClick, dialogRef, dialogMessage, isPending } = useUpdateUser();
+
+  return (
+    <>
+      <button onClick={onClick} className="btn btn-outline text-primary" type="button">
+        비밀번호 변경하기
+      </button>
+      <Dialog ref={dialogRef} desc={dialogMessage}></Dialog>
+      {isPending && <Loading display="spinner" color="primary" size="lg" />}
+    </>
+  );
+};
+export default ChangePasswordButton;

src/components/ChangePassword/ChangePasswordForm.tsx

@@ -0,0 +1,13 @@
+import ChangePasswordButton from './ChangePasswordButton';
+import ChangePasswordInput from './ChangePasswordInput';
+
+const ChangePasswordForm = () => {
+  return (
+    <form className="flex flex-1 flex-col justify-between px-8 pb-10">
+      <ChangePasswordInput />
+      <ChangePasswordButton />
+    </form>
+  );
+};
+
+export default ChangePasswordForm;

src/components/Dialog.tsx

@@ -36,11 +36,11 @@ const Dialog = forwardRef<DialogElement, Props>((props, ref) => {
         {title && <h3 className="text-lg font-bold">{title}</h3>}
         <p className={descClassName}>{desc}</p>
         {children && <div>{children}</div>}
-        <form method="dialog" className="modal-action flex justify-center">
+        <div className="modal-action flex justify-center">
           <button type="button" className="btn bg-primary text-base-100" onClick={() => dialogRef.current?.close()}>
             닫기
           </button>
-        </form>
+        </div>
       </div>
     </dialog>
   );

src/layouts/ChangePasswordPageLayout.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const ChangePasswordPageLayout: FC<Props> = ({ children }) => {
+  return <main className={'flex h-screen w-screen flex-col justify-between pb-8'}>{children}</main>;
+};
+
+export default ChangePasswordPageLayout;

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 { JoinPage, LoginPage, EditPwPage, NotFound, Policy } from './pages/index.ts';
+import ChangePasswordPage from './pages/ChangePasswordPage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -24,6 +25,10 @@ const router = createBrowserRouter([
     path: '/editPw',
     element: <EditPwPage />,
   },
+  {
+    path: '/change-password',
+    element: <ChangePasswordPage />,
+  },
   {
     path: '*',
     element: <NotFound />,

src/pages/ChangePasswordPage.tsx

@@ -0,0 +1,16 @@
+import ChangePasswordForm from '@/components/ChangePassword/ChangePasswordForm';
+import HistoryBackButton from '@/components/common/HistoryBackButton';
+import ChangePasswordPageLayout from '@/layouts/ChangePasswordPageLayout';
+
+const ChangePasswordPage = () => {
+  return (
+    <ChangePasswordPageLayout>
+      <nav className="px-5 py-2.5">
+        <HistoryBackButton />
+      </nav>
+      <ChangePasswordForm />
+    </ChangePasswordPageLayout>
+  );
+};
+
+export default ChangePasswordPage;