feat: MyPage-list mok-data 출력

KDT1-FE · Jul 26, 2023 · cf159ef · cf159ef
1 parent 5586fe3
commit cf159ef
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/Api/data/my.json b/src/Api/data/my.json
@@ -3,11 +3,11 @@
     "name": "고길동",
     "annualBalance": 20,
     "annual":[
-      {"id":1,"reason":"경조사 휴가","startDate":"2023-01-09","endDate":"2023-01-15","status":"완료"},
-      {"id":2,"reason":"기타 휴가","startDate":"2023-03-10","endDate":"2023-03-20","status":"완료"},
-      {"id":3,"reason":"병가 휴가","startDate":"2023-03-24","endDate":"2023-03-28","status":"완료"},
-      {"id":4,"reason":"병가 휴가","startDate":"2023-02-23","endDate":"2022-02-27","status":"대기"},
-      {"id":5,"reason":"연차유급 휴가","startDate":"2023-08-05","endDate":"2022-08-15","status":"대기"}
+      {"id":1,"reason":"경조사","startDate":"2023-01-09","endDate":"2023-01-15","status":"완료"},
+      {"id":2,"reason":"기 타","startDate":"2023-03-10","endDate":"2023-03-20","status":"완료"},
+      {"id":3,"reason":"병 가","startDate":"2023-03-24","endDate":"2023-03-28","status":"완료"},
+      {"id":4,"reason":"병 가","startDate":"2023-02-23","endDate":"2022-02-27","status":"대기"},
+      {"id":5,"reason":"유 급","startDate":"2023-08-05","endDate":"2022-08-15","status":"대기"}
     ],
     "duty":[
       {"id":1,"startDate":"2023-03-10","endDate":"2023-03-10","status":"대기"},

diff --git a/src/pages/Main/main.tsx b/src/pages/Main/main.tsx
@@ -1,7 +1,6 @@
 import Modal from "../../Components/Modal/Modal.tsx";
 import { useState } from "react";
 import MyDateRangePicker from "../../Components/Calendar-input/Calendar.tsx";
-import Mypage from "../Mypage/mypage.tsx";
 
 export default function Main() {
   const [visibility, setVisibility] = useState(false);
@@ -11,7 +10,6 @@ export default function Main() {
     <>
       <h1>Main</h1>
       <button onClick={() => setVisibility(true)}>Open Modal</button>
-      <Mypage />
 
       {/*모달 사용시 모달로 묶어 주시면 됩니다. state로 toggle 됩니다.*/}
       <Modal visibility={visibility} toggle={setVisibility}>

diff --git a/src/pages/Mypage/mypage.tsx b/src/pages/Mypage/mypage.tsx
@@ -1,6 +1,4 @@
 import useDataQuery from "../../Hooks/useData-Query.tsx";
-
-
 /*
   - 개인별
     1. 연차 목록을 리스트 한다.
@@ -10,11 +8,8 @@ import useDataQuery from "../../Hooks/useData-Query.tsx";
   */
 
 export default function Mypage() {
-
-
   const { getPageData } = useDataQuery();
   const { isLoading, error, data: myData } = getPageData;
-  console.log(myData);
 
   if (isLoading) {
     return "Loading...";
@@ -32,15 +27,16 @@ export default function Mypage() {
           <ul>
             {user.annual.map((annualItem: AnnualType) => (
               <li key={annualItem.id}>
-                {annualItem.reason}, Start Date: {annualItem.startDate}, End Date: {annualItem.endDate}, Status: {annualItem.status}
+                {annualItem.reason}, 연차 시작일: {annualItem.startDate}, 연차 마지막일: {annualItem.endDate},
+                승인여부: {annualItem.status}
               </li>
             ))}
           </ul>
           <h3>당직 리스트</h3>
           <ul>
-            {user.duty.map((dutyItem:DutyType) => (
+            {user.duty.map((dutyItem: DutyType) => (
               <li key={dutyItem.id}>
-                Start Date: {dutyItem.startDate}, End Date: {dutyItem.endDate}, Status: {dutyItem.status}
+                당직일: {dutyItem.startDate}, 승인여부: {dutyItem.status}
               </li>
             ))}
           </ul>
@@ -49,3 +45,10 @@ export default function Mypage() {
     </>
   );
 }
+export function DateCount({ startDate, endDate }:{startDate:string,endDate:string} )  {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diffInTime = end.getTime() - start.getTime();
+  const diffInDays = diffInTime / (1000 * 3600 * 24);
+  return {diffInDays}
+}