From 03f57302c3ef46d2264762ba6b7b050484652721 Mon Sep 17 00:00:00 2001 From: pelicanStd Date: Wed, 26 Jul 2023 14:00:09 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80,=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20input=20=EC=B0=B8=EC=A1=B0=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 45 +++++++++++++++++++ package.json | 2 + src/@types/common.ts | 17 ++++++- src/App.tsx | 13 +++--- src/Components/Calendar-input/Calendar.tsx | 3 +- src/Components/{Common => }/Modal/Modal.css | 2 +- .../{Common => }/Modal/Modal.css.map | 0 src/Components/{Common => }/Modal/Modal.scss | 2 +- src/Components/{Common => }/Modal/Modal.tsx | 0 src/Hooks/useData-Query.tsx | 37 ++++++++++++++- src/main.tsx | 25 ++++++----- src/pages/Main/main.tsx | 2 +- vite.config.ts | 3 +- 13 files changed, 127 insertions(+), 24 deletions(-) rename src/Components/{Common => }/Modal/Modal.css (98%) rename src/Components/{Common => }/Modal/Modal.css.map (100%) rename src/Components/{Common => }/Modal/Modal.scss (98%) rename src/Components/{Common => }/Modal/Modal.tsx (100%) 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` }], },