Merge pull request #90 from Team-Senifit/release-1.0.1

수정하기] 버그 2개 수정

Author: HYUN-SIUU

src/app/(with-container)/record/panel/SurveyElderCard.tsx

@@ -4,7 +4,7 @@ import { Box, Divider, Typography } from "@mui/material";
 import SelectorCard from "./SelectorCard";
 import SelectorRadio from "./SelectorRadio";
 import SelectorTarget from "./SelectorTarget";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { calculateAge } from "@/utils/calculateAge";
 import dayjs from "dayjs";
 import { genderLabel, gradeLabel } from "@/types/IMember";
@@ -91,6 +91,16 @@ export default function ElderSurveyCard({
     hasDiscomfort: elder.hadTrouble ? "yes" : "none",
     parts: elder.troubleParts ?? [],
   });
+  const [isMounted, setIsMounted] = useState(false);
+
+  // 부모가 바뀔 때만 실행되도록 함.
+  const lastPresetAtt = useRef<Scale | undefined>(presetAtt);
+  const lastPresetAbl = useRef<Scale | undefined>(presetAbl);
+  const lastPresetTrouble = useRef<PresetTrouble | undefined>(presetTrouble);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   const { isPhone, isTablet } = useMedia();
   const infoVariant = isPhone
@@ -128,21 +138,28 @@ export default function ElderSurveyCard({
   );
 
   useEffect(() => {
-    if (presetAtt) {
+    if (presetAtt && presetAtt !== lastPresetAtt.current) {
+      lastPresetAtt.current = presetAtt;
       setAtt(presetAtt);
       bubble({ attitudeScore: scoreOf[presetAtt] });
     }
   }, [presetAtt, bubble]);
 
   useEffect(() => {
-    if (presetAbl) {
+    if (presetAbl && presetAbl !== lastPresetAbl.current) {
+      lastPresetAbl.current = presetAbl;
       setAbl(presetAbl);
       bubble({ abilityScore: scoreOf[presetAbl] });
     }
   }, [presetAbl, bubble]);
 
   useEffect(() => {
-    if (presetTrouble) {
+    if (
+      presetTrouble &&
+      (presetTrouble.hasDiscomfort !== lastPresetTrouble.current?.hasDiscomfort ||
+        presetTrouble.parts !== lastPresetTrouble.current?.parts)
+    ) {
+      lastPresetTrouble.current = presetTrouble;
       setTrouble(presetTrouble);
       bubble({
         hadTrouble: presetTrouble.hasDiscomfort === "yes",
@@ -174,7 +191,11 @@ export default function ElderSurveyCard({
             </Box>
             <Box sx={{ display: "flex", gap: 2, mt: 1 }}>
               <Typography variant={infoVariant}>
-                {calculateAge(dayjs(elder.birthDate), { format: "YYYY-MM-DD" })}
+                {isMounted
+                  ? calculateAge(dayjs(elder.birthDate), {
+                      format: "YYYY-MM-DD",
+                    })
+                  : ""}
               </Typography>
               <Typography variant={infoVariant}>
                 {genderLabel[elder.gender]}
@@ -189,7 +210,9 @@ export default function ElderSurveyCard({
             <ProfileIcon sx={{ fontSize: 24 }} />
             <Typography variant={infoVariant}>{elder.name}</Typography>
             <Typography variant={infoVariant}>
-              {calculateAge(dayjs(elder.birthDate), { format: "YYYY-MM-DD" })}
+              {isMounted
+                ? calculateAge(dayjs(elder.birthDate), { format: "YYYY-MM-DD" })
+                : ""}
             </Typography>
             <Typography variant={infoVariant}>
               {genderLabel[elder.gender]}

src/app/(with-footer)/my-center/members/panel/MemberList.tsx

@@ -13,7 +13,7 @@ import {
 } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import EmptyView from "./EmptyView";
 
 const Member = ({
@@ -28,7 +28,12 @@ const Member = ({
   isDesktop: boolean;
   mutate: UseMutateFunction<void, Error, number, unknown>;
 }) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const ageContent = isMounted ? `${calculateAge(dayjs(birthDate))}세` : "";
   return (
     <>
       <Stack
@@ -65,7 +70,7 @@ const Member = ({
                 width: { phone: "3rem", desktop: "3.5rem" },
               }}
             >
-              {`${calculateAge(dayjs(birthDate))}세`}
+              {ageContent}
             </Typography>
             <Typography
               variant={isDesktop ? "Heading1" : "Headline1"}

src/app/(with-footer)/my-center/panel/MemberInfoCard.tsx

@@ -7,7 +7,7 @@ import { calculateAge } from "@/utils/calculateAge";
 import { Button, Stack, Typography } from "@mui/material";
 import dayjs from "dayjs";
 import Link from "next/link";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import EmptyView from "./EmptyView";
 
 const MemberEditButton = ({ disabled }: { disabled: boolean }) => {
@@ -37,7 +37,11 @@ const MemberEditButton = ({ disabled }: { disabled: boolean }) => {
 };
 
 const Member = ({ name, birthDate, memberRank, gender }: IMember) => {
-  const age = calculateAge(dayjs(birthDate));
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const age = isMounted ? calculateAge(dayjs(birthDate)) : "";
   return (
     <Stack direction={"row"} spacing={[1, 2]} alignItems={"center"}>
       <Typography