Merge pull request #31 from handong-app/junglesub/feat/admin-things

지연되는 상황으로 인해 먼저 머지

src/main/front/package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^6.1.2",
     "@mui/material": "^6.1.2",
     "@react-oauth/google": "^0.12.1",
+    "date-fns": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-infinite-scroller": "^1.2.6",

src/main/front/src/admin/Files/index.jsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+CustomTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+export default function AdminFilesComp() {
+  const [value, setValue] = React.useState(1);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+          variant="scrollable"
+          scrollButtons="auto"
+        >
+          <Tab disabled label="대시보드" {...a11yProps(0)} />
+          <Tab label="형식이 없는 파일" {...a11yProps(1)} />
+          <Tab label="일치하지 않는 파일" {...a11yProps(2)} />
+          <Tab label="사용되지 않는 파일" {...a11yProps(3)} />
+          <Tab label="전체파일" {...a11yProps(4)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        Item One
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        Item Two
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        Item Three
+      </CustomTabPanel>
+    </Box>
+  );
+}

src/main/front/src/components/MainDrawer.jsx

@@ -17,6 +17,7 @@ import {
   Badge,
   BottomNavigation,
   BottomNavigationAction,
+  Divider,
   Paper,
   Tooltip,
 } from "@mui/material";
@@ -131,7 +132,7 @@ export default function MainDrawer() {
             <IconButton onClick={() => null}>
             </IconButton>
           </DrawerHeader> */}
-          <Box sx={{ pt: 16 }}>
+          <Box sx={{ pt: 12 }}>
             <List>
               {MENUS.map((menu, index) => (
                 <Tooltip
@@ -214,6 +215,7 @@ export default function MainDrawer() {
                   </ListItem>
                 </Tooltip>
               ))}
+              <Divider />
               <Tooltip
                 title="Github"
                 placement="right"

src/main/front/src/main.jsx

@@ -12,6 +12,8 @@ import MainFeed from "./pages/MainFeed";
 import AllFeed from "./pages/AllFeed";
 import FavFeed from "./pages/FavFeed";
 import PWAInstallModal from "./components/modals/PWAInstallModal";
+import UsersTable from "./pages/admin/UsersTable";
+import { ADMINMENU } from "./pages/admin";
 
 const router = createBrowserRouter([
   {
@@ -30,6 +32,10 @@ const router = createBrowserRouter([
     path: "/favorite",
     element: <LoginProtected comp={FavFeed} />,
   },
+  ...ADMINMENU.map((menu) => ({
+    path: `/admin/${menu.id}`,
+    element: <LoginProtected comp={menu.comp} />,
+  })),
 ]);
 
 const theme = createTheme({

src/main/front/src/pages/admin/AdminFeed.jsx

@@ -0,0 +1,43 @@
+import InfiniteScroll from "react-infinite-scroller";
+import AdminPage from "./AdminPage";
+import FeedCard from "../../components/FeedCard";
+import useLoadData from "../../hooks/useLoadData";
+import { Box, Paper } from "@mui/material";
+
+function AdminFeed() {
+  const [allFeeds, hasMore, loadData] = useLoadData();
+
+  return (
+    <AdminPage>
+      <InfiniteScroll
+        loadMore={loadData}
+        hasMore={hasMore}
+        loader={Array(1)
+          .fill()
+          .map((_, index) => (
+            <FeedCard key={index} loading />
+          ))}
+      >
+        {allFeeds.map((item) => (
+          // <FeedItemNew
+          //   key={item.id}
+          //   item={item}
+          //   setAllSeenFeedId={setAllSeenFeedId}
+          // />
+          <Box
+            sx={{
+              display: "flex",
+            }}
+          >
+            <Box sx={{ flexGrow: 1, maxWidth: 500 }}>
+              <FeedCard key={item.id} item={item} />
+            </Box>
+            <Paper sx={{ flexGrow: 1, my: "16px", ml: 2 }}>Hello!</Paper>
+          </Box>
+        ))}
+      </InfiniteScroll>
+    </AdminPage>
+  );
+}
+
+export default AdminFeed;

src/main/front/src/pages/admin/AdminFiles.jsx

@@ -0,0 +1,16 @@
+import InfiniteScroll from "react-infinite-scroller";
+import AdminPage from "./AdminPage";
+import FeedCard from "../../components/FeedCard";
+import useLoadData from "../../hooks/useLoadData";
+import { Box, Paper } from "@mui/material";
+import AdminFilesComp from "../../admin/Files";
+
+function AdminFiles() {
+  return (
+    <AdminPage>
+      <AdminFilesComp />
+    </AdminPage>
+  );
+}
+
+export default AdminFiles;