Merge pull request #5 from gitchobo-lee/feature/#2

자동차페이지 스크롤 버튼 구현 완료
HomebrewComputerClub02 · Mar 16, 2023 · 0abecc3 · 0abecc3
2 parents 766675d + 4b4ce2b
commit 0abecc3
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 21 deletions.
diff --git a/src/components/molecules/Navbar.tsx b/src/components/molecules/Navbar.tsx
@@ -15,6 +15,7 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: center;
   height: 80px;
+  width: 100vw;
   position: relative;
   background-color: white;
 `;

diff --git a/src/pages/vehicles/MainIntroArea.styled.ts b/src/pages/vehicles/MainIntroArea.styled.ts
@@ -1,8 +1,8 @@
 import styled from "styled-components";
-export const Container = styled.main`
+export const Container = styled.div`
   top: 100vh;
   position: absolute;
-  overflow-y: auto;
+  overflow-y: scroll;
   scroll-snap-type: y mandatory;
   height: calc(100vh - 80px);
   transition: top 1s;

diff --git a/src/pages/vehicles/MainIntroArea.tsx b/src/pages/vehicles/MainIntroArea.tsx
@@ -8,15 +8,29 @@ interface IContent {
 }
 function MainIntroArea({ stuff, scroll, func }: IContent) {
   const [scrollValue, setScrollValue] = useState(11);
+  const [scrolledIndex, setScrolledIndex] = useState(0);
   const container = document.getElementById("container");
   const handleScroll = () => {
     setScrollValue(container?.scrollTop as any);
   };
+  const handleMenuClick = (e: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    container ? (container.style.scrollSnapType = "none") : null;
+    container?.scrollTo({
+      top: e * container?.offsetHeight,
+      behavior: "smooth",
+    });
+    setTimeout(() => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      container ? (container.style.scrollSnapType = "y mandatory") : null;
+    }, 300);
+  };
+
   useEffect(() => {
-    console.log(scrollValue, "스크롤값");
     if (scrollValue < 10) {
       func();
     }
+    setScrolledIndex(Math.round(scrollValue / Number(container?.offsetHeight)));
   }, [scrollValue]);
 
   return (
@@ -25,7 +39,11 @@ function MainIntroArea({ stuff, scroll, func }: IContent) {
       id='container'
       onScroll={handleScroll}
     >
-      <VehicleIntroMenu list={["Highlights", "Streamliner", "Design"]} />
+      <VehicleIntroMenu
+        list={["Highlights", "Streamliner", "Design"]}
+        func={handleMenuClick}
+        currentIndex={scrolledIndex}
+      />
       {stuff.map((content) => {
         return <S.DummyDiv color={content} />;
       })}

diff --git a/src/pages/vehicles/Vehicle.tsx b/src/pages/vehicles/Vehicle.tsx
@@ -11,12 +11,13 @@ function Vehicle() {
   const handleScroll = () => {
     setScroll(window.scrollY);
   };
-  const childScrollHandler = () => {
+  const mainScrollHandler = () => {
     window.scrollTo(0, 0);
     setScroll(0);
   };
   useEffect(() => {
     window.addEventListener("scroll", handleScroll, { capture: true });
+    window.scrollTo(0, 0);
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
@@ -44,12 +45,15 @@ function Vehicle() {
           list={["모델소개", "제원", "가격", "갤러리", "구매후기"]}
           style={{ bottom: 0 }}
           id='unscrolled'
+          func={() => {
+            window.scrollTo(0, 1);
+          }}
         />
       )}
       <MainIntroArea
         stuff={["red", "blue", "green"]}
         scroll={scroll ? true : false}
-        func={childScrollHandler}
+        func={mainScrollHandler}
       />
     </S.Container>
   );

diff --git a/src/pages/vehicles/VehicleIntroMenu.tsx b/src/pages/vehicles/VehicleIntroMenu.tsx
@@ -1,11 +1,20 @@
 import * as S from "./VehicleIntroMenu.styled";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 interface IContent {
   list: string[];
+  func?: any;
+  currentIndex?: number;
 }
-function VehicleIntroMenu({ list }: IContent) {
+function VehicleIntroMenu({ list, func, currentIndex }: IContent) {
   const [clickedIndex, setClickedIndex] = useState(0);
   const [onMouse, setOnMouse] = useState(0);
+  const handleClick = (index: number) => {
+    setClickedIndex(index);
+    func(index);
+  };
+  useEffect(() => {
+    setClickedIndex(currentIndex as number);
+  }, [currentIndex]);
   return (
     <S.Container
       onMouseEnter={(e: any) => {
@@ -17,11 +26,7 @@ function VehicleIntroMenu({ list }: IContent) {
     >
       {list.map((content, index) =>
         clickedIndex === index ? (
-          <S.ElementWrapper
-            onClick={(e: any) => {
-              setClickedIndex(index);
-            }}
-          >
+          <S.ElementWrapper onClick={() => handleClick(index)}>
             <S.Circle style={{ height: "25px", backgroundColor: "#002C5F" }} />
             <S.Letter style={{ fontWeight: 600, color: "#002c5f" }}>
               {content}
@@ -30,7 +35,7 @@ function VehicleIntroMenu({ list }: IContent) {
         ) : (
           <S.ElementWrapper
             onClick={(e: any) => {
-              setClickedIndex(index);
+              handleClick(index);
             }}
           >
             <S.Circle />

diff --git a/src/pages/vehicles/VehicleNavbar.tsx b/src/pages/vehicles/VehicleNavbar.tsx
@@ -5,9 +5,10 @@ interface IContent {
   list: string[];
   style?: React.CSSProperties;
   id?: string;
+  func?: any;
 }
 
-function VehicleNavbar({ list, style, id }: IContent) {
+function VehicleNavbar({ list, style, id, func }: IContent) {
   const [offsetLeft, setOffsetLeft] = useState(0);
   const [offsetWidth, setOffsetWidth] = useState(0);
   useEffect(() => {
@@ -56,12 +57,18 @@ function VehicleNavbar({ list, style, id }: IContent) {
           <S.Button>
             시승 신청 <S.Arrow />
           </S.Button>
-          <S.MouseWrapper>
-            <S.Mouse>
-              <S.Wheel></S.Wheel>
-            </S.Mouse>
-            <S.MouseArrow />
-          </S.MouseWrapper>
+          {id === "scrolled" ? null : (
+            <S.MouseWrapper>
+              <S.Mouse
+                onClick={() => {
+                  func();
+                }}
+              >
+                <S.Wheel></S.Wheel>
+              </S.Mouse>
+              <S.MouseArrow />
+            </S.MouseWrapper>
+          )}
         </S.BtnGroup>
       </S.Wrapper>
     </S.Container>