feat: 메인 페이지 스크롤 이벤트 구현 #5

src/App.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import CustomList from '@pages/custom-list';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Main from '@pages/main';
 
@@ -9,7 +8,6 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Main />} />
-          <Route path="/custom-list" element={<CustomList />} />
         </Routes>
       </BrowserRouter>
     </div>

src/pages/custom-list/index.style.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100vw;
-  height: 90.1vh;
+  height: 90vh;
 
   .footer {
     text-align: center;

src/pages/custom-list/index.tsx

@@ -1,7 +1,7 @@
 import Header from '@components/header';
 import { Container } from './index.style';
 import { Pattern } from '@api/pattern';
-import { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { PatternData } from '@api/pattern.types';
 import { Wheel } from '@api/wheel';
 import { WheelData } from '@api/wheel.types';
@@ -15,13 +15,18 @@ import CustomGroup from '@components/custom-group';
 import Button from '@components/button';
 import { useNavigate } from 'react-router';
 
-function CustomList() {
+const CustomList = forwardRef<HTMLDivElement>((props, ref) => {
   const navigate = useNavigate();
   const [patterns, setPatterns] = useState<PatternData[]>([]);
   const [wheels, setWheels] = useState<WheelData[]>([]);
   const [fonts, setFonts] = useState<FontData[]>([]);
   const [colors, setColors] = useState<ColorData[]>([]);
   const [accessories, setAccessories] = useState<AccessoryData[]>([]);
+  const [scroll, setScroll] = useState(0);
+
+  const onScrollFunction = () => {
+    setScroll(window.scrollY);
+  };
 
   useEffect(() => {
     const getData = async () => {
@@ -39,28 +44,28 @@ function CustomList() {
       setAccessories(accessories);
     };
     getData();
-  }, []);
+    onScrollFunction();
+  }, [scroll]);
 
-  console.log(patterns);
-  console.log(wheels);
-  console.log(fonts);
+  // 추후 imageUrl이 반영되면 제거
   console.log(colors);
-  console.log(accessories);
 
   return (
     <>
       <Header />
-      <Container>
-        <CustomGroup name="패턴 디자인" data={wheels} type="small" />
+      <Container onWheel={onScrollFunction} ref={ref}>
+        <CustomGroup name="패턴 디자인" data={patterns} type="small" />
         <CustomGroup name="휠 디자인" data={wheels} type="small" />
-        <CustomGroup name="측면 디자인" data={wheels} type="small" />
+        <CustomGroup name="측면 디자인" data={fonts} type="small" />
         <CustomGroup name="액세서리" data={accessories} type="small" />
         <div className="footer">
           <Button text="타이어 만들기" onClick={() => navigate('/')} />
         </div>
       </Container>
     </>
   );
-}
+});
+
+CustomList.displayName = 'CustomList';
 
 export default CustomList;

src/pages/main/index.style.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100vw;
-  height: 90.1vh;
+  height: 90vh;
   background: linear-gradient(#ffffff, #9ba4b4);
   font-weight: 700;
   .content {

src/pages/main/index.tsx

@@ -4,29 +4,43 @@ import Logo from '@components/logo';
 import mainImage from '@assets/image/main-tire.png';
 import Icon from '@components/icon';
 import scrollIcon from '@assets/icon/scroll.svg';
-import { useNavigate } from 'react-router';
+import CustomList from '@pages/custom-list';
+import { useEffect, useRef, useState } from 'react';
 
 function Main() {
-  const navigate = useNavigate();
+  const [scroll, setScroll] = useState(0);
+  const wheel = useRef<null | HTMLDivElement>(null);
+
+  const onScrollFunction = () => {
+    setScroll(window.scrollY);
+  };
+
+  useEffect(() => {
+    scrollFunction();
+  }, [scroll]);
+
+  const scrollFunction = () => {
+    if (scroll > 0 && scroll < 800) {
+      wheel.current?.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      return;
+    }
+  };
 
   return (
     <>
       <Header inversion></Header>
-      <Container>
+      <Container onWheel={onScrollFunction}>
         <div className="content">
           <Logo type="large" />
           <div className="title">Outfit Of Tire</div>
           <img className="image" src={mainImage} alt="tire_example" />
         </div>
-        <div
-          className="footer"
-          onClick={() => {
-            navigate('/custom-list');
-          }}
-        >
+        <div className="footer">
           <Icon icon={scrollIcon} text="Scroll" />
         </div>
       </Container>
+      <CustomList ref={wheel} />
     </>
   );
 }