diff --git a/src/api/analysisApi.ts b/src/api/analysisApi.ts index c5d776e..29b6014 100644 --- a/src/api/analysisApi.ts +++ b/src/api/analysisApi.ts @@ -66,6 +66,21 @@ export const useDeleteAnalyses = () => { }); }; +export const getNumOfAnalysis = async () => { + const email = sessionStorage.getItem("verifiedEmail"); + const response = await api.get("/api/auth/email/credit", { + params: { email }, + }); + return response.data; +}; + +export const useNumOfAnalysis = () => { + return useQuery({ + queryKey: ["numOfAnalysis"], + queryFn: getNumOfAnalysis, + }); +}; + // 스트리밍 fetch + EventSorce 방식 사용을 위해 fetch API로 직접 구현 const BASE_URL = process.env.REACT_APP_BASE_URL; diff --git a/src/pages/input-page/auth/components/EmailVerification.jsx b/src/pages/input-page/auth/components/EmailVerification.jsx index 64e39df..2669aeb 100644 --- a/src/pages/input-page/auth/components/EmailVerification.jsx +++ b/src/pages/input-page/auth/components/EmailVerification.jsx @@ -5,7 +5,6 @@ import successIcon from "assets/icons/인증_성공.svg"; import { useSendVerifyEmail, useVerifyEmailCode } from "api/emailApi"; import EmailSentModal from "./EmailSentModal"; import { SESSION_STORAGE_KEY } from "api/sessionApi"; -import { useUserStore } from "stores/userStore"; const VERIFIED_EMAIL_KEY = "verifiedEmail"; @@ -14,7 +13,6 @@ function EmailVerification({ onEmailSent, onEmailChanged, onCodeVerified }) { useSendVerifyEmail(); const { mutate: verifyEmailCode, isPending: isVerifying } = useVerifyEmailCode(); - const { setCount } = useUserStore(); const savedEmail = sessionStorage.getItem(VERIFIED_EMAIL_KEY) || ""; const isAlreadyVerified = @@ -133,8 +131,7 @@ function EmailVerification({ onEmailSent, onEmailChanged, onCodeVerified }) { setIsVerified(true); setCodeError(false); sessionStorage.setItem(VERIFIED_EMAIL_KEY, email); - if (data?.data?.count != null) setCount(data.data.count); - onCodeVerified?.(email); +onCodeVerified?.(email); }, onError: () => { setCodeError(true); diff --git a/src/pages/input-page/components/AnalysisButton.jsx b/src/pages/input-page/components/AnalysisButton.jsx index 2a4296e..1727f2a 100644 --- a/src/pages/input-page/components/AnalysisButton.jsx +++ b/src/pages/input-page/components/AnalysisButton.jsx @@ -1,32 +1,28 @@ +import cn from "utils/cn"; import Button from "./Button"; -import { useUserStore } from "stores/userStore"; -/** - * 분석하기 전용 버튼 컴포넌트 - * @param {number} current - 분석 시도 횟수 - * @param {number} total - 최대 분석 횟수 (기본값 3) - * @param {string} status - 'default' | 'disabled' - */ -const AnalysisButton = ({ - current = 0, - total = 3, - status = "default", - ...props -}) => { - const count = useUserStore((state) => state.count); +import { useNumOfAnalysis } from "api/analysisApi"; - const countColor = - status === "disabled" ? "text-[#EEEEEE]" : "text-[#C1D9FF]"; +const AnalysisButton = ({ total = 3, status = "default", ...props }) => { + const { data } = useNumOfAnalysis(); + const count = data?.data.count ?? 0; return ( diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts deleted file mode 100644 index 3a15c7e..0000000 --- a/src/stores/userStore.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { create } from "zustand"; -import { persist, createJSONStorage } from "zustand/middleware"; - -interface UserStore { - count: number | null; - setCount: (count: number) => void; - reset: () => void; -} - -export const useUserStore = create()( - persist( - (set) => ({ - count: null, - setCount: (count) => set({ count }), - reset: () => set({ count: null }), - }), - { - name: "user-store", - storage: createJSONStorage(() => sessionStorage), - } - ) -);