Merge pull request #1455 from innovationacademy-kr/fe/dev/profile_pag…

…e_overdue_status/#1453 [FE] FIX: 연체 시 프로필 페이지에서 연체 기간을 표시하도록 수정 #1453
innovationacademy-kr · Nov 27, 2023 · 340f346 · 340f346
2 parents 489b229 + 1e22051
commit 340f346
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/frontend/src/components/Card/CardStyles.ts b/frontend/src/components/Card/CardStyles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import CabinetStatus from "@/types/enum/cabinet.status.enum";
 
 export const CardContentWrapper = styled.div`
   background-color: var(--white);
@@ -23,7 +24,11 @@ export const ContentInfoStyled = styled.div`
   margin: 0 0 0 10px;
 `;
 
-export const ContentDeatilStyled = styled.div`
+export const ContentDeatilStyled = styled.div<{
+  status?: CabinetStatus;
+}>`
+  color: ${(props) =>
+    props.status === CabinetStatus.OVERDUE ? "var(--expired)" : ""};
   display: flex;
   margin: 5px 10px 5px 10px;
   font-weight: bold;

diff --git a/frontend/src/components/Card/LentInfoCard/LentInfoCard.container.tsx b/frontend/src/components/Card/LentInfoCard/LentInfoCard.container.tsx
@@ -4,6 +4,7 @@ import LentInfoCard from "@/components/Card/LentInfoCard/LentInfoCard";
 import { getDefaultCabinetInfo } from "@/components/TopNav/TopNavButtonGroup/TopNavButtonGroup";
 import { CabinetInfo } from "@/types/dto/cabinet.dto";
 import { LentDto } from "@/types/dto/lent.dto";
+import CabinetStatus from "@/types/enum/cabinet.status.enum";
 import CabinetType from "@/types/enum/cabinet.type.enum";
 import { getRemainingTime } from "@/utils/dateUtils";
 
@@ -21,7 +22,7 @@ export interface MyCabinetInfo {
   expireDate?: Date;
   isLented: boolean;
   previousUserName: string;
-  status: string;
+  status: CabinetStatus;
 }
 
 const findLentInfoByName = (lents: LentDto[], name: string) => {

diff --git a/frontend/src/components/Card/LentInfoCard/LentInfoCard.tsx b/frontend/src/components/Card/LentInfoCard/LentInfoCard.tsx
@@ -85,8 +85,10 @@ const LentInfoCard = ({
             </ContentDeatilStyled>
           </CardContentStyled>
           <CardContentStyled>
-            <ContentInfoStyled>남은 기간</ContentInfoStyled>
-            <ContentDeatilStyled>
+            <ContentInfoStyled>
+              {cabinetInfo?.status === "OVERDUE" ? "연체 기간" : "남은 기간"}
+            </ContentInfoStyled>
+            <ContentDeatilStyled status={cabinetInfo.status as CabinetStatus}>
               {cabinetInfo?.expireDate ? `${cabinetInfo.dateLeft}일` : "-"}
             </ContentDeatilStyled>
           </CardContentStyled>