From fcebeee7f417b50006899ef8ac7df6d9895ad752 Mon Sep 17 00:00:00 2001
From: hyuna <hyuna_0525@dsm.hs.kr>
Date: Sat, 30 Mar 2024 11:21:01 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/list/accept/page.tsx    |  2 +-
 .../common/list/after/delete/page.tsx         |  2 +-
 .../components/common/list/before/index.tsx   |  4 +-
 .../components/common/list/reason/page.tsx    | 20 +++--
 src/app/outAccept/page.tsx                    |  2 +
 src/app/outList/reason/page.tsx               | 85 ++++++++-----------
 tailwind.config.ts                            |  1 +
 7 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/app/components/common/list/accept/page.tsx b/src/app/components/common/list/accept/page.tsx
index eec36b0..b16b3a5 100644
--- a/src/app/components/common/list/accept/page.tsx
+++ b/src/app/components/common/list/accept/page.tsx
@@ -19,7 +19,7 @@ const AcceptList: React.FC<AcceptProps> = ({ student, time, why, onClick }) => {
 
   return (
     <div
-      className={`flex w-80 flex-col px-3 py-3 rounded-lg group h-13 gap-2 active:bg-primary-800 ${
+      className={`flex w-80 flex-col px-3 py-3 rounded-lg group h-fit gap-2 active:bg-primary-800 ${
         isActive
           ? "bg-primary-900 h-auto"
           : " bg-white hover:h-auto hover:bg-primary-900 h-13"
diff --git a/src/app/components/common/list/after/delete/page.tsx b/src/app/components/common/list/after/delete/page.tsx
index c4d15b4..2d5ec3e 100644
--- a/src/app/components/common/list/after/delete/page.tsx
+++ b/src/app/components/common/list/after/delete/page.tsx
@@ -25,7 +25,7 @@ const AfterDelete: React.FC<AfterdeleteProps> = ({ student, id }) => {
   const onDelete = async () => {
     try {
       await DeleteMutate(
-        { id: id },
+        { id },
         {
           onSuccess() {
             alert("삭제되었습니다");
diff --git a/src/app/components/common/list/before/index.tsx b/src/app/components/common/list/before/index.tsx
index a02945b..66b1094 100644
--- a/src/app/components/common/list/before/index.tsx
+++ b/src/app/components/common/list/before/index.tsx
@@ -61,8 +61,8 @@ const PreviousList: React.FC<getProp> = ({ id, userName }) => {
   }, []);
 
   return (
-    <div className="flex h-13">
-      <div className="relative h-5">
+    <div className="flex h-13 w-29%">
+      <div className="relative h-5 w-full">
         <div
           className="group w-77 whitespace-nowrap gap-4 py-4 px-6 rounded-lg cursor-pointer flex items-center justify-between bg-white"
           onClick={toggleDropdown}
diff --git a/src/app/components/common/list/reason/page.tsx b/src/app/components/common/list/reason/page.tsx
index 3517ecc..cd88b37 100644
--- a/src/app/components/common/list/reason/page.tsx
+++ b/src/app/components/common/list/reason/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { getToday } from "@/utils/date";
 
 interface ReasonListProps {
@@ -13,17 +14,26 @@ const ReasonList: React.FC<ReasonListProps> = ({
   why,
   endTime,
 }) => {
+  const MAX_WHY_LENGTH = 69;
+
+  let whyDisplay = why;
+  if (why.length > MAX_WHY_LENGTH) {
+    whyDisplay = why.substring(0, MAX_WHY_LENGTH) + "...";
+  }
+
   return (
-    <div className=" flex flex-col bg-white px-5 py-5 gap-3 w-120 rounded-lg">
-      <div className=" flex gap-4">
+    <div className="flex flex-col bg-white px-5 py-5 h-fit gap-3 w-120 rounded-lg">
+      <div className="flex gap-4">
         <div className="font-sans text-label1 text-neutral-50">{student}</div>
-        <div className=" text-neutral-400">
+        <div className="text-neutral-400">
           {getToday()} • {time}~{endTime}
         </div>
       </div>
-      <div className=" h-11 text-neutral-200 font-sans text-label1">{why}</div>
+      <div className="h-11 text-neutral-200 font-sans text-label1 text-wrap">
+        {whyDisplay}
+      </div>
     </div>
   );
 };
 
-export default ReasonList
\ No newline at end of file
+export default ReasonList;
diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx
index d4baa44..17e1456 100644
--- a/src/app/outAccept/page.tsx
+++ b/src/app/outAccept/page.tsx
@@ -197,6 +197,8 @@ const OutAccept = () => {
     router.push("/outAccept/previous");
   };
 
+  const ChangeText = () => {};
+
   return (
     <BackGround
       linkChildren="외출 수락"
diff --git a/src/app/outList/reason/page.tsx b/src/app/outList/reason/page.tsx
index 8c0b8bd..f0c37f5 100644
--- a/src/app/outList/reason/page.tsx
+++ b/src/app/outList/reason/page.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { AlloutList, ReturnHome } from "@/apis/outList/list";
 import { getStudentString } from "@/utils/until";
+import { BackGround } from "@/app/components/common/background";
 
 interface OutListData {
   id: string;
@@ -94,57 +95,45 @@ const Reason = () => {
   }, []);
 
   return (
-    <div className="h-dvh">
-      <Header />
-      <div className="flex flex-col gap-7 px-100 py-16 h-90%">
-        <div className="text-neutral-200 text-sub-title3-B">
-          <Link href="/main">홈</Link> &gt;
-          <Link href="/outList">외출자 목록</Link> &gt;
-          {selectedTab ? "외출자 사유" : " 조기 귀가 사유"}
-        </div>
-        <div className="flex justify-between">
-          <div className="flex font-sans text-heading4 text-gray-900 gap-4 items-center">
-            {selectedTab ? "외출자 사유" : "조기 귀가 사유"}
-            <div className="text-neutral-200 text-heading5">
-              {getFullToday()}
-            </div>
-          </div>
-          <div className="flex items-center">
-            <DoubleTab
-              firstChildren="외출"
-              secondChildren="조기귀가"
-              onClick={onClickTab}
+    <BackGround
+      linkChildren={`외출자 목록 > ${
+        selectedTab ? "외출자 사유" : " 조기 귀가 사유"
+      } `}
+      subTitle={selectedTab ? "외출자 사유" : " 조기 귀가 사유"}
+      secondTitle={getFullToday()}
+      DropChildren={
+        <DoubleTab
+          firstChildren="외출"
+          secondChildren="조기귀가"
+          onClick={onClickTab}
+        />
+      }
+    >
+      {selectedTab ? (
+        <div className="flex flex-wrap gap-5 justify-between">
+          {data.map((item, index) => (
+            <ReasonList
+              key={index}
+              time={item.start_time}
+              endTime={item.end_time}
+              student={student(item)}
+              why={item.reason}
             />
-          </div>
+          ))}
         </div>
-        <div className="w-auto rounded-xl bg-primary-1200 h-full px-10 py-10 overflow-y-scroll scrollbar-hide">
-          {selectedTab ? (
-            <div className="flex flex-wrap gap-5 justify-between">
-              {data.map((item, index) => (
-                <ReasonList
-                  key={index}
-                  time={item.start_time}
-                  endTime={item.end_time}
-                  student={student(item)}
-                  why={item.reason}
-                />
-              ))}
-            </div>
-          ) : (
-            <div className="flex flex-wrap gap-5 justify-between">
-              {homeData.map((item, index) => (
-                <ReasonList
-                  key={index}
-                  time={item.start_time}
-                  student={student(item)}
-                  why={item.reason}
-                />
-              ))}
-            </div>
-          )}
+      ) : (
+        <div className="flex flex-wrap gap-5 justify-between">
+          {homeData.map((item, index) => (
+            <ReasonList
+              key={index}
+              time={item.start_time}
+              student={student(item)}
+              why={item.reason}
+            />
+          ))}
         </div>
-      </div>
-    </div>
+      )}
+    </BackGround>
   );
 };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e594efe..7a51588 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -299,6 +299,7 @@ const config: Config = {
         "30": "7.438rem",
         "29": "7.25rem",
         "25": "6.25rem",
+        "27%": "27%",
       },
       height: {
         "140": "36.625rem",