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

pakxe · 2024-12-23T07:41:06Z

issue

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

구현 목적

마이페이지에서 자신의 기본 계좌 번호를 수정할 수 있는 페이지를 추가합니다.

구현 사항

1. 기존의 EditAccountPage에서 UI만 분리

같은 모습의 페이지가 반복적으로 사용되어야 했고, UI만 분리하여도 넘겨줘야 하는 props가 4개로 많지 않았기 때문에 UI를 분리하여 EditAccountPageView라는 컴포넌트로 만들었습니다.

EditAccountPageView에 전달해야하는 props는 다음과 같습니다.

Prop Name	Type	Description
`bankName`	`BankName`	페이지 첫 진입 시 보여줄 은행 이름.
`accountNumber`	`string`	페이지 첫 진입 시 보여줄 계좌 번호.
`onSubmit`	`Function`	수정 버튼을 눌렀을 때 실행될 함수.
`redirectUrlOnSubmit`	`string`	완료되었을 때 이동할 URL.

2. 기존의 EditAccountPage와 새로 추가될 마이페이지의 계좌 수정 페이지인 EditUserAccountPage를 1번 컴포넌트를 사용해 구현

1번에서 만든 EditAccountPageView를 재사용해 두 페이지를 구현했습니다.

const EditAccountPage = () => {
  const {bankName, accountNumber} ㅇ= useEventDataContext();
  const {patchUser} = useRequestPatchUser();

  const location = useLocation();
  const redirectUrlOnSubmit = `/${getEventBaseUrl(location.pathname)}/admin`;

  return (
    <EditAccountPageView
      bankName={bankName}
      accountNumber={accountNumber}
      onSubmit={patchUser}
      redirectUrlOnSubmit={redirectUrlOnSubmit}
    />
  );
};

const EditUserAccountPage = () => {
  const {bankName, accountNumber} = useUserInfoContext();
  const {patchUser} = useRequestPatchUser();

  return (
    <EditAccountPageView
      bankName={bankName}
      accountNumber={accountNumber}
      onSubmit={patchUser}
      redirectUrlOnSubmit={ROUTER_URLS.myPage}
    />
  );
};

3. useAccount를 계좌 수정 로직이 필요한 곳에서 모두 사용할 수 있도록 리펙터링

기존은 첫 렌더링 시 보여줄 bankName, accountNumber와 완료되었을 떄 실행할 api를 모두 useAccount에서 직접 호출해 사용하고 있었습니다.

useAccount의 위 값들의 의존성을 주입받는게 여러 페이지에서 재사용하기 유리할 것 같아 분리해주었습니다.

const useAccount = ({accountNumber: defaultAccountNumber, bankName: defaultBankName, onSubmit}: UseAccountArgs) => {

그리고 값을 업데이트하는 로직이 handleAccountOnTyping(구: handleAccount), handleAccountOnPaste에서 반복되어 handleAccount 함수로 묶어 재사용할 수 있도록 분리했습니다.

  // 값을 업데이트하는 함수
  const handleAccount = (newAccountNumber: string) => {
    const {errorMessage} = validateAccountNumber(newAccountNumber);
    setAccountNumberErrorMessage(errorMessage);

    const canEdit = canEditAccountNumber(newAccountNumber);

    if (canEdit) setAccountNumber(newAccountNumber);
  };

  // 타자로 입력할 때
  const handleAccountOnTyping = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (isPasting) return;

    const newAccountNumber = event.target.value;
    handleAccount(newAccountNumber);
  };

  // 붙여넣기 할 때
  const handleAccountOnPaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
    setIsPasting(true);

    const newAccountNumber = `${accountNumber}${event.clipboardData.getData('text')}`;
    handleAccount(newAccountNumber);

    setTimeout(() => setIsPasting(false), 0);
  };

4. 유저의 정보를 사용하는 mypage에서는 UserInfoLoader를 이용해 데이터를 받아 사용하도록 함

"/event" 경로일 때 EventLoader를 사용하듯이 같은 방식으로 UserInfoLoader로 감싸주었습니다.

userInfo를 불러오고 그 데이터를 Provider로 뿌려주는 역할을 수행합니다.

5. 자잘한 리펙터링

가능한 bankname에 대한 타입이 없어(string으로만 제한됨) BANKS를 as const로 만든 후 유효한 은행 이름만 추출한 BankName 타입을 선언했습니다.

// service.type
export type BankName = (typeof BANKS)[number]['name'] | '';
// '우리은행' | '토스뱅크' ...

…도록 수정

github-actions · 2024-12-23T07:42:37Z

Test Results

135 tests 135 ✅ 7s ⏱️
25 suites 0 💤
25 files 0 ❌

Results for commit aff607f.

github-actions · 2024-12-23T07:43:24Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-tondfmnoxr.chromatic.com/

jinhokim98

꽤 많은 수정 사항이 있었네요... 고생했어요
mutate onSuccess 관련한 고민을 공유해줘서 고마워요~ 덕분에 언제 onSuccess가 실행되는지 탐구해볼 수 있었습니다. 몇 가지 코멘트 남겨 놨으니 확인 부탁 드려요!

jinhokim98 · 2024-12-23T12:01:50Z

client/src/components/EditAccountPageView.tsx

+    await enrollAccount();
+
+    navigate(redirectUrlOnSubmit);


이 부분에서 await을 해줘서 이전 데이터가 보이는 문제를 해결했다는 거죠? 좋습니다.
저도 이 부분 궁금해서 mutate 함수와 mutate async를 사용했을 때 onSuccess 콜백은 언제 실행되는지 테스트해봤어요!

사진을 보면 mutate async, await과 onSuccess의 경우 함수가 실행되어 요청을 기다린 후 onSuccess가 호출된 후 navigate하는 모습을 보여줬어요.

하지만 mutate와 onSuccess의 경우 함수가 실행되어 navigate하게 되어 함수가 종료된 후 onSuccess가 실행되는 모습을 확인할 수 있었어요.

이 부분에서 일어난 오류가 아니었을까.. 예상합니다

오..! 신기한 내용을 알아봐주셔서 감사합니다.
그렇지만 제가 사용한 mutate는 처음부터 mutateAsync였습니다. 흐흑.. ㅜㅜ 아마 프로미스에 관련된 문제 같아요.

해결되었으니 다행이에요~

jinhokim98 · 2024-12-23T12:22:37Z

client/src/constants/bank.ts

-};
-
-const BANKS: Bank[] = [
+const BANKS = [


오... 이거 생각도 못 했는데.. 저는 은행 이름은 그냥 string으로 관리해도 되겠다고 생각했어요.
확실히 제한을 주면 더 안전할 것 같아요

사실 꼭 필요한 구현은 아닌데요. 꽤나 한정된 문자열만 들어올 수 있으니까 타입으로 한번 만들어봤어요

jinhokim98 · 2024-12-23T12:23:12Z

client/src/constants/errorMessage.ts

+  accountNumberFormat: '계좌번호는 숫자, 연속되지 않는 하이픈(-)만 입력 가능해요',
+  accountNumberLength: `계좌번호는 ${RULE.minAccountNumberLength}자에서 ${RULE.maxAccountNumberLength}자 사이로 입력 가능해요`,


더 꼼꼼한 에러 처리 덕분에 유저가 덜 헷갈릴 것 같아요😄

jinhokim98 · 2024-12-23T12:26:12Z

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

+    initialData: enableInitialData ? initialData : undefined,
+    initialDataUpdatedAt: enableInitialData ? 0 : undefined,


initialDataUpdatedAt은 어떠한 이유로 사용한 것인지 알려주실 수 있을까요?

initialDataUpdatedAt을 써야 initialData가 처음에 세팅되자마자 queryFn으로 요청해옵니다. 로딩없는 서스펜스 느낌이라고 생각하시면 좋을 것 같아요. initialData를 박아놓음과 동시에 get요청을 날리는거죠. get 리스폰스를 받아오는 그 시간동안은 intitalData를 보여주는 겁니다.

initialData 자체는 staleTime동안 fresh하게 남습니다.
만약 유저가 기본 staleTime인 1분 이내로 로그인을 마치고 다시 MainPage로 돌아올 경우 올바르게 유저 데이터를 불러와야 합니다.
하지만 initialData가 fresh한 1분 동안은 다시 요청하지 않기 때문의 1분 안으로 로그인하고 다시 돌아왔을 때 isGuest=true인 initialData를 그대로 사용합니다. 그래서 유저는 로그인을 했는데도 게스트로 평가되어 로그인 화면이 뜨게되죠

이걸 막기 위해 initialData가 즉시 fresh한 데이터로 덮어씌워져야 한단 의미로 initialDataUpdatedAt을 0으로 사용한 것입니다. Data.now와 비교해서 0은 당연히 작기 때문에 바로 queryFn이 호출됩니다.

staleTime을 써도 되긴 하지만 용도가 일치하지 않아서 initialDataUpdatedAt이라는 프로퍼티가 등장한 것이라고 알고있어요.

아하! useQuery에 init data를 설정해서 초기 값을 설정해서 데이터가 불러와 지는 동안에는 초기 값을 보여주고 싶었지만 fresh한 시간 내에 다시 접속했을 때 문제가 일어나서 설정해주신 거군요!

그러면 또 궁금한 점이 있어요. 여기서 초기 값을 설정한 이유가 있을까요? isGuest를 true로 주기 위해 설정해주신 것일까요?

const initialData: UserInfo = { isGuest: true, nickname: '', profileImage: '', accountNumber: '', bankName: '', };

MainPage에서 이 쿼리를 호출할 때 연출되는 상황이 3종류입니다.

(토큰존재) isGuest = false인 카카오 로그인 후
2.(토큰존재) isGuest = true인 게스트로 어떤 행사를 만든 후

(토큰없음) 401에러 뜨는 진짜 첫 접속 또는 쿠키 소멸 상황
현재 로그인 페이지가 뜨는 조건은 isGuest = true인 상황입니다. 다만 3번의 경우 401로 어떤 데이터도 세팅되지 못하기 떄문에 이를 위해 initialData를 주었어요.

메인페이지에서 행사 생성으로 넘어갈 때 isGuest에 따라서 다른 결과를 보여줘야하는데 여기서 초기값이 없으면 안 되기 때문이라고 이해했는데 맞을까요?

jinhokim98 · 2024-12-23T12:28:58Z

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

+    bankName: '',
+  };
+
+  const {data, ...rest} = useSuspenseQuery({


여기를 SuspenseQuery로 바꾸면서 /event/eventId/admin/login/guest or user url에서 문제 없었을까요?
저도 여기를 SuspenseQuery로 하다가 이 부분이 에러가 나서 일반 query로 돌려놨던 문제가 있어서요

구체적으로 어떤 에러가 나는지 잘 모르겠습니다..! 더 자세한 상황을 설명해주실 수 있나요?!?
일단 제가 개발하면서는 크게 에러를 겪은 적은 없는데 혹시 모르겠네요

오!! 잠만 에러가 사라졌나 봐요 저번에 에러가 있었는데 어떻게 하다 보니 에러가 사라졌네요!

다행임니다 호오오

jinhokim98 · 2024-12-23T12:32:43Z

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

+    <EditAccountPageView
+      bankName={bankName}
+      accountNumber={accountNumber}
+      onSubmit={patchUser}
+      redirectUrlOnSubmit={redirectUrlOnSubmit}
+    />


좋은 분리인 것 같아요. 뷰에는 값만 넣어주고 외부에서 행사, 유저 수정 기능을 넣어주기만 하면 되니!

페이지가 받아야하는 props가 많았더라면 이렇게 분리하진 못했을 것 같습니다.. ㅜㅎㅎ

jinhokim98 · 2024-12-23T12:33:20Z

client/src/types/serviceType.ts

@@ -59,8 +59,9 @@ export interface EventCreationData {
  password: Password;
 }

+export type BankName = (typeof BANKS)[number]['name'] | '';


typescript의 신 웨디~~

저런 방법이 있다는걸 저도 이번에 처음 알게 되었네요..!

pakxe added 30 commits December 22, 2024 21:03

rename: 회원을 나타내는 USER 라는 이름을 일치하는 endpoint에 연결

cd4d385

chore: 이름 변경으로 인한 수정 사항

b8534ad

feat: 불필요하게 depth가 깊은 EventId 타입을 flat하게 변경

95c202e

feat: EventLoader가 EditAccountPage를 내포하며, 헤더 UI부분은 그 외 children에게 감싸지…

cd05817

…도록 수정

feat: EventLoader의 내부 로직을 제거하고 EventData를 위한 Provider 호출

f266747

feat: EventPage들을 렌더링하기 위해 필요한 데이터 요청을 수행하는 훅 분리

5940a0a

feat: 데이터를 서브 트리에 뿌리기 위한 Provider 구현

9f935b8

feat: 이벤트에서 사용하는 데이터 컨텍스트를 사용하기 위한 훅 구현

7639328

fix: 중복 데이터 호출 제거

ed80902

feat: outletContext가 아닌 context 데이터를 사용하도록 수정

0b3310a

feat: location.state 데이터 말고 context 데이터를 사용하도록 수정

b222f04

chore: 불필요한 fragment 제거

574258a

chore: feature/#876 땡겨오기

3e98142

feat: 타입으로 만들기 위해 as const 추가

f5fd29b

feat: BankType 사용

bbba225

feat: 응답없는 patch를 위한 request함수 추가

b07b6df

rename: fetcher -> request 파일명 변경에 따른 import 경로 수정

d6f0d14

fix: api PREFIX가 잘못되어 이상한 엔드포인트로 가던 요청 수정

2ac74e0

refactor: user와 관련된 요청을 user 요청만 있는 파일로 이동

be415bd

rename: fetcher -> request 파일명 변경에 따른 import 경로 수정

566f210

feat: BankName이 없는 첫 행사 생성 시기를 위해 빈문자열 유니온으로 추가

9bc1eec

chore: 사용하지 않는 주석 제거

e0e5f67

feat: userInfo를 가져오고 하위 트리에 전달하기 위한 UserInfoLoader 구현

276047b

chore: 경로 수정

3f6c685

feat: 계좌 번호 포맷에 대한 에러 메세지 추가

1d6bd84

feat: my page 하위 페이지 url 선언

71cf6bf

fix: initialData의 타입 추론이 되도록 타입 할당 후 쿼리에 넘기도록 함

7341ed5

feat: onSubmit, 계좌 정보를 외부에서 주입받도록 하고 반복되는 로직 모듈화

7975f20

feat: userInfo를 뿌리기 위한 Provider와 쉽게 사용하기 위한 useContext구현

f7209e1

chore: 경로 수정에 의한 변경

5f3def2

pakxe added 8 commits December 23, 2024 15:17

feat: MyPage에서 컨텍스트 데이터를 사용하도록 함

cd959b9

feat: EditAccountPage를 재사용하기 위해 ui만 분리하고 외부 로직을 주입받도록 함

9aadcee

refactor: 행사 계좌 수정 페이지가 계좌 수정 페이지 ui view를 재사용하도록 수정

a995b93

feat: 유저 계좌 정보 수정 페이지 구현

d39f8ed

feat: MyPage와 EditUserAccountPage를 UserInfoLoader로 감싸도록 router 구성

770bcdf

feat: 사용하지 않는 값을 내보내지 않도록 하며 에러 메세지를 상황에 맞게 띄워줄 수 있도록 수정

7bab2cb

fix: await을 추가하여 응답을 올바르게 받길 기다리도록 함

f7c47d5

fix: 잘못된 쿼리를 invalidate하고 있던 것을 수정

aff607f

pakxe added 🖥️ FE Frontend ⚙️ feat feature 🚧 refactor refactoring labels Dec 23, 2024

pakxe added this to the v3.1.0 milestone Dec 23, 2024

pakxe self-assigned this Dec 23, 2024

pakxe linked an issue Dec 23, 2024 that may be closed by this pull request

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

Open

pakxe changed the base branch from main to fe-dev December 23, 2024 07:44

jinhokim98 approved these changes Dec 23, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pakxe commented Dec 23, 2024 •

edited

Loading

github-actions bot commented Dec 23, 2024

github-actions bot commented Dec 23, 2024

jinhokim98 left a comment

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024 •

edited

Loading

jinhokim98 Dec 24, 2024

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 23, 2024

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 24, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 25, 2024

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 24, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024

jinhokim98 Dec 23, 2024

pakxe Dec 24, 2024

		accountNumberFormat: '계좌번호는 숫자, 연속되지 않는 하이픈(-)만 입력 가능해요',
		accountNumberLength: `계좌번호는 ${RULE.minAccountNumberLength}자에서 ${RULE.maxAccountNumberLength}자 사이로 입력 가능해요`,

		initialData: enableInitialData ? initialData : undefined,
		initialDataUpdatedAt: enableInitialData ? 0 : undefined,

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

Are you sure you want to change the base?

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

Conversation

pakxe commented Dec 23, 2024 • edited Loading

issue

구현 목적

구현 사항

1. 기존의 EditAccountPage에서 UI만 분리

2. 기존의 EditAccountPage와 새로 추가될 마이페이지의 계좌 수정 페이지인 EditUserAccountPage를 1번 컴포넌트를 사용해 구현

3. useAccount를 계좌 수정 로직이 필요한 곳에서 모두 사용할 수 있도록 리펙터링

4. 유저의 정보를 사용하는 mypage에서는 UserInfoLoader를 이용해 데이터를 받아 사용하도록 함

5. 자잘한 리펙터링

github-actions bot commented Dec 23, 2024

Test Results

github-actions bot commented Dec 23, 2024

jinhokim98 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pakxe Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pakxe commented Dec 23, 2024 •

edited

Loading

pakxe Dec 24, 2024 •

edited

Loading