외출자 목록보기

외출자 목록보기

src/api/outList/index.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { instance } from "..";
+import { applicationOK, earlyReturnHome } from "../type";
+
+export const Application = () => {
+  return useQuery<applicationOK[]>({
+    queryKey: ["outList"],
+    queryFn: async () => {
+      const response = await instance.get(`application/non-return`);
+      return response.data;
+    },
+  });
+};
+
+export const EarlyReturn = () => {
+  return useQuery<earlyReturnHome[]>({
+    queryKey: ["earlyReturn"],
+    queryFn: async () => {
+      const response = await instance.get(`early-return/ok`);
+      return response.data;
+    },
+  });
+};
+
+export const ReturnSchool = () => {
+  return useMutation<Error, void, { id: string }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.patch(
+          `/application/change/${param.id}`
+        );
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};

src/api/type.ts

@@ -0,0 +1,18 @@
+export interface applicationOK {
+  id: string;
+  username: string;
+  start_time: string;
+  end_time: string;
+  grade: number;
+  class_num: number;
+  num: number;
+}
+
+export interface earlyReturnHome {
+  id: string;
+  username: string;
+  start_time: string;
+  grade: number;
+  class_num: number;
+  num: number;
+}

src/app/login/page.tsx

@@ -66,7 +66,7 @@ const Login = () => {
     } else return "primary";
   };
   return (
-    <div className=" flex flex-col px-6 h-dvh justify-center pt-% pb-20">
+    <div className=" flex flex-col px-6 h-dvh justify-center pt-48 pb-20">
       <div className=" flex flex-col justify-between h-90dvh gap-5">
         <div className="flex flex-col gap-7">
           <div>

src/app/outList/page.tsx

@@ -1,11 +1,60 @@
 "use client";
-import Header from "@/components/header";
+import { Application, EarlyReturn } from "@/api/outList";
+import { applicationOK, earlyReturnHome } from "@/api/type";
+import BackGround from "@/components/background";
+import NonReturn from "@/components/list/application";
+import { getFullToday } from "@/util/date";
+import { getStudentString } from "@/util/util";
+import React, { useEffect, useState } from "react";
 
 const OutList = () => {
+  const [selectedTab, setSelectedTab] = useState<boolean>(true);
+  const [applicationData, setApplicationData] = useState<applicationOK[]>();
+  const [earlyData, setEarlyData] = useState<earlyReturnHome[]>();
+
+  const { data: applicationOKData } = Application();
+  const { data: earlyReturnData } = EarlyReturn();
+
+  useEffect(() => {
+    setApplicationData(applicationOKData);
+  }, [applicationOKData]);
+
+  useEffect(() => {
+    setEarlyData(earlyReturnData);
+  }, [earlyReturnData]);
+
+  const onClickTab = (tab: boolean) => {
+    setSelectedTab(tab);
+  };
+
   return (
-    <div className=" h-dvh px-6 py-3 bg-primary-1200">
-      <Header />
-    </div>
+    <BackGround
+      title="외출자보기"
+      subTitle={getFullToday()}
+      TabOK={true}
+      TabOnclick={onClickTab}
+    >
+      <div className=" overflow-y-scroll gap-4 flex flex-col">
+        {selectedTab
+          ? applicationData?.map((item, index) => (
+              <NonReturn
+                id={item.id}
+                type="application"
+                key={index}
+                returnTime={item.end_time}
+                name={getStudentString(item)}
+              />
+            ))
+          : earlyData?.map((item, index) => (
+              <NonReturn
+                id={item.id}
+                key={index}
+                name={getStudentString(item)}
+                type="early-return"
+              />
+            ))}
+      </div>
+    </BackGround>
   );
 };
 

src/components/background/index.tsx

@@ -0,0 +1,49 @@
+"use client";
+import Header from "@/components/header";
+import Tab from "@/components/tab";
+import React from "react";
+
+interface Prop {
+  title: string;
+  subTitle: string;
+  Dropdown?: React.ReactNode;
+  TabOK: boolean;
+  children: React.ReactNode;
+  TabOnclick: (tab: boolean) => void;
+}
+
+const BackGround: React.FC<Prop> = ({
+  title,
+  subTitle,
+  Dropdown,
+  TabOK = true,
+  children,
+  TabOnclick,
+}) => {
+  return (
+    <div className=" min-w-fit min-h-full h-dvh px-6 py-3 bg-primary-1200">
+      <Header />
+      <div>
+        <div className=" py-3 flex items-center gap-3 font-sans">
+          <div className=" text-sub-title1-M">{title}</div>
+          <div className=" text-sun-title3-M text-neutral-300">{subTitle}</div>
+        </div>
+        <div>{Dropdown}</div>
+        <div className=" flex flex-col gap-6">
+          <div>
+            {TabOK && (
+              <Tab
+                firstText="외출"
+                SecondText="조기귀가"
+                onClick={TabOnclick}
+              />
+            )}
+          </div>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BackGround;

src/components/button/index.tsx

@@ -34,16 +34,16 @@ const Button: React.FC<ButtonProp> = ({
   const getColorClass = () => {
     switch (colorType) {
       case "primary":
-        return " rounded-lg bg-primary-200 text-primary-1000 hover:bg-primary-500 focus:bg-primary-500 focus:border focus:border-primary-800 active:bg-primary-800";
+        return " rounded-lg bg-primary-200 text-primary-1000 focus:bg-primary-500 focus:border focus:border-primary-800 active:bg-primary-800";
 
       case "secondary":
-        return " rounded-lg bg-secondary-200 text-secondary-1000 hover:bg-secondary-500 focus:bg-secondary-500 focus:border focus:border-secondary-800 active:bg-secondary-800";
+        return " rounded-lg bg-secondary-200 text-secondary-1000  focus:bg-secondary-500 focus:border focus:border-secondary-800 active:bg-secondary-800";
 
       case "tertiary":
-        return " rounded-lg bg-tertiary-200 text-tertiary-900 hover:bg-tertiary-500 focus:bg-tertiary-500 focus:border focus:border-tertiary-800 active:bg-tertiary-800";
+        return " rounded-lg bg-tertiary-200 text-tertiary-900 focus:bg-tertiary-500 focus:border focus:border-tertiary-800 active:bg-tertiary-800";
 
       case "ghost":
-        return " rounded-lg border bg-primary-1000 border-primary-200 hover:border-primary-500 hover:text-primary-500 focus:border-primary-800 focus:text-primary-500 active:border-primary-800 active:text-primary-800";
+        return " rounded-lg border bg-primary-1000 border-primary-200 focus:border-primary-800 focus:text-primary-500 active:border-primary-800 active:text-primary-800";
 
       case "solidDisabled":
         return " rounded-lg bg-neutral-600 text-primary-1000";
@@ -52,7 +52,7 @@ const Button: React.FC<ButtonProp> = ({
         return " rounded-lg border border-neutral-500 text-neutral-500 bg-neutral-1000";
 
       case "red":
-        return " rounded-lg text-error-1000 bg-error-200 hover:bg-error-400 focus:bg-error-400 focus:border focus:border-error-800 active:bg-error-700";
+        return " rounded-lg text-error-1000 bg-error-200 focus:bg-error-400 focus:border focus:border-error-800 active:bg-error-700";
     }
   };