[FE] 행사 삭제 기능 구현

client/src/apis/request/event.ts

@@ -1,8 +1,8 @@
 import {BankAccount, CreatedEvents, Event, EventCreationData, EventName} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
-import {ADMIN_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestGet, requestPatchWithoutResponse, requestPostWithResponse} from '@apis/request';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete, requestGet, requestPatchWithoutResponse, requestPostWithResponse} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export const requestPostGuestEvent = async (postEventArgs: EventCreationData) => {
@@ -52,3 +52,14 @@ export const requestGetCreatedEvents = async () => {
     endpoint: `${MEMBER_API_PREFIX}/mine`,
   });
 };
+
+type DeleteEvents = {
+  eventIds: string[];
+};
+
+export const requestDeleteEvents = async (args: DeleteEvents) => {
+  await requestDelete({
+    endpoint: MEMBER_API_PREFIX,
+    body: args,
+  });
+};

client/src/components/CreatedEventList/index.tsx

@@ -0,0 +1,59 @@
+import useRequestDeleteEvents from '@hooks/queries/event/useRequestDeleteEvents';
+import {useCreatedEventsPageContext} from '@pages/mypage/events/CreatedEvent.context';
+import {CreatedEvent} from 'types/serviceType';
+import {CreatedEventItem} from '@components/Design/components/CreatedEvent/CreatedEvent';
+
+import {FixedButton, Flex, Input} from '@components/Design';
+
+type CreatedEventListProps = {
+  eventName: string;
+  onSearch: ({target}: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  createdEvents: CreatedEvent[];
+};
+
+export const CreatedEventList = ({createdEvents, eventName, onSearch, placeholder}: CreatedEventListProps) => {
+  const {mode, handleMode, selectedEvents, isAlreadySelected, handleSelectedEvents} = useCreatedEventsPageContext();
+  const setViewMode = () => handleMode('view');
+
+  const {deleteEvents} = useRequestDeleteEvents();
+
+  const onDeleteClick = async () => {
+    const selectedEventsId = selectedEvents.map(event => event.eventId);
+    await deleteEvents({eventIds: selectedEventsId});
+    handleMode('view');
+  };
+
+  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}
+              isEditMode={mode === 'edit'}
+              setEditMode={() => handleMode('edit')}
+              isChecked={isAlreadySelected(createdEvent)}
+              onChange={handleSelectedEvents}
+              createdEvent={createdEvent}
+            />
+          ))}
+      </Flex>
+      {mode === 'edit' && (
+        <FixedButton variants="tertiary" onDeleteClick={onDeleteClick} onClick={setViewMode}>
+          편집완료
+        </FixedButton>
+      )}
+    </>
+  );
+};

client/src/components/Design/components/Checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@ import Icon from '../Icon/Icon';
 import {checkboxStyle, inputGroupStyle} from './Checkbox.style';
 
 interface Props {
-  labelText: string;
+  labelText?: string;
   isChecked: boolean;
   onChange: () => void;
 }
@@ -20,7 +20,7 @@ const Checkbox = ({labelText, isChecked = false, onChange}: Props) => {
         {isChecked ? <Icon iconType="check" iconColor="onPrimary" className="check-icon" /> : null}
         <input type="checkbox" checked={isChecked} onChange={onChange} className="checkbox-input" />
       </div>
-      <Text size="bodyBold">{labelText}</Text>
+      {labelText && <Text size="bodyBold">{labelText}</Text>}
     </label>
   );
 };

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

@@ -17,3 +17,10 @@ export const inProgressCheckStyle = ({inProgress, theme}: WithTheme<{inProgress:
       paddingTop: '0.0625rem',
     },
   });
+
+export const touchAreaStyle = css({
+  position: 'relative',
+  overflow: 'hidden',
+
+  width: '100%',
+});

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

@@ -2,14 +2,15 @@
 import {useNavigate} from 'react-router-dom';
 
 import Text from '@HDcomponents/Text/Text';
+import {CreatedEvent} from 'types/serviceType';
 
-import {useTheme} from '@components/Design';
+import useLongPressAnimation from '@hooks/useLongPressAnimation';
+
+import {Checkbox, 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';
+import {inProgressCheckStyle, touchAreaStyle} from './CreatedEvent.style';
 
 function InProgressCheck({inProgress}: {inProgress: boolean}) {
   const {theme} = useTheme();
@@ -23,48 +24,52 @@ function InProgressCheck({inProgress}: {inProgress: boolean}) {
   );
 }
 
-function CreatedEventItem({createdEvent}: CreatedEventItemProps) {
+export interface CreatedEventItemProps {
+  setEditMode: () => void;
+  isEditMode: boolean;
+  isChecked: boolean;
+  onChange: (event: CreatedEvent) => void;
+  createdEvent: CreatedEvent;
+}
+
+export function CreatedEventItem({isEditMode, setEditMode, isChecked, onChange, createdEvent}: CreatedEventItemProps) {
   const navigate = useNavigate();
+
+  const onLongPress = () => {
+    setEditMode();
+    if (!isChecked) onChange(createdEvent);
+  };
+
+  const {handleTouchStart, handleTouchEnd, handleTouchMove} = useLongPressAnimation(onLongPress, {
+    disabled: isEditMode,
+  });
+
   const onClick = () => {
-    navigate(`/event/${createdEvent.eventId}/admin`);
+    isEditMode ? onChange(createdEvent) : 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>
+      {isEditMode && <Checkbox isChecked={isChecked} onChange={() => onChange(createdEvent)} />}
+      <Flex
+        justifyContent="spaceBetween"
+        alignItems="center"
+        height="2.5rem"
+        padding="0.5rem 1rem"
+        paddingInline="0.5rem"
+        onClick={onClick}
+        css={touchAreaStyle}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        <Flex gap="0.5rem" alignItems="center">
+          <InProgressCheck inProgress={createdEvent.isFinished} />
+          <Text size="bodyBold" color="onTertiary">
+            {createdEvent.eventName}
+          </Text>
+        </Flex>
       </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/hooks/queries/event/useRequestDeleteEvents.ts

@@ -0,0 +1,24 @@
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+
+import {requestDeleteEvents} from '@apis/request/event';
+import toast from '@hooks/useToast/toast';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestDeleteEvents = () => {
+  const queryClient = useQueryClient();
+
+  const {mutateAsync} = useMutation({
+    mutationFn: requestDeleteEvents,
+    onSuccess: () => {
+      toast.confirm('행사가 정상적으로 삭제되었습니다');
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.createdEvents]});
+    },
+  });
+
+  return {
+    deleteEvents: mutateAsync,
+  };
+};
+
+export default useRequestDeleteEvents;

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

@@ -1,16 +1,25 @@
 import {useQuery} from '@tanstack/react-query';
 
 import {requestGetCreatedEvents} from '@apis/request/event';
+import {CreatedEvent} from 'types/serviceType';
 
 import QUERY_KEYS from '@constants/queryKeys';
 
 const useRequestGetCreatedEvents = () => {
+  const sortByCreatedAndFinishedStatus = (a: CreatedEvent, b: CreatedEvent) => {
+    if (a.isFinished !== b.isFinished) {
+      return a.isFinished ? 1 : -1;
+    }
+
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  };
+
   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()),
+      events: data.events.sort(sortByCreatedAndFinishedStatus),
     }),
   });
 

client/src/hooks/useAdminPage.ts

@@ -8,7 +8,7 @@ import useEventDataContext from './useEventDataContext';
 
 const useAdminPage = () => {
   const eventId = getEventIdByUrl();
-  const {isAdmin, bankName, accountNumber, eventName} = useEventDataContext();
+  const {isAdmin, bankName, accountNumber, eventName, createdByGuest} = useEventDataContext();
 
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
 
@@ -26,6 +26,7 @@ const useAdminPage = () => {
     isAdmin,
     eventName,
     bankName,
+    createdByGuest,
     accountNumber,
     totalExpenseAmount,
     isShowAccountBanner,