deploy

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;
 

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);

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 (
     <Button
       size="M"
       variant="primary"
-      status={status}
+      status={count >= 3 ? "disabled" : status}
       className="gap-[10px]"
+      disabled={count >= 3 || status === "disabled"}
       {...props}
     >
       <span>분석하기</span>
-      <span className={`${countColor}`}>
+      <span
+        className={cn(
+          count >= 3 || status === "disabled"
+            ? "text-[#EEEEEE]"
+            : "text-[#C1D9FF]",
+        )}
+      >
         {3 - count}/{total}
       </span>
     </Button>