feat: 모바일 바텀시트 필터 적용 및 타입 오류 수정

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

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/apps/admin/src/components/TicketTypeSelect/TicketTypeSelect.styles.ts b/apps/admin/src/components/TicketTypeSelect/TicketTypeSelect.styles.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+const MobileMenu = styled.div`
+  padding-bottom: 8px;
+`;
+
+const Item = styled.button<{ isSelected: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  padding: 12px 0;
+  ${({ theme, isSelected }) => (isSelected ? theme.typo.sh1 : theme.typo.b3)};
+  color: ${({ theme, isSelected }) =>
+    isSelected ? theme.palette.grey.g90 : theme.palette.grey.g70};
+  cursor: pointer;
+`;
+
+export default {
+  MobileMenu,
+  Item,
+};
diff --git a/apps/admin/src/components/TicketTypeSelect/index.tsx b/apps/admin/src/components/TicketTypeSelect/index.tsx
@@ -1,6 +1,8 @@
-import { ChevronRightIcon } from '@boolti/icon';
-import { breakpoint } from '@boolti/ui';
+import { CheckIcon, ChevronRightIcon } from '@boolti/icon';
+import { breakpoint, useDialog } from '@boolti/ui';
 import { useTheme } from '@emotion/react';
+import Styled from './TicketTypeSelect.styles';
+
 import Select from 'react-select';
 
 import { useDeviceWidth } from '~/hooks/useDeviceWidth';
@@ -21,17 +23,44 @@ export const options = [
 const TicketTypeSelect = ({ onChange, value }: Props) => {
   const theme = useTheme();
   const width = useDeviceWidth();
+  const isMobile = width < parseInt(theme.breakpoint.mobile, 10);
+
+  const { open, close } = useDialog();
   return (
     <Select
+      onMenuOpen={() => {
+        if (isMobile) {
+          open({
+            title: '필터',
+            mobileType: 'bottomSheet',
+            content: (
+              <Styled.MobileMenu>
+                {options.map((option) => {
+                  const isSelected = option.value === value.value;
+                  return (
+                    <Styled.Item
+                      key={option.value}
+                      isSelected={isSelected}
+                      onClick={() => {
+                        onChange(option);
+                        close();
+                      }}
+                    >
+                      {option.label}
+                      {isSelected && <CheckIcon />}
+                    </Styled.Item>
+                  );
+                })}
+              </Styled.MobileMenu>
+            ),
+          });
+        }
+      }}
       onChange={(newItem) => newItem && onChange(newItem as Value)}
       components={{ DropdownIndicator: ChevronRightIcon }}
       isSearchable={false}
       value={value}
-      options={[
-        { value: 'ALL', label: '티켓 전체' },
-        { value: 'SALE', label: '일반 티켓' },
-        { value: 'INVITE', label: '초청 티켓' },
-      ]}
+      options={options}
       defaultValue={{ value: 'ALL', label: '티켓 전체' }}
       styles={{
         container: (base) => ({
@@ -79,6 +108,7 @@ const TicketTypeSelect = ({ onChange, value }: Props) => {
         }),
         menu: (base) => ({
           ...base,
+          display: isMobile ? 'none' : base.display,
           margin: 0,
         }),
         menuList: () => ({}),

diff --git a/apps/admin/src/pages/ShowEnterancePage/index.tsx b/apps/admin/src/pages/ShowEnterancePage/index.tsx
@@ -186,6 +186,9 @@ const ShowEnterancePage = () => {
                   phoneNumber: reservation.reservationPhoneNumber,
                   ticketName: reservation.ticketName,
                   count: 1,
+                  price: 0,
+                  isCanceled: false,
+                  isNotGiftRegister: false,
                 }))}
                 searchText={debouncedSearchText}
                 emptyText={isEnteredTicket ? '입장 관객이 없어요.' : '미입장 관객이 없어요.'}