[FE] FIX: 대여중, 대여중 아님, 패널티 상태에 따라 LentInfoCard 내 사물함 색깔 조정 #1410

innovationacademy-kr · Nov 17, 2023 · f0d1e84 · f0d1e84
1 parent 0107a09
commit f0d1e84
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/frontend/src/components/Card/LentInfoCard/LentInfoCard.container.tsx b/frontend/src/components/Card/LentInfoCard/LentInfoCard.container.tsx
@@ -1,5 +1,5 @@
 import { useRecoilValue } from "recoil";
-import { myCabinetInfoState } from "@/recoil/atoms";
+import { myCabinetInfoState, targetUserInfoState } from "@/recoil/atoms";
 import LentInfoCard from "@/components/Card/LentInfoCard/LentInfoCard";
 import { getDefaultCabinetInfo } from "@/components/TopNav/TopNavButtonGroup/TopNavButtonGroup";
 import { CabinetInfo } from "@/types/dto/cabinet.dto";
@@ -16,10 +16,13 @@ export interface MyCabinetInfo {
   expireDate?: Date;
   isLented: boolean;
   previousUserName: string;
+  status: string;
 }
 
 const LentInfoCardContainer = () => {
   const myCabinetInfo = useRecoilValue(myCabinetInfoState);
+  const targetUserInfo = useRecoilValue(targetUserInfoState);
+  const bannedAt = targetUserInfo ? !!targetUserInfo.bannedAt : false;
 
   const getCabinetUserList = (selectedCabinetInfo: CabinetInfo): string => {
     const { lents } = selectedCabinetInfo;
@@ -48,6 +51,7 @@ const LentInfoCardContainer = () => {
             : undefined,
         isLented: myCabinetInfo.lents.length !== 0,
         previousUserName: myCabinetInfo.previousUserName,
+        status: myCabinetInfo.status,
       }
     : {
         floor: defaultCabinetInfo.floor,
@@ -60,9 +64,10 @@ const LentInfoCardContainer = () => {
         expireDate: undefined,
         isLented: false,
         previousUserName: "",
+        status: defaultCabinetInfo.status,
       };
 
-  return <LentInfoCard cabinetInfo={cabinetLentInfo} />;
+  return <LentInfoCard cabinetInfo={cabinetLentInfo} bannedAt={bannedAt} />;
 };
 
 export default LentInfoCardContainer;
diff --git a/frontend/src/components/Card/LentInfoCard/LentInfoCard.tsx b/frontend/src/components/Card/LentInfoCard/LentInfoCard.tsx
@@ -7,11 +7,22 @@ import {
   ContentInfoStyled,
 } from "@/components/Card/CardStyles";
 import { MyCabinetInfo } from "@/components/Card/LentInfoCard/LentInfoCard.container";
-import { cabinetIconSrcMap } from "@/assets/data/maps";
+import {
+  cabinetIconSrcMap,
+  cabinetLabelColorMap,
+  cabinetStatusColorMap,
+} from "@/assets/data/maps";
+import CabinetStatus from "@/types/enum/cabinet.status.enum";
 import CabinetType from "@/types/enum/cabinet.type.enum";
 import { formatDate, getRemainingTime } from "@/utils/dateUtils";
 
-const LentInfoCard = ({ cabinetInfo }: { cabinetInfo: MyCabinetInfo }) => {
+const LentInfoCard = ({
+  cabinetInfo,
+  bannedAt,
+}: {
+  cabinetInfo: MyCabinetInfo;
+  bannedAt: boolean;
+}) => {
   const calculateFontSize = (userCount: number): string => {
     const baseSize = 1;
     const decrement = 0.2;
@@ -31,8 +42,15 @@ const LentInfoCard = ({ cabinetInfo }: { cabinetInfo: MyCabinetInfo }) => {
     >
       <>
         <CabinetInfoWrapper>
-          <CabinetRectangleStyled isMine={cabinetInfo?.cabinetId !== 0}>
-            {cabinetInfo.visibleNum !== 0 ? cabinetInfo.visibleNum : "-"}
+          <CabinetRectangleStyled
+            status={cabinetInfo.status as CabinetStatus}
+            banned={!!bannedAt}
+          >
+            {cabinetInfo.visibleNum !== 0
+              ? cabinetInfo.visibleNum
+              : !!bannedAt
+              ? "!"
+              : "-"}
           </CabinetRectangleStyled>
           <CabinetInfoDetailStyled>
             <CabinetInfoTextStyled
@@ -110,22 +128,34 @@ const CabinetInfoWrapper = styled.div`
 `;
 
 const CabinetRectangleStyled = styled.div<{
-  isMine: boolean;
+  status: CabinetStatus;
+  banned?: boolean;
 }>`
   width: 60px;
   height: 60px;
   line-height: 60px;
   border-radius: 10px;
   margin-right: 20px;
-  background-color: var(--mine);
+  background-color: ${(props) =>
+    props.banned
+      ? "var(--expired)"
+      : props.status === "FULL"
+      ? "var(--mine)"
+      : cabinetStatusColorMap[props.status]};
+  color: ${(props) =>
+    props.banned
+      ? "var(--white)"
+      : props.status && props.status !== "PENDING"
+      ? cabinetLabelColorMap[props.status]
+      : "var(--black)"};
   font-size: 32px;
   text-align: center;
 `;
 
 const CabinetInfoDetailStyled = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
 `;
 
 const CabinetInfoTextStyled = styled.div<{
@@ -147,10 +177,8 @@ const CabinetUserListWrapper = styled.div`
 `;
 
 const CabinetIconStyled = styled.div<{ cabinetType: CabinetType }>`
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
+  width: 18px;
+  height: 18px;
   margin-right: 10px;
   background-image: url(${(props) => cabinetIconSrcMap[props.cabinetType]});
   background-size: contain;

diff --git a/frontend/src/components/TopNav/TopNavButtonGroup/TopNavButtonGroup.tsx b/frontend/src/components/TopNav/TopNavButtonGroup/TopNavButtonGroup.tsx
@@ -27,7 +27,7 @@ export const getDefaultCabinetInfo = () => ({
   lentType: CabinetType.PRIVATE,
   title: null,
   maxUser: 0,
-  status: CabinetStatus.AVAILABLE,
+  status: CabinetStatus.PENDING,
   section: "",
   lents: [] as LentDto[],
   statusNote: "",