Publishing/135 마이페이지 진단 기록 없을때 구분 && 진단결과의 "." 제거

src/components/diagnosis/CompareBarChart.js

@@ -11,7 +11,7 @@ const CompareBarChart = ({ pre, now, className, ...props }) => {
   let isMobileScreen = window.innerWidth < 768;
 
   const data = {
-    labels: ["이전 진단", "현재 진단."],
+    labels: ["이전 진단", "현재 진단"],
     datasets: [
       {
         data: [pre, now, 32],

src/hooks/Diagnosis/queries/useFetchRecentDiagnosis.js

@@ -22,6 +22,7 @@ const useFetchRecentDiagnosis = () => {
     isFetching,
     isSuccess,
     isCanRender: isSuccess && !isFetching,
+    isRecordExist: isSuccess && !isFetching && record?.length !== 0,
   };
 };
 

src/pages/dementiaDiagnosis/DiagnosisResult.js

@@ -14,17 +14,19 @@ const DiagnosisResult = () => {
   const { state } = useLocation();
   const { text, textColor } = getDiagnosisState(state.totalScore);
   const [recentResult, setRecentResult] = useState(0);
-  const { userId } = useRequireAuth;
+  const { userId, isAutoLoginSuccess } = useRequireAuth();
 
   useEffect(() => {
+    if (!isAutoLoginSuccess) return;
     const fetchResult = async () => {
       const res = await DiagnosisController.getRecentDiagnosis({
         userId,
       });
+      console.log(res.data.result[1].totalScore);
       setRecentResult(res.data.result[1].totalScore ?? 0);
     };
     fetchResult();
-  }, []);
+  }, [isAutoLoginSuccess]);
 
   return (
     <div className={"text-5xl px-32 pb-10 mobile:px-4 mobile:text-2xl"}>
@@ -46,7 +48,13 @@ const DiagnosisResult = () => {
         <span>전문가와의 상담을 권장합니다.</span>
       </div>
       <div className={"my-20 font-bold"}>진단 결과 비교</div>
-      <CompareBarChart pre={recentResult} now={state.totalScore} />
+      <CompareBarChart
+        key={
+          "이친구들 변경되면 리렌더링 됨" + (recentResult + state.totalScore)
+        }
+        pre={recentResult}
+        now={state.totalScore}
+      />
       <GoHomeButton />
     </div>
   );

src/pages/mypage/MyPage.jsx

@@ -10,12 +10,13 @@ import { useQueryClient } from "@tanstack/react-query";
 import RecentDiagnosisGraph from "../../components/mypage/RecentDiagnosisGraph";
 import useFetchRecentDiagnosis from "../../hooks/Diagnosis/queries/useFetchRecentDiagnosis";
 import { RECENT_DIARIES_PAGE_PATH } from "./RecentDiaries";
+import SurveyIcon from "../../assets/home/button/btn_survey.png";
+import useGoDiagnosisGuide from "../../hooks/Diagnosis/useGoDiagnosisGuide";
 
 export const MY_PAGE_PATH = "/mypage";
 
 const MyPage = () => {
   const { user } = useFetchUser();
-  const { record, isCanRender } = useFetchRecentDiagnosis();
   const navigate = useNavigate();
 
   const [isOpen, setIsOpen] = useState({
@@ -36,14 +37,10 @@ const MyPage = () => {
 
   return (
     <div className={"relative pb-20 flex flex-col gap-4 px-4"}>
-      <h1 className={"text-5xl font-bold"}>{user?.username}</h1>
+      <h1 className={"text-5xl font-bold mb-10"}>{user?.username}</h1>
       <LogoutButton />
-      <h2 className={"text-3xl mt-10 font-bold"}>최근 진단 결과</h2>
-      <div className={"border-2 rounded-xl"}>
-        {isCanRender && <RecentDiagnosisGraph number={record[0].totalScore} />}
-      </div>
 
-      <p className={"border-b-2 border-black my-6"} />
+      <RecentDiagnosisSection />
 
       <h1 onClick={goRecentDiaryPage} className={"text-3xl cursor-pointer"}>
         최근 일기
@@ -57,6 +54,44 @@ const MyPage = () => {
   );
 };
 
+const RecentDiagnosisSection = ({ ...props }) => {
+  const { record, isCanRender, isRecordExist } = useFetchRecentDiagnosis();
+
+  const { goDiagnosisGuide } = useGoDiagnosisGuide();
+
+  if (isCanRender && isRecordExist) {
+    return (
+      <>
+        <h2 className={"text-3xl font-bold"}>최근 진단 결과</h2>
+        <div className={"border-2 rounded-xl"}>
+          <RecentDiagnosisGraph number={record[0].totalScore} />
+        </div>
+        <p className={"border-b-2 border-black my-6"} />
+      </>
+    );
+  }
+  if (isCanRender && !isRecordExist) {
+    return (
+      <div
+        className={
+          "p-4 rounded-lg font-bold border-2 mb-4 text-xl h-20 box-content bg-secondary-600 cursor-pointer"
+        }
+        onClick={goDiagnosisGuide}
+      >
+        <img
+          className={"h-full aspect-square float-right "}
+          src={SurveyIcon}
+          alt="사진"
+        />
+        <div className={"flex-col flex h-full"}>
+          <div className={""}>치매 진단 기록이 없습니다!</div>
+          <div className={"mt-auto"}>진단하러 가볼까요?</div>
+        </div>
+      </div>
+    );
+  }
+};
+
 const LogoutButton = () => {
   const navigate = useNavigate();
   const { setUserLogout } = userStore((state) => state);