-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from FastCampusGroupFE9/ChoiYongJun/mypage-list
Choi yong jun/mypage list
- Loading branch information
Showing
12 changed files
with
173 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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":"대기"} | ||
] | ||
} | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"} | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}</>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export default function Admin() { | ||
return ( | ||
<> | ||
<h1>Admin</h1> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,54 @@ | ||
|
||
|
||
export default function Mypage() { | ||
/* | ||
import useDataQuery from "../../Hooks/useData-Query.tsx"; | ||
/* | ||
- 개인별 | ||
1. 연차 목록을 리스트 한다. | ||
2. 당직 목록을 리스트 한다. | ||
3. 수정, 삭제 기능을 추가한다. | ||
3. 수정, 삭제 기능을 추가한다. - reduce 사용하여 한 컴포넌트에서 action 관리 | ||
4. Mutation - Custom Hook 에서 Store 관리 | ||
*/ | ||
|
||
export default function Mypage() { | ||
const { getPageData } = useDataQuery(); | ||
const { isLoading, error, data: myData } = getPageData; | ||
|
||
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}, 연차 시작일: {annualItem.startDate}, 연차 마지막일: {annualItem.endDate}, | ||
승인여부: {annualItem.status} | ||
</li> | ||
))} | ||
</ul> | ||
<h3>당직 리스트</h3> | ||
<ul> | ||
{user.duty.map((dutyItem: DutyType) => ( | ||
<li key={dutyItem.id}> | ||
당직일: {dutyItem.startDate}, 승인여부: {dutyItem.status} | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
))} | ||
</> | ||
); | ||
} | ||
|
||
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} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
}); |