From ca76c4e8f5b962b573837cdc1922039bcbc72fda Mon Sep 17 00:00:00 2001
From: Jimin <jimin4124.22@gmail.com>
Date: Mon, 24 Jun 2024 12:30:18 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=B0=EA=B2=B0=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EC=8B=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=AC=B8=EC=A0=9C?=
 =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/MemberManagement.jsx | 25 ++++++++++++++++---------
 src/pages/MyPage/MyPage.jsx           |  3 +--
 src/store/reducers/Auth/user.jsx      |  5 ++++-
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/pages/MyPage/MemberManagement.jsx b/src/pages/MyPage/MemberManagement.jsx
index e395028..be74da7 100644
--- a/src/pages/MyPage/MemberManagement.jsx
+++ b/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>
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
index 2ade784..d5b516a 100644
--- a/src/pages/MyPage/MyPage.jsx
+++ b/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,
diff --git a/src/store/reducers/Auth/user.jsx b/src/store/reducers/Auth/user.jsx
index e746eb4..77258c9 100644
--- a/src/store/reducers/Auth/user.jsx
+++ b/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;