[FE] QR코드로 초대하기 기능 추가 #783

soi-ha · 2024-10-22T09:11:06Z

issue

close [FE] QR로 초대하기 기능 추가 #782

구현 목적

행동대장 서비스는 sns 친구가 아니어도 정산을 할 수 있도록 하는 것이 최우선 목적입니다. 그러나 현재 서비스는 어떤 sns(카톡, 슬랙 등)던 간에 서로 친구가 되어 있어야 사용이 가능합니다.
따라서, sns 없이도 사용할 수 있도록 각 행사의 고유 QR코드를 생성하여 QR코드를 통해 다른 참여자들이 행사 페이지에 접근할 수 있도록 합니다.

구현 결과

구현 방법

qrcode.react 라이브러리를 활용하여 각 행사의 url로 QR 코드를 생성합니다.

qrcode.react 라이브러리

import {QRCodeSVG} from 'qrcode.react';
import getEventPageUrlByEnvironment from '@utils/getEventPageUrlByEnvironment';
import getEventIdByUrl from '@utils/getEventIdByUrl';

// ...

const QRCodePage = () => {
  const eventId = getEventIdByUrl();

  return (
   // ...
      <div css={QRCodeStyle()}>
        <QRCodeSVG value={getEventPageUrlByEnvironment(eventId, 'home')} size={240} fgColor={`${theme.colors.black}`} />
      </div>
	 // ...
  );
};

export default QRCodePage;

qrcode.react의 QRCodeSVG 컴포넌트를 사용합니다.
QRCodeSVG 컴포넌트의 value로 QR 코드를 생성할 url를 넣어줍니다.

QR코드가 생성됩니다. 해당 QR코드는 동일한 url이라면 변하지 않습니다.

데스크탑 QR 코드로 초대하기

현재 데스크탑에서 header의 정산 초대하기 버튼을 클릭하면 내용 및 url 복사만 진행합니다. 데스크탑에서도 QR code 기능을 추가하는 것이 좋을 것이라고 판단했습니다.

따라서, 데스크탑에 정산 초대하기 버튼을 클릭하면 DropDown을 통해 링크 복사하기와 QR코드로 초대하기를 선택할 수 있도록 했습니다.

import {useNavigate} from 'react-router-dom';
import {Dropdown, DropdownButton} from '@components/Design';
import getEventIdByUrl from '@utils/getEventIdByUrl';

// ...

const DesktopShareEventButton = ({onCopy}: DesktopShareEventButtonProps) => {
  // ...
  
  const navigate = useNavigate();
  const eventId = getEventIdByUrl();

  const navigateQRPage = () => {
    navigate(`/event/${eventId}/qrcode`);
  };

  return (
    <div style={{marginRight: '1rem'}}>
      <Dropdown base="button" baseButtonText="정산 초대하기">
        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
      </Dropdown>
    </div>
  );
};

export default DesktopShareEventButton;

jinhokim98

오늘 회의 때 잠깐 나온 이야기를 순식간에 적용시켜버리는 행동대장님 소하.. 너무 멋있습니다.
고생했어요~~

jinhokim98 · 2024-10-22T11:44:11Z

client/src/components/Design/token/zIndex.ts

@@ -13,7 +13,7 @@ const BOTTOM_SHEET_DIMMED_LAYER = NUMBER_KEYBOARD_BOTTOM_SHEET + ABOVE;
 const BOTTOM_SHEET_CONTAINER = BOTTOM_SHEET_DIMMED_LAYER + ABOVE;
 const TOAST = BOTTOM_SHEET_CONTAINER + ABOVE;
 const SELECT_OPTION = ABOVE;
-const DROPDOWN_LIST = BASE + ABOVE;
+const DROPDOWN_LIST = TAB_TEXT + ABOVE;


z-index 대신 수정해줘서 고마워요~~

소하의 zindex 창고 🚀🚀🚀

jinhokim98 · 2024-10-22T11:45:39Z

client/src/components/ShareEventButton/DesktopShareEventButton.tsx

+    <div style={{marginRight: '1rem'}}>
+      <Dropdown base="button" baseButtonText="정산 초대하기">
+        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
+      </Dropdown>
+    </div>
  );


빠르게 드랍다운까지 넣어주셔서 감사합니다~~

jinhokim98 · 2024-10-22T11:46:53Z

client/src/components/ShareEventButton/MobileShareEventButton.tsx

  return (
    <div style={{marginRight: '1rem'}}>
      <Dropdown base="button" baseButtonText="정산 초대하기">
        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />


나중에 여유있을 때 amplitude에 qr코드를 얼마나 사용자들이 클릭하는지 알아봐도 좋을 것 같아요

좋네요..

엠플리튜드 최고

jinhokim98 · 2024-10-22T11:48:03Z

client/src/pages/QRCodePage/QRCodePage.tsx

+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1rem;
+        `}
+      >


이 부분 FunnelLayout을 사용해도 적용이 됩니다 :) (뭔가 만들어놓고 홍보를 못 해서 아쉽긴하지만..)

오홍! 그런게 있었는지 몰랐네요!

그리고 style 분리해도 좋을 것 같아요~!~!

jinhokim98 · 2024-10-22T11:48:42Z

client/src/router.tsx

@@ -24,6 +24,7 @@ const EditBillPage = lazy(() => import('@pages/EditBillPage/EditBillPage'));
 const Account = lazy(() => import('@pages/AccountPage/Account'));
 const ImagesPage = lazy(() => import('@pages/ImagesPage/ImagesPage'));
 const AddImagesPage = lazy(() => import('@pages/AddImagesPage/AddImagesPage'));
+const QRCodePage = lazy(() => import('@pages/QRCodePage/QRCodePage'));


lazy loading까지 꼼꼼하게.. 너무 좋아요

pakxe

안그래도 편한데 더 편해졌네요...!!! 굿굿굿~!!!

pakxe · 2024-10-22T18:20:47Z

client/src/components/ShareEventButton/MobileShareEventButton.tsx

  return (
    <div style={{marginRight: '1rem'}}>
      <Dropdown base="button" baseButtonText="정산 초대하기">
        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />


좋네요..

Todari

정말정말 좋은 아이디어 🚀🚀🚀🚀

Todari · 2024-10-23T06:27:50Z

client/src/components/Design/token/zIndex.ts

@@ -13,7 +13,7 @@ const BOTTOM_SHEET_DIMMED_LAYER = NUMBER_KEYBOARD_BOTTOM_SHEET + ABOVE;
 const BOTTOM_SHEET_CONTAINER = BOTTOM_SHEET_DIMMED_LAYER + ABOVE;
 const TOAST = BOTTOM_SHEET_CONTAINER + ABOVE;
 const SELECT_OPTION = ABOVE;
-const DROPDOWN_LIST = BASE + ABOVE;
+const DROPDOWN_LIST = TAB_TEXT + ABOVE;


소하의 zindex 창고 🚀🚀🚀

Todari · 2024-10-23T06:30:16Z

client/src/components/ShareEventButton/MobileShareEventButton.tsx

  return (
    <div style={{marginRight: '1rem'}}>
      <Dropdown base="button" baseButtonText="정산 초대하기">
        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />


엠플리튜드 최고

Todari · 2024-10-23T06:30:56Z

client/src/pages/QRCodePage/QRCodePage.tsx

+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 1rem;
+        `}
+      >


그리고 style 분리해도 좋을 것 같아요~!~!

github-actions · 2024-10-23T07:34:29Z

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

github-actions · 2024-10-23T07:53:32Z

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

* fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기

* refactor: 랜딩 페이지 디렉토리 구조 변경 (#767) * refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경 * refactor: App을 제외한 페이지 컴포넌트 lazy loading * refactor: QueryClient가 필요하지 않은 랜딩 페이지에서 tanstack-query script 제거 * refactor: tree shaking을 deep하게 적용하기 위해 package.json에 sideEffects false 적용 * feat: prod build 파일에서 sourcemap과 license 파일 제거 * feat: 문의하기 페이지 구현 (#772) * feat: 문의하기 구글 forms 페이지 링크 연결 * fix: chromatic 에러 해결 * refactor 성능 개선 : Preconnect to requered origins (#771) * refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정 * refactor: 성능 개선 : 랜딩 페이지 이미지를 필요한 만큼만 불러오기 (#774) * feat: intersection api를 이용해서 특정 영역이 관측될 때 이미지 src를 채우는 hook 구현 * feat: useImageLazyLoading 훅 적용 * feat: 이미지 alt 값을 한국말로 변경 * fix: feature4,5 이미지를 4 불러올 때 한 번에 불러오는 방식으로 변경 * feat: threshold를 0.1에서 0.05로 조금 더 빨리 불러오도록 변경 * feat: alt 행댕이를 행댕이 - 행동대장 마스코트 라고 자세하게 설명 * feat: threshold default value 0.1 -> 0.05로 변경 * feat: 0.1 -> 0.05 놓친 부분 수정 * refactor: 성능 개선 : Kakao script를 필요한 곳에서 다운로드 받기 (#776) * feat: Kakao script 동적으로 불러올 수 있는 함수 작성 * feat: 드롭다운 버튼 베이스 onClick 메서드 추가 * feat: 모바일 환경에서 초대버튼 눌렀을 때 카카오 스크립트를 불러오도록 설정 * feat: KakaoInitializer 제거 * refactor: v2.1.1에서 구현한 랜딩페이지 개선 (#777) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거 * fix: 이벤트 홈 페이지에 있을 땐 토큰이 있어도 지출 상세로 접근 불가하도록 수정 (#781) * fix: cypress에서는 sideEffects를 tree shaking하지 않음 * refactor: 성능 개선 : Serve images in next-gen formats (#784) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * chore: webp포맷의 이미지 추가 * chore: webp타입 추가 * feat: 이미지 호스팅 경로를 생성하는 함수 구현 * feat: src, fallbackSrc를 지정해 대체 이미지를 보여줄 수 있는 Image 컴포넌트 구현 * feat: Image컴포넌트를 사용해 이미지를 불러오도록 수정 * feat: Avatar 컴포넌트에서 이미지 경량화를 위한 Image 컴포넌트를 사용 * chore: 사용하지 않고있는 토스 아이콘 제거 * feat: 용량 큰 이미지를 사용하는 곳에선 webp이미지를 사용하도록 수정 * feat: 이미지 경로를 받아오는 함수가 svg포맷도 받아들일 수 있도록 수정 * fix: 이미지 크기가 넘쳐버리지 않도록 width 속성 추가 * feat: 은행 목록 이미지를 webp로 이미지 호스팅 서버에서 가져오도록 수정 * chore: 사용하지 않는 이미지 제거 * feat: 흔듯콘을 webp로 불러오도록 함 * fix: 흔듯콘에 width부여 * design: 행동개시 행댕이의 크기가 너무 커지지 않도록 maxWidth 속성 추가 --------- Co-authored-by: 이태훈 <[email protected]> * feat: QR코드로 초대하기 기능 추가 (#783) * fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기 --------- Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: TaehunLee <[email protected]> Co-authored-by: Pakxe <[email protected]> Co-authored-by: 이태훈 <[email protected]>

soi-ha added 4 commits October 22, 2024 17:16

fix: DropDown에 Tap 글씨가 위에 있는 에러 수정

f992519

feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가

ebcc114

feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현

fe34b2e

feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기

e402fb5

soi-ha added 🖥️ FE Frontend ⚙️ feat feature labels Oct 22, 2024

soi-ha requested review from pakxe, jinhokim98 and Todari October 22, 2024 09:11

soi-ha self-assigned this Oct 22, 2024

soi-ha added this to the v2.1.2 milestone Oct 22, 2024

jinhokim98 approved these changes Oct 22, 2024

View reviewed changes

pakxe approved these changes Oct 22, 2024

View reviewed changes

Todari approved these changes Oct 23, 2024

View reviewed changes

Merge branch 'fe-dev' into feature/#782

187a502

Merge branch 'fe-dev' into feature/#782

0b6baa4

Todari merged commit 1306d4d into fe-dev Oct 23, 2024
2 checks passed

Todari deleted the feature/#782 branch October 23, 2024 08:04

Todari mentioned this pull request Oct 23, 2024

[FE] v2.1.2 배포 #788

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] QR코드로 초대하기 기능 추가 #783

[FE] QR코드로 초대하기 기능 추가 #783

soi-ha commented Oct 22, 2024

jinhokim98 left a comment

jinhokim98 Oct 22, 2024

Todari Oct 23, 2024

jinhokim98 Oct 22, 2024

jinhokim98 Oct 22, 2024

pakxe Oct 22, 2024

Todari Oct 23, 2024

jinhokim98 Oct 22, 2024

soi-ha Oct 23, 2024

Todari Oct 23, 2024

jinhokim98 Oct 22, 2024

pakxe left a comment

pakxe Oct 22, 2024

Todari left a comment

Todari Oct 23, 2024

Todari Oct 23, 2024

Todari Oct 23, 2024

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024

[FE] QR코드로 초대하기 기능 추가 #783

[FE] QR코드로 초대하기 기능 추가 #783

Conversation

soi-ha commented Oct 22, 2024

issue

구현 목적

구현 결과

구현 방법

qrcode.react 라이브러리

데스크탑 QR 코드로 초대하기

jinhokim98 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

pakxe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024