feat: 잔여 티켓 5개 이하 조건에 따라 보이는 뷰 변경

TEAM-BEAT · Jul 11, 2024 · d8b028b · d8b028b
1 parent fd28f49
commit d8b028b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -17,7 +17,7 @@ export const BOOK_DETAIL_INFO = {
     {
       scheduleId: 2,
       performanceDate: "2023-12-29T19:30:00",
-      availableTicketCount: 90,
+      availableTicketCount: 4,
       scheduleNumber: "SECOND",
     },
   ],