feat: 모달 컴포넌트 추가,캘린더 input 참조용

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"

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 사용하여 전역화 시킨다.

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 (
-    <>
-     <h1>라우터 필요시 생성</h1>
-      <Main />
-    </>
+  <Routes>
+    <Route path="/" element={<Main />} />
+    {/*<Route path="/admin" */}
+    {/*       element={<ProtectedRoute adminRequired={true} element={<Admin />}*/}
+  </Routes>
   )
 }
 

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}
     />
   );

src/Components/Common/Modal/Modal.scss → src/Components/Modal/Modal.scss

@@ -31,7 +31,7 @@
 }
 .modal-close {
   bottom: 10px;
-  width: 164px;
+  width: 200px;
   height: 40px;
   color: indianred;
   font-size: 18px;

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 커스텀 훅
+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)
+*/

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(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

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";
 

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` }],
   },