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

woowacourse-teams · Oct 23, 2024 · 0ecc883 · 0ecc883
2 parents 7cfce63 + fc44763
commit 0ecc883
Show file tree

Hide file tree

Showing 16 changed files with 202 additions and 43 deletions.
diff --git a/client/index.html b/client/index.html
@@ -35,11 +35,6 @@
     <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" />
-    <script
-      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
-      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
-      crossorigin="anonymous"
-    ></script>
   </head>
   <body>
     <div id="root"></div>

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/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/KakaoInitializer/KakaoInitializer.tsx b/client/src/components/KakaoInitializer/KakaoInitializer.tsx
diff --git a/client/src/components/ShareEventButton/MobileShareEventButton.tsx b/client/src/components/ShareEventButton/MobileShareEventButton.tsx
@@ -2,6 +2,8 @@ import toast from '@hooks/useToast/toast';
 
 import {Dropdown, DropdownButton} from '@components/Design';
 
+import initKakao from '@utils/initKakao';
+
 type MobileShareEventButtonProps = {
   copyShare: () => Promise<void>;
   kakaoShare: () => void;
@@ -18,7 +20,7 @@ const MobileShareEventButton = ({copyShare, kakaoShare}: MobileShareEventButtonP
 
   return (
     <div style={{marginRight: '1rem'}}>
-      <Dropdown base="button" baseButtonText="정산 초대하기">
+      <Dropdown base="button" baseButtonText="정산 초대하기" onBaseButtonClick={initKakao}>
         <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
         <DropdownButton text="카카오톡으로 초대하기" onClick={kakaoShare} />
       </Dropdown>

diff --git a/client/src/hooks/useImageLazyLoading.ts b/client/src/hooks/useImageLazyLoading.ts
@@ -0,0 +1,49 @@
+import {useEffect, useState} from 'react';
+
+type UseImageLazyLoadingProps<T extends HTMLElement> = {
+  targetRef: React.RefObject<T>;
+  src: string;
+  threshold?: number;
+};
+
+const useImageLazyLoading = <T extends HTMLElement>({
+  targetRef,
+  src,
+  threshold = 0.05,
+}: UseImageLazyLoadingProps<T>) => {
+  const [imageSrc, setImageSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (targetRef && !imageSrc) {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setImageSrc(src);
+            if (targetRef.current) {
+              observer.unobserve(targetRef.current);
+            }
+          }
+        },
+        {threshold},
+      );
+
+      if (targetRef.current) {
+        observer.observe(targetRef.current);
+      }
+
+      return () => {
+        if (targetRef.current) {
+          observer.unobserve(targetRef.current);
+        }
+      };
+    }
+
+    return;
+  }, [targetRef, src]);
+
+  return {
+    imageSrc,
+  };
+};
+
+export default useImageLazyLoading;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
@@ -1,11 +1,23 @@
+import {useRef} from 'react';
+
 import Text from '@HDesign/components/Text/Text';
 
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {descriptionSectionStyle, imgStyle} from './DescriptionSection.style';
 
 const DescriptionSection = () => {
+  const descriptionRef = useRef<HTMLDivElement>(null);
+
+  const {imageSrc} = useImageLazyLoading({
+    targetRef: descriptionRef,
+    src: `${process.env.IMAGE_URL}/standingDog.svg`,
+    threshold: 0.05,
+  });
+
   return (
-    <div css={descriptionSectionStyle}>
-      <img css={imgStyle} src={`${process.env.IMAGE_URL}/standingDog.svg`} alt="행댕이" />
+    <div css={descriptionSectionStyle} ref={descriptionRef}>
+      <img css={imgStyle} src={imageSrc} alt="행댕이 - 행동대장 마스코트" />
       <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
         행동대장을 준비했어요
           `}</Text>

diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
@@ -1,12 +1,24 @@
+import {useRef} from 'react';
+
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {Text} from '@components/Design';
 
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './AutoCalculate.style';
 
 const AutoCalculate = () => {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  const {imageSrc} = useImageLazyLoading({
+    targetRef: sectionRef,
+    src: `${process.env.IMAGE_URL}/feature2.svg`,
+    threshold: 0.05,
+  });
+
   return (
-    <section css={sectionStyle}>
+    <section css={sectionStyle} ref={sectionRef}>
       <article css={articleStyle}>
-        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={imageSrc} css={imageStyle} alt="차등 정산 계산을 쉽게 해주는 UI 이미지"/>
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
             계산은 저희가 알아서 해드려요

diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
@@ -1,10 +1,22 @@
+import {useRef} from 'react';
+
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {Text} from '@components/Design';
 
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './CheckDeposit.style';
 
 const CheckDeposit = () => {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  const {imageSrc} = useImageLazyLoading({
+    targetRef: sectionRef,
+    src: `${process.env.IMAGE_URL}/feature3.svg`,
+    threshold: 0.05,
+  });
+
   return (
-    <section css={sectionStyle}>
+    <section css={sectionStyle} ref={sectionRef}>
       <article css={articleStyle}>
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
@@ -16,7 +28,7 @@ const CheckDeposit = () => {
             간편하게 관리할 수 있어요.`}
           </Text>
         </div>
-        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature3.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={imageSrc} css={imageStyle} alt="입금 확인 기능 UI 이미지" />
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
@@ -2,6 +2,8 @@ import {css} from '@emotion/react';
 
 import useMainPageYScroll from '@hooks/useMainPageYScroll';
 
+import {useRef} from 'react';
+
 import {SimpleShare} from './SimpleShare';
 import {AutoCalculate} from './AutoCalculate';
 import {CheckDeposit} from './CheckDeposit';
@@ -10,6 +12,7 @@ import {RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
 
 const FeatureSection = () => {
   const {featureSectionRef} = useMainPageYScroll();
+  const simpleTransferRef = useRef<HTMLElement>(null);
 
   return (
     <div
@@ -24,8 +27,8 @@ const FeatureSection = () => {
       <SimpleShare />
       <AutoCalculate />
       <CheckDeposit />
-      <SimpleTransfer />
-      <RecordMemoryWithPhoto />
+      <SimpleTransfer targetRef={simpleTransferRef} />
+      <RecordMemoryWithPhoto targetRef={simpleTransferRef} />
     </div>
   );
 };

diff --git a/...src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx b/...src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx
@@ -1,8 +1,22 @@
+import {useRef} from 'react';
+
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {Text} from '@components/Design';
 
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './RecordMemoryWithPhoto.style';
 
-const RecordMemoryWithPhoto = () => {
+type RecordMemoryWithPhotoProps = {
+  targetRef: React.RefObject<HTMLElement>;
+};
+
+const RecordMemoryWithPhoto = ({targetRef}: RecordMemoryWithPhotoProps) => {
+  const {imageSrc} = useImageLazyLoading({
+    targetRef,
+    src: `${process.env.IMAGE_URL}/feature5.svg`,
+    threshold: 0.05,
+  });
+
   return (
     <section css={sectionStyle}>
       <article css={articleStyle}>
@@ -16,7 +30,7 @@ const RecordMemoryWithPhoto = () => {
         정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
           </Text>
         </div>
-        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature5.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={imgSrc} css={imageStyle} alt="행사 사진을 저장할 수 있는 UI 이미지"
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
@@ -1,10 +1,22 @@
+import {useRef} from 'react';
+
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {Text} from '@components/Design';
 
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleShare.style';
 
 const SimpleAccount = () => {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  const {imageSrc} = useImageLazyLoading({
+    targetRef: sectionRef,
+    src: `${process.env.IMAGE_URL}/feature1.svg`,
+    threshold: 0.05,
+  });
+
   return (
-    <section css={sectionStyle}>
+    <section css={sectionStyle} ref={sectionRef}>
       <article css={articleStyle}>
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
@@ -16,7 +28,7 @@ const SimpleAccount = () => {
           복잡한 절차 없이, 빠르게 정산을 마치세요.`}
           </Text>
         </div>
-        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature1.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={imageSrc} css={imageStyle} />
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
@@ -1,12 +1,24 @@
+import useImageLazyLoading from '@hooks/useImageLazyLoading';
+
 import {Text} from '@components/Design';
 
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleTransfer.style';
 
-const SimpleTransfer = () => {
+type SimpleTransferProps = {
+  targetRef: React.RefObject<HTMLElement>;
+};
+
+const SimpleTransfer = ({targetRef}: SimpleTransferProps) => {
+  const {imageSrc} = useImageLazyLoading({
+    targetRef,
+    src: `${process.env.IMAGE_URL}/feature4.svg`,
+    threshold: 0.05,
+  });
+
   return (
-    <section css={sectionStyle}>
+    <section css={sectionStyle} ref={targetRef}>
       <article css={articleStyle}>
-        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature4.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={imageSrc} css={imageStyle} />
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
             몇 번의 클릭으로 송금 완료!