feat: 모바일 카드 타입별 스타일 대응

Nexters · Nov 11, 2024 · aa03572 · aa03572
1 parent ef79247
commit aa03572
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/apps/admin/src/components/MobileCardList/MobileCardList.style.ts b/apps/admin/src/components/MobileCardList/MobileCardList.style.ts
@@ -66,9 +66,11 @@ const TicketInfoText = styled.div`
   color: ${({ theme }) => theme.palette.grey.g70};
 `;
 
-const TicketPriceText = styled.div`
+const TicketPriceText = styled.div<{ type: 'PRICE' | 'CANCELED' | 'NOT_REGISTERED' }>`
   ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.grey.g90};
+  color: ${({ theme, type }) =>
+    type === 'PRICE' ? theme.palette.grey.g90 : theme.palette.grey.g30};
+  text-decoration: ${({ type }) => (type === 'CANCELED' ? 'line-through' : undefined)};
 `;
 
 const ResetButton = styled.button`

diff --git a/apps/admin/src/components/MobileCardList/index.tsx b/apps/admin/src/components/MobileCardList/index.tsx
@@ -13,6 +13,8 @@ type Item = {
   phoneNumber: string;
   ticketName: string;
   price: number;
+  isCanceled: boolean;
+  isNotGiftRegister: boolean;
   date?: string;
   count: number;
 };
@@ -44,7 +46,13 @@ function MobileCardList({ searchText, items, emptyText, onClickReset }: Props) {
             <Styled.TicketInfoText>
               {item.ticketName} · {item.count}매
             </Styled.TicketInfoText>
-            <Styled.TicketPriceText>{item.price.toLocaleString()}원</Styled.TicketPriceText>
+            <Styled.TicketPriceText
+              type={
+                item.isCanceled ? 'CANCELED' : item.isNotGiftRegister ? 'NOT_REGISTERED' : 'PRICE'
+              }
+            >
+              {item.isNotGiftRegister ? '선물 미등록' : `${item.price.toLocaleString()}원`}
+            </Styled.TicketPriceText>
           </Styled.TicketDetailTextWrap>
         </Styled.Row>
       </Styled.CardItem>

diff --git a/apps/admin/src/components/ReservationTable/index.tsx b/apps/admin/src/components/ReservationTable/index.tsx
@@ -193,13 +193,13 @@ const ReservationTable = ({
       </Styled.Container>
       <Tooltip
         style={{
-          opacity: 0.85,
           backgroundColor: palette.grey.g90,
           filter: 'drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10))',
           padding: '6px 8px',
           borderRadius: '4px',
           zIndex: 999,
         }}
+        opacity={0.85}
         anchorSelect=".ticket-tooltip"
         id="ticket-tooltip"
         place="bottom"
@@ -208,7 +208,7 @@ const ReservationTable = ({
           return (
             <Styled.TooltipItemColumn>
               {ticketIds.map((id, index) => (
-                <Styled.TooltipItemRow>
+                <Styled.TooltipItemRow key={id}>
                   <span>No.{index + 1}</span>
                   <span>{id}</span>
                 </Styled.TooltipItemRow>

diff --git a/apps/admin/src/pages/ShowReservationPage/index.tsx b/apps/admin/src/pages/ShowReservationPage/index.tsx
@@ -127,7 +127,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'COMPLETE'}
               >
-                결제 완료 <span>{completeCount}</span>
+                {isMobile ? '완료' : '결제 완료'} <span>{completeCount}</span>
               </Styled.TicketReservationSummaryButton>
               <Styled.TicketReservationSummaryButton
                 onClick={() => {
@@ -136,7 +136,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'WAIT'}
               >
-                결제 대기 <span>{waitCount}</span>
+                {isMobile ? '대기' : '결제 대기'} <span>{waitCount}</span>
               </Styled.TicketReservationSummaryButton>
               <Styled.TicketReservationSummaryButton
                 onClick={() => {
@@ -145,7 +145,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'CANCEL'}
               >
-                결제 취소 <span>{cancelCount}</span>
+                {isMobile ? '취소' : '결제 취소'} <span>{cancelCount}</span>
               </Styled.TicketReservationSummaryButton>
             </Styled.TicketReservationSummaryButtonContainer>
             <Styled.FilterContainer>
@@ -195,6 +195,8 @@ const ShowReservationPage = () => {
                   ticketName: reservation.salesTicketType?.ticketName ?? '',
                   count: reservation.tickets.length,
                   price: (reservation.salesTicketType?.price ?? 0) * reservation.tickets.length,
+                  isCanceled: !!reservation.cancelInfo,
+                  isNotGiftRegister: !!reservation.gift && !reservation.gift?.done,
                 }))}
                 searchText={debouncedSearchText}
                 emptyText={emptyLabel[selectedTicketStatus]}