Merge pull request #129 from imaginer-dev/11-reset-passwd

feat: 비밀번호 변경 페이지 구현

Author: gihwan-dev

src/apis/authApis.ts

@@ -15,3 +15,11 @@ export const signIn = async ({ email, password }: SignInParams) => {
 
   return data;
 };
+
+export const recoveryPasswd = async (email: string) => {
+  const { data, error } = await supabase.auth.resetPasswordForEmail(email);
+  if (error) {
+    throw error;
+  }
+  return data;
+};

src/components/EditPw/EditPwButton.tsx

@@ -1,11 +1,15 @@
 import { useEditPwState } from '../../stores/editPwStore.ts';
+import { recoveryPasswd } from '../../apis/authApis.ts';
 
 const EditPwButton = () => {
-  const { email, name } = useEditPwState();
+  const { email } = useEditPwState();
 
   const onClick = () => {
     console.log('email: ', email);
-    console.log('name: ', name);
+    const result = recoveryPasswd(email);
+    result.then((value) => {
+      console.log(value);
+    });
   };
 
   return (

src/components/EditPw/EmailInput.tsx

@@ -1,17 +1,35 @@
 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';
+import InputForm from '../components/common/InputForm.tsx';
+import { useEditPwState } from '../stores/editPwStore.ts';
 
 const EditPwPage = () => {
+  const { email, emailHandler } = useEditPwState();
+
   return (
     <CenterPageLayout>
-      <LoginForm>
-        <NameInput />
-        <EmailInput />
-      </LoginForm>
+      <form className={'flex w-full flex-col'}>
+        <div className="card mb-10 w-96 bg-base-200 text-primary-content">
+          <div className="card-body">
+            <p>
+              새로운 비밀번호 등록이 가능한 링크를 <br />
+              이메일로 보내드립니다.
+            </p>
+            <p>회원가입 시 등록한 이메일 주소를 입력해주세요.</p>
+          </div>
+        </div>
+
+        <InputForm
+          defaultValue={email}
+          title={'이메일'}
+          placeholder={'이메일을 입력하세요'}
+          hint={''}
+          onChange={(e) => emailHandler(e.target.value)}
+          type={'email'}
+          name={'email'}
+        />
+      </form>
       <LoginFormActions>
         <EditPwButton />
       </LoginFormActions>

src/components/EditPw/NameInput.tsx

@@ -2,16 +2,10 @@ 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 })),
+  emailHandler: (email: string) => set(() => ({ email })),
 }));