Merge pull request #85 from Kusitms-29th-ASAP/feat/#80

[Feat] 마이페이지 API

src/apis/axios.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
-const token = localStorage.getItem("access_token");
-// const token = `eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhc2FwIiwidG9rZW5fdHlwZSI6IkFDQ0VTU19UT0tFTiIsImNsYWltc190eXBlIjoiVVNFUiIsInVzZXJfY2xhaW1zIjp7InVzZXJfaWQiOjI4fSwiaWF0IjoxNzE1OTUyNDUyLCJleHAiOjE3MjU5NTI0NTJ9.P2CcmW2nqXyGNGxbHAJkoSTOnaG_OvV08IFCJvieB4k`;
+// const token = localStorage.getItem("access_token");
+const token = `eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhc2FwIiwidG9rZW5fdHlwZSI6IkFDQ0VTU19UT0tFTiIsImNsYWltc190eXBlIjoiVVNFUiIsInVzZXJfY2xhaW1zIjp7InVzZXJfaWQiOjI4fSwiaWF0IjoxNzE1OTUyNDUyLCJleHAiOjE3MjU5NTI0NTJ9.P2CcmW2nqXyGNGxbHAJkoSTOnaG_OvV08IFCJvieB4k`;
 
 const Axios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,

src/app/mypage/children/page.tsx

@@ -6,59 +6,96 @@ import styled from "styled-components";
 import Subtitle from "@/components/signin/Subtitle";
 import CustomInput from "@/components/common/CustomInput";
 import Calendar from "@/components/common/Calendar";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { theme } from "@/styles/theme";
 import ChangeChildPopup from "@/components/mypage/ChangeChildPopup";
-import { childrenListData } from "@/data/mypageData";
 import AllergyPopup from "@/components/mypage/AllergyPopup";
 import KeywordItem from "@/components/mypage/Keyword";
+import Axios from "@/apis/axios";
+import { useRouter } from "next/navigation";
 
 interface Child {
-  name: string;
-  school: string;
+  childName: string;
+  schoolName: string;
   grade: number;
-  class: number;
-  birth: string;
-  allergy: string[];
+  classroomName: number;
+  childId?: number;
+  isPrimary?: boolean;
+  birthday?: string;
+  allergies?: string[];
 }
 
 const MyPage = () => {
   const [child, setChild] = useState<Child>({
-    name: "김동우",
-    school: "양원숲초등학교",
-    grade: 3,
-    class: 7,
-    birth: "2014년 4월 5일",
-    allergy: ["난류"],
+    childName: "",
+    schoolName: "",
+    grade: 0,
+    classroomName: 0,
+    childId: 0,
+    isPrimary: true,
+    birthday: "",
+    allergies: [],
   });
-
+  const [childList, setChildList] = useState<Child[]>([]);
+  const [use, setUse] = useState<boolean>(false);
   const [modify, setModify] = useState(false);
   const [changePopup, setChangePopup] = useState(false);
   const [allergyPopup, setAllergyPopup] = useState(false);
+  const [primaryId, setPrimaryId] = useState<number>();
+  const gradeImageSrc = `/assets/common/grade${child?.grade}.svg`;
+
+  /* 선택 자녀 불러오기 */
+
+  useEffect(() => {
+    if (childList.length > 0) {
+      const primaryChild = childList.find((child) => child.isPrimary);
+      setPrimaryId(primaryChild?.childId);
+      Axios.get(`/api/v1/children/${primaryChild?.childId}`).then(
+        (response) => {
+          const data = response.data;
+          setChild(data);
+        }
+      );
+    }
+  }, [childList, use]);
 
-  const gradeImageSrc = `/assets/images/grade${child.grade}.svg`;
+  /* 자녀 전체 불러오기 */
+  useEffect(() => {
+    Axios.get(`/api/v1/children`)
+      .then((response) => {
+        const data = response.data.childList;
+        setChildList(data);
+      })
+      .catch((error) => {});
+  }, [use]);
 
   /* onChange 함수 */
   const handleNameChange = (value: string) => {
-    setChild({ ...child, name: value });
+    setChild({ ...child, childName: value });
     setModify(true);
-    // console.log(child.name);
   };
 
-  const handleBirthChange = (value: string) => {
-    setChild({ ...child, birth: value });
+  const handleBirthdayChange = (value: string) => {
+    setChild({ ...child, birthday: value });
     setModify(true);
   };
 
-  const handleAllergyChange = (value: string[]) => {
-    setChild({ ...child, allergy: value });
+  const handleAllergiesChange = (value: string[]) => {
+    setChild({ ...child, allergies: value });
     setModify(true);
   };
 
+  useEffect(() => {}, [child]);
+
   /* 수정 완료 전환 함수 */
   const handleModify = () => {
     setModify(false);
     /* 자녀 프로필 변경사항 저장하기 */
+    Axios.put(`/api/v1/children/${primaryId}`, {
+      childName: child.childName,
+      birthday: child.birthday,
+      allergies: child.allergies,
+    });
   };
 
   /* 팝업 상태 전환 함수 */
@@ -71,8 +108,8 @@ const MyPage = () => {
   };
 
   /* 알레르기 정보 업데이트 함수 (AllergyPopup 전달) */
-  const handleAllergyUpdate = (selectedAllergy: string[]) => {
-    setChild({ ...child, allergy: selectedAllergy });
+  const handleAllergyUpdate = (selectedAllergies: string[]) => {
+    setChild({ ...child, allergies: selectedAllergies });
     setAllergyPopup(false);
   };
 
@@ -105,8 +142,8 @@ const MyPage = () => {
           alt="character"
         />
         <Info>
-          <Br>{child.name}</Br>
-          {child.school} | {child.grade}학년 {child.class}반
+          <Br>{child?.childName}</Br>
+          {child?.schoolName} | {child?.grade}학년 {child?.classroomName}반
         </Info>
       </Profile>
       <Change onClick={() => setChangePopup(true)}>
@@ -122,29 +159,32 @@ const MyPage = () => {
         <div>
           <Subtitle>이름</Subtitle>
           <CustomInput
-            value={child.name}
+            value={child?.childName}
             onChange={handleNameChange}
             placeholder="성함"
           />
         </div>
         <div>
           <Subtitle>생년월일</Subtitle>
-          <Calendar value={child.birth} onChange={handleBirthChange} />
+          <Calendar
+            value={child.birthday + ""}
+            onChange={handleBirthdayChange}
+          />
         </div>
         <div>
           <Subtitle>알레르기 유발정보</Subtitle>
           <InputBox>
             <CustomInput
               inputType="select"
-              value={child.allergy}
-              onChange={handleAllergyChange}
+              value={child.allergies}
+              onChange={handleAllergiesChange}
               placeholder="없음"
               onClick={() => setAllergyPopup(true)}
               hidden={true}
             />
             <KeywordItems>
-              {child.allergy.map((allergy, index) => (
-                <KeywordItem key={index} keyword={allergy} />
+              {child.allergies?.map((allergies, index) => (
+                <KeywordItem key={index} keyword={allergies} />
               ))}
             </KeywordItems>
           </InputBox>
@@ -153,7 +193,7 @@ const MyPage = () => {
               onClose={handleAllergyPopup}
               onUpdate={handleAllergyUpdate}
               initialCheckedItems={{
-                ...child.allergy.reduce(
+                ...child.allergies?.reduce(
                   (acc, curr) => ({ ...acc, [curr]: true }),
                   {}
                 ),
@@ -166,9 +206,11 @@ const MyPage = () => {
       {changePopup && (
         <ChangeChildPopup
           onClose={handleChangePopup}
-          data={[...childrenListData]}
+          data={childList}
           currentChild={child}
           onChildSelect={handleChildUpdate}
+          use={use}
+          setUse={setUse}
         />
       )}
     </>

src/app/mypage/page.tsx

@@ -1,22 +1,46 @@
 "use client";
 
 import deleteUser from "@/apis/auth/deleteUser";
+import Axios from "@/apis/axios";
 import getUserInfo from "@/apis/user/getUserInfo";
 import Tabbar from "@/components/common/Tabbar";
 import Topbar from "@/components/common/Topbar";
 import { RootState } from "@/redux/store";
 import { theme } from "@/styles/theme";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
+interface Child {
+  childName: string;
+  schoolName: string;
+  grade: number;
+  classroomName: number;
+  childId?: number;
+  isPrimary?: boolean;
+  birthday?: string;
+  allergies?: string[];
+}
+
 const Mypage = () => {
   const router = useRouter();
   const tokens = useSelector((state: RootState) => state.auth);
   const { refreshToken } = tokens;
 
+  const [child, setChild] = useState<Child>({
+    childName: "",
+    schoolName: "",
+    grade: 0,
+    classroomName: 0,
+    childId: 0,
+    isPrimary: true,
+    birthday: "",
+    allergies: [],
+  });
+  const [childList, setChildList] = useState<Child[]>([]);
+  // const [primaryChild, setPrimaryChild] = useState<Child>();
   const [userName, setUserName] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
 
@@ -38,6 +62,29 @@ const Mypage = () => {
   };
   const handleDeleteUser = () => {};
 
+  /* 선택 자녀 불러오기 */
+  useEffect(() => {
+    if (childList.length > 0) {
+      const primaryChild = childList.find((child) => child.isPrimary);
+      Axios.get(`/api/v1/children/${primaryChild?.childId}`)
+        .then((response) => {
+          const data = response.data;
+          setChild(data);
+        })
+        .catch((error) => {});
+    }
+  }, [childList]);
+
+  /* 자녀 전체 불러오기 */
+  useEffect(() => {
+    Axios.get(`/api/v1/children`)
+      .then((response) => {
+        const data = response.data.childList;
+        setChildList(data);
+      })
+      .catch((error) => {});
+  }, []);
+
   return (
     <Container>
       <Padding>
@@ -77,14 +124,14 @@ const Mypage = () => {
                 height={20}
                 alt="select"
                 onClick={() => {
-                  router.push("/mypage/children");
+                  router.push(`/mypage/children`);
                 }}
                 style={{ cursor: "pointer" }}
               />
             </Line>
             <ChildInfo>
-              <span style={{ fontWeight: "700" }}>김동우&nbsp;</span>
-              양원숲초등학교 3학년 7반
+              <span style={{ fontWeight: "700" }}>{child.childName}&nbsp;</span>
+              {child.schoolName} {child.grade}학년 {child.classroomName}반
             </ChildInfo>
           </div>
           <Line>

src/app/mypage/profile/page.tsx

@@ -67,6 +67,7 @@ const Profile = () => {
     router.push("/mypage");
   };
 
+  const signImage = localStorage.getItem("signImage");
   return (
     <>
       <Row>
@@ -116,7 +117,13 @@ const Profile = () => {
               전자서명 등록하기
             </PlusButton>
           </Row>
-          <SignBox>아직 등록된 전자서명이 없습니다.</SignBox>
+          <SignBox>
+            {signImage ? (
+              <Image src={signImage} width={400} height={168} alt="Signature" />
+            ) : (
+              <div>아직 등록된 전자서명이 없습니다.</div>
+            )}
+          </SignBox>
         </div>
       </Content>
     </>

src/app/mypage/profile/signature/page.tsx

@@ -28,6 +28,10 @@ const Signature = () => {
   /* dataURL을 File로 반환하는 함수 */
   const convertDataUrlToFile = () => {
     const dataURL = sigPad.current?.toDataURL("image/png");
+    if (dataURL) {
+      localStorage.setItem("signImage", dataURL);
+    }
+
     const decodedURL = dataURL?.replace(/^data:image\/\sw+;base64,/, "");
     if (decodedURL) {
       const buf = Buffer.from(decodedURL, "base64");

src/app/news/eduOffice/[summaryId]/page.tsx

@@ -39,11 +39,8 @@ const SummaryDetail = () => {
       .then((response) => {
         const summaryData: AnnouncementsProps = response.data;
         setSummaryData(summaryData);
-        console.log("교육청 상세목록:", response.data);
       })
-      .catch((error) => {
-        console.log(error);
-      });
+      .catch((error) => {});
   }, []);
 
   const handleSend = () => {

src/app/news/eduOffice/page.tsx

@@ -30,11 +30,8 @@ const EduOffice = () => {
       .then((response) => {
         const summaryData = response.data.educationOfficeAnnouncementInfos;
         setSummaryData(summaryData);
-        console.log("교육청 목록:", response.data);
       })
-      .catch((error) => {
-        console.log(error);
-      });
+      .catch((error) => {});
   }, []);
 
   const handleTabClick = (path: any) => {

src/app/news/school/[summaryId]/page.tsx

@@ -42,11 +42,8 @@ const SummaryDetail = () => {
       .then((response) => {
         const summaryData = response.data;
         setSummaryData(summaryData);
-        console.log("학교 상세목록:", response.data);
       })
-      .catch((error) => {
-        console.log(error);
-      });
+      .catch((error) => {});
   }, []);
 
   const handleSend = () => {

src/app/news/school/page.tsx

@@ -31,11 +31,8 @@ const School = () => {
         const summaryData: AnnouncementsProps[] =
           response.data.schoolAnnouncementInfos;
         setSummaryData(summaryData);
-        console.log("소식 목록:", summaryData);
       })
-      .catch((error) => {
-        console.log(error);
-      });
+      .catch((error) => {});
   }, []);
 
   const handleTabClick = (path: any) => {