[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #577

jinhokim98 · 2024-09-21T08:13:24Z

issue

close [FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #569

구현 사항

퍼널 디자인에 맞는 계좌번호 입력 화면 구현

계좌 번호 입력 페이지를 임시로 만들어두었다면 이제는 퍼널 디자인이 fe-dev에 반영이 되어 퍼널 디자인을 적용시켰습니다.

추가로 Label input의 옵션을 추가했습니다. 모두 default 값은 false입니다.

isAlwaysOnLabel
- 이 페이지 내에서는 라벨이 항상 보이는 것이 더 자연스럽기 때문입니다.
isAlwaysOnInputBorder
- input의 border도 항상 보이는 것이 더 자연스럽기 때문입니다.

은행과 계좌번호

서버로부터 Event 정보를 불러와서 은행과 계좌번호를 가져옵니다.
값이 비었을 경우 (주최자가 등록하지 않은 경우)는 빈 값입니다.
값이 있을 경우 이전에 등록한 값으로 바로 보여집니다.

확인 버튼을 누르면 수정 요청을 기다린 뒤에 admin 페이지로 라우팅을 변경합니다.

계좌번호가 등록되지 않았을 때 공유를 누르면 계좌번호 입력 유도

계좌번호가 등록되지 않은 상태로 링크 공유를 했을 때, 사용자가 토스를 이용해서 송금을 할 수 있는 기능을 이용할 수 없기 때문에 추가했습니다.

하지만 아직 카카오톡 공유에는 넣지 못한 것이 #545 이 머지가 되지 않아 반영할 수 없었어요.

그리고 이 부분을 구현하면서 react-copy-to-clipboard 라이브러리에 대한 고민점이 있습니다. 이는 아래 논의하고 싶은 부분에 적을게요

송금액이 0원일 때의 대체 버튼 추가

송금액이 0원이면 보낼 돈이 없으니 토스 송금 기능을 막아야 한다는 의견이 있어서 추가했습니다.

BankSendButton 옵션으로 isFinish를 추가했으며 default는 false입니다.
이 옵션을 true로 설정하게 되면 송금완료 disabled 버튼이 나오게 됩니다.

계좌번호 복사 후 토스 송금 유도

이전에는 계좌번호 api 논의가 안 되어 구현할 수 없어 텍스트로만 대체해두었는데, 논의가 완료되고 api가 구현되어 실제 사용자가 선택한 값이 복사 되도록 했습니다.

형식 : 국민은행 000000-11-222222 10000원

논의하고 싶은 부분

react-copy-to-clipboard의 선언적 형태에 대해서

<CopyToClipboard text={clipboardText} onCopy={onCopy}>
    <button>버튼</button>
</CopyToClipboard>

CopyToClipboard으로 감싸고 그 안에 버튼을 넣는 선언적 방식입니다.
구현하기 간단하지만 이로 인해 발생하는 문제가 있어요
바로 버튼을 눌렀을 때 항상 복사가 일어난다는 점입니다.

계좌번호가 입력되지 않은 경우 입력으로 유도하는 과정에서 텍스트가 항상 복사가 되어버립니다. 그래서 링크가 복사되었어요 토스트가 나오면서 계좌번호 입력으로 이동합니다. (뭔가 부자연스럽다고 생각했어요)

여기서 기술검토 내용을 가져와보자면

브라우저 호환성 보장:
- navigator.clipboard.writeText 메서드는 보안상의 이유로 특정 브라우저 및 버전에서 호환성 문제가 있을 수 있습니다. 특히, HTTPS 환경에서만 작동하고 사용자 제스처 내에서 호출되어야 하며 특정 모바일 환경에서도 정상적으로 작동하지 않습니다. react-copy-to-clipboard 라이브러리는 이러한 제한 사항을 해결하여 다양한 브라우저 환경에서 안정적으로 작동합니다.

https는 배포 환경에서만 잘 돌아가면 되고 onClick을 사용해서만 구현하면 제스처 내에서 호출 문제는 없으나 특정 모바일 환경에서도 정상적으로 작동하지 않습니다. 가 문제입니다.

라이브러리가 선언적 형태 이외에 다른 방식도 지원했으면 완벽했겠지만 그렇지 않아서;;; 어떻게 위 사진과 같은 문제를 보완할 수 있을지 논의해봐요

🫡 참고사항

…eng-dong into feature/#569

github-actions · 2024-09-21T13:24:58Z

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

Todari

엄청 많은 볼륨이었는데 고생 많았어요 쿠키~!~!
증말증말 든든쓰맨

CopyToClipboard 관련해선 다함께 얘기 나눠봐요~!

Todari · 2024-09-24T05:13:57Z

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

+  argTypes: {
+    isFinish: {
+      description: '',
+      control: {type: 'boolean'},
+    },
+  },


꼼꼼한 storybook 작성 매우 좋습니다~! 🚀🚀

Todari · 2024-09-24T05:15:04Z

client/src/components/Design/components/BankSendButton/BankSendButton.tsx

 };

-const BankSendButton = ({clipboardText, onBankButtonClick, ...buttonProps}: BankSendButtonProps) => {
+const BankSendButton = ({clipboardText, onBankButtonClick, isFinish = false, ...buttonProps}: BankSendButtonProps) => {


isFinish 보다는 isFinished라고 사용하거나
혹은 우리가 용어 정리에서 정했던 isDeposited 를 사용해도 좋을 것 같네요~

isDeposited를 사용하게 되면 isDeposited (입금 상태)도 같이 완료로 바꿔주어야 할 것 같아요.
이 기능만 들어가면 isDeposited도 찬성입니다.

Todari · 2024-09-24T05:15:56Z

client/src/components/Design/components/BankSendButton/BankSendButton.tsx

+      <Flex justifyContent="center" alignItems="center" gap="0.125rem">
+        <Text size="tiny" textColor="black">
+          송금완료
+        </Text>
+      </Flex>


Flex에 children이 하나밖에 없는데 gap 0.125rem 이 있는 이유가 있나요?

와우... 그렇네요 단순 복붙하다가ㅋㅋㅋㅋㅋ 감사합니다!

Todari · 2024-09-24T05:16:57Z

client/src/components/Design/components/ExpenseList/ExpenseList.tsx

@@ -22,7 +22,7 @@ function ExpenseItem({name, price, onBankButtonClick, clipboardText, ...divProps
      <Flex alignItems="center" gap="0.5rem">
        <Text>{price.toLocaleString('ko-kr')}원</Text>
        {isMobileDevice() ? (
-          <BankSendButton clipboardText={clipboardText} onBankButtonClick={onBankButtonClick} />
+          <BankSendButton clipboardText={clipboardText} onBankButtonClick={onBankButtonClick} isFinish={price <= 0} />


price가 음수인 상황도 있을까요?!

음수인 상황은 없지만 혹시나 모르는 상황을 대비해서 (아까와 같은 차등 정산을 조작할 때 마이너스가 나온 버그 등) 0보다 같거나 작은 상황은 정산이 끝났다고 대처를 해둔 것입니다.

Todari · 2024-09-24T05:20:03Z

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

+  css([
+    {
+      display: 'flex',
+      justifyContent: 'space-between',
+      gap: '1rem',
+      padding: '0.75rem 1rem',
+      borderRadius: '1rem',
+      backgroundColor: getBackgroundColorStyle(theme, inputType),
+
+      boxSizing: 'border-box',
+      boxShadow: getBorderStyle(isFocus, theme, isError),
+    },
+    isAlwaysOnBorder ? inputBoxAlwaysBorderStyle(theme) : inputBoxAnimationStyle(),
+  ]);


쿠키가 PR 본문에서 말해줬던, isAlwaysOnBorder에 대해서 생각해 봤는데요,
input의 border는 사실 focus가 되어있다는 것을 보여주기 위함이에요
우리가 지금 UX 개선을 하고 난 뒤에 input 여러개가 한페이지에 있는 케이스가 없어지면서,
autoFocus로 인해서 border가 있는 상황을 주로 보게 되는데, 여전히 input에서 Focus 가 빠지게 되면 border 는 없어지고 있어요.

전체적인 프로젝트에서 focus가 있는 곳 에만 primary color 라인을 사용하고 있는데,
이대로라면 유저는 이곳에선 focus가 두곳에 계속 존재하고 있는 것으로 오해할 수도 있다고 생각해요.
다시 한번 같이 의논해 보면 좋을 것 같아요~~

흐음... 그럴 수도 있겠네요.. 피그마에 이렇게 구현이 되어있어서 이 페이지에는 이렇게 해야 하는구나! 하고 추가했던 건데 통일성을 깨뜨렸다는 생각도 드네요;;

다같이 이야기해봐도 좋을 것 같아요

Todari · 2024-09-24T05:23:24Z

client/src/components/Design/components/Top/Line.tsx

+      {elements.map((text, index) => {
        return (
-          <Text size="subTitle" textColor={emphasize.includes(text) ? 'black' : 'gray'} style={{whiteSpace: 'pre'}}>
+          <Text
+            key={`${text}-${index}`}
+            size="subTitle"
+            textColor={emphasize.includes(text) ? 'black' : 'gray'}
+            style={{whiteSpace: 'pre'}}
+          >


이곳에서 elements는 정적으로 사용되다 보니, key가 필요 없겠다라는 생각을 했는데,
그럼에도 꼼꼼히 해결해주는 쿠키 고마워요~!

이게 안 들어가면 window console 창에서 빨간색 경고가 발생해요. 그래서 추가해뒀습니다!

Todari · 2024-09-24T05:24:57Z

client/src/components/ShareEventButton/ShareEventButton.tsx

+    if (bankName === '' || accountNumber === '') {
+      showToast({
+        showingTime: 3000,
+        message: '잠깐! 정산을 초대하기 전에\n계좌를 등록해주세요.',
+        type: 'error',
+        position: 'bottom',
+        bottom: '8rem',
+      });


ㅋㅋㅋ 문구 넘 귀엽다~~~

Todari · 2024-09-24T05:26:18Z

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

+const useRequestPatchEventOutline = () => {
+  const eventId = getEventIdByUrl();
+
+  const queryClient = useQueryClient();
+
+  const {mutateAsync} = useMutation({
+    mutationFn: (eventOutline: Partial<Event>) => requestPatchEvent({eventId, eventOutline}),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.event],
+      });
+    },
+  });
+
+  return {
+    patchEventOutline: mutateAsync,
+  };
+};


물론 아직 사용되진 않겠지만, 다른 hook들에서도 return에 rest를 반환해 주고 있긴 해요~!

저는 나중에 필요할 때 추가해서 선언해주려고 했었는데 다른 곳에서 그렇게 하고 있다면 통일성을 지켜볼게요

Todari · 2024-09-24T05:28:32Z

client/src/mocks/handlers/eventHandlers.ts

+  // PATCH /api/admin/events/:eventId (requestPatchEvent)
+  http.patch<any, {eventName?: string; bankName?: string; accountNumber?: string}>(
+    `${MOCK_API_PREFIX}${ADMIN_API_PREFIX}/:eventId`,


MSW 수정까지... 대쿠키

…024-haeng-dong into feature/#569

github-actions · 2024-09-24T06:12:35Z

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

jinhokim98 added 30 commits September 11, 2024 12:18

chore: png 확장자 추가로 인한 file-loader설치 및 png 확장자 선언

c682c96

feat: icon에 toss 타입 추가

ebfa59e

feat: 은행 선택 디자인 구현

7d4d6fb

design: 은행선택 grid 반응형적용

e0c2654

feat: 계좌번호 입력 플로우 생성

27e354f

fix: 콘솔 창 오류 제거

09ebe89

fix: 은행 이름 변경

b0e3b7d

design: 지출 리스트 갭 변경

2e33a0a

feat: 참여자 별 내역에서 은행아이콘(토스) 보이도록 설정

184c20d

feat: cansubmit 추가

062b4ad

fix: 스토리북 prop 누락 추가

a18a428

chore: png도 jest mock되도록 설정

e846a8e

fix: 테스트 환경에선 상대경로 api, 브라우저 환경에선 절대경로 api를 호출하도록 설정

ebb4e1c

feat: 은행 송금 버튼 생성

7a0e375

feat: 버튼 클릭 시 모바일 환경에서 토스로 넘기는 기능

61f81bc

feat: 모바일 기기 감지 기능 구현

3ee23be

refactor: 디자인 컴포넌트에 맞게 디자인 외 기능 외부로 분리

7f8c2c6

style: Bank send Flex 컴포넌트 이용

c693b1c

style: bank select Flex 컴포넌트 이용

41fdb33

style: expense list flex 컴포넌트로 이용

b626ed3

style: 사용하지 않는 import 제거

bf63716

style: fileMock -> imageFileMock으로 파일 이름 변경

7038777

feat: 이벤트 정보를 불러오고 정보를 수정하는 api 구현

e06edbf

feat: eventName -> eventOutline으로 이름 변경

3a04065

feat: 계좌를 입력받는 기능 구현

12f1ee3

feat: 계좌번호 라우트 이벤트 id를 받도록 변경

e39c9d8

fix: 서버상태와 클라이언트 상태 분리

01ee38b

test: event outline 수정 핸들러 등록

eb8a507

fix: input 초기값 undefined 주지 않도록 설정

735abbc

fix: 변경된 상태를 보내도록 수정

456c64a

jinhokim98 added 4 commits September 21, 2024 15:58

feat: 송금액이 0원일 때의 대체 버튼 추가

847cc78

design: 토스 아이콘 크기 수정

f9787af

feat: 계좌번호 정보를 복사 후 토스를 여는 기능 구현

279863f

feat: 계좌번호가 입력되지 않았을 때 토스 송금 버튼을 눌렀을 때 토스트가 나오도록 설정

10f7fa3

jinhokim98 added 🖥️ FE Frontend ⚙️ feat feature labels Sep 21, 2024

jinhokim98 added this to the lev4 milestone Sep 21, 2024

jinhokim98 self-assigned this Sep 21, 2024

jinhokim98 requested review from Todari, pakxe and soi-ha September 21, 2024 08:14

jinhokim98 linked an issue Sep 21, 2024 that may be closed by this pull request

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #569

Closed

5 tasks

Todari approved these changes Sep 21, 2024

View reviewed changes

jinhokim98 added 4 commits September 21, 2024 22:00

Merge branch 'fe-dev' of https://github.com/woowacourse-teams/2024-ha…

adc819d

…eng-dong into feature/#569

Merge branch 'fe-dev' of https://github.com/woowacourse-teams/2024-ha…

b53b9a8

…eng-dong into feature/#569

fix: 지우지 않은 코드 삭제

4b33e2e

fix: 홈에서 버튼 누를 때 navigate 오류나는 버그 수정

b9f5316

woowacourse-teams deleted a comment from github-actions bot Sep 24, 2024

Todari approved these changes Sep 24, 2024

View reviewed changes

jinhokim98 added 4 commits September 24, 2024 15:01

style: isFinish -> isDeposited로 prop 명 변경

6550c67

design: 불필요한 gap 제거

0bcac50

refactor: mutation rest return하도록 설정

46398ff

Merge branch 'feature/#569' of https://github.com/woowacourse-teams/2…

cfeea6a

…024-haeng-dong into feature/#569

pakxe approved these changes Sep 24, 2024

View reviewed changes

Todari merged commit 349230b into fe-dev Sep 24, 2024
2 checks passed

Todari deleted the feature/#569 branch September 24, 2024 07:03

Todari added this to the v2.0.0 milestone Sep 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #577

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #577

jinhokim98 commented Sep 21, 2024 •

edited

Loading

github-actions bot commented Sep 21, 2024

Todari left a comment

Todari Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

Todari Sep 24, 2024

jinhokim98 Sep 24, 2024

Todari Sep 24, 2024

github-actions bot commented Sep 24, 2024

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #577

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (마무리) #577

Conversation

jinhokim98 commented Sep 21, 2024 • edited Loading

issue

구현 사항

퍼널 디자인에 맞는 계좌번호 입력 화면 구현

은행과 계좌번호

계좌번호가 등록되지 않았을 때 공유를 누르면 계좌번호 입력 유도

송금액이 0원일 때의 대체 버튼 추가

계좌번호 복사 후 토스 송금 유도

논의하고 싶은 부분

react-copy-to-clipboard의 선언적 형태에 대해서

🫡 참고사항

github-actions bot commented Sep 21, 2024

Todari left a 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

github-actions bot commented Sep 24, 2024

jinhokim98 commented Sep 21, 2024 •

edited

Loading