코드 오류 수정

DSM-PICK · Mar 30, 2024 · f5ccf82 · f5ccf82
2 parents d5ca419 + fcebeee
commit f5ccf82
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
+export default ReasonList;
diff --git 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
@@ -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
@@ -299,6 +299,7 @@ const config: Config = {
         "30": "7.438rem",
         "29": "7.25rem",
         "25": "6.25rem",
+        "27%": "27%",
       },
       height: {
         "140": "36.625rem",