chore : 외출자 사유보기

DSM-PICK · Jul 10, 2024 · 86e2d7c · 86e2d7c
1 parent 358f1b9
commit 86e2d7c
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/app/components/common/list/out/page.tsx b/src/app/components/common/list/out/page.tsx
@@ -10,17 +10,21 @@ interface OutProps {
 }
 
 const Out: React.FC<OutProps> = ({ student, returnTime, id, reason }) => {
+  const [showReason, setShowReason] = useState<boolean>(false);
+
   return (
-    <>
-      <div className="rounded-lg flex justify-between items-center bg-white py-5 px-4 w-120 border hover:border-primary-400">
-        <div className="flex items-center gap-3">
-          <div className=" text-Button-L">{student}</div>
-          <div className=" text-caption1 text-neutral-400">
-            {returnTime} 복귀예정
-          </div>
+    <div
+      className="group rounded-lg flex flex-col justify-between bg-white py-5 px-4 w-120 border hover:border-primary-400"
+      onClick={() => setShowReason(!showReason)}
+    >
+      <div className="flex items-center gap-3">
+        <div className="text-Button-L">{student}</div>
+        <div className="text-caption1 text-neutral-400">
+          {returnTime} 복귀예정
         </div>
       </div>
-    </>
+      {showReason || <p className="hidden group-hover:block">{reason}</p>}
+    </div>
   );
 };