[FE] 초대하기 OS 공유 기능 추가 #548

jinhokim98 · 2024-09-10T04:57:29Z

issue

close [FE] 초대하기 OS 공유 기능 추가 #545

구현 의도

정산 초대하기를 눌렀을 때 링크 복사가 된다. 이 때 링크가 url인 줄 착각하고 주소창에 복사 붙여넣기하게 된다. OS 공유가 있어서 바로 링크를 뿌릴 수 있다면 편할 것 같다는 사용자 피드백이 있어서 이를 개선하고자 기능을 추가했습니다.

구현 결과

OS 공유 대신 카카오톡 공유 기능 활용

이슈의 마지막 부분에 OS 공유가 지원되지 않는 브라우저 환경에서 공유를 어떻게 제공할 것인가에 대한 고민이 있었고, 카카오톡 공유 기능을 사용하면 좋겠다는 생각이 들었습니다.

사용자 흐름을 예상하면, 정산자가 링크를 복사해서 카카오톡 톡방에 링크를 전달하고 참여자들이 카카오톡 링크를 타고 들어와 금액을 확인 후 지불을 할 것이라 예상합니다.
그래서 초대하기 버튼을 눌렀을 때 바로 카카오톡으로 이동 시킨다면 사용자가 헷갈리지 않고 우리의 의도대로 참여자들에게 링크를 전달할 수 있을 것이라 생각해서 카카오톡 공유 기능을 활용했습니다.

이 때, 원래의 의도는 OS 공유가 가능한 환경에서는 OS 공유를 활용하고, 지원하지 않는 브라우저에서 카카오톡 공유를 활용하려고 했으나, 조원들의 의견을 들어본 결과 모바일에서는 카카오톡 공유로 통일 시키는 것이 더 좋을 것이라는 의견을 반영해 OS 공유대신 카카오톡 공유 기능으로 변경했습니다.

카카오톡 공유 지원범위

디바이스를 모바일과 데스크탑으로 나누어 모바일에서는 카카오톡 공유를 사용하게 했으며, 데스크탑에서는 기존의 형식을 유지했습니다. 물론 pc 카톡이 있지만 pc에서는 기존처럼 링크를 복사해서 붙여넣는 방식이 더 좋을 것이라는 판단에서입니다.

정산 초대하기 버튼 이름 변경

버튼을 누르면 바로 카카오톡으로 연결되는 만큼, 이름을 변경하지 않으면 사용자에게 혼란을 줄 것으로 예상되어 버튼 이름을 "카카오톡으로 정산 초대하기"변경했습니다. 단 모바일이 아닌 환경에서는 카카오톡 공유를 사용하지 않기 때문에 기존대로 이름을 유지하고, 버튼을 누르면 기존대로 링크가 복사됩니다.

구현 사진

논의하고 싶은 부분(선택)

우려사항

카카오톡 공유 호출 횟수제한
카카오톡 공유 기능은 일 30,000건 까지 가능합니다. 물론 지금의 환경에서는 일 최대 30,000건을 넘을 것 같지 않지만, 나중에 유저를 많이 유치하여 30,000건을 넘길 수 있는 성공한 프로젝트가 된다면, 위의 OS 공유를 지원하지 않는 브라우저 환경에서만 카카오톡 공유 기능으로 기능을 변경할 필요성이 있습니다. (물론 지금은 그 정도로 유저가 많지 않기 때문에 통일하는 것이 더 합리적인 판단 같습니다)
카카오톡으로 사용하지 않는 유저를 위한 대응
사용자의 흐름을 예상했을 때 카카오톡을 많이 사용할 것 같다는 생각 하에 카카오톡 공유 기능을 했지만 카카오톡을 사용하지 않는 사용자에 대해선 대응을 하지 않았어요. 이에 대해서 논의를 해봐야 할 것 같아요.

ex) 카카오톡이 설치되지 않은 유저
ex) 카카오톡이 아닌 다른 메신저를 통한 공유 (slack, 단체 문자메시지 등)

🫡 참고사항

카카오톡 공유 기능을 활용하므로 카카오톡 api key가 필요합니다.
프론트엔드 개발자분들은 KAKAO_JAVASCRIPT_KEY env를 추가해주시면 됩니다. api key는 디스코드를 통해 전달해드릴게요

github-actions · 2024-09-10T14:51:22Z

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

Todari

유저 편의성 측면에서 많은 고민을 하고, 이미 있는 바퀴들을 이용해서 잘 굴러가도록 다양한 시도를 해보는게 정말 보기 좋습니다~!~!
쿠키같은 크리에이티브한 개발자가 팀에 있어서 유저의 문제점을 해결해 주는데에 다양한 생각을 같이 해볼 수 있는 것 같아요

몇가지 comment 드렸는데, 쿠키가 생각해서 반영할것만 반영해봐도 좋을 것 같아요~!

client/cypress/support/commands.ts

client/index.html

client/src/components/KakaoInitializer/KakaoInitializer.tsx

client/src/components/MemberInviteButton/MemberInviteButton.tsx

client/src/hooks/useEventPageLayoutPage.ts

github-actions · 2024-09-11T06:11:07Z

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

soi-ha

쿠키~! 너무 좋은 기능 추가해서 고마워요!
쿠키가 만들어준 기능 덕분에 유저들이 덜 헷갈리게 될 것 같은 느낌이 팍! 들어서 너무 좋네욯ㅎ
수정할 부분은 보이지 않아서 바로 approve 할게용

soi-ha · 2024-09-13T12:45:02Z

client/cypress/e2e/createEvent.cy.ts

@@ -1,6 +1,7 @@
 import CONSTANTS from '../constants/constants';
 beforeEach(() => {
  cy.blockSentry();
+  cy.blockKakao();


cypress까지 놓치지 않고 꼼꼼하게 적용 👍

soi-ha · 2024-09-13T12:47:15Z

client/src/components/ShareEventButton/ShareEventButton.tsx

+  const isMobile = isMobileDevice();
+  const {shareText, onInviteButtonClick} = useShareEvent();
+
+  return isMobile ? (


모바일과 데스크탑 둘 다를 고려해준 부분 정말 좋아요!

soi-ha · 2024-09-13T12:52:28Z

client/src/pages/EventPage/EventPageLayout.tsx


-import {useToast} from '@hooks/useToast/useToast';
-import useRequestGetEventName from '@hooks/queries/useRequestGetEventName';
+import useEventPageLayoutPage from '@hooks/useEventPageLayoutPage';


오.. hook으로 분리한 이유가 왜일까? 위에 읽으면서 생각했는데 여기서 깔끔하게 사용하기 위해서군요! 👍

맞아요. 페이지 컴포넌트에서의 가독성을 높이기 위해서 분리했어요

soi-ha · 2024-09-13T12:59:14Z

client/src/utils/isMobileDevice.ts

@@ -0,0 +1,8 @@
+const isMobileDevice = () => {


mobile 기기인지 확인할 수 있다는 건 알았는데, 이렇게 하는 거군요! 쿠키 덕분에 좋은거 알고 갑니댱 ㅌㅌ~

pakxe

하나의 기능 추가를 위해 여러 코드가 추가되었네요. 이런 저런 생각을 많이 해야했을 것 같아요. 고생많으셨어요~!!

몇 개 코멘트를 남기긴 했지만 걸리는 시간에 비해 얻는 것이 크지 않다고 판단된다면 넘기셔도 조아여

client/cypress/support/commands.ts

pakxe · 2024-09-13T13:13:14Z

client/src/components/ShareEventButton/ShareEventButton.tsx

+  const isMobile = isMobileDevice();
+  const {shareText, onInviteButtonClick} = useShareEvent();


이곳에서도 isMobileDevice를 호출하고 있는데, useShareEvent안에서 isMobileDevice를 다시 호출하고 있네요. 간단하게 인자로 넘겨주는 방식으로 isMobileDevice를 한 번만 실행되도록 할 수 있을 것 같아요. 다른 방법도 있구요. 그치만 굳이굳이라면 ~!! 스키뿌

다시 봤는데 이 피드백을 놓쳤어요;;; (왜 놓쳤지?ㅋㅋ)
생각해보면 컴포넌트 안에서 호출하고 그 값을 훅의 인자로 넘겨줬어도 좋을 것 같아요!
39293c6

pakxe · 2024-09-13T13:17:28Z

client/src/hooks/useEventPageLayoutPage.ts

+import useRequestGetEventName from './queries/useRequestGetEventName';
+import useNavSwitch from './useNavSwitch';
+
+const useEventPageLayoutPage = () => {


EventPage LayoutPage라는 이름이 어떤 일을 하는 함수인지 조금 헷갈릴 수 있겠단 생각이 ...! page라는 말이 2번이 들어가서 어려운 것 같아요.

EventPageLayout 컴포넌트에서 사용하는 훅이라 Page라고 붙여봤었어요
(저번에 토다리가 이야기했던 페이지에서 사용하는 훅 파일 이름 형식을 참고해서)

다시 생각해보니 Page가 이미 있는데 다시 Page를 뒤에 붙이고 있네요
그렇다면 뒤에 Page를 빼볼게요

pakxe · 2024-09-13T13:19:06Z

client/src/hooks/useShareEvent.ts

+
+  return {
+    shareText,
+    onInviteButtonClick,


이 훅의 이름은 ShareEvent이고, 뱉는 함수는 Invite라는 용어를 사용했는데요. 하나로 일관성있게 통일시켜줘도 좋을 것 같아요.

으악 그러네요! Share라는 이름이 들어가면 통일성이 있을 것 같아요. 변경해보겠습니다😊

pakxe · 2024-09-13T13:19:51Z

client/src/hooks/useShareEvent.ts

+
+import useRequestGetEventName from './queries/useRequestGetEventName';
+
+const useShareEvent = () => {


훅으로 분리시킨 것 좋네요!

pakxe · 2024-09-13T13:20:47Z

client/src/pages/EventPage/EventPageLayout.tsx

-            </Button>
-          </CopyToClipboard>
-        )}
+        {!isLoginPage && <ShareEventButton />}


가독성을 올린 리펙터링이라고 생각합니다. 👍👍

pakxe · 2024-09-13T13:21:43Z

client/src/types/kakao.d.ts

+  }
+}
+
+namespace Kakao {


namespace라는 키워드도 있었군요..??? 혹시 이렇게 선언해주는 것의 역할은 무엇인가요?!!

카카오 공식문서를 보면 Kakao api들은 Kakao.~~ 형식으로 호출해야 합니다. => (window.Kakao.Share.~~)
카카오 docs

typescript에게 window.Kakao가 있다고 알려줘야 에러가 나지 않고 있다고 알려주기 위해 namespace를 사용했어요.

덕분에 새로운 것을 알아갑니다~!!!

pakxe · 2024-09-13T13:24:06Z

client/src/App.tsx

+              <KakaoInitializer>
+                <Outlet />
+              </KakaoInitializer>


혹시 감싸는 형태로 만들어야만 하는 이유가 있었을까요? KaKaoInitializer 컴포넌트가 단순히 스타터 역할이라면 ReactQueryDevTools처럼 한 줄로도 가능할 것 같아요..!

저는 조금 다르게 생각했는데 스타터의 역할을 하기 때문에 Outlet에 오는 컴포넌트들을 KakaoInitializer로 감싸주는 것이 의미 상 더 좋다고 생각했어요.

KakaoInitializer로 Outlet을 감싸줌으로서 Outlet에 들어오는 컴포넌트들은 카카오 서비스가 필요함을 직관적으로 보여줄 수 있다고 생각했습니다.

ReactQueryDevTools의 경우에는 디버깅을 위한 도구이지 Outlet에서 반드시 필요한 서비스는 아니므로 저렇게 선언하는 것이 맞다고 생각했어요

그런 이유였군요.~~ 확실히 이런 이유도 있겠구나 알게되었네요. 조아요조아요

github-actions · 2024-09-14T03:46:24Z

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

github-actions · 2024-09-14T08:11:52Z

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

…eng-dong into feature/#545

github-actions · 2024-09-21T02:11:20Z

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

jinhokim98 added 4 commits September 10, 2024 13:33

feat: 카카오 공유를 사용하기 위한 초기 설정

ff8cdcf

feat: 모바일 디바이스를 감지할 수 있는 메서드 추가

6d8f97f

feat: 모바일 기기에서는 카카오톡 공유, 데스크탑에서는 텍스트 복사 유지

e9d6ba5

style: 공유 텍스트 객체를 재사용

7204776

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

jinhokim98 added this to the lev4 milestone Sep 10, 2024

jinhokim98 requested review from pakxe, soi-ha and Todari September 10, 2024 04:57

jinhokim98 self-assigned this Sep 10, 2024

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

[FE] 초대하기 OS 공유 기능 추가 #545

Closed

2 tasks

jinhokim98 and others added 9 commits September 10, 2024 14:05

fix: kakao api test 환경에선 돌아가지 않도록 설정

1196b0d

chore: cypress-run node-env 추가

4d47f50

fix: cypress에서 kakao init을 호출하지 않도록 mocking

a1bdfac

fix: Cypress.on을 이용한 에러처리 무시;

1de3c0d

fix: intercept 메서드 수정

5c140d2

fix: test 환경이 아닌 경우 initialized도 읽지 않도록 변경

da5de77

fix: test 환경에선 돌아가지 않도록 부등호수정

f773b59

fix: window.kakao가 undefined일 경우 돌아가지 않도록 방어

681af10

fix: 다시 blockKakao 복구

4d63cff

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

Todari requested changes Sep 11, 2024

View reviewed changes

jinhokim98 added 3 commits September 11, 2024 12:23

style: member invite => share event로 컴포넌트 이름 변경

dda09c3

refactor: event layout hook에서 share 책임 분리

82c9285

style: 카카오톡 공유 실행 함수 이름 변경

baad8f8

Todari approved these changes Sep 11, 2024

View reviewed changes

jinhokim98 mentioned this pull request Sep 12, 2024

[FE] 참여자 별 내역에서 토스로 송금 유도하는 기능 (중간) #556

Merged

soi-ha approved these changes Sep 13, 2024

View reviewed changes

pakxe approved these changes Sep 13, 2024

View reviewed changes

jinhokim98 added 2 commits September 14, 2024 12:17

style: useEventPageLayout hook 파일 이름 변경

8a92b2d

style: invite -> share로 용어 통일성

5ea8d45

refactor: isMobile 한 번만 호출되도록 변경

39293c6

jinhokim98 mentioned this pull request Sep 19, 2024

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

Closed

5 tasks

jinhokim98 added 2 commits September 21, 2024 11:05

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

0477ee7

…eng-dong into feature/#545

fix: 변경된 구조로 인한 오류 수정

41d7e8a

jinhokim98 merged commit 9bcbace into fe-dev Sep 21, 2024
2 checks passed

jinhokim98 deleted the feature/#545 branch September 21, 2024 12:04

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] 초대하기 OS 공유 기능 추가 #548

[FE] 초대하기 OS 공유 기능 추가 #548

jinhokim98 commented Sep 10, 2024

github-actions bot commented Sep 10, 2024

Todari left a comment

github-actions bot commented Sep 11, 2024

soi-ha left a comment

soi-ha Sep 13, 2024

soi-ha Sep 13, 2024

soi-ha Sep 13, 2024

jinhokim98 Sep 14, 2024

soi-ha Sep 13, 2024

pakxe left a comment

pakxe Sep 13, 2024

jinhokim98 Sep 14, 2024 •

edited

Loading

pakxe Sep 13, 2024

jinhokim98 Sep 14, 2024

pakxe Sep 13, 2024

jinhokim98 Sep 14, 2024

pakxe Sep 13, 2024

pakxe Sep 13, 2024

pakxe Sep 13, 2024

jinhokim98 Sep 14, 2024

pakxe Sep 14, 2024

pakxe Sep 13, 2024

jinhokim98 Sep 14, 2024

pakxe Sep 14, 2024

github-actions bot commented Sep 14, 2024

github-actions bot commented Sep 14, 2024

github-actions bot commented Sep 21, 2024

		const isMobile = isMobileDevice();
		const {shareText, onInviteButtonClick} = useShareEvent();


		import useRequestGetEventName from './queries/useRequestGetEventName';

		const useShareEvent = () => {

[FE] 초대하기 OS 공유 기능 추가 #548

[FE] 초대하기 OS 공유 기능 추가 #548

Conversation

jinhokim98 commented Sep 10, 2024

issue

구현 의도

구현 결과

OS 공유 대신 카카오톡 공유 기능 활용

카카오톡 공유 지원범위

정산 초대하기 버튼 이름 변경

구현 사진

논의하고 싶은 부분(선택)

우려사항

🫡 참고사항

github-actions bot commented Sep 10, 2024

Todari left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 11, 2024

soi-ha 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

pakxe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinhokim98 Sep 14, 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

github-actions bot commented Sep 14, 2024

github-actions bot commented Sep 14, 2024

github-actions bot commented Sep 21, 2024

jinhokim98 Sep 14, 2024 •

edited

Loading