diff --git a/package-lock.json b/package-lock.json
index ab4334fa..500cfa9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,12 @@
"dependencies": {
"@tanstack/react-query": "^4.32.0",
"axios": "^1.4.0",
+ "jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-date-range": "^1.4.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
+ "react-router-dom": "^6.14.2",
"scss": "^0.2.4",
"vite-plugin-mkcert": "^1.16.0",
"vite-plugin-sass-dts": "^1.3.8"
@@ -1094,6 +1096,14 @@
"@octokit/openapi-types": "^18.0.0"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+ "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@swc/core": {
"version": "1.3.70",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.70.tgz",
@@ -2781,6 +2791,11 @@
"node": ">=6"
}
},
+ "node_modules/jwt-decode": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+ "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+ },
"node_modules/levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3275,6 +3290,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.14.2",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+ "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+ "dependencies": {
+ "@remix-run/router": "1.7.2"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.14.2",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+ "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+ "dependencies": {
+ "@remix-run/router": "1.7.2",
+ "react-router": "6.14.2"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/package.json b/package.json
index 59bfed20..cfc7f902 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
"dependencies": {
"@tanstack/react-query": "^4.32.0",
"axios": "^1.4.0",
+ "jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-date-range": "^1.4.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
+ "react-router-dom": "^6.14.2",
"scss": "^0.2.4",
"vite-plugin-mkcert": "^1.16.0",
"vite-plugin-sass-dts": "^1.3.8"
diff --git a/src/@types/common.ts b/src/@types/common.ts
index c49222e3..8f3836f2 100644
--- a/src/@types/common.ts
+++ b/src/@types/common.ts
@@ -1,7 +1,20 @@
-
-declare interface Sample {
+declare interface JoinUserInputType {
+ id: string;
name: string;
+ joinDate: string;
+}
+
+declare interface LoginOutputType {
id: string;
+ name: string;
joinDate: string;
+ accessToken: string;
+ refreshToken?: string;
+}
+
+declare interface UserLoginType {
+ accessToken: string;
+ refreshToken?: string;
}
+
// declare 사용하여 전역화 시킨다.
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0d5ef4a9..5939c852 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,16 @@
import Main from "./pages/Main/main.tsx";
+import { Route, Routes } from "react-router-dom";
+// import ProtectedRoute from "./Components/ProtectedRoute.tsx";
+// import Admin from "./pages/Admin/admin.tsx";
function App() {
-
return (
- <>
- 라우터 필요시 생성
-
-
+
+ } />
+ {/*}*/}
+
)
}
diff --git a/src/Components/Calendar-input/Calendar.tsx b/src/Components/Calendar-input/Calendar.tsx
index 0e00ab70..ccf9eae7 100644
--- a/src/Components/Calendar-input/Calendar.tsx
+++ b/src/Components/Calendar-input/Calendar.tsx
@@ -12,7 +12,7 @@ export default function MyDateRangePicker() {
}
]);
- // 선택한 날짜 범위를 받아 옵니다.
+ // 선택한 날짜 범위를 받아 옵니다. 확인용 콘솔입니다.
console.log(state[0].startDate);
console.log(state[0].endDate);
@@ -25,6 +25,7 @@ export default function MyDateRangePicker() {
editableDateInputs={true}
onChange={handleSelect}
moveRangeOnFirstSelection={false}
+ months={2}
ranges={state}
/>
);
diff --git a/src/Components/Common/Modal/Modal.css b/src/Components/Modal/Modal.css
similarity index 98%
rename from src/Components/Common/Modal/Modal.css
rename to src/Components/Modal/Modal.css
index 4cf03074..5b083395 100644
--- a/src/Components/Common/Modal/Modal.css
+++ b/src/Components/Modal/Modal.css
@@ -30,7 +30,7 @@
.modal-close {
bottom: 10px;
- width: 164px;
+ width: 200px;
height: 40px;
color: indianred;
font-size: 18px;
diff --git a/src/Components/Common/Modal/Modal.css.map b/src/Components/Modal/Modal.css.map
similarity index 100%
rename from src/Components/Common/Modal/Modal.css.map
rename to src/Components/Modal/Modal.css.map
diff --git a/src/Components/Common/Modal/Modal.scss b/src/Components/Modal/Modal.scss
similarity index 98%
rename from src/Components/Common/Modal/Modal.scss
rename to src/Components/Modal/Modal.scss
index c1c64ee0..72c07880 100644
--- a/src/Components/Common/Modal/Modal.scss
+++ b/src/Components/Modal/Modal.scss
@@ -31,7 +31,7 @@
}
.modal-close {
bottom: 10px;
- width: 164px;
+ width: 200px;
height: 40px;
color: indianred;
font-size: 18px;
diff --git a/src/Components/Common/Modal/Modal.tsx b/src/Components/Modal/Modal.tsx
similarity index 100%
rename from src/Components/Common/Modal/Modal.tsx
rename to src/Components/Modal/Modal.tsx
diff --git a/src/Hooks/useData-Query.tsx b/src/Hooks/useData-Query.tsx
index 463ebb2c..0f3913da 100644
--- a/src/Hooks/useData-Query.tsx
+++ b/src/Hooks/useData-Query.tsx
@@ -1,3 +1,38 @@
+import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { getLogin, postUserJoin } from "../Api/api.ts";
+// react- query 커스텀 훅
-// react- query 커스텀 훅
\ No newline at end of file
+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 };
+}
+
+
+/*
+1. provider 설정
+2. useQuery 설정
+3. 필요한 곳에서 action 실행(Mutation)
+*/
diff --git a/src/main.tsx b/src/main.tsx
index 6aefa40d..6af864e5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter } from "react-router-dom";
-const queryClient = new QueryClient()
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const queryClient = new QueryClient();
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
-
-
- ,
-)
+
+
+
+
+
+
+);
diff --git a/src/pages/Main/main.tsx b/src/pages/Main/main.tsx
index 547a38f2..46c9e526 100644
--- a/src/pages/Main/main.tsx
+++ b/src/pages/Main/main.tsx
@@ -1,4 +1,4 @@
-import Modal from "../../Components/Common/Modal/Modal.tsx";
+import Modal from "../../Components/Modal/Modal.tsx";
import { useState } from "react";
import MyDateRangePicker from "../../Components/Calendar-input/Calendar.tsx";
diff --git a/vite.config.ts b/vite.config.ts
index 515b774f..131df9c5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,13 @@
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(), mkcert()],
+ plugins: [react(), sassDts(), mkcert()],
resolve: {
alias: [{ find: "@", replacement: `${__dirname}/src` }],
},