feat: MyPage-list mok-data 출력

src/@types/common.ts

@@ -17,4 +17,42 @@ declare interface UserLoginType {
   refreshToken?: string;
 }
 
+declare interface MyDataType {
+  name:string,
+  annualBalance:number,
+  annual?:[
+    id:number,
+    reason:string,
+    startDate:string,
+    endDate:string,
+    status:string
+  ],
+  duty?:[
+    id:number,
+    startDate:string,
+    endDate:string,
+    status:string
+  ]
+}
+declare interface MyDataUser extends AnnualType{
+  duty: any;
+  annual: any;
+  name:string,
+  annualBalance:number,
+}
+declare interface AnnualType {
+  id:number,
+  reason:string,
+  startDate:string,
+  endDate:string,
+  status:string
+}
+declare interface DutyType {
+  id:number,
+  startDate:string,
+  endDate:string,
+  status:string
+}
+
+
 // declare 사용하여 전역화 시킨다.

src/Api/api.ts

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export const ApiHttp = axios.create({
+  baseURL: "@/Api/data/"
+});
+
+// local storage, session control api 추가 필요
+
+
+export async function getMyPage() {
+  try {
+    const res = await axios.get("src/Api/data/my.json")
+    return res.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+}

src/Api/data/my.json

@@ -0,0 +1,17 @@
+[
+  {
+    "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":"대기"}
+    ],
+    "duty":[
+      {"id":1,"startDate":"2023-03-10","endDate":"2023-03-10","status":"대기"},
+      {"id":2,"startDate":"2023-01-19","endDate":"2023-01-19","status":"대기"}
+    ]
+  }
+]

src/Api/data/user.json

@@ -0,0 +1,12 @@
+[
+{"email":"[email protected]","password":"$2a$04$c9FhdT09lvcCb250DjLdKeX1PIQjv2TkbE.OkvfD73CwOzyoJbS9m","name":"김땡땡","join":"2023-03-27"},
+{"email":"[email protected]","password":"$2a$04$tpse8d1m7ocpBLn1prCJBOsu9So/yTi4A2TpRnt8mj/yyZyDeShG6","name":"박땡땡","join":"2022-09-15"},
+{"email":"[email protected]","password":"$2a$04$wylfBvz8hQ6ZNcTMtW39h.uLBHo.iKRuWNfWAQyaUlp5lSkqdeGGe","name":"이땡땡","join":"2022-03-31"},
+{"email":"[email protected]","password":"$2a$04$f/zPQ48GVImW7RAk8vHNX.67wKNzzjY2bVXDH3ap8GCUpjB/pSI/u","name":"송땡땡","join":"2022-09-27"},
+{"email":"[email protected]","password":"$2a$04$8siG.pXXi8jHIZ7z8VIKs.06Xmtj98XNj1y7z.lOIJFMGef6obQUC","name":"아무개","join":"2020-08-10"},
+{"email":"[email protected]","password":"$2a$04$8/2nCi3EVer5bExUbYP9N.O6PeceSVN4IebosR7Czu7cI4KJrb38O","name":"김김김","join":"2022-05-01"},
+{"email":"[email protected]","password":"$2a$04$ES3t8zrizq5kC.hKWbASJOTVA12fozc9OpAbpOxdXJ5zTHO35BY9C","name":"박박박","join":"2021-01-07"},
+{"email":"[email protected]","password":"$2a$04$DY/70RcPDcs.f4h88aWvDuR5UiQDUjltf8ZeL5Oam.xhGQEZ1/H8e","name":"송송송","join":"2020-10-22"},
+{"email":"[email protected]","password":"$2a$04$kWFZOtRWjLu7F6TVXdFDSOYvBxsIcgSIXbU3WwAGlF5dURrUHvTpy","name":"이이이","join":"2022-06-28"},
+{"email":"[email protected]","password":"$2a$04$lgHZrfIsK0k6nAINt5UA7.x1C0j2/fOt2y0TgsEnLx.UBAWUCj9pS","name":"김박이","join":"2022-09-16"}
+]

src/App.tsx

@@ -1,5 +1,6 @@
 import Main from "./pages/Main/main.tsx";
 import { Route, Routes } from "react-router-dom";
+import Mypage from "./pages/Mypage/mypage.tsx";
 // import ProtectedRoute from "./Components/ProtectedRoute.tsx";
 // import Admin from "./pages/Admin/admin.tsx";
 
@@ -8,6 +9,7 @@ function App() {
   return (
   <Routes>
     <Route path="/" element={<Main />} />
+    <Route path={'/mypage'} element={<Mypage />} />
     {/*<Route path="/admin" */}
     {/*       element={<ProtectedRoute adminRequired={true} element={<Admin />}*/}
   </Routes>

src/Components/Calendar-input/Calendar.tsx

@@ -13,8 +13,8 @@ export default function MyDateRangePicker() {
   ]);
 
   // 선택한 날짜 범위를 받아 옵니다. 확인용 콘솔입니다.
-  console.log(state[0].startDate);
-  console.log(state[0].endDate);
+  // console.log(state[0].startDate);
+  // console.log(state[0].endDate);
 
   const handleSelect = (ranges: { [key: string]: Range }) => {
     setState([ranges['selection']]);

src/Components/router/ProtectedRoute.tsx

@@ -0,0 +1,20 @@
+// import { Navigate } from 'react-router-dom';
+
+type ProtectedRouteProps = {
+  element: React.ReactNode;
+  adminRequired?: boolean;
+};
+
+export default function ProtectedRoute(
+  { element, adminRequired }: ProtectedRouteProps) {
+
+  // const { userInfo } = ;
+
+  // if (!userInfo) {
+  //   return <Navigate to="/login" replace />;
+  // }
+  // if (adminRequired && !userInfo.isAdmin) {
+  //   return <Navigate to="/" replace />;
+  // }
+  // return <>{element}</>;
+}

src/Hooks/useData-Query.tsx

@@ -1,38 +1,11 @@
-import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
-import { getLogin, postUserJoin } from "../Api/api.ts";
+import { useQuery } from "@tanstack/react-query";
+import { getMyPage } from "../Api/api.ts";
 
-// react- query 커스텀 훅
+export default function useDataQuery() {
 
-const queryClient = new QueryClient()
-
-
-export default function useDataQuery(accessToken:string) {
-
-  const getUserData =
-    useQuery(["useData", accessToken], () => {
-      if (accessToken) {
-        return getLogin(accessToken).then((res) => {
-          console.log(res);
-          return res;
-        });
-      } else {
-        return [];
-      }
-    }, { staleTime: 1000 * 60 });
-
-  const joinUser =
-    useMutation((joinData: JoinUserInputType ) => postUserJoin(joinData), {
-      onSuccess: () => {
-        queryClient.invalidateQueries(["useData", accessToken]);
-      }
-    });
-
-  return { joinUser, getUserData };
+  const getPageData =
+    useQuery(['myData'], getMyPage,{staleTime: 1000 * 60})
+  return { getPageData };
 }
 
 
-/*
-1. provider 설정
-2. useQuery 설정
-3. 필요한 곳에서 action 실행(Mutation)
-*/

src/pages/Admin/admin.tsx

@@ -0,0 +1,7 @@
+export default function Admin() {
+  return (
+    <>
+      <h1>Admin</h1>
+    </>
+  )
+}

src/pages/Main/main.tsx

@@ -1,13 +1,17 @@
 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);
+
+
   return (
     <>
       <h1>Main</h1>
       <button onClick={() => setVisibility(true)}>Open Modal</button>
+      <Mypage />
 
       {/*모달 사용시 모달로 묶어 주시면 됩니다. state로 toggle 됩니다.*/}
       <Modal visibility={visibility} toggle={setVisibility}>

src/pages/Mypage/mypage.tsx

@@ -1,16 +1,51 @@
+import useDataQuery from "../../Hooks/useData-Query.tsx";
 
 
-export default function Mypage() {
-  /*
+/*
   - 개인별
     1. 연차 목록을 리스트 한다.
     2. 당직 목록을 리스트 한다.
-    3. 수정, 삭제 기능을 추가한다.
+    3. 수정, 삭제 기능을 추가한다. - reduce 사용하여 한 컴포넌트에서 action 관리
+    4. Mutation - Custom Hook 에서 Store 관리
   */
+
+export default function Mypage() {
+
+
+  const { getPageData } = useDataQuery();
+  const { isLoading, error, data: myData } = getPageData;
+  console.log(myData);
+
+  if (isLoading) {
+    return "Loading...";
+  } else if (error instanceof Error) {
+    return `An error has occurred: ${error.message}`;
+  }
+
   return (
     <>
-      <h1>MyPage</h1>
+      {myData.map((user: MyDataUser, index: number) => (
+        <div key={index}>
+          <h2>{user.name}</h2>
+          <p>총 연차 날 수 : {user.annualBalance}</p>
+          <h3>연차 리스트</h3>
+          <ul>
+            {user.annual.map((annualItem: AnnualType) => (
+              <li key={annualItem.id}>
+                {annualItem.reason}, Start Date: {annualItem.startDate}, End Date: {annualItem.endDate}, Status: {annualItem.status}
+              </li>
+            ))}
+          </ul>
+          <h3>당직 리스트</h3>
+          <ul>
+            {user.duty.map((dutyItem:DutyType) => (
+              <li key={dutyItem.id}>
+                Start Date: {dutyItem.startDate}, End Date: {dutyItem.endDate}, Status: {dutyItem.status}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
     </>
   );
 }
-

vite.config.ts

@@ -1,14 +1,16 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import sassDts from "vite-plugin-sass-dts";
-import mkcert from "vite-plugin-mkcert";
 import path from "path";
 
 const __dirname = path.resolve();
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), sassDts(), mkcert()],
+  plugins: [react(), sassDts()],
   resolve: {
     alias: [{ find: "@", replacement: `${__dirname}/src` }],
   },
+  server:{
+    port: 3000
+  }
 });