[FE] 생성한 행사 모아보기 페이지

client/src/apis/request/event.ts

@@ -1,4 +1,4 @@
-import {Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
@@ -53,3 +53,9 @@ export const requestPatchUser = async (args: RequestPatchUser) => {
     },
   });
 };
+
+export const requestGetCreatedEvents = async () => {
+  return await requestGet<CreatedEvents>({
+    endpoint: `${USER_API_PREFIX}/mine`,
+  });
+};

client/src/components/Design/components/ChipGroup/ChipGroup.tsx

@@ -18,7 +18,7 @@ const ChipGroup = ({color, texts}: Props) => {
   return (
     <div css={chipGroupStyle}>
       {texts.map(text => (
-        <Chip color={color} text={text} />
+        <Chip key={text} color={color} text={text} />
       ))}
     </div>
   );

client/src/components/Design/components/CreatedEvent/CreatedEvent.style.ts

@@ -0,0 +1,19 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';
+
+export const inProgressCheckStyle = ({inProgress, theme}: WithTheme<{inProgress: boolean}>) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.125rem',
+    border: `1px solid ${inProgress ? theme.colors.primary : theme.colors.gray}`,
+    borderRadius: '0.5rem',
+    padding: '0.25rem 0.375rem',
+    height: '1.25rem',
+
+    '.in-progress-check-text': {
+      color: inProgress ? theme.colors.primary : theme.colors.gray,
+      paddingTop: '0.0625rem',
+    },
+  });

client/src/components/Design/components/CreatedEvent/CreatedEvent.tsx

@@ -0,0 +1,70 @@
+/** @jsxImportSource @emotion/react */
+import {useNavigate} from 'react-router-dom';
+
+import Text from '@HDcomponents/Text/Text';
+
+import {useTheme} from '@components/Design';
+
+import Flex from '../Flex/Flex';
+import Input from '../Input/Input';
+
+import {CreatedEventItemProps, CreatedEventListProps} from './CreatedEvent.type';
+import {inProgressCheckStyle} from './CreatedEvent.style';
+
+function InProgressCheck({inProgress}: {inProgress: boolean}) {
+  const {theme} = useTheme();
+
+  return (
+    <div css={inProgressCheckStyle({theme, inProgress})}>
+      <Text size="tiny" className="in-progress-check-text">
+        {inProgress ? '진행' : '완료'}
+      </Text>
+    </div>
+  );
+}
+
+function CreatedEventItem({createdEvent}: CreatedEventItemProps) {
+  const navigate = useNavigate();
+  const onClick = () => {
+    navigate(`/event/${createdEvent.eventId}/admin`);
+  };
+
+  return (
+    <Flex
+      justifyContent="spaceBetween"
+      alignItems="center"
+      height="2.5rem"
+      padding="0.5rem 1rem"
+      paddingInline="0.5rem"
+      onClick={onClick}
+    >
+      <Flex gap="0.5rem" alignItems="center">
+        <InProgressCheck inProgress={createdEvent.isFinished} />
+        <Text size="bodyBold" color="onTertiary">
+          {createdEvent.eventName}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+function CreatedEventList({createdEvents, eventName, onSearch, placeholder}: CreatedEventListProps) {
+  return (
+    <Flex
+      flexDirection="column"
+      width="100%"
+      backgroundColor="white"
+      padding="0.5rem 1rem"
+      paddingInline="0.5rem"
+      gap="0.5rem"
+      height="100%"
+      cssProp={{borderRadius: '1rem'}}
+    >
+      <Input inputType="search" value={eventName} onChange={onSearch} placeholder={placeholder} />
+      {createdEvents.length !== 0 &&
+        createdEvents.map(createdEvent => <CreatedEventItem key={createdEvent.eventId} createdEvent={createdEvent} />)}
+    </Flex>
+  );
+}
+
+export default CreatedEventList;

client/src/components/Design/components/CreatedEvent/CreatedEvent.type.ts

@@ -0,0 +1,12 @@
+import {CreatedEvent} from './../../../../types/serviceType';
+
+export interface CreatedEventItemProps {
+  createdEvent: CreatedEvent;
+}
+
+export interface CreatedEventListProps {
+  eventName: string;
+  onSearch: ({target}: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  createdEvents: CreatedEvent[];
+}

client/src/constants/queryKeys.ts

@@ -8,6 +8,7 @@ const QUERY_KEYS = {
   images: 'images',
   kakaoClientId: 'kakao-client-id',
   kakaoLogin: 'kakao-login',
+  createdEvents: 'createdEvents',
   userInfo: 'userinfo',
 };
 

client/src/constants/routerUrls.ts

@@ -18,6 +18,7 @@ export const ROUTER_URLS = {
   event: EVENT,
   login: '/login',
   myPage: '/mypage',
+  createdEvents: '/mypage/events',
   guestEventLogin: `${EVENT_WITH_EVENT_ID}/admin/guest/login`,
   memberEventLogin: `${EVENT_WITH_EVENT_ID}/admin/member/login`,
   kakaoLoginRedirectUri: process.env.KAKAO_REDIRECT_URI,

client/src/hooks/queries/bill/useRequestGetBillDetails.ts

@@ -15,7 +15,7 @@ const useRequestGetBillDetails = ({billId, ...props}: WithErrorHandlingStrategy<
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.billDetails, billId],
+    queryKey: [QUERY_KEYS.billDetails, billId, eventId],
     queryFn: () => requestGetBillDetails({eventId, billId, ...props}),
   });
 

client/src/hooks/queries/event/useRequestGetCreatedEvents.ts

@@ -0,0 +1,23 @@
+import {useQuery} from '@tanstack/react-query';
+
+import {requestGetCreatedEvents} from '@apis/request/event';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestGetCreatedEvents = () => {
+  const {data, ...rest} = useQuery({
+    queryKey: [QUERY_KEYS.createdEvents],
+    queryFn: () => requestGetCreatedEvents(),
+    select: data => ({
+      ...data,
+      events: data.events.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
+    }),
+  });
+
+  return {
+    events: data?.events,
+    ...rest,
+  };
+};
+
+export default useRequestGetCreatedEvents;

client/src/hooks/queries/event/useRequestGetEvent.ts

@@ -11,7 +11,7 @@ const useRequestGetEvent = ({...props}: WithErrorHandlingStrategy | null = {}) =
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useSuspenseQuery({
-    queryKey: [QUERY_KEYS.event],
+    queryKey: [QUERY_KEYS.event, eventId],
     queryFn: () => requestGetEvent({eventId, ...props}),
   });
 

client/src/hooks/queries/member/useRequestGetAllMembers.ts

@@ -11,7 +11,7 @@ const useRequestGetAllMembers = ({...props}: WithErrorHandlingStrategy | null =
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.allMembers],
+    queryKey: [QUERY_KEYS.allMembers, eventId],
     queryFn: () => requestGetAllMembers({eventId, ...props}),
   });
 

client/src/hooks/queries/member/useRequestGetCurrentMembers.ts

@@ -11,7 +11,7 @@ const useRequestGetCurrentMembers = ({...props}: WithErrorHandlingStrategy | nul
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.currentMembers],
+    queryKey: [QUERY_KEYS.currentMembers, eventId],
     queryFn: () => requestGetCurrentMembers({eventId, ...props}),
   });
 

client/src/hooks/queries/report/useRequestGetReports.ts

@@ -11,7 +11,7 @@ const useRequestGetReports = ({...props}: WithErrorHandlingStrategy | null = {})
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.reports],
+    queryKey: [QUERY_KEYS.reports, eventId],
     queryFn: () => requestGetReports({eventId, ...props}),
   });
 

client/src/hooks/queries/step/useRequestGetSteps.ts

@@ -11,7 +11,7 @@ const useRequestGetSteps = ({...props}: WithErrorHandlingStrategy | null = {}) =
   const eventId = getEventIdByUrl();
 
   const queryResult = useQuery({
-    queryKey: [QUERY_KEYS.steps],
+    queryKey: [QUERY_KEYS.steps, eventId],
     queryFn: () => requestGetSteps({eventId, ...props}),
   });
 

client/src/pages/CreatedEventsPage/CreatedEventsPage.tsx

@@ -0,0 +1,55 @@
+import {css} from '@emotion/react';
+import {useEffect, useState} from 'react';
+
+import CreatedEventList from '@components/Design/components/CreatedEvent/CreatedEvent';
+import useRequestGetCreatedEvents from '@hooks/queries/event/useRequestGetCreatedEvents';
+
+import {MainLayout, Top, TopNav} from '@components/Design';
+
+export default function CreatedEventsPage() {
+  const [eventName, setEventName] = useState('');
+  const {events} = useRequestGetCreatedEvents();
+  const [matchedEvents, setMatchedEvents] = useState(events);
+
+  useEffect(() => {
+    setMatchedEvents(events?.filter(event => event.eventName.includes(eventName)));
+  }, [eventName, events]);
+
+  const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEventName(e.target.value);
+  };
+
+  return (
+    <MainLayout backgroundColor="white">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
+      </TopNav>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1rem;
+        `}
+      >
+        <Top>
+          <Top.Line text="지금까지 주최했던 행사를" emphasize={['주최했던 행사']} />
+          <Top.Line text="확인해 보세요" />
+        </Top>
+      </div>
+      <div
+        css={css`
+          display: flex;
+          padding-inline: 0.5rem;
+        `}
+      >
+        <CreatedEventList
+          createdEvents={matchedEvents ?? []}
+          eventName={eventName}
+          onSearch={onSearch}
+          placeholder="행사 이름 검색"
+        />
+      </div>
+    </MainLayout>
+  );
+}

client/src/pages/MyPage/index.tsx

@@ -1,10 +1,15 @@
+import {useNavigate} from 'react-router-dom';
+
 import {Button, Flex, FunnelLayout, MainLayout, Text, TextButton, TopNav, useTheme} from '@components/Design';
 
+import {ROUTER_URLS} from '@constants/routerUrls';
+
 import {mockImageStyle} from './MyPage.style';
 import Container from './Container';
 
 const MyPage = () => {
   const {theme} = useTheme();
+  const navigate = useNavigate();
 
   return (
     <MainLayout backgroundColor="gray">
@@ -33,7 +38,7 @@ const MyPage = () => {
             <TextButton textColor="onTertiary" textSize="body">
               기본 계좌 번호 설정하기
             </TextButton>
-            <TextButton textColor="onTertiary" textSize="body">
+            <TextButton textColor="onTertiary" textSize="body" onClick={() => navigate(ROUTER_URLS.createdEvents)}>
               내가 만든 행사 목록 보기
             </TextButton>
             <TextButton textColor="onTertiary" textSize="body">

client/src/router.tsx

@@ -33,6 +33,7 @@ const LoginPage = lazy(() => import('@pages/LoginPage'));
 const MyPage = lazy(() => import('@pages/MyPage'));
 const LoginRedirectPage = lazy(() => import('@pages/LoginPage/LoginRedirectPage'));
 const LoginFailFallback = lazy(() => import('@pages/LoginPage/LoginFailFallback'));
+const CreatedEventsPage = lazy(() => import('@pages/CreatedEventsPage/CreatedEventsPage'));
 const EventPageLoading = lazy(() => import('@pages/EventPage/EventPageFallback/EventPageLoading'));
 
 const router = createBrowserRouter([
@@ -138,6 +139,10 @@ const router = createBrowserRouter([
             path: ROUTER_URLS.qrCode,
             element: <QRCodePage />,
           },
+          {
+            path: ROUTER_URLS.createdEvents,
+            element: <CreatedEventsPage />,
+          },
         ],
       },
       {

client/src/types/serviceType.ts

@@ -94,3 +94,14 @@ export interface ImageFile {
   id: number;
   url: string;
 }
+
+export interface CreatedEvent {
+  eventId: string;
+  eventName: string;
+  isFinished: boolean;
+  createdAt: string;
+}
+
+export interface CreatedEvents {
+  events: CreatedEvent[];
+}