[FE] 마이페이지에서 자신의 기본 계좌 번호 수정 기능 추가

client/src/apis/endpointPrefix.ts

@@ -1,4 +1,4 @@
 // TODO: (@weadie) 반복되서 쓰이는 이 api/events가 추후 수정 가능성이 있어서 일단 편집하기 편하게 이 변수를 재사용하도록 했습니다.
-export const USER_API_PREFIX = '/api/events';
+export const MEMBER_API_PREFIX = '/api/events';
 export const ADMIN_API_PREFIX = '/api/admin/events';
-export const MEMBER_API_PREFIX = '/api/users';
+export const USER_API_PREFIX = '/api/users';

client/src/apis/fetcher.ts → client/src/apis/request.ts

@@ -80,6 +80,10 @@ export const requestPatch = ({headers = {}, ...args}: RequestMethodProps) => {
   return request({method: 'PATCH', headers, ...args});
 };
 
+export const requestPatchWithoutResponse = async ({headers = {}, ...args}: RequestMethodProps) => {
+  await request({method: 'PATCH', headers, ...args});
+};
+
 export const requestPut = ({headers = {}, ...args}: RequestMethodProps) => {
   return request({method: 'PUT', headers, ...args});
 };

client/src/apis/request/auth.ts

@@ -1,8 +1,8 @@
 import {UserInfo} from 'types/serviceType';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestGet, requestGetWithoutResponse, requestPostWithoutResponse} from '@apis/fetcher';
+import {ADMIN_API_PREFIX, USER_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestGet, requestGetWithoutResponse, requestPostWithoutResponse} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 import getKakaoRedirectUrl from '@utils/getKakaoRedirectUrl';
@@ -21,7 +21,7 @@ export interface RequestPostToken {
 export const requestPostToken = async ({eventId, password}: WithEventId<RequestPostToken>) => {
   await requestPostWithoutResponse({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/login`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/login`,
     body: {
       password: password,
     },
@@ -48,7 +48,7 @@ export const requestGetKakaoLogin = async (code: string) => {
 export const requestGetUserInfo = async () => {
   return await requestGet<UserInfo>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${MEMBER_API_PREFIX}/mine`,
+    endpoint: `${USER_API_PREFIX}/mine`,
     errorHandlingStrategy: 'unsubscribe',
   });
 };

client/src/apis/request/bill.ts

@@ -3,8 +3,8 @@ import type {BillDetails} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestDelete, requestGet, requestPostWithoutResponse, requestPut} from '@apis/fetcher';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete, requestGet, requestPostWithoutResponse, requestPut} from '@apis/request';
 import {WithBillId, WithEventId} from '@apis/withId.type';
 
 export interface RequestPostBill {
@@ -52,7 +52,7 @@ export const requestGetBillDetails = async ({
 }: WithEventId<WithErrorHandlingStrategy<WithBillId>>) => {
   return requestGet<BillDetails>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/bills/${billId}/details`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/bills/${billId}/details`,
     ...props,
   });
 };

client/src/apis/request/event.ts

@@ -1,22 +1,22 @@
-import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {CreatedEvents, Event, EventCreationData, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
-import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestGet, requestPatch, requestPostWithResponse} from '@apis/fetcher';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestGet, requestPatch, requestPostWithResponse} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export const requestPostGuestEvent = async (postEventArgs: EventCreationData) => {
-  return await requestPostWithResponse<EventId>({
-    endpoint: `${USER_API_PREFIX}/guest`,
+  return await requestPostWithResponse<WithEventId>({
+    endpoint: `${MEMBER_API_PREFIX}/guest`,
     body: {
       ...postEventArgs,
     },
   });
 };
 
 export const requestPostUserEvent = async (eventName: EventName) => {
-  return await requestPostWithResponse<EventId>({
-    endpoint: USER_API_PREFIX,
+  return await requestPostWithResponse<WithEventId>({
+    endpoint: MEMBER_API_PREFIX,
     body: {
       eventName,
     },
@@ -25,7 +25,7 @@ export const requestPostUserEvent = async (eventName: EventName) => {
 
 export const requestGetEvent = async ({eventId, ...props}: WithEventId<WithErrorHandlingStrategy>) => {
   return await requestGet<Event>({
-    endpoint: `${USER_API_PREFIX}/${eventId}`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}`,
     ...props,
   });
 };
@@ -43,20 +43,8 @@ export const requestPatchEventName = async ({eventId, eventName}: RequestPatchEv
   });
 };
 
-export type RequestPatchUser = Partial<User>;
-
-// TODO: (@soha) 해당 요청은 user.ts 파일로 이동하는 건 어떨지?
-export const requestPatchUser = async (args: RequestPatchUser) => {
-  return requestPatch({
-    endpoint: MEMBER_API_PREFIX,
-    body: {
-      ...args,
-    },
-  });
-};
-
 export const requestGetCreatedEvents = async () => {
   return await requestGet<CreatedEvents>({
-    endpoint: `${USER_API_PREFIX}/mine`,
+    endpoint: `${MEMBER_API_PREFIX}/mine`,
   });
 };

client/src/apis/request/images.ts

@@ -1,8 +1,8 @@
 import {EventId, Images} from 'types/serviceType';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestDelete, requestGet, requestPostWithoutResponse} from '@apis/fetcher';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete, requestGet, requestPostWithoutResponse} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export interface RequestPostImages {
@@ -16,7 +16,7 @@ export const requestPostImages = async ({eventId, formData}: WithEventId<Request
 export const requestGetImages = async ({eventId}: WithEventId) => {
   return await requestGet<Images>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/images`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/images`,
   });
 };
 

client/src/apis/request/member.ts

@@ -3,8 +3,8 @@ import type {AllMembers, Members} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestDelete, requestGet, requestPut, requestPostWithResponse} from '@apis/fetcher';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete, requestGet, requestPut, requestPostWithResponse} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export interface PostMember {
@@ -59,14 +59,14 @@ export const requestPutMembers = async ({eventId, members}: WithEventId<RequestP
 export const requestGetCurrentMembers = async ({eventId, ...props}: WithEventId<WithErrorHandlingStrategy>) => {
   return await requestGet<Members>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/members/current`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/members/current`,
     ...props,
   });
 };
 
 export const requestGetAllMembers = async ({eventId, ...props}: WithEventId<WithErrorHandlingStrategy>) => {
   return await requestGet<AllMembers>({
-    endpoint: `${USER_API_PREFIX}/${eventId}/members`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/members`,
     ...props,
   });
 };

client/src/apis/request/report.ts

@@ -3,14 +3,14 @@ import type {Reports} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestGet} from '@apis/fetcher';
+import {MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestGet} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export const requestGetReports = async ({eventId, ...props}: WithEventId<WithErrorHandlingStrategy>) => {
   return await requestGet<Reports>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/reports`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/reports`,
     ...props,
   });
 };

client/src/apis/request/step.ts

@@ -2,14 +2,14 @@ import {Steps} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {USER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestGet} from '@apis/fetcher';
+import {MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestGet} from '@apis/request';
 import {WithEventId} from '@apis/withId.type';
 
 export const requestGetSteps = async ({eventId, ...props}: WithEventId<WithErrorHandlingStrategy>) => {
   const {steps} = await requestGet<Steps>({
     baseUrl: BASE_URL.HD,
-    endpoint: `${USER_API_PREFIX}/${eventId}/bills`,
+    endpoint: `${MEMBER_API_PREFIX}/${eventId}/bills`,
     ...props,
   });
 

client/src/apis/request/user.ts

@@ -1,20 +1,32 @@
-import {User} from 'types/serviceType';
+import {User, UserInfo} from 'types/serviceType';
 
 import {BASE_URL} from '@apis/baseUrl';
-import {MEMBER_API_PREFIX} from '@apis/endpointPrefix';
-import {requestDelete} from '@apis/fetcher';
-import {requestGet} from '@apis/fetcher';
+import {USER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete, requestPatchWithoutResponse} from '@apis/request';
+import {requestGet} from '@apis/request';
 
 export const requestDeleteUser = async () => {
   await requestDelete({
     baseUrl: BASE_URL.HD,
-    endpoint: `${MEMBER_API_PREFIX}`,
+    endpoint: USER_API_PREFIX,
   });
 };
 
 export const requestGetUserInfo = async () => {
-  return await requestGet<User>({
+  return await requestGet<UserInfo>({
     baseUrl: BASE_URL.HD,
-    endpoint: `/api/users/mine`,
+    endpoint: `${USER_API_PREFIX}/mine`,
+    errorHandlingStrategy: 'unsubscribe',
+  });
+};
+
+export type RequestPatchUser = Partial<User>;
+
+export const requestPatchUser = async (args: RequestPatchUser) => {
+  await requestPatchWithoutResponse({
+    endpoint: USER_API_PREFIX,
+    body: {
+      ...args,
+    },
   });
 };

client/src/components/Design/components/BankSelect/BankSelect.tsx

@@ -1,4 +1,6 @@
 /** @jsxImportSource @emotion/react */
+import {BankName} from 'types/serviceType';
+
 import BANKS from '@constants/bank';
 
 import Text from '../Text/Text';
@@ -7,7 +9,7 @@ import Flex from '../Flex/Flex';
 import {bankSelectStyle, iconStyle} from './BankSelect.style';
 
 type BankSelectProps = {
-  onSelect: (name: string) => void;
+  onSelect: (name: BankName) => void;
 };
 
 const BankSelect = ({onSelect}: BankSelectProps) => {

client/src/components/EditAccountPageView.tsx

@@ -0,0 +1,95 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal';
+import {BankAccount, BankName} from 'types/serviceType';
+
+import useAccount from '@hooks/useAccount';
+
+import {FixedButton, Flex, FunnelLayout, Input, MainLayout, Top, TopNav} from '@components/Design';
+
+type EditAccountPageProps = {
+  bankName: BankName;
+  accountNumber: string;
+  onSubmit: (args: Partial<BankAccount>) => Promise<void>;
+  redirectUrlOnSubmit: string;
+};
+
+const EditAccountPageView = ({
+  bankName: defaultBankName,
+  accountNumber: defaultAccountNumber,
+  onSubmit,
+  redirectUrlOnSubmit,
+}: EditAccountPageProps) => {
+  const navigate = useNavigate();
+
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+
+  const {
+    bankName,
+    accountNumber,
+    accountNumberErrorMessage,
+    canSubmit,
+    selectBank,
+    handleAccountOnTyping,
+    handleAccountOnPaste,
+    enrollAccount,
+  } = useAccount({
+    bankName: defaultBankName,
+    accountNumber: defaultAccountNumber,
+    onSubmit,
+  });
+
+  const enrollAccountAndRedirectTo = async () => {
+    await enrollAccount();
+
+    navigate(redirectUrlOnSubmit);
+  };
+
+  return (
+    <MainLayout backgroundColor="white">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
+      </TopNav>
+      <FunnelLayout>
+        <Top>
+          <Top.Line text="행사 정산 금액은" />
+          <Top.Line text="어떤 계좌로 받을까요?" emphasize={['어떤 계좌']} />
+        </Top>
+        <Flex flexDirection="column" gap="1rem">
+          <Input
+            labelText="은행"
+            placeholder="은행을 선택해주세요"
+            value={bankName ?? ''}
+            errorText={null}
+            autoFocus={false}
+            readOnly
+            onClick={() => setIsBottomSheetOpen(true)}
+          />
+          <Input
+            labelText="계좌번호"
+            placeholder="ex) 030302-04-191806"
+            errorText={accountNumberErrorMessage}
+            isError={accountNumberErrorMessage !== null}
+            value={accountNumber ?? ''}
+            onChange={handleAccountOnTyping}
+            onPaste={handleAccountOnPaste}
+            autoFocus={false}
+          />
+          {isBottomSheetOpen && (
+            <BankSelectModal
+              isBottomSheetOpened={isBottomSheetOpen}
+              setIsBottomSheetOpened={setIsBottomSheetOpen}
+              selectBank={selectBank}
+            />
+          )}
+        </Flex>
+      </FunnelLayout>
+      <FixedButton disabled={!canSubmit} onClick={enrollAccountAndRedirectTo} onBackClick={() => navigate(-1)}>
+        확인
+      </FixedButton>
+    </MainLayout>
+  );
+};
+
+export default EditAccountPageView;

client/src/components/Loader/EventData/EventDataLoader.tsx

@@ -0,0 +1,17 @@
+import {Outlet} from 'react-router-dom';
+
+import useEventPageLoader from '@hooks/useEventPageLoader';
+
+import EventDataProvider from './EventDataProvider';
+
+const EventDataLoader = () => {
+  const eventData = useEventPageLoader();
+
+  return (
+    <EventDataProvider {...eventData}>
+      <Outlet />
+    </EventDataProvider>
+  );
+};
+
+export default EventDataLoader;