[Feat/#372] 예매 조회 페이지 취소 상태 추가

src/constants/bookingStatus.ts

@@ -0,0 +1,11 @@
+export const bookingStatusText = {
+  CHECKING_PAYMENT: "입금 확인 예정",
+  BOOKING_CONFIRMED: "입금 완료",
+  BOOKING_CANCELLED: "예매 취소",
+};
+
+export type bookingStatusTypes = keyof typeof bookingStatusText;
+
+export interface DefaultDepositProps {
+  $status;
+}

src/pages/lookup/Lookup.tsx

@@ -33,6 +33,7 @@ interface LookupProps {
   accountNumber: string;
   accountHolder: string;
   dueDate: number;
+  bookingStatus: string;
   isPaymentCompleted: boolean;
   createdAt: string;
   posterImage: string;

src/pages/lookup/components/LookupCard.styled.ts

@@ -1,5 +1,6 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { IconArrowRight } from "@assets/svgs";
+import { DefaultDepositProps } from "@constants/bookingStatus";
 
 export const LookupCardWrapper = styled.section`
   display: flex;
@@ -91,18 +92,26 @@ export const DepositLayout = styled.section`
   justify-content: center;
 `;
 
-export const CheckingDeposit = styled.div`
+export const CheckingDeposit = styled.div<DefaultDepositProps>`
   display: flex;
+  ${({ $status }) => {
+    switch ($status) {
+      case "CHECKING_PAYMENT":
+        return css`
+          color: ${({ theme }) => theme.colors.yellow_400};
+        `;
+      case "BOOKING_CONFIRMED":
+        return css`
+          color: ${({ theme }) => theme.colors.green};
+        `;
+      case "BOOKING_CANCELLED":
+        return css`
+          color: ${({ theme }) => theme.colors.red};
+        `;
+    }
+  }}
 
   ${({ theme }) => theme.fonts["caption2-medi"]};
-  color: ${({ theme }) => theme.colors.red};
-`;
-
-export const CheckedDeposit = styled.div`
-  display: flex;
-
-  ${({ theme }) => theme.fonts["caption2-medi"]};
-  color: ${({ theme }) => theme.colors.green};
 `;
 
 export const AccountLayout = styled.button`

src/pages/lookup/components/LookupCard.tsx

@@ -1,6 +1,7 @@
 import { useModal } from "@hooks";
 import BankAccount from "@pages/test/modalTest/BankAccount";
 import { getBankNameKr } from "@utils/getBankName";
+import { bookingStatusText, bookingStatusTypes } from "@constants/bookingStatus";
 import { useNavigate } from "react-router-dom";
 import { LookupProps } from "../types/lookupType";
 import * as S from "./LookupCard.styled";
@@ -13,12 +14,12 @@ const LookupCard = ({
   scheduleNumber,
   performanceVenue,
   purchaseTicketCount,
-  isPaymentCompleted,
   bankName,
   bookerName,
   accountHolder,
   accountNumber,
   dueDate,
+  bookingStatus,
   totalPaymentAmount,
 }: LookupProps) => {
   const navigate = useNavigate();
@@ -89,14 +90,12 @@ const LookupCard = ({
         <S.Context>
           <S.SubTitle>입금상태</S.SubTitle>
           <S.DepositLayout>
-            {isPaymentCompleted ? (
-              <S.CheckedDeposit>입금 완료</S.CheckedDeposit>
-            ) : (
-              <S.CheckingDeposit>입금 확인 중</S.CheckingDeposit>
-            )}
+            <S.CheckingDeposit $status={bookingStatus}>
+              {bookingStatusText[bookingStatus as bookingStatusTypes]}
+            </S.CheckingDeposit>
           </S.DepositLayout>
         </S.Context>
-        {dueDate >= 0 && totalPaymentAmount > 0 ? (
+        {dueDate >= 0 && totalPaymentAmount > 0 && bookingStatus === "CHECKING_PAYMENT" ? (
           <S.AccountLayout onClick={() => handleModal(getBankNameKr(bankName), accountNumber)}>
             <S.Account>계좌번호</S.Account>
           </S.AccountLayout>

src/pages/lookup/components/LookupWrapper.tsx

@@ -13,18 +13,18 @@ const LookupWrapper = ({ handleBtn, ...item }: LookupProps) => {
         <S.LookupCardLeft>
           <S.LookupImage src={item.posterImage} />
           <Label dueDate={item.dueDate} />
-          {item.dueDate >= 0 ? (
+          {item.dueDate < 0 || item.bookingStatus === "BOOKING_CANCELLED" ? (
+            <Button variant="line" disabled={true} size={{ width: "10.8rem", height: "3.6rem" }}>
+              취소하기
+            </Button>
+          ) : (
             <Button
               variant="line"
               size={{ width: "10.8rem", height: "3.6rem" }}
               onClick={handleBtn}
             >
               취소하기
             </Button>
-          ) : (
-            <Button variant="line" disabled={true} size={{ width: "10.8rem", height: "3.6rem" }}>
-              취소하기
-            </Button>
           )}
         </S.LookupCardLeft>
         <LookupCard {...item}></LookupCard>

src/pages/lookup/types/lookupType.ts

@@ -15,7 +15,7 @@ export interface LookupProps {
   accountNumber: string;
   accountHolder: string;
   dueDate: number;
-  isPaymentCompleted: boolean;
+  bookingStatus: string;
   createdAt: string;
   posterImage: string;
   totalPaymentAmount: number;