From 86e2d7c22d94211a6286dbdfc9b066c391d6a7d4 Mon Sep 17 00:00:00 2001
From: hyuna <hyuna_0525@dsm.hs.kr>
Date: Wed, 10 Jul 2024 14:45:05 +0900
Subject: [PATCH] =?UTF-8?q?chore=20:=20=EC=99=B8=EC=B6=9C=EC=9E=90=20?=
 =?UTF-8?q?=EC=82=AC=EC=9C=A0=EB=B3=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/common/list/out/page.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/components/common/list/out/page.tsx b/src/app/components/common/list/out/page.tsx
index 0742ebe..94730a3 100644
--- 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>
   );
 };