import { useSelector } from 'react-redux';

import { useMutation } from '@tanstack/react-query';

import KstadiumAPI from '../../apis/kstadiumAPI';
import { selectUserSlice } from '../../store';

const checkPasswordFn = async (pwd: string) => {
  const { userData } = useSelector(selectUserSlice);
  if (userData?.userId !== undefined) {
    const result = await KstadiumAPI.checkAuth({
      userId: userData.userId,
      password: pwd,
    });
    return result;
  }
  return null;
};

export const useCheckPassword = async (password: string) => {
  const { mutate, isSuccess, isError } = useMutation({
    mutationFn: () => checkPasswordFn(password),
  });

  return { mutate, isSuccess, isError };
};

export default useCheckPassword;

import React, { useState } from 'react';
import useCheckPassword from './useCheckPassword'; // 커스텀 훅을 가져옴

function YourComponent() {
  const [password, setPassword] = useState('');
  const { mutate, isSuccess, isError } = useCheckPassword(password);

  const handleSubmit = () => {
    // 버튼을 눌렀을 때 실행할 코드
    mutate(); // useCheckPassword 내에서 정의한 mutate 함수 호출
  };

  // isSuccess 및 isError 상태에 따라 결과를 처리할 수 있음

  return (
    <div>
      <input
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleSubmit}>Submit</button>
      {isSuccess && <p>Password is correct</p>}
      {isError && <p>Password is incorrect</p>}
    </div>
  );
}

export default YourComponent;