feat: 예매자 관리 페이지

apps/admin/package.json

@@ -24,6 +24,7 @@
     "react-hook-form": "^7.50.0",
     "react-intersection-observer": "^9.8.0",
     "react-router-dom": "^6.21.3",
+    "react-select": "^5.8.0",
     "the-new-css-reset": "^1.11.2"
   },
   "devDependencies": {

apps/admin/src/App.tsx

@@ -13,7 +13,9 @@ import OAuthApplePage from './pages/OAuth/OAuthApplePage';
 import OAuthKakaoPage from './pages/OAuth/OAuthKakaoPage';
 import ShowAddCompletePage from './pages/ShowAddCompletePage/ShowAddCompletePage';
 import ShowAddPage from './pages/ShowAddPage/ShowAddPage';
+import ShowEnteryPage from './pages/ShowEnteryPage/ShowEnterancePage';
 import ShowInfoPage from './pages/ShowInfoPage/ShowInfoPage';
+import ShowReservationPage from './pages/ShowReservationPage/ShowReservationPage';
 import ShowTicketPage from './pages/ShowTicketPage/ShowTicketPage';
 import SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage';
 
@@ -86,8 +88,8 @@ const privateRoutes = [
       { path: PATH.SHOW_ADD_TICKET, element: <ShowAddPage step="ticket" /> },
       { path: PATH.SHOW_INFO, element: <ShowInfoPage /> },
       { path: PATH.SHOW_TICKET, element: <ShowTicketPage /> },
-      { path: PATH.SHOW_RESERVATION, element: null },
-      { path: PATH.SHOW_ENTRY, element: null },
+      { path: PATH.SHOW_RESERVATION, element: <ShowReservationPage /> },
+      { path: PATH.SHOW_ENTRY, element: <ShowEnteryPage /> },
       {
         path: PATH.SHOW_ADD_COMPLETE,
         element: <ShowAddCompletePage />,

apps/admin/src/components/ShowList/index.tsx

@@ -51,6 +51,7 @@ const ShowList = ({ shows }: Props) => {
       {isEmpty ? (
         <ShowListItem
           isEmpty
+          id={0}
           thumbnailPath=""
           title=""
           date=""

apps/admin/src/components/ShowListItem/index.tsx

@@ -2,11 +2,15 @@ import { ChevronRightIcon } from '@boolti/icon';
 import { Badge } from '@boolti/ui';
 import { differenceInDays, format, isAfter, isBefore, isToday } from 'date-fns';
 import { ko } from 'date-fns/locale';
+import { generatePath, useNavigate } from 'react-router-dom';
+
+import { PATH } from '~/constants/routes';
 
 import Styled from './ShowListItem.styles';
 
 interface Props {
   isEmpty?: boolean;
+  id: number;
   title: string;
   date: string;
   hostName: string;
@@ -33,13 +37,13 @@ function getBadgeProps(
       colorTheme: 'grey',
     };
   }
-  if (isBefore(salesStartTime, today)) {
+  if (isBefore(today, salesStartTime)) {
     return {
-      children: `티켓 판매 오픈 D-${differenceInDays(today, salesStartTime)}`,
+      children: `티켓 판매 오픈 D-${differenceInDays(salesStartTime, today)}`,
       colorTheme: 'purple',
     };
   }
-  if (isAfter(salesStartTime, today) && isBefore(salesEndTime, today)) {
+  if (isAfter(today, salesStartTime) && isBefore(today, salesEndTime)) {
     return {
       children: '티켓 판매 중',
       colorTheme: 'blue',
@@ -54,18 +58,24 @@ function getBadgeProps(
 const ShowListItem = ({
   isEmpty,
   thumbnailPath,
+  id,
   title,
   date,
   hostName,
   salesStartTime,
   salesEndTime,
 }: Props) => {
+  const navigate = useNavigate();
   return (
     <Styled.Container as={isEmpty ? 'div' : 'li'}>
       {isEmpty ? (
         <Styled.EmptyText>아직 등록한 공연이 없어요.</Styled.EmptyText>
       ) : (
-        <Styled.Button>
+        <Styled.Button
+          onClick={() => {
+            navigate(generatePath(PATH.SHOW_INFO, { showId: id }));
+          }}
+        >
           <Styled.Poster thumbnailPath={thumbnailPath} />
           <Styled.TextContainer>
             <Styled.TitleContainer>

apps/admin/src/components/TicketTypeSelect/index.tsx

@@ -0,0 +1,82 @@
+import { ChevronRightIcon } from '@boolti/icon';
+import { useTheme } from '@emotion/react';
+import Select from 'react-select';
+
+interface Props {
+  onChange: (value: string) => void;
+}
+
+const TicketTypeSelect = ({ onChange }: Props) => {
+  const theme = useTheme();
+  return (
+    <Select
+      onChange={(newItem) => newItem?.value && onChange(newItem.value)}
+      components={{ DropdownIndicator: ChevronRightIcon }}
+      isSearchable={false}
+      options={[
+        { value: 'ALL', label: '티켓 전체' },
+        { value: 'SALE', label: '일반 티켓' },
+        { value: 'INVITE', label: '초청 티켓' },
+      ]}
+      defaultValue={{ value: 'ALL', label: '티켓 전체' }}
+      styles={{
+        control: (base) => ({
+          ...base,
+          cursor: 'pointer',
+          border: 'none !important',
+          boxShadow: 'none !important',
+          padding: 12,
+        }),
+        valueContainer: (base) => ({
+          ...base,
+          border: 'none',
+          padding: 0,
+          margin: 0,
+        }),
+        singleValue: (base) => ({
+          ...base,
+          fontSize: '15px',
+          lineHeight: '23px',
+          margin: 0,
+          color: theme.palette.grey.g90,
+        }),
+        indicatorSeparator: () => ({
+          display: 'none',
+        }),
+        indicatorsContainer: () => ({
+          marginLeft: 12,
+          width: 20,
+          height: 20,
+          '& > svg': {
+            transform: 'rotate(90deg)',
+          },
+        }),
+        input: (base) => ({
+          ...base,
+          fontSize: '15px',
+          lineHeight: '23px',
+          padding: 0,
+          margin: 0,
+          color: theme.palette.grey.g90,
+        }),
+        menu: (base) => ({
+          ...base,
+          margin: 0,
+        }),
+        menuList: () => ({}),
+        option: (base, state) => ({
+          ...base,
+          cursor: 'pointer',
+          padding: '8px 20px 8px 12px',
+          fontSize: 14,
+          fontWeight: state.isSelected ? 600 : 400,
+          color: theme.palette.grey.g90,
+          lineHeight: '22px',
+          background: 'none !important',
+        }),
+      }}
+    />
+  );
+};
+
+export default TicketTypeSelect;

apps/admin/src/pages/ShowEnteryPage/ShowEnterancePage.tsx

@@ -0,0 +1,22 @@
+import { useShowDetail } from '@boolti/api';
+import { useParams } from 'react-router-dom';
+
+import ShowDetailLayout from '~/components/ShowDetailLayout';
+
+import Styled from './ShowEnteryPage.styles';
+
+const ShowEnteryPage = () => {
+  const params = useParams<{ showId: string }>();
+
+  const { data: show } = useShowDetail(Number(params!.showId));
+
+  if (!show) return null;
+
+  return (
+    <ShowDetailLayout showName={show.name}>
+      <Styled.Container></Styled.Container>
+    </ShowDetailLayout>
+  );
+};
+
+export default ShowEnteryPage;

apps/admin/src/pages/ShowEnteryPage/ShowEnteryPage.styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  padding: 0 20px;
+  margin: 40px 0 68px;
+`;
+
+export default {
+  Container,
+};