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

woowacourse-teams · Oct 23, 2024 · 0b6baa4 · 0b6baa4
2 parents 187a502 + 86b36ca
commit 0b6baa4
Show file tree

Hide file tree

Showing 34 changed files with 451 additions and 140 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/GlobalStyle.ts b/client/src/GlobalStyle.ts
@@ -124,6 +124,7 @@ export const GlobalStyle = css`
   }
 
   body {
+    overflow-x: hidden;
     font-family:
       'Pretendard',
       -apple-system,

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
@@ -5,6 +5,7 @@ import toast from '@hooks/useToast/toast';
 import {Dropdown, DropdownButton} from '@components/Design';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
+import initKakao from '@utils/initKakao';
 
 type MobileShareEventButtonProps = {
   copyShare: () => Promise<void>;
@@ -29,7 +30,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="QR코드로 초대하기" onClick={navigateQRPage} />
         <DropdownButton text="카카오톡으로 초대하기" onClick={kakaoShare} />

diff --git a/client/src/components/StepList/Step.tsx b/client/src/components/StepList/Step.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import {useNavigate} from 'react-router-dom';
+import {useMatch, useNavigate} from 'react-router-dom';
 import {css} from '@emotion/react';
 
 import Amount from '@components/Design/components/Amount/Amount';

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/hooks/useMainPageYScroll.ts b/client/src/hooks/useMainPageYScroll.ts
@@ -0,0 +1,35 @@
+import {useEffect, useRef} from 'react';
+
+const useMainPageYScroll = () => {
+  const featureSectionRef = useRef<HTMLDivElement>(null);
+  const translateX = useRef(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (featureSectionRef.current) {
+        const featureSectionTop = featureSectionRef.current.offsetTop;
+        const scrollY = window.scrollY;
+
+        if (scrollY >= featureSectionTop && translateX.current < window.innerWidth * 4) {
+          window.scrollTo(0, featureSectionTop);
+          translateX.current += scrollY - featureSectionTop;
+          const newTransform = `translateX(calc(200vw - ${translateX.current > 0 ? translateX.current : 0}px))`;
+          featureSectionRef.current.style.transform = newTransform;
+        }
+        if (scrollY <= featureSectionTop && translateX.current > 0) {
+          window.scrollTo(0, featureSectionTop);
+          translateX.current += scrollY - featureSectionTop;
+          const newTransform = `translateX(calc(200vw - ${translateX.current < window.innerWidth * 4 ? translateX.current : window.innerWidth * 4}px))`;
+          featureSectionRef.current.style.transform = newTransform;
+        }
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return {featureSectionRef};
+};
+
+export default useMainPageYScroll;
diff --git a/client/src/hooks/useMainSectionBackgroundScroll.ts b/client/src/hooks/useMainSectionBackgroundScroll.ts
@@ -0,0 +1,28 @@
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+const useMainSectionBackgroundScroll = (trackStartCreateEvent: () => void) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    trackStartCreateEvent();
+    navigate(ROUTER_URLS.createEvent);
+  };
+
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY <= window.innerHeight);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return {isVisible, handleClick};
+};
+
+export default useMainSectionBackgroundScroll;
diff --git a/client/src/pages/EventPage/HomePage/HomePage.tsx b/client/src/pages/EventPage/HomePage/HomePage.tsx
@@ -1,6 +1,6 @@
 import type {EventPageContextProps} from '../EventPageLayout';
 
-import {useNavigate, useOutletContext} from 'react-router-dom';
+import {useMatch, useNavigate, useOutletContext} from 'react-router-dom';
 
 import StepList from '@components/StepList/Steps';
 import useRequestGetSteps from '@hooks/queries/step/useRequestGetSteps';
@@ -13,10 +13,14 @@ import {Icon, Tab, Tabs, Title} from '@HDesign/index';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
+import {ROUTER_URLS} from '@constants/routerUrls';
+
 import {receiptStyle} from './HomePage.style';
 
 const HomePage = () => {
   const {isAdmin, eventName} = useOutletContext<EventPageContextProps>();
+  const isInHomePage = useMatch(ROUTER_URLS.home) !== null;
+
   const {steps} = useRequestGetSteps();
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
   const {images} = useRequestGetImages();
@@ -38,7 +42,7 @@ const HomePage = () => {
       />
       <Tabs>
         <Tab label="참여자 별 정산" content={<Reports />} />
-        <Tab label="전체 지출 내역" content={<StepList data={steps ?? []} isAdmin={isAdmin} />} />
+        <Tab label="전체 지출 내역" content={<StepList data={steps ?? []} isAdmin={isAdmin && !isInHomePage} />} />
       </Tabs>
     </div>
   );

diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
@@ -1,10 +1,12 @@
 import useAmplitude from '@hooks/useAmplitude';
+import useMainPageYScroll from '@hooks/useMainPageYScroll';
 
 import Nav from './Nav/Nav';
 import {MainSection} from './Section/MainSection';
 import {DescriptionSection} from './Section/DescriptionSection';
 import {FeatureSection} from './Section/FeatureSection';
 import {mainContainer} from './MainPage.style';
+import CreatorSection from './Section/CreatorSection/CreatorSection';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
@@ -15,6 +17,7 @@ const MainPage = () => {
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
       <FeatureSection />
+      <CreatorSection />
     </div>
   );
 };

diff --git a/client/src/pages/MainPage/Section/CreatorSection.tsx b/client/src/pages/MainPage/Section/CreatorSection.tsx
diff --git a/client/src/pages/MainPage/Section/CreatorSection/Avatar.style.ts b/client/src/pages/MainPage/Section/CreatorSection/Avatar.style.ts
@@ -0,0 +1,17 @@
+import {css} from '@emotion/react';
+
+export const avatarStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '0.5rem',
+  '@media (min-width: 1200px)': {
+    gap: '1rem',
+  },
+});
+
+export const avatarImageStyle = css({
+  width: '100%',
+  height: '100%',
+  borderRadius: '25%',
+});