diff --git a/src/@types/common.ts b/src/@types/common.ts index 8f3836f2..54eb26ed 100644 --- a/src/@types/common.ts +++ b/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 사용하여 전역화 시킨다. \ No newline at end of file diff --git a/src/Api/api.ts b/src/Api/api.ts new file mode 100644 index 00000000..6ff038da --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/Api/data/my.json b/src/Api/data/my.json new file mode 100644 index 00000000..c6b03616 --- /dev/null +++ b/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":"대기"} + ] + } +] \ No newline at end of file diff --git a/src/Api/data/user.json b/src/Api/data/user.json new file mode 100644 index 00000000..eef649ba --- /dev/null +++ b/src/Api/data/user.json @@ -0,0 +1,12 @@ +[ +{"email":"cjzak0@naver.com","password":"$2a$04$c9FhdT09lvcCb250DjLdKeX1PIQjv2TkbE.OkvfD73CwOzyoJbS9m","name":"김땡땡","join":"2023-03-27"}, +{"email":"nduester1@gmail.com","password":"$2a$04$tpse8d1m7ocpBLn1prCJBOsu9So/yTi4A2TpRnt8mj/yyZyDeShG6","name":"박땡땡","join":"2022-09-15"}, +{"email":"tbruineman2@naver.com","password":"$2a$04$wylfBvz8hQ6ZNcTMtW39h.uLBHo.iKRuWNfWAQyaUlp5lSkqdeGGe","name":"이땡땡","join":"2022-03-31"}, +{"email":"rantoniutti3@gmail.com","password":"$2a$04$f/zPQ48GVImW7RAk8vHNX.67wKNzzjY2bVXDH3ap8GCUpjB/pSI/u","name":"송땡땡","join":"2022-09-27"}, +{"email":"bscurrell4@hanmail.net","password":"$2a$04$8siG.pXXi8jHIZ7z8VIKs.06Xmtj98XNj1y7z.lOIJFMGef6obQUC","name":"아무개","join":"2020-08-10"}, +{"email":"efarquar5@gmail.com","password":"$2a$04$8/2nCi3EVer5bExUbYP9N.O6PeceSVN4IebosR7Czu7cI4KJrb38O","name":"김김김","join":"2022-05-01"}, +{"email":"astud6@gmail.com","password":"$2a$04$ES3t8zrizq5kC.hKWbASJOTVA12fozc9OpAbpOxdXJ5zTHO35BY9C","name":"박박박","join":"2021-01-07"}, +{"email":"gbryceson7@naver.com","password":"$2a$04$DY/70RcPDcs.f4h88aWvDuR5UiQDUjltf8ZeL5Oam.xhGQEZ1/H8e","name":"송송송","join":"2020-10-22"}, +{"email":"aplank8@naver.com","password":"$2a$04$kWFZOtRWjLu7F6TVXdFDSOYvBxsIcgSIXbU3WwAGlF5dURrUHvTpy","name":"이이이","join":"2022-06-28"}, +{"email":"nilyunin9@gmail.com","password":"$2a$04$lgHZrfIsK0k6nAINt5UA7.x1C0j2/fOt2y0TgsEnLx.UBAWUCj9pS","name":"김박이","join":"2022-09-16"} +] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 5939c852..47adce47 100644 --- a/src/App.tsx +++ b/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 ( } /> + } /> {/*}*/} diff --git a/src/Components/Calendar-input/Calendar.tsx b/src/Components/Calendar-input/Calendar.tsx index ccf9eae7..690a86c2 100644 --- a/src/Components/Calendar-input/Calendar.tsx +++ b/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']]); diff --git a/src/Components/router/ProtectedRoute.tsx b/src/Components/router/ProtectedRoute.tsx new file mode 100644 index 00000000..d7b54ac3 --- /dev/null +++ b/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 ; + // } + // if (adminRequired && !userInfo.isAdmin) { + // return ; + // } + // return <>{element}; +} diff --git a/src/Hooks/useData-Query.tsx b/src/Hooks/useData-Query.tsx index 0f3913da..6631b622 100644 --- a/src/Hooks/useData-Query.tsx +++ b/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) -*/ diff --git a/src/pages/Admin/admin.tsx b/src/pages/Admin/admin.tsx new file mode 100644 index 00000000..9d502c16 --- /dev/null +++ b/src/pages/Admin/admin.tsx @@ -0,0 +1,7 @@ +export default function Admin() { + return ( + <> +

Admin

+ + ) +} diff --git a/src/pages/Main/main.tsx b/src/pages/Main/main.tsx index 46c9e526..e3526061 100644 --- a/src/pages/Main/main.tsx +++ b/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 ( <>

Main

+ {/*모달 사용시 모달로 묶어 주시면 됩니다. state로 toggle 됩니다.*/} diff --git a/src/pages/Mypage/mypage.tsx b/src/pages/Mypage/mypage.tsx index da289144..9ac6a064 100644 --- a/src/pages/Mypage/mypage.tsx +++ b/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 ( <> -

MyPage

+ {myData.map((user: MyDataUser, index: number) => ( +
+

{user.name}

+

총 연차 날 수 : {user.annualBalance}

+

연차 리스트

+
    + {user.annual.map((annualItem: AnnualType) => ( +
  • + {annualItem.reason}, Start Date: {annualItem.startDate}, End Date: {annualItem.endDate}, Status: {annualItem.status} +
    • + ))} +
+

당직 리스트

+
    + {user.duty.map((dutyItem:DutyType) => ( +
  • + Start Date: {dutyItem.startDate}, End Date: {dutyItem.endDate}, Status: {dutyItem.status} +
    • + ))} +
+
+ ))} ); } - diff --git a/vite.config.ts b/vite.config.ts index 131df9c5..5a258408 100644 --- a/vite.config.ts +++ b/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 + } });