Merge pull request #8 from SayisMe/dev

Feat: 유저용 링크 생성

package.json

@@ -15,7 +15,8 @@
     "ra-data-json-server": "^4.9.2",
     "react": "^18.2.0",
     "react-admin": "^4.9.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1"
   },
   "devDependencies": {
     "@types/node": "^18.16.1",

src/App.tsx

@@ -1,17 +1,20 @@
 // in src/App.tsx
-import { Admin, Resource } from "react-admin";
+import { Admin, CustomRoutes, Resource } from "react-admin";
 import { dataProvider } from './dataProvider';
 import { PostList, PostEdit, PostCreate } from "./posts";
 import { UserList } from "./users";
 import PostIcon from "@mui/icons-material/Book";
 import UserIcon from "@mui/icons-material/Group";
 import { Dashboard } from "./Dashboard";
 import { authProvider } from "./authProvider";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import UserPage from "./UserPage";
 
 export const App = () => (
   <Admin authProvider={authProvider} dataProvider={dataProvider} dashboard={Dashboard}>
-    {/* <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon}/> */}
-    <Resource name="users" list={UserList} icon={UserIcon} recordRepresentation="name"/>
-    {/* <Resource name="home" list={UserList} /> */}
+    <Resource name="users" list={UserList} icon={UserIcon} recordRepresentation="name"/> 
+    <CustomRoutes noLayout>
+      <Route path="/dailyReport/:kakaoId" element={<UserPage />} />
+    </CustomRoutes>
   </Admin>
 )

src/UserPage.tsx

@@ -0,0 +1,22 @@
+// UserPage.tsx
+
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import Diary from "./diary";
+
+const UserPage = () => {
+  const [selectedUser, setSelectedUser] = useState(null);
+  const kakaoId = useParams().kakaoId;
+
+  console.log(kakaoId);
+  useEffect(() => {
+    fetch(`http://3.38.118.228:8080/api/dailyReport/user/${kakaoId}`)
+        .then((response) => response.json())
+        .then((data) => setSelectedUser(data));
+  }, []);
+
+  if(!selectedUser) return <></>;
+  return <div className="diaries"><div className="diary"><Diary selectedUser={selectedUser}/></div></div>;
+}
+
+export default UserPage;

src/diary.tsx

@@ -1,4 +1,4 @@
-
+// diary.tsx
 // selectedUSer 받아와서 return !
 const Diary = ({selectedUser}) => {
   return(

src/users.tsx

@@ -4,6 +4,7 @@ import { List, SimpleList, Datagrid, TextField, useRecordContext } from "react-a
 import { useCallback, useEffect, useState } from "react";
 import './users.css';
 import Diary from "./diary";
+import { Link } from "react-router-dom";
 
 export const UserList = () => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
@@ -56,7 +57,7 @@ export const UserList = () => {
       console.log(`formattedDate: ${formattedDate}`);
 
       setSelectedDate(formattedDate);
-      fetch(`http://3.38.118.228:8080/api/dailyReport/final/${kakaoId}`)
+      fetch(`http://3.38.118.228:8080/api/dailyReport/final/${record.kakaoId}`)
         .then((response) => response.json())
         .then((data) => setSelectedUser(data));
     };
@@ -152,6 +153,7 @@ export const UserList = () => {
               <button onClick={handleSave} style={{
                 margin: '20px'
               }}>Save</button>
+              <button><Link key={kakaoId} to={`/dailyReport/${kakaoId}`} target="_blank">유저 링크 띄우기</Link></button>
             </div>
             {save && (
               <div className="diary">