Merge branch 'develop' of https://github.com/DSM-PICK/PICK2024_FRONT_…

…TEACHER into develop
DSM-PICK · Apr 27, 2024 · 998a362 · 998a362
2 parents f7a03f0 + 592de2d
commit 998a362
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 43 deletions.
diff --git a/src/api/main/index.ts b/src/api/main/index.ts
@@ -8,6 +8,8 @@ export const GetName = () => {
     queryFn: async () => {
       const result = await instance.get("/admin/my-name");
       localStorage.setItem("name", result.data.name);
+      localStorage.setItem("grade", JSON.stringify(result.data.grade));
+      localStorage.setItem("class_num", JSON.stringify(result.data.class_num));
       return result.data.name;
     },
   });

diff --git a/src/app/afterManage/page.tsx b/src/app/afterManage/page.tsx
@@ -272,10 +272,14 @@ const AfterManage = () => {
               출결 저장하기
             </Button>
           )
-        ) : (
+        ) : selectedTab ? (
           <Button colorType="ghost" buttonSize="full" onClick={onClickSave}>
             출결 체크하기
           </Button>
+        ) : (
+          <Button colorType="ghost" buttonSize="full" onClick={handleSaveClub}>
+            출결 저장하기
+          </Button>
         )}
       </div>
     </BackGround>

diff --git a/src/app/classChange/page.tsx b/src/app/classChange/page.tsx
@@ -25,11 +25,19 @@ const ClassChange = () => {
   const router = useRouter();
 
   const Accept = async () => {
-    setAccept(true);
+    if (selectedStudents.length === 0) {
+      alert("교실 이동 수락 할 학생을 선택해 주세요");
+    } else {
+      setAccept(true);
+    }
   };
 
   const Refuse = () => {
-    setRefuse(true);
+    if (selectedStudents.length === 0) {
+      alert("교실 이동 거절 할 학생을 선택해 주세요");
+    } else {
+      setRefuse(true);
+    }
   };
 
   useEffect(() => {
@@ -107,6 +115,20 @@ const ClassChange = () => {
     }
   };
 
+  const acceptColor = () => {
+    if (selectedStudents.length === 0) {
+      return "solidDisabled";
+    }
+    return "primary";
+  };
+
+  const refuseColor = () => {
+    if (selectedStudents.length === 0) {
+      return "ghostDisabled";
+    }
+    return "red";
+  };
+
   return (
     <BackGround
       TabOnclick={() => {}}
@@ -119,11 +141,15 @@ const ClassChange = () => {
             <Dropdown type="floor" onChange={handleFloorChange} />
           </div>
           <div className=" flex gap-2 w-32">
-            <Button colorType="red" buttonSize="extraSmall2" onClick={Refuse}>
+            <Button
+              colorType={refuseColor()}
+              buttonSize="extraSmall2"
+              onClick={Refuse}
+            >
               거절
             </Button>
             <Button
-              colorType="primary"
+              colorType={acceptColor()}
               buttonSize="extraSmall2"
               onClick={Accept}
             >
@@ -133,16 +159,18 @@ const ClassChange = () => {
         </div>
       }
     >
-      {data?.map((item, index) => (
-        <ChangeClass
-          type="accept"
-          key={index}
-          onClick={() => handleAcceptListClick(item.id, item.username)}
-          prevClass={`${item.grade}-${item.class_num}`}
-          nextClass={`${item.classroom_name}`}
-          student={getStudentString(item)}
-        />
-      ))}
+      <div className=" flex flex-col h-60dvh overflow-y-scroll gap-4">
+        {data?.map((item, index) => (
+          <ChangeClass
+            type="accept"
+            key={index}
+            onClick={() => handleAcceptListClick(item.id, item.username)}
+            prevClass={`${item.grade}-${item.class_num}`}
+            nextClass={`${item.classroom_name}`}
+            student={getStudentString(item)}
+          />
+        ))}
+      </div>
 
       {refuse && (
         <Modal

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Provider } from "./provider";
 import "../../tailwind.config";
 import "@/style/global.css";
 import Head from "next/head";
+import { Noto_Sans_KR } from "next/font/google";
 
 export const metadata = {
   title: "PiCK",
@@ -11,6 +12,8 @@ export const metadata = {
   },
 };
 
+const NotoSans = Noto_Sans_KR({ subsets: ["latin"] });
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -23,7 +26,7 @@ export default function RootLayout({
         <title>{metadata.title}</title>
         <meta name="description" content={metadata.description} />
       </Head>
-      <body className="">
+      <body className={NotoSans.className}>
         <Provider>{children}</Provider>
       </body>
     </html>

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import Header from "@/components/header";
-import Button from "./button";
+import Button from "../../components/main/button";
 import { useEffect, useState } from "react";
-import CheckPage from "./checkPage";
+import CheckPage from "../../components/main/checkPage";
 import { GetName, GetTodaydirector } from "@/api/main";
 import { getToday, getWeekDay } from "@/util/date";
 import AfterManageImg from "@/assets/svg/aferManege.svg";
@@ -25,7 +25,7 @@ const Main = () => {
       <div className="bg-primary-1200 flex flex-col gap-9 items-center px-6 h-dvh pt-7">
         <div className="flex w-full justify-between">
           <Button src="/outAccept" name="외출 수락" img={outingImg} />
-          <Button src="/afterManage" name="방과후 관리" img={AfterManageImg} />
+          <Button src="/afterManage" name="방과후 출결" img={AfterManageImg} />
           <Button src="/attendanceCheck" name="출석 체크" img={attendanceImg} />
           <Button src="/classChange" name="교실 이동" img={moveClassImg} />
         </div>

diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx
@@ -30,6 +30,15 @@ const OutAccept = () => {
     AcceptDataList();
   }, [selectGrade, selectClass]);
 
+  useEffect(() => {
+    const grade = parseInt(localStorage.getItem("grade") || "1", 10);
+    const class_num = parseInt(localStorage.getItem("class_num") || "1", 10);
+    const setgrade = grade === 0 ? 1 : grade;
+    const setclass_num = class_num === 0 ? 1 : class_num;
+    setSelectGrade(setgrade);
+    setSelectClass(setclass_num);
+  }, []);
+
   const handleGradeChange = (selectedOption: number) => {
     if (selectedOption === 5) {
       setSelectGrade(5);
@@ -39,6 +48,20 @@ const OutAccept = () => {
     }
   };
 
+  const acceptColor = () => {
+    if (selectedStudents.length === 0) {
+      return "solidDisabled";
+    }
+    return "primary";
+  };
+
+  const refuseColor = () => {
+    if (selectedStudents.length === 0) {
+      return "ghostDisabled";
+    }
+    return "red";
+  };
+
   const handleClassChange = (selectedOption: number) => {
     if (selectGrade === 5) {
       alert("학년을 선택해주세요");
@@ -97,7 +120,9 @@ const OutAccept = () => {
   };
 
   const Accept = () => {
-    setAcModal(true);
+    if (selectedStudents.length === 0) {
+      alert("외출 수락 할 학생을 선택해주세요");
+    } else setAcModal(true);
   };
 
   const onCancel = () => {
@@ -106,7 +131,9 @@ const OutAccept = () => {
   };
 
   const No = () => {
-    setNomodal(true);
+    if (selectedStudents.length === 0) {
+      alert("외출 거절 할 학생을 선택해주세요");
+    } else setNomodal(true);
   };
 
   const onClickTab = (tab: boolean) => {
@@ -125,6 +152,7 @@ const OutAccept = () => {
           },
           {
             onSuccess: () => {
+              location.reload();
               setNomodal(false);
             },
             onError: (error) => {
@@ -152,8 +180,8 @@ const OutAccept = () => {
           },
           {
             onSuccess: () => {
+              location.reload();
               setAcModal(false);
-              // location.reload();
             },
             onError: (error) => {
               console.error("Out accept error", error);
@@ -183,11 +211,15 @@ const OutAccept = () => {
             <Dropdown type="class" onChange={handleClassChange} />
           </div>
           <div className=" flex gap-2 w-32">
-            <Button colorType="red" buttonSize="extraSmall2" onClick={No}>
+            <Button
+              colorType={refuseColor()}
+              buttonSize="extraSmall2"
+              onClick={No}
+            >
               거절
             </Button>
             <Button
-              colorType="primary"
+              colorType={acceptColor()}
               buttonSize="extraSmall2"
               onClick={Accept}
             >

diff --git a/src/app/provider.tsx b/src/app/provider.tsx
@@ -1,12 +1,24 @@
 "use client";
+import { cookie } from "@/util/auth";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React from "react";
+import { useRouter } from "next/navigation";
+import React, { useEffect } from "react";
 
-interface clidrenProp {
+interface ProviderProps {
   children: React.ReactNode;
 }
 
-export const Provider = ({ children }: clidrenProp) => {
+export const Provider = ({ children }: ProviderProps) => {
+  const router = useRouter();
+  const accessToken = cookie.get("access_token");
+
+  useEffect(() => {
+    if (!accessToken) {
+      router.push("/login");
+      alert("로그인 후 이용해 주세요");
+    }
+  }, [accessToken, router]);
+
   const queryClient = new QueryClient();
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx
@@ -28,7 +28,7 @@ const BackGround: React.FC<Prop> = ({
       <Header />
       <div className="min-w-fit h-full min-h-dvh px-6 py-3 bg-primary-1200">
         <div className="py-3 gap-5 flex flex-col">
-          <div className="flex items-center gap-3 font-sans">
+          <div className="flex items-center gap-3 ">
             <div className="text-sub-title1-M">{title}</div>
             <div className="text-sun-title3-M text-neutral-300">{subTitle}</div>
           </div>

diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
@@ -80,6 +80,18 @@ const Dropdown: React.FC<DropdownProp> = ({ type, onChange }) => {
     ));
   };
 
+  useEffect(() => {
+    const grade = parseInt(localStorage.getItem("grade") || "1", 10);
+    const class_num = parseInt(localStorage.getItem("class_num") || "1", 10);
+    const setgrade = grade === 0 ? 1 : grade;
+    const setclass_num = class_num === 0 ? 1 : class_num;
+    if (type === "all") {
+      setSelectedAllOption(setgrade);
+    }
+    setSelectedGradeOption(setgrade);
+    setSelectedClassOption(setclass_num);
+  }, []);
+
   const floorOptions = [
     { value: 2, label: "2층" },
     { value: 3, label: "3층" },

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -26,7 +26,7 @@ const Header: NextPage = ({}) => {
       <Link href={"/main"}>
         <Image src={pick} alt="" width={48} />
       </Link>
-      <div className="flex font-sans text-nowrap text-sub-title4-M  text-neutral-50">
+      <div className="flex text-nowrap text-sub-title4-M  text-neutral-50">
         {teacherName ? `${teacherName}선생님` : "선생님"}
       </div>
     </div>

diff --git a/src/components/input/auto.tsx b/src/components/input/auto.tsx
@@ -42,7 +42,7 @@ const AutoInput: React.FC<AutoInputProps> = ({
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const { data: GetStudentMutate } = AllStudent();
 
-  const containerClassName = `font-sans w-${width} h-auto border border-neutral-900 rounded flex justify-between items-center px-2 bg-neutral-900 hover:border-neutral-500 hover:bg-white active:border-secondary-500 caret-primary-500 focus:border-secondary-500`;
+  const containerClassName = ` w-${width} h-auto border border-neutral-900 rounded flex justify-between items-center px-2 bg-neutral-900 hover:border-neutral-500 hover:bg-white active:border-secondary-500 caret-primary-500 focus:border-secondary-500`;
 
   const [data, setData] = useState<Type[]>([]);
 
@@ -64,7 +64,7 @@ const AutoInput: React.FC<AutoInputProps> = ({
   const [student, setStudent] = useState<string[]>([]);
 
   const inputClassName =
-    "h-10 px-2 border-none bg-transparent placeholder-neutral-500 focus:outline-none rounded font-sans w-full";
+    "h-10 px-2 border-none bg-transparent placeholder-neutral-500 focus:outline-none rounded w-full";
 
   const handleInputChange = (inputText: string) => {
     const filtered = student?.filter((item) =>

diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -39,7 +39,7 @@ const Input: React.FC<InputProps> = ({
 }) => {
   const [showOpen, setShowOpen] = useState<boolean>(false);
 
-  const containerClassName = ` font-sans w-${width} h-${height} border border-neutral-900 rounded flex justify-between items-center px-2
+  const containerClassName = ` w-${width} h-${height} border border-neutral-900 rounded flex justify-between items-center px-2
     ${
       error
         ? "border-error-500 bg-error-900"
@@ -50,12 +50,12 @@ const Input: React.FC<InputProps> = ({
     `;
 
   const inputClassName = ` h-10 w-full px-2 border-none bg-transparent placeholder-neutral-500 
-    focus:outline-none rounded font-sans
+    focus:outline-none rounded
     `;
 
   return (
     <div className=" flex flex-col items-start w-full">
-      <label className=" font-sans text-label1 text-neutral-50">{label}</label>
+      <label className=" text-label1 text-neutral-50">{label}</label>
       <div className={containerClassName}>
         <input
           className={inputClassName}

diff --git a/src/app/main/button.tsx → src/components/main/button.tsx b/src/app/main/button.tsx → src/components/main/button.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 interface buttonProps {
-  name: "외출 수락" | "방과후 관리" | "출석 체크" | "교실 이동";
+  name: "외출 수락" | "방과후 출결" | "출석 체크" | "교실 이동";
   img: string;
   src: string;
 }

diff --git a/src/app/main/checkPage.tsx → src/components/main/checkPage.tsx b/src/app/main/checkPage.tsx → src/components/main/checkPage.tsx
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -62,11 +62,11 @@ const Modal: React.FC<ModalProps> = ({
       {type === "button" || type === "error" ? (
         <div className=" z-10 bg-white rounded-xl px-5 py-6">
           <div className="flex flex-col gap-8 items-center">
-            <div className="font-sans text-neutral-50 text-center  text-sub-title2-M">
+            <div className=" text-neutral-50 text-center  text-sub-title2-M">
               {heading1 && <div className="max-w-none">{heading1}</div>}
               {heading2 && <div className=" w-max">{heading2}</div>}
             </div>
-            <div className="font-sans  text-label2 text-neutral-400 text-center">
+            <div className=" text-label2 text-neutral-400 text-center">
               {buttonMessage}하기 선택하면 다시 변경할 수 없습니다.
             </div>
             {renderButtons()}

diff --git a/src/components/tab/index.tsx b/src/components/tab/index.tsx
@@ -11,8 +11,8 @@ const Tab: React.FC<Tab> = ({ firstText, SecondText, onClick }) => {
 
   const selectTabClass = (tab: boolean) =>
     selectedTab === tab
-      ? "font-sans text-sub-title3-B w-full border-b-1 border-primary-500 py-3 flex items-center justify-center select-none"
-      : "font-sans text-sub-title3-B0 py-3 w-full flex items-center justify-center select-none";
+      ? " text-sub-title3-B w-full border-b-1 border-primary-500 py-3 flex items-center justify-center select-none"
+      : " text-sub-title3-B0 py-3 w-full flex items-center justify-center select-none";
 
   const handleTabClick = (tab: boolean) => {
     setSelectedTab(tab);