main page 약간 수정

src/app/login/page.tsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 import Input from "@/components/input";
 import Button from "@/components/button";
-import Logo from "@/assets/PiCKLogo.svg";
+import Logo from "@/assets/svg/PiCKLogo.svg";
 import { useState } from "react";
 import { useLogin } from "@/api/login";
 import { useRouter } from "next/navigation";

src/app/main/button.tsx

@@ -6,7 +6,7 @@ interface buttonProps {
   img: string;
 }
 
-const Button: React.FC<buttonProps> = ({ name, img }) => {
+const Button = ({ name, img }: buttonProps) => {
   return (
     <div className=" flex flex-col items-center gap-2">
       <Image

src/app/main/checkPage.tsx

@@ -1,9 +1,51 @@
 "use client";
+import Image from "next/image";
+import { useState } from "react";
+import outGoingImg from "@/assets/svg/outGoing.svg";
+import applicationImg from "@/assets/svg/application.svg";
+import Button from "@/components/button";
 
 interface checkPageType {
   type: "outGoing" | "homecoming";
 }
 
-const CheckPage: React.FC<checkPageType> = ({ type }) => {
-  return <div>{type === "outGoing" ? (<div></div>) : (<div></div>)}</div>;
+const CheckPage = ({ type }: checkPageType) => {
+  const [out, setOut] = useState(0);
+  const [sum, setSum] = useState(0);
+
+  return (
+    <>
+      {type === "outGoing" ? (
+        <div className=" rounded-xl w-42 h-62 bg-white flex flex-col items-center gap-4">
+          <div className=" text-neutral-50 text-sub-title4-M text-center px-4 pt-6">
+            현재 외출 중인 학생은 총 <span className=" text-primary-500">{out}명</span>입니다.
+          </div>
+          <Image src={outGoingImg} alt="" />
+          <Button
+            colorType="primary"
+            buttonSize="extraSmall"
+            onClick={() => {}}
+          >
+            외출자 확인
+          </Button>
+        </div>
+      ) : (
+        <div className=" rounded-xl w-42 h-62 bg-white flex flex-col items-center gap-4">
+          <div className=" text-neutral-50 text-sub-title4-M text-center px-2 pt-6">
+            현재 외출 / 조기 귀가 신청 학생은 총 <span className=" text-secondary-300">{sum}명</span>입니다.
+          </div>
+          <Image src={applicationImg} alt="" />
+          <Button
+            colorType="tertiary"
+            buttonSize="extraSmall"
+            onClick={() => {}}
+          >
+            출결 상태 확인
+          </Button>
+        </div>
+      )}
+    </>
+  );
 };
+
+export default CheckPage;

src/app/main/page.tsx

@@ -1,13 +1,15 @@
 "use client";
 import Header from "@/components/header";
 import Button from "./button";
-import outAcceptImg from "@/assets/buttonImg/outing.svg";
+import outAcceptImg from "@/assets/svg/outing.svg";
 import { useState } from "react";
+import CheckPage from "./checkPage";
+import { getFullToday, getToday, getWeekDay } from "@/util/date";
 
 const Main = () => {
   const [date, setDate] = useState(new Date().toLocaleTimeString());
-  const [name, setName] = useState("백승휘");
-  const [floor, setFloor] = useState(2);
+  const [name, setName] = useState(null);
+  const [floor, setFloor] = useState(null);
   return (
     <div className=" bg-primary-1200 flex flex-col items-center ">
       <Header />
@@ -17,16 +19,25 @@ const Main = () => {
         <Button name="출석 체크" img={outAcceptImg} />
         <Button name="교실 이동" img={outAcceptImg} />
       </div>
-      <div className=" rounded-xl	w-80 h-20 bg-white">
-        <div>{date}</div>
+      <div className=" rounded-xl	w-80 h-auto bg-white gap-2 flex items-center flex-wrap px-5 py-3">
+        <div className="text-sub-title4-M text-neutral-300">
+          {getToday()} {getWeekDay()}요일
+        </div>
         {floor !== null ? (
-          <div>
-            {name} 선생님은 <span>{floor}층 자습감독</span>입니다.
+          <div className=" text-sub-title3-M text-neutral-50">
+            {name} 선생님은{" "}
+            <span className=" text-primary-500">{floor}층 자습감독</span>입니다.
           </div>
         ) : (
-          <div>{name} 선생님은 자습감독이 아닙니다.</div>
+          <div className="text-sub-title3-M text-neutral-50">
+            {name} 선생님은 자습감독이 아닙니다.
+          </div>
         )}
       </div>
+      <div className="flex">
+        <CheckPage type="outGoing" />
+        <CheckPage type="homecoming" />
+      </div>
     </div>
   );
 };