update:: 비밀번호 재설정 훅 분리, apis 작성 #140

훅을 분리하여 이메일 인증과 비밀번호 변경 함수를 불러오도록 작성하고 apis를 작성해서 서버로 post를 보내서 이메일 인증,비밀 번호 변경한 내용을 post로 보내도록 작성했습니다.

src/apis/ChangePassword/ChangePasswordRepositoryImpl.ts

@@ -0,0 +1,18 @@
+import { IDAcustomAxios } from "@/util/CustomAxios/customAxios"
+
+export interface ChangePasswordRepository {
+  changePassword(email: string, password: string): Promise<void>
+  sendEmailAuth(email: string): Promise<void>
+}
+
+class ChangePasswordRepositoryImpl implements ChangePasswordRepository {
+  public async changePassword(email: string, password: string): Promise<void> {
+    await IDAcustomAxios.post("/api/change-password", { email, password })
+  }
+
+  public async sendEmailAuth(email: string): Promise<void> {
+    await IDAcustomAxios.post("/api/send-email-auth", { email })
+  }
+}
+
+export default new ChangePasswordRepositoryImpl()

src/components/ChangePassword/index.tsx

@@ -1,21 +1,19 @@
-// import { useState } from "react"
+import { useState } from "react"
 import { Controller, useForm } from "react-hook-form"
-import type { SubmitHandler } from "react-hook-form"
-import Input from "../common/Input"
+import Input from "../Common/Input"
 import * as S from "./style"
 import type { ChangePasswordFormData } from "./type"
 import { validation } from "@/constants/validation"
-import ErrorMessage from "../common/ErrorMessage"
+import ErrorMessage from "../Common/ErrorMessage"
 import Button from "../common/Button"
+import { useChangePasswordQuery } from "@/hooks/ChangePassword/useChangePasswordQuery"
+import ChangePasswordRepositoryImpl from "@/apis/ChangePassword/ChangePasswordRepositoryImpl"
 
 const ChangePassword = () => {
-  // 'SetIsEmailAuth' is assigned a value but never used  @typescript-eslint/no-unused-vars 에러나서 막아둡니다
-  // const [isEmailAuth, SetIsEmailAuth] = useState(false)
-  const isEmailAuth = false
+  const [isEmailAuth, setIsEmailAuth] = useState(false)
+  const repository = ChangePasswordRepositoryImpl
 
-  // const EmailAuthChange = () => {
-  //   SetIsEmailAuth(!isEmailAuth)
-  // }
+  const { onsubmit, handleEmailAuth } = useChangePasswordQuery()
 
   const {
     control,
@@ -24,12 +22,10 @@ const ChangePassword = () => {
     getValues,
   } = useForm<ChangePasswordFormData>()
 
-  const onsubmit: SubmitHandler<ChangePasswordFormData> = (data) => {
-    console.log(data)
-  }
-
   return (
-    <S.ChangePasswordForm onSubmit={handleSubmit(onsubmit)}>
+    <S.ChangePasswordForm
+      onSubmit={handleSubmit((data) => onsubmit(data, isEmailAuth, repository))}
+    >
       <S.ChangePasswordLayout>
         <S.ContentBox>
           <S.DGSWLOGO />
@@ -49,13 +45,19 @@ const ChangePassword = () => {
                   type="text"
                   placeholder="이메일을 입력하세요"
                   width={294}
-                  // customStyle={{ height: "56px", paddingLeft: "28px" }}
                   isError={!!errors.email}
                   {...field}
                 />
               )}
             />
-            <Button type="button" radius={14} size="sm">
+            <Button
+              type="button"
+              radius={14}
+              size="sm"
+              onClick={() =>
+                handleEmailAuth(getValues, setIsEmailAuth, repository)
+              }
+            >
               인증
             </Button>
           </S.EmailRow>
@@ -89,13 +91,7 @@ const ChangePassword = () => {
                 type="password"
                 placeholder="비밀번호를 입력하세요"
                 width={390}
-                customStyle={
-                  {
-                    // height: "56px",
-                    // "margin-top": "18px",
-                    // paddingLeft: "28px",
-                  }
-                }
+                customStyle={{}}
                 isError={!!errors.password}
                 {...field}
               />
@@ -122,13 +118,7 @@ const ChangePassword = () => {
                 type="password"
                 placeholder="비밀번호를 다시 입력하세요"
                 width={390}
-                customStyle={
-                  {
-                    // height: "56px",
-                    // "margin-top": "18px",
-                    // paddingLeft: "28px",
-                  }
-                }
+                customStyle={{}}
                 isError={!!errors.passwordRepeat}
                 {...field}
               />

src/hooks/ChangePassword/useChangePasswordQuery.ts

@@ -0,0 +1,48 @@
+// src/api/useChangePasswordQuery.ts
+import { ChangePasswordRepository } from "@/apis/ChangePassword/ChangePasswordRepositoryImpl"
+import type { ChangePasswordFormData } from "@/components/ChangePassword/type"
+import { UseFormGetValues } from "react-hook-form"
+
+export const useChangePasswordQuery = () => {
+  const onsubmit = async (
+    data: ChangePasswordFormData,
+    isEmailAuth: boolean,
+    repository: ChangePasswordRepository,
+  ): Promise<void> => {
+    if (!isEmailAuth) {
+      alert("이메일 인증을 완료해주세요.")
+    }
+    try {
+      await repository.changePassword(data.email, data.password)
+
+      alert("비밀번호가 성공적으로 변경되었습니다.")
+    } catch (error) {
+      console.error("비밀번호 변경 중 에러 발생:", error)
+      alert("비밀번호 변경에 실패했습니다. 다시 시도해주세요.")
+    }
+  }
+
+  const handleEmailAuth = async (
+    getValues: UseFormGetValues<ChangePasswordFormData>,
+    setIsEmailAuth: (value: boolean) => void,
+    repository: ChangePasswordRepository,
+  ): Promise<void> => {
+    const email = getValues("email")
+    if (!email) {
+      alert("이메일을 입력해주세요.")
+    }
+    try {
+      await repository.sendEmailAuth(email)
+      setIsEmailAuth(true)
+      alert("이메일 인증이 완료되었습니다.")
+    } catch (error) {
+      console.error("이메일 인증 중 에러 발생:", error)
+      alert("이메일 인증에 실패했습니다. 다시 시도해주세요.")
+    }
+  }
+  return {
+    onsubmit,
+    handleEmailAuth,
+  }
+}
+export default useChangePasswordQuery