Merge pull request #18 from endless-horses/feature#5-routing

메인 페이지 -> 커스텀 항목 리스트 페이지 라우팅 구현

package.json

@@ -15,6 +15,8 @@
     "craco-alias": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.21.3",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.8",
     "typescript": "^4.9.5",

src/App.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
-import CustomList from '@pages/custom-list';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Main from '@pages/main';
 
 function App() {
   return (
     <div className="App">
-      <CustomList />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Main />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

src/components/button/index.tsx

@@ -3,10 +3,13 @@ import { Wrapper } from './index.style';
 interface ButtonProps {
   text: string;
   inversion?: boolean;
+  onClick: React.MouseEventHandler<HTMLInputElement>;
 }
 
 function Button(props: ButtonProps) {
-  return <Wrapper type="button" inversion={props.inversion ? 'true' : 'false'} value={props.text} />;
+  return (
+    <Wrapper type="button" inversion={props.inversion ? 'true' : 'false'} value={props.text} onClick={props.onClick} />
+  );
 }
 
 export default Button;

src/components/custom-group/index.style.tsx

@@ -6,14 +6,17 @@ interface ContainerProps {
 
 export const Container = styled.div<ContainerProps>`
   display: flow-root;
-  margin: 20px 30px;
+  margin-left: 30px;
+  margin-top: 15px;
   .title {
     margin-left: 30px;
     font-size: 25px;
     font-weight: 600;
   }
   .item {
-    margin: 10px 30px;
+    margin-top: 10px;
+    margin-left: 30px;
+    margin-right: 10px;
     float: left;
   }
 `;

src/components/header/index.style.tsx

@@ -6,7 +6,7 @@ interface WrapperProps {
 
 const Container = styled.div<WrapperProps>`
   width: 100vw - 20px;
-  height: 100px;
+  height: 10vh;
   background-color: ${(props) => {
     if (props.inversion === 'true') {
       return 'transparent';

src/components/icon/index.style.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+interface WrapperProps {
+  icon: string;
+}
+
+export const Wrapper = styled.div<WrapperProps>`
+  background-image: url(${(props) => props.icon});
+  width: 50px;
+  height: 50px;
+  display: block;
+  margin: 10px auto;
+`;

src/components/icon/index.tsx

@@ -0,0 +1,17 @@
+import { Wrapper } from './index.style';
+
+interface IconProps {
+  text: string;
+  icon: string;
+}
+
+function Icon(props: IconProps) {
+  return (
+    <>
+      <Wrapper className="icon" icon={props.icon} />
+      <div>{props.text}</div>
+    </>
+  );
+}
+
+export default Icon;

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100vw;
-  height: 100vh;
+  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';
@@ -13,13 +13,20 @@ import { Color } from '@api/color';
 import { Accessory } from '@api/accessory';
 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 () => {
@@ -37,26 +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 (
-    <Container>
+    <>
       <Header />
-      <CustomGroup name="패턴 디자인" data={wheels} type="small" />
-      <CustomGroup name="휠 디자인" data={wheels} type="small" />
-      <CustomGroup name="측면 디자인" data={wheels} type="small" />
-      <CustomGroup name="액세서리" data={accessories} type="small" />
-      <div className="footer">
-        <Button text="타이어 만들기" />
-      </div>
-    </Container>
+      <Container onWheel={onScrollFunction} ref={ref}>
+        <CustomGroup name="패턴 디자인" data={patterns} 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,28 +2,30 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100vw;
-  height: 100vh;
+  height: 90vh;
   background: linear-gradient(#ffffff, #9ba4b4);
   font-weight: 700;
-
-  .content > .logo {
-    float: left;
-    margin-left: 220px;
-    margin-top: 350px;
+  .content {
+    display: flex;
   }
-
-  .content > .title {
-    float: left;
-    margin-left: 60px;
-    margin-top: 370px;
+  .logo {
+    margin: 270px 150px;
+  }
+  .title {
+    margin: 280px 20px;
     font-size: 8cqh;
   }
-
-  .content > .image {
-    float: left;
-    margin-left: 200px;
-    margin-top: 150px;
+  .image {
+    margin: 100px 80px;
     width: 528px;
     height: 541px;
   }
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+    font-size: 25px;
+    font-weight: 200;
+  }
 `;

src/pages/main/index.tsx

@@ -2,17 +2,46 @@ import Header from '@components/header';
 import { Container } from './index.style';
 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 CustomList from '@pages/custom-list';
+import { useEffect, useRef, useState } from 'react';
 
 function Main() {
+  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 (
-    <Container>
+    <>
       <Header inversion></Header>
-      <div className="content">
-        <Logo type="large" />
-        <div className="title">Outfit Of Tire</div>
-        <img className="image" src={mainImage} alt="tire_example" />
-      </div>
-    </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">
+          <Icon icon={scrollIcon} text="Scroll" />
+        </div>
+      </Container>
+      <CustomList ref={wheel} />
+    </>
   );
 }