woowacourse-teams · Todari · Oct 23, 2024 · Oct 18, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx
@@ -2,6 +2,7 @@
 
 import type {Preview} from '@storybook/react';
 import {HDesignProvider} from '../src/components/Design';
+import {css, Global} from '@emotion/react';
 
 const preview: Preview = {
   parameters: {
@@ -30,11 +31,23 @@ const preview: Preview = {
     },
   },
   decorators: [
-    Story => (
-      <HDesignProvider>
-        <Story />
-      </HDesignProvider>
-    ),
+    Story => {
+      return (
+        <div>
+          <Global
+            styles={css`
+              @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+              body {
+                font-family: 'Pretendard', sans-serif;
+              }
+            `}
+          />
+          <HDesignProvider>
+            <Story />
+          </HDesignProvider>
+        </div>
+      );
+    },
   ],
 };
 

diff --git a/client/index.html b/client/index.html
@@ -32,11 +32,9 @@
 
     <link rel="canonical" href="https://haengdong.pro/" />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
-    <script
-      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
-      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
-      crossorigin="anonymous"
-    ></script>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -89,6 +89,7 @@
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-query": "^5.51.23",
+    "qrcode.react": "^4.1.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,7 +5,6 @@ import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
 import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
 import ToastContainer from '@components/Toast/ToastContainer';
-import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
 import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
 
 import {HDesignProvider} from '@HDesign/index';
@@ -26,9 +25,7 @@ const App: React.FC = () => {
             <NetworkStateCatcher />
             <ToastContainer />
             <AmplitudeInitializer>
-              <KakaoInitializer>
-                <Outlet />
-              </KakaoInitializer>
+              <Outlet />
             </AmplitudeInitializer>
           </QueryClientBoundary>
         </ErrorCatcher>

diff --git a/client/src/GlobalStyle.ts b/client/src/GlobalStyle.ts
@@ -2,8 +2,6 @@ import {css} from '@emotion/react';
 
 // reset css -> index css
 export const GlobalStyle = css`
-  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
-
   *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
     all: unset;
     display: revert;
@@ -126,6 +124,7 @@ export const GlobalStyle = css`
   }
 
   body {
+    overflow-x: hidden;
     font-family:
       'Pretendard',
       -apple-system,

diff --git a/client/src/assets/image/Toss_Symbol_Primary.png b/client/src/assets/image/Toss_Symbol_Primary.png
diff --git a/client/src/assets/image/banksprite.png b/client/src/assets/image/banksprite.png
diff --git a/client/src/components/Design/components/BankSelect/BankSelect.style.ts b/client/src/components/Design/components/BankSelect/BankSelect.style.ts
@@ -1,12 +1,12 @@
 import {css} from '@emotion/react';
 
-import ImageSprite from '@assets/image/banksprite.png';
+import getImageUrl from '@utils/getImageUrl';
 
 export const iconStyle = (position: string) =>
   css({
     width: '80px',
     height: '80px',
-    background: `url(${ImageSprite}) ${position}`,
+    background: `url(${getImageUrl('banksprite', 'webp')}) ${position}`,
   });
 
 export const bankSelectStyle = css({

diff --git a/client/src/components/Design/components/Carousel/Carousel.stories.tsx b/client/src/components/Design/components/Carousel/Carousel.stories.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import type {Meta, StoryObj} from '@storybook/react';
 
 import Carousel from './Carousel';

diff --git a/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx b/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import Icon from '../Icon/Icon';
 
 import {deleteButtonStyle} from './Carousel.style';

diff --git a/client/src/components/Design/components/Carousel/CarouselIndicator.tsx b/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import {useTheme} from '@components/Design/theme/HDesignProvider';
 
 import {indicatorContainerStyle, indicatorStyle} from './Carousel.style';

diff --git a/...esign/components/Carousel/useCarousel.tsx → ...Design/components/Carousel/useCarousel.ts b/...esign/components/Carousel/useCarousel.tsx → ...Design/components/Carousel/useCarousel.ts
diff --git a/client/src/components/Design/components/Dropdown/ButtonBase.tsx b/client/src/components/Design/components/Dropdown/ButtonBase.tsx
@@ -12,14 +12,20 @@ type ButtonBaseProps = DropdownProps & {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   dropdownRef: React.RefObject<HTMLElement>;
+  onBaseButtonClick?: () => void;
 };
 
-const ButtonBase = ({isOpen, setIsOpen, dropdownRef, baseButtonText, children}: ButtonBaseProps) => {
+const ButtonBase = ({isOpen, setIsOpen, dropdownRef, baseButtonText, onBaseButtonClick, children}: ButtonBaseProps) => {
   const {theme} = useTheme();
 
+  const onClick = () => {
+    if (onBaseButtonClick) onBaseButtonClick();
+    setIsOpen(true);
+  };
+
   return (
     <>
-      <Button variants="tertiary" size="small" onClick={() => setIsOpen(true)}>
+      <Button variants="tertiary" size="small" onClick={onClick}>
         {baseButtonText}
       </Button>
       {isOpen && (

diff --git a/client/src/components/Design/components/Dropdown/Dropdown.tsx b/client/src/components/Design/components/Dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ import MeatballBase from './MeatballBase';
 import ButtonBase from './ButtonBase';
 import {dropdownBaseStyle} from './Dropdown.style';
 
-const Dropdown = ({base = 'meatballs', baseButtonText, children}: DropdownProps) => {
+const Dropdown = ({base = 'meatballs', baseButtonText, onBaseButtonClick, children}: DropdownProps) => {
   const {isOpen, setIsOpen, baseRef, dropdownRef} = useDropdown();
   const isDropdownOpen = isOpen && !!baseRef.current;
 
@@ -21,6 +21,7 @@ const Dropdown = ({base = 'meatballs', baseButtonText, children}: DropdownProps)
           <ButtonBase
             isOpen={isDropdownOpen}
             setIsOpen={setIsOpen}
+            onBaseButtonClick={onBaseButtonClick}
             dropdownRef={dropdownRef}
             children={children}
             baseButtonText={baseButtonText}

diff --git a/client/src/components/Design/components/Dropdown/Dropdown.type.ts b/client/src/components/Design/components/Dropdown/Dropdown.type.ts
@@ -8,5 +8,6 @@ export type DropdownButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
 export type DropdownProps = {
   base?: DropdownBase;
   baseButtonText?: string;
+  onBaseButtonClick?: () => void;
   children: React.ReactElement<DropdownButtonProps>[];
 };
diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts
@@ -15,7 +15,6 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   check: 'primary',
   x: 'gray',
   pencilMini: 'gray',
-  toss: 'white',
   meatballs: 'black',
   editPencil: 'gray',
   heundeut: 'gray',

diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @emotion/react */
 
-import Toss from '@assets/image/Toss_Symbol_Primary.png';
 import InputDelete from '@assets/image/inputDelete.svg';
 import Error from '@assets/image/error.svg';
 import Confirm from '@assets/image/confirm.svg';
@@ -18,6 +17,10 @@ import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
 import ChevronDownLarge from '@assets/image/chevronDownLarge.svg';
 
+import getImageUrl from '@utils/getImageUrl';
+
+import Image from '../Image/Image';
+
 import {iconStyle} from './Icon.style';
 
 export const ICON = {
@@ -31,10 +34,11 @@ export const ICON = {
   check: <Check />,
   x: <X />,
   pencilMini: <PencilMini />,
-  toss: <img src={Toss} width="16" height="16" alt="toss icon" />,
   meatballs: <Meatballs />,
   editPencil: <EditPencil />,
-  heundeut: <img src={`${process.env.IMAGE_URL}/heundeut.svg`} />,
+  heundeut: (
+    <Image src={getImageUrl('heundeut', 'webp')} fallbackSrc={getImageUrl('heundeut', 'svg')} style={{width: '3rem'}} />
+  ),
   photoButton: <PhotoButton />,
   chevronDown: <ChevronDownLarge />,
 } as const;

diff --git a/client/src/components/Design/components/Image/Image.tsx b/client/src/components/Design/components/Image/Image.tsx
@@ -0,0 +1,15 @@
+type ImageProps = React.ComponentProps<'img'> & {
+  src: string;
+  fallbackSrc?: string;
+};
+
+const Image = ({src, fallbackSrc, ...htmlProps}: ImageProps) => {
+  return (
+    <picture>
+      <source srcSet={src} />
+      <img src={fallbackSrc} {...htmlProps} />
+    </picture>
+  );
+};
+
+export default Image;
diff --git a/client/src/components/Design/theme/GlobalStyle.ts b/client/src/components/Design/theme/GlobalStyle.ts
@@ -2,8 +2,6 @@ import {css} from '@emotion/react';
 
 // reset css -> index css
 export const GlobalStyle = css`
-  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
-
   *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
     all: unset;
     display: revert;

diff --git a/client/src/components/Design/token/zIndex.ts b/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;
 
 export const ZINDEX = {
   bottomSheetDimmedLayer: BOTTOM_SHEET_DIMMED_LAYER,

diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
@@ -15,8 +15,9 @@ const Footer: React.FC<FooterProps> = () => {
         <a href="https://github.com/woowacourse-teams/2024-haeng-dong/wiki" target="_blank">
           행동대장 소개
         </a>
-        {/* TODO: (@soha) 문의 페이지 링크로 꼭!! 추후 수정 */}
-        <Link to={'/'}>문의하기</Link>
+        <a href="https://forms.gle/qtGXJ8WdPsWA3KURA" target="_blank">
+          문의하기
+        </a>
         <a href="mailto:[email protected]">이메일</a>
       </div>
       <Text size="tiny" textColor="gray">

diff --git a/client/src/components/KakaoInitializer/KakaoInitializer.tsx b/client/src/components/KakaoInitializer/KakaoInitializer.tsx
diff --git a/client/src/components/Logo/Logo.style.ts b/client/src/components/Logo/Logo.style.ts
@@ -6,3 +6,8 @@ export const logoStyle = css({
 
   width: '100%',
 });
+
+export const logoImageStyle = css({
+  maxWidth: '300px',
+  width: '100%',
+});
diff --git a/client/src/components/Logo/RunningDogLogo.tsx b/client/src/components/Logo/RunningDogLogo.tsx
@@ -1,9 +1,17 @@
-import {logoStyle} from './Logo.style';
+import Image from '@components/Design/components/Image/Image';
+
+import getImageUrl from '@utils/getImageUrl';
+
+import {logoImageStyle, logoStyle} from './Logo.style';
 
 const RunningDogLogo = () => {
   return (
     <div css={logoStyle}>
-      <img src={`${process.env.IMAGE_URL}/runningDog.svg`} />
+      <Image
+        css={logoImageStyle}
+        src={getImageUrl('runningDog', 'webp')}
+        fallbackSrc={getImageUrl('runningDog', 'png')}
+      />
     </div>
   );
 };

diff --git a/client/src/components/Logo/StandingDogLogo.tsx b/client/src/components/Logo/StandingDogLogo.tsx
@@ -1,9 +1,13 @@
+import Image from '@components/Design/components/Image/Image';
+
+import getImageUrl from '@utils/getImageUrl';
+
 import {logoStyle} from './Logo.style';
 
 const StandingDogLogo = () => {
   return (
     <div css={logoStyle}>
-      <img src={`${process.env.IMAGE_URL}/standingDog.svg`} />
+      <Image src={getImageUrl('standingDog', 'webp')} fallbackSrc={getImageUrl('standingDog', 'png')} />
     </div>
   );
 };

diff --git a/client/src/components/ShareEventButton/DesktopShareEventButton.tsx b/client/src/components/ShareEventButton/DesktopShareEventButton.tsx
@@ -1,12 +1,16 @@
+import {useNavigate} from 'react-router-dom';
+
 import toast from '@hooks/useToast/toast';
 
-import {Button} from '@components/Design';
+import {Dropdown, DropdownButton} from '@components/Design';
+
+import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 type DesktopShareEventButtonProps = React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
   onCopy: () => Promise<void>;
 };
 
-const DesktopShareEventButton = ({onCopy, children, ...buttonProps}: DesktopShareEventButtonProps) => {
+const DesktopShareEventButton = ({onCopy}: DesktopShareEventButtonProps) => {
   const copyAndToast = async () => {
     await onCopy();
     toast.confirm('링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!', {
@@ -15,10 +19,20 @@ const DesktopShareEventButton = ({onCopy, children, ...buttonProps}: DesktopShar
     });
   };
 
+  const navigate = useNavigate();
+  const eventId = getEventIdByUrl();
+
+  const navigateQRPage = () => {
+    navigate(`/event/${eventId}/qrcode`);
+  };
+
   return (
-    <Button size="small" variants="tertiary" onClick={copyAndToast} style={{marginRight: '1rem'}} {...buttonProps}>
-      {children}
-    </Button>
+    <div style={{marginRight: '1rem'}}>
+      <Dropdown base="button" baseButtonText="정산 초대하기">
+        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
+      </Dropdown>
+    </div>
   );
 };