[FE] 마이페이지 기능 고도화 및 행사 이름 변경 기능 구현

client/src/apis/request/event.ts

@@ -1,4 +1,4 @@
-import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {BankAccount, CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
@@ -30,15 +30,19 @@ export const requestGetEvent = async ({eventId, ...props}: WithEventId<WithError
   });
 };
 
-export type RequestPatchEvent = WithEventId & {
-  eventName: string;
-};
+export type PartialEvent = Partial<
+  BankAccount & {
+    eventName: EventName;
+  }
+>;
+
+export type RequestPatchEvent = WithEventId & PartialEvent;
 
-export const requestPatchEventName = async ({eventId, eventName}: RequestPatchEvent) => {
+export const requestPatchEvent = async ({eventId, ...event}: RequestPatchEvent) => {
   return requestPatch({
     endpoint: `${ADMIN_API_PREFIX}/${eventId}`,
     body: {
-      eventName,
+      ...event,
     },
   });
 };

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

@@ -17,7 +17,7 @@ function InProgressCheck({inProgress}: {inProgress: boolean}) {
   return (
     <div css={inProgressCheckStyle({theme, inProgress})}>
       <Text size="tiny" className="in-progress-check-text">
-        {inProgress ? '진행' : '완료'}
+        {inProgress ? '정산 중' : '정산 완료'}
       </Text>
     </div>
   );

client/src/constants/routerUrls.ts

@@ -12,6 +12,7 @@ export const ROUTER_URLS = {
   addBill: `${EVENT_WITH_EVENT_ID}/admin/add-bill`,
   editBill: `${EVENT_WITH_EVENT_ID}/admin/edit-bill`,
   editAccount: `${EVENT_WITH_EVENT_ID}/admin/edit-account`,
+  editEventName: `${EVENT_WITH_EVENT_ID}/admin/edit-event-name`,
   images: `${EVENT_WITH_EVENT_ID}/images`,
   addImages: `${EVENT_WITH_EVENT_ID}/admin/add-images`,
   send: `${EVENT_WITH_EVENT_ID}/home/send/:memberId`,

client/src/hooks/createEvent/useSetEventNameStep.ts

@@ -4,8 +4,8 @@ import validateEventName from '@utils/validate/validateEventName';
 
 export type UseSetEventNameStepReturnType = ReturnType<typeof useSetEventNameStep>;
 
-const useSetEventNameStep = () => {
-  const [eventName, setEventName] = useState('');
+const useSetEventNameStep = (initialEventName?: string) => {
+  const [eventName, setEventName] = useState(initialEventName ?? '');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [canSubmit, setCanSubmit] = useState(false);
 

client/src/hooks/queries/auth/useRequestGetUserInfo.ts

@@ -15,7 +15,7 @@ const useRequestGetUserInfo = () => {
     initialData: {
       isGuest: true,
       nickname: '',
-      profileImage: '',
+      profileImage: null,
       accountNumber: '',
       bankName: '',
     },

client/src/hooks/queries/auth/useRequestSuspenseGetUserInfo.ts

@@ -0,0 +1,27 @@
+import {useSuspenseQuery} from '@tanstack/react-query';
+
+import {requestGetUserInfo} from '@apis/request/auth';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestSuspenseGetUserInfo = () => {
+  const {data, ...rest} = useSuspenseQuery({
+    queryKey: [QUERY_KEYS.userInfo],
+    queryFn: () => requestGetUserInfo(),
+  });
+
+  const userInfo = {
+    isGuest: data.isGuest,
+    nickname: data.nickname,
+    profileImage: data.profileImage,
+    accountNumber: data.accountNumber,
+    bankName: data.bankName,
+  };
+
+  return {
+    userInfo,
+    ...rest,
+  };
+};
+
+export default useRequestSuspenseGetUserInfo;

client/src/hooks/queries/event/useRequestPatchEventName.ts → client/src/hooks/queries/event/useRequestPatchEvent.ts

@@ -1,20 +1,18 @@
-import type {Event} from 'types/serviceType';
-
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 
-import {requestPatchEventName} from '@apis/request/event';
+import {PartialEvent, requestPatchEvent} from '@apis/request/event';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 import QUERY_KEYS from '@constants/queryKeys';
 
-const useRequestPatchEventName = () => {
+const useRequestPatchEvent = () => {
   const eventId = getEventIdByUrl();
 
   const queryClient = useQueryClient();
 
   const {mutateAsync, ...rest} = useMutation({
-    mutationFn: (eventName: string) => requestPatchEventName({eventId, eventName}),
+    mutationFn: (partialEvent: PartialEvent) => requestPatchEvent({eventId, ...partialEvent}),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEYS.event],
@@ -23,9 +21,9 @@ const useRequestPatchEventName = () => {
   });
 
   return {
-    patchEventOutline: mutateAsync,
+    patchEvent: mutateAsync,
     ...rest,
   };
 };
 
-export default useRequestPatchEventName;
+export default useRequestPatchEvent;

client/src/hooks/useAccount.ts → client/src/hooks/useEventAccount.ts

@@ -8,9 +8,9 @@ import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 import RULE from '@constants/rule';
 
-import useRequestPatchUser from './queries/event/useRequestPatchUser';
+import useRequestPatchEvent from './queries/event/useRequestPatchEvent';
 
-const useAccount = () => {
+const useEventAccount = () => {
   const location = useLocation();
   const locationState = location.state as BankAccount | null;
 
@@ -30,7 +30,7 @@ const useAccount = () => {
     }
   }, [locationState]);
 
-  const {patchUser} = useRequestPatchUser();
+  const {patchEvent} = useRequestPatchEvent();
 
   const selectBank = (name: string) => {
     setBankName(name);
@@ -66,7 +66,7 @@ const useAccount = () => {
   };
 
   const enrollAccount = async () => {
-    await patchUser({bankName: bankNameState, accountNumber: accountNumberState});
+    await patchEvent({bankName: bankNameState, accountNumber: accountNumberState});
   };
 
   useEffect(() => {
@@ -88,4 +88,4 @@ const useAccount = () => {
   };
 };
 
-export default useAccount;
+export default useEventAccount;

client/src/pages/event/[eventId]/admin/AdminPage.tsx

@@ -32,6 +32,10 @@ const AdminPage = () => {
     navigate(`/event/${eventId}/admin/edit-account`, {state: {accountNumber, bankName}});
   };
 
+  const navigateEditEventName = () => {
+    navigate(`/event/${eventId}/admin/edit-event-name`, {state: eventName});
+  };
+
   const navigateEventMemberManage = () => {
     navigate(`/event/${eventId}/admin/members`);
   };
@@ -52,6 +56,7 @@ const AdminPage = () => {
         amount={totalExpenseAmount}
         dropdown={
           <Dropdown>
+            <DropdownButton text="행사 이름 변경" onClick={navigateEditEventName} />
             <DropdownButton text="전체 참여자 관리" onClick={navigateEventMemberManage} />
             <DropdownButton text="계좌번호 입력하기" onClick={navigateAccountInputPage} />
             <DropdownButton text="사진 첨부하기" onClick={navigateAddImages} />

client/src/pages/event/[eventId]/admin/edit-account/EditAccountPage.tsx

@@ -3,7 +3,7 @@ import {useLocation, useNavigate} from 'react-router-dom';
 
 import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal';
 
-import useAccount from '@hooks/useAccount';
+import useEventAccount from '@hooks/useEventAccount';
 
 import {FixedButton, Flex, FunnelLayout, Input, MainLayout, Top, TopNav} from '@components/Design';
 
@@ -24,7 +24,7 @@ const EditAccountPage = () => {
     handleAccount,
     handleAccountOnPaste,
     enrollAccount,
-  } = useAccount();
+  } = useEventAccount();
 
   const enrollAccountAndNavigateAdmin = async () => {
     await enrollAccount();

client/src/pages/event/[eventId]/admin/edit-event-name/EditEventNamePage.tsx

@@ -0,0 +1,65 @@
+import {useLocation, useNavigate} from 'react-router-dom';
+import {useEffect} from 'react';
+
+import useSetEventNameStep from '@hooks/createEvent/useSetEventNameStep';
+import useRequestPatchEvent from '@hooks/queries/event/useRequestPatchEvent';
+import {EventName} from 'types/serviceType';
+
+import {FixedButton, FunnelLayout, Input, MainLayout, Top, TopNav} from '@components/Design';
+
+import getEventBaseUrl from '@utils/getEventBaseUrl';
+
+const EditEventNamePage = () => {
+  const location = useLocation();
+  const locationState = location.state as EventName | null;
+  console.log(locationState);
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (locationState === null) {
+      navigate(-1);
+    }
+  }, [locationState]);
+
+  const {eventName, errorMessage, canSubmit, handleEventNameChange} = useSetEventNameStep(locationState ?? '');
+  const {patchEvent} = useRequestPatchEvent();
+
+  const disabled = !canSubmit || eventName === locationState;
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    await patchEvent({eventName});
+    navigate(`/${getEventBaseUrl(location.pathname)}/admin`);
+  };
+
+  return (
+    <MainLayout backgroundColor="white">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
+      </TopNav>
+      <FunnelLayout>
+        <Top>
+          <Top.Line text="변경하려는" />
+          <Top.Line text="행사의 이름은 무엇인가요?" emphasize={['행사의 이름']} />
+        </Top>
+        <form onSubmit={event => onSubmit(event)}>
+          <Input
+            labelText="행사 이름"
+            errorText={errorMessage ?? ''}
+            value={eventName}
+            type="text"
+            placeholder="행동대장 야유회"
+            onChange={handleEventNameChange}
+            isError={!!errorMessage}
+            autoFocus
+          />
+          <FixedButton disabled={disabled}>변경완료</FixedButton>
+        </form>
+      </FunnelLayout>
+    </MainLayout>
+  );
+};
+
+export default EditEventNamePage;

client/src/pages/fallback/MyPageError.tsx

@@ -0,0 +1,24 @@
+import {useNavigate} from 'react-router-dom';
+
+import Image from '@components/Design/components/Image/Image';
+
+import {Button, Flex, Text} from '@components/Design';
+
+import getImageUrl from '@utils/getImageUrl';
+
+const MyPageError = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Flex flexDirection="column" justifyContent="center" alignItems="center" gap="1.5rem">
+      <Image src={getImageUrl('cryingDog', 'webp')} fallbackSrc={getImageUrl('cryingDog', 'png')} width={200} />
+      <Text
+        size="bodyBold"
+        css={{whiteSpace: 'pre-line', textAlign: 'center'}}
+      >{`로그인 후\n사용할 수 있는 서비스입니다.`}</Text>
+      <Button onClick={() => navigate(-1)}>이전으로 돌아가기</Button>
+    </Flex>
+  );
+};
+
+export default MyPageError;

client/src/pages/fallback/MyPageLoading.tsx

@@ -0,0 +1,19 @@
+import Image from '@components/Design/components/Image/Image';
+
+import {Flex, Text} from '@components/Design';
+
+import getImageUrl from '@utils/getImageUrl';
+
+const MyPageLoading = () => {
+  return (
+    <Flex flexDirection="column" justifyContent="center" alignItems="center" gap="1.5rem">
+      <Image src={getImageUrl('runningDog', 'webp')} fallbackSrc={getImageUrl('runningDog', 'png')} width={200} />
+      <Text
+        size="bodyBold"
+        css={{whiteSpace: 'pre-line', textAlign: 'center'}}
+      >{`로딩중입니다.\n 잠시만 기다려주세요.`}</Text>
+    </Flex>
+  );
+};
+
+export default MyPageLoading;