feat: 연결 추가 시 렌더링 문제 해결

src/pages/MyPage/MemberManagement.jsx

@@ -4,8 +4,9 @@ import tw from "twin.macro";
 import { styled } from "styled-components";
 import * as S from "../../styles/GlobalStyles";
 
-import { useSelector } from "react-redux";
-import { fetchContacts } from "../../services/user";
+import { useSelector, useDispatch } from "react-redux";
+import { fetchContacts, fetchUserInfo } from "../../services/user";
+import { setFamilyInfo } from "../../store/reducers/Auth/user";
 
 import Header from "~/components/common/Header";
 import Member from "~/components/common/Member";
@@ -26,9 +27,12 @@ const MemberManagement = () => {
     parentsAlias: "",
   });
   const [members, setMembers] = useState([]);
+  const [sn, setSn] = useState();
+  const [profile, setProfile] = useState(0);
   const [searchTerm, setSearchTerm] = useState("");
 
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const getContacts = async () => {
@@ -53,7 +57,6 @@ const MemberManagement = () => {
         if (!requestData.phoneNum) {
           alert("사용자를 선택해주세요!");
         } else {
-          console.log(requestData);
           setStep(step + 1);
         }
         break;
@@ -85,17 +88,21 @@ const MemberManagement = () => {
 
   const filteredMembers = members.filter((member) => member.phoneNum.includes(searchTerm));
 
-  const handleMemberChange = (phoneNum) => {
-    setRequestData({
-      ...requestData,
-      phoneNum: phoneNum,
-    });
+  const handleMemberChange = (phoneNum, sn, profileId) => {
+    setSn(sn),
+      setProfile(profileId),
+      setRequestData({
+        ...requestData,
+        phoneNum: phoneNum,
+      });
   };
 
   const handleSubmit = async () => {
     try {
       await addMember(requestData);
 
+      dispatch(setFamilyInfo({ name: requestData.parentsAlias, sn: sn, profileId: profile }));
+
       setStep(step + 1);
     } catch (error) {
       alert(error);
@@ -121,7 +128,7 @@ const MemberManagement = () => {
                 const selectedProfile = availableProfiles.find((profile) => profile.id === member.profileId);
                 const profileSrc = selectedProfile ? selectedProfile.src : CharacterImage1;
 
-                return <Member key={index} name={member.name} role="부모" profileSrc={profileSrc} onClick={() => handleMemberChange(member.phoneNum)} />;
+                return <Member key={index} name={member.name} role="부모" profileSrc={profileSrc} onClick={() => handleMemberChange(member.phoneNum, member.sn, member.profileId)} />;
               })}
             </MemberContainer>
           </S.StepWrapper>

src/pages/MyPage/MyPage.jsx

@@ -38,8 +38,7 @@ const MyPage = () => {
         if (familyInfo) {
           const familyProfiles = await Promise.all(
             familyInfo.map(async (member, index) => {
-              const memberInfo = await fetchUserInfo(member.sn);
-              const selectedProfile = availableProfiles.find((profile) => profile.id === memberInfo.profileId);
+              const selectedProfile = availableProfiles.find((profile) => profile.id === member.profileId);
               const profileImageSrc = selectedProfile ? selectedProfile.src : Profile1;
               return {
                 id: index,

src/store/reducers/Auth/user.jsx

@@ -23,9 +23,12 @@ const userSlice = createSlice({
       state.accessToken = null;
       state.refreshToken = null;
     },
+    setFamilyInfo(state, action) {
+      state.userInfo.familyInfo = [...state.userInfo.familyInfo, action.payload];
+    },
   },
 });
 
-export const { loginSuccess, logout } = userSlice.actions;
+export const { loginSuccess, logout, setFamilyInfo } = userSlice.actions;
 
 export default userSlice.reducer;