From d8b028b3ddb91218672c538e984265722eb544c8 Mon Sep 17 00:00:00 2001
From: jerry <becomegoodguy@gmail.com>
Date: Fri, 12 Jul 2024 01:12:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=94=EC=97=AC=20=ED=8B=B0=EC=BC=93?=
 =?UTF-8?q?=205=EA=B0=9C=20=EC=9D=B4=ED=95=98=20=EC=A1=B0=EA=B1=B4?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/book/Book.tsx                       |  3 +++
 .../book/components/count/Count.styled.ts     |  8 ++++++
 src/pages/book/components/count/Count.tsx     | 26 ++++++++++++++-----
 src/pages/book/constants/dummy.ts             |  2 +-
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/pages/book/Book.tsx b/src/pages/book/Book.tsx
index 94eb2ec4..c715f047 100644
--- a/src/pages/book/Book.tsx
+++ b/src/pages/book/Book.tsx
@@ -101,6 +101,9 @@ const Book = () => {
         onMinusClick={onMinusClick}
         onPlusClick={onPlusClick}
         ticketPrice={detail.ticketPrice}
+        availableTicketCount={
+          selectedValue ? detail.scheduleList[selectedValue - 1].availableTicketCount : undefined
+        }
       />
 
       <BookerInfo bookerInfo={bookerInfo} onChangeBookerInfo={onChangeBookerInfo} />
diff --git a/src/pages/book/components/count/Count.styled.ts b/src/pages/book/components/count/Count.styled.ts
index 54342a50..0201e620 100644
--- a/src/pages/book/components/count/Count.styled.ts
+++ b/src/pages/book/components/count/Count.styled.ts
@@ -17,6 +17,14 @@ export const Container = styled.div`
   width: 100%;
 `;
 
+export const Box = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+`;
+
 export const Title = styled.h2`
   margin-bottom: 0.2rem;
 
diff --git a/src/pages/book/components/count/Count.tsx b/src/pages/book/components/count/Count.tsx
index 1b1c1d0f..be9042f4 100644
--- a/src/pages/book/components/count/Count.tsx
+++ b/src/pages/book/components/count/Count.tsx
@@ -6,17 +6,31 @@ interface CountProps {
   onMinusClick: () => void;
   onPlusClick: () => void;
   ticketPrice: number;
+  availableTicketCount?: number;
 }
 
-const Count = ({ round, onMinusClick, onPlusClick, ticketPrice }: CountProps) => {
+const Count = ({
+  round,
+  onMinusClick,
+  onPlusClick,
+  ticketPrice,
+  availableTicketCount,
+}: CountProps) => {
   return (
     <S.Wrapper>
       <S.Container>
-        <div>
-          <S.Title>매수 선택</S.Title>
-          <S.Comment>현재 잔여 티켓이 5매 이하입니다.</S.Comment>
-        </div>
-        <Stepper max={3} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />
+        <S.Box>
+          <div>
+            <S.Title>매수 선택</S.Title>
+            {availableTicketCount && availableTicketCount <= 5 ? (
+              <S.Comment>현재 잔여 티켓이 5매 이하입니다.</S.Comment>
+            ) : (
+              <></>
+            )}
+          </div>
+
+          <Stepper max={3} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />
+        </S.Box>
       </S.Container>
       <div>
         <S.PricePrefix>총</S.PricePrefix>
diff --git a/src/pages/book/constants/dummy.ts b/src/pages/book/constants/dummy.ts
index 5f14e8c1..f937a671 100644
--- a/src/pages/book/constants/dummy.ts
+++ b/src/pages/book/constants/dummy.ts
@@ -17,7 +17,7 @@ export const BOOK_DETAIL_INFO = {
     {
       scheduleId: 2,
       performanceDate: "2023-12-29T19:30:00",
-      availableTicketCount: 90,
+      availableTicketCount: 4,
       scheduleNumber: "SECOND",
     },
   ],