불필요한 상태 삭제하기 + enabled

export const useGetProjectVerify = ({ projectId, password }: ReqGetProjectVerify) => {
	return useQuery({
		queryKey: [VERIFY, projectId, password],
		queryFn: () => getProjectVerify({ projectId, password }),
		enabled: !!password,
	});
};

, 

import { useEffect, ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
import { IoLockClosedOutline } from 'react-icons/io5';
import { useGetProjectVerify } from '@hooks/query/useGetProjectVerify';
import { modalContentType, useModalStore } from '@stores/modalStore';

interface ChatbotPasswordProps {
	setIsOpenVerifyPage: Dispatch<SetStateAction<boolean>>;
}

export default function ChatbotPassword({ setIsOpenVerifyPage }: ChatbotPasswordProps) {
	const [password, setPassword] = useState('');
	const [verifyPassword, setVerifyPassword] = useState('');
	const { setModalState } = useModalStore();

	const { data, isLoading, isError } = useGetProjectVerify({
		projectId: import.meta.env.VITE_ASSISTANT_LICENSE_KEY,
		password: verifyPassword,
	});

	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
		setPassword(event.target.value);
	};

	const handleSubmit = () => {
		setVerifyPassword(password);
	};

	useEffect(() => {
		if (verifyPassword && !isLoading) {
			if (data?.data.isCorrectPassword) {
				setIsOpenVerifyPage(false);
			} else if (data && !data?.data.isCorrectPassword) {
				setModalState(modalContentType.PASSWORD_WARNING_MESSAGE, true);
			} else if (isError) {
				setModalState(modalContentType.PASSWORD_WARNING_MESSAGE, true);
			}
		}
	}, [verifyPassword, data, isLoading, isError]);

	const isSubmitDisabled = password.length === 0;

	return (
		<section className="password">
			<h2 className="password__title">Enter password</h2>
			<IoLockClosedOutline className="password__icon" />
			<div className="password__input-container">
				<input type="password" value={password} onChange={handleChange} className="password__input" />
			</div>
			<button className="password__submit" onClick={handleSubmit} disabled={isSubmitDisabled}>
				Submit
			</button>
		</section>
	);
}

 

hook에 key가 password가 있기에 하단에서 verifyPassword가 없으면 password가 변경될 때 마다 hook이 실행되어 불필요하게 네트워크를 요청하고 있었다. 따라서 onChange는 password를 바라보게 하고 submit 버튼을 누를 때는 password를 verifyPassword에 저장되게했다.

하지만 누가봐도... 불필요하게 state가 두 개 있는 느낌,,,

 

 

export const useGetProjectVerify = ({ projectId, password }: ReqGetProjectVerify) => {
	return useQuery({
		queryKey: [VERIFY, projectId, password],
		queryFn: () => getProjectVerify({ projectId, password }),
		enabled: false, // 자동 실행을 비활성화
		retry: false, // 실패 시 재시도 방지
	});
};

기존 hook을 이렇게 방지하여 enabled를 아예 false로 변경해 자동 실행을 비활성화 해주었고

실패 시 바로 에러 모달창을 띄워주기 위해 retry도 false로 변경해주었다. 

 

import { useEffect, ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
import { IoLockClosedOutline } from 'react-icons/io5';
import { useGetProjectVerify } from '@hooks/query/useGetProjectVerify';
import { modalContentType, useModalStore } from '@stores/modalStore';

interface ChatbotPasswordProps {
	setIsOpenVerifyPage: Dispatch<SetStateAction<boolean>>;
}

export default function ChatbotPassword({ setIsOpenVerifyPage }: ChatbotPasswordProps) {
	const [password, setPassword] = useState('');
	const { setModalState } = useModalStore();

	const { data, isLoading, error, isError, refetch } = useGetProjectVerify({
		projectId: import.meta.env.VITE_ASSISTANT_LICENSE_KEY,
		password: password,
	});

	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
		setPassword(event.target.value);
	};

	const handleSubmit = () => {
		refetch(); // 비밀번호 검증 쿼리를 실행
	};

	useEffect(() => {
		if (!isLoading && data) {
			if (data.data.isCorrectPassword) {
				setIsOpenVerifyPage(false);
			} else if (data && !data.data.isCorrectPassword) {
				setModalState(modalContentType.PASSWORD_WARNING_MESSAGE, true);
			}
		}
	}, [data, isLoading, setIsOpenVerifyPage, setModalState]);

	useEffect(() => {
		if (isError || error) {
			setModalState(modalContentType.PASSWORD_WARNING_MESSAGE, true);
		}
	}, [isError, error]);

	const isSubmitDisabled = password.length === 0;

	return (
		<section className="password">
			<h2 className="password__title">Enter password</h2>
			<IoLockClosedOutline className="password__icon" />
			<div className="password__input-container">
				<input type="password" value={password} onChange={handleChange} className="password__input" />
			</div>
			<button className="password__submit" onClick={handleSubmit} disabled={isSubmitDisabled}>
				Submit
			</button>
		</section>
	);
}

후에 이렇게 변경!