fix: useMainPageYScroll.ts를 FeatureSection 내부에서 호출하도록 변경

woowacourse-teams · Oct 23, 2024 · b4360ae · b4360ae
1 parent adb844b
commit b4360ae
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
@@ -1,22 +1,22 @@
 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';
+import useMainPageYScroll from '@hooks/useMainPageYScroll';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
-  const {featureSectionRef} = useMainPageYScroll();
+
   return (
     <div css={mainContainer}>
       <Nav trackStartCreateEvent={trackStartCreateEvent} />
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
-      <FeatureSection ref={featureSectionRef} />
+      <FeatureSection />
       <CreatorSection />
     </div>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
@@ -1,16 +1,18 @@
 import {css} from '@emotion/react';
-import {forwardRef, ForwardedRef} from 'react';
 
 import {SimpleShare} from './SimpleShare';
 import {AutoCalculate} from './AutoCalculate';
 import {CheckDeposit} from './CheckDeposit';
 import {SimpleTransfer} from './SimpleTransfer';
 import {RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
+import useMainPageYScroll from '@hooks/useMainPageYScroll';
+
+const FeatureSection = () => {
+  const {featureSectionRef} = useMainPageYScroll();
 
-const FeatureSection = forwardRef<HTMLDivElement>((props, ref: ForwardedRef<HTMLDivElement>) => {
   return (
     <div
-      ref={ref}
+      ref={featureSectionRef}
       css={css({
         display: 'flex',
         transform: 'translateX(200vw)',
@@ -25,6 +27,6 @@ const FeatureSection = forwardRef<HTMLDivElement>((props, ref: ForwardedRef<HTML
       <RecordMemoryWithPhoto />
     </div>
   );
-});
+};
 
 export default FeatureSection;