[SP3] 메인 하단 레이아웃

src/hooks/useInView.ts

@@ -1,8 +1,14 @@
 import { useState } from 'react';
 import useIntersectionObserver from './useIntersectionObserver';
 
-function useInView() {
-  const ref = useIntersectionObserver(() => setIsInView(true));
+interface useInViewProps {
+  options?: IntersectionObserverInit;
+}
+
+function useInView({ options }: useInViewProps = {}) {
+  const ref = useIntersectionObserver((entry) => {
+    setIsInView(entry.isIntersecting);
+  }, options);
   const [isInView, setIsInView] = useState(false);
 
   return { isInView, ref };

src/hooks/useIntersectionObserver.ts

@@ -10,9 +10,7 @@ const useIntersectionObserver = (
   const callback = useCallback(
     (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          onIntersect(entry, observer);
-        }
+        onIntersect(entry, observer);
       });
     },
     [onIntersect],

src/views/MainPage/MainPage.tsx

@@ -1,10 +1,8 @@
 import PageLayout from '@src/components/common/PageLayout';
+import BottomLayout from '@src/views/MainPage/components/BottomLayout';
 import IntroSection from '@src/views/MainPage/components/IntroSection';
-import PartConfig from '@src/views/MainPage/components/PartConfig';
-import Activity from './components/Activity';
 import Banner from './components/Banner';
 import Introduce from './components/Introduce';
-import OwnOrganization from './components/OwnOrganization';
 import ScrollInteractiveLogo from './components/ScrollInteractiveLogo';
 
 function MainPage() {
@@ -14,9 +12,7 @@ function MainPage() {
       <Introduce />
       <IntroSection />
       <ScrollInteractiveLogo />
-      <Activity />
-      <PartConfig />
-      <OwnOrganization />
+      <BottomLayout />
     </PageLayout>
   );
 }

src/views/MainPage/components/Activity/index.tsx

@@ -6,10 +6,10 @@ import MobileCard from './MobileCard';
 import * as S from './style';
 
 export default function CardHover() {
-  const isMobileSize = useIsMobile('768px');
+  const isMobileSize = useIsMobile('428px');
 
   return (
-    <S.Background>
+    <div>
       <Tab
         tab={'(1) 기수내 정기 행사'}
         title={'매 기수 진행되는, 다양한 활동들!'}
@@ -34,6 +34,6 @@ export default function CardHover() {
           })}
         </S.CardWrapper>
       )}
-    </S.Background>
+    </div>
   );
 }

src/views/MainPage/components/Activity/style.ts

@@ -1,10 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 
-export const Background = styled.section`
-  background-color: ${colors.white};
-`;
-
 export const CardWrapper = styled.main`
   display: grid;
   grid-template-columns: repeat(3, 1fr);

src/views/MainPage/components/ActivitySection/index.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import Activity from '@src/views/MainPage/components/Activity';
+import OwnOrganization from '@src/views/MainPage/components/OwnOrganization';
+import PartConfig from '@src/views/MainPage/components/PartConfig';
+import * as S from './style';
+
+function ActivitySection(_props: unknown, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <S.Wrapper id="activity" ref={ref}>
+      <Activity />
+      <PartConfig />
+      <OwnOrganization />
+    </S.Wrapper>
+  );
+}
+
+export default forwardRef(ActivitySection);

src/views/MainPage/components/ActivitySection/style.ts

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 146px;
+
+  margin-bottom: 300px;
+`;

src/views/MainPage/components/BottomLayout/index.tsx

@@ -0,0 +1,62 @@
+import { useScroll, useTransform } from 'framer-motion';
+import { RefObject, useRef } from 'react';
+import useInView from '@src/hooks/useInView';
+import ActivitySection from '@src/views/MainPage/components/ActivitySection';
+import * as S from './style';
+
+const MenuList = [
+  { name: 'Value', id: 'value' },
+  { name: 'Activity', id: 'activity' },
+  { name: 'Review', id: 'review' },
+  { name: 'Recent news', id: 'news' },
+];
+
+export type RefHandler = {
+  viewRef: RefObject<HTMLDivElement>;
+  targetRef: RefObject<HTMLDivElement>;
+};
+
+function BottomLayout() {
+  const activity = useInView();
+  const review = useInView();
+  const news = useInView();
+
+  const targetRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({ target: targetRef, offset: ['start center', 'start'] });
+
+  const viewList = [false, activity.isInView, review.isInView, news.isInView];
+  const minIndex = viewList.findIndex((value) => value === true);
+
+  const wrapperBackground = useTransform(scrollYProgress, [0, 1], ['#FFF', '#090B12']);
+  const layoutBackground = useTransform(scrollYProgress, [0, 1], ['#F6F8FC', '#0D111F']);
+  const menuBackground = useTransform(scrollYProgress, [0, 1], ['#fbfcfe', '#fbfcfef']);
+  const menuColor = useTransform(scrollYProgress, [0, 1], ['#a8acbae0', '#747885']);
+
+  return (
+    <S.Wrapper style={{ backgroundColor: wrapperBackground }}>
+      <S.FloatingMenu>
+        {MenuList.map(({ name, id }, index) => (
+          <S.MenuWrapper
+            key={id}
+            isInView={minIndex === index}
+            style={{ backgroundColor: menuBackground, color: menuColor }}
+          >
+            <S.Menu href={`#${id}`}>{name}</S.Menu>
+          </S.MenuWrapper>
+        ))}
+      </S.FloatingMenu>
+      <S.Layout style={{ backgroundColor: layoutBackground }}>
+        <ActivitySection ref={activity.ref} />
+        <div ref={targetRef} />
+        <div id="review" ref={review.ref} style={{ height: '100vh', background: 'blue' }}>
+          Reviews
+        </div>
+        <div id="news" ref={news.ref} style={{ height: '100vh', background: 'yellow' }}>
+          News
+        </div>
+      </S.Layout>
+    </S.Wrapper>
+  );
+}
+
+export default BottomLayout;

src/views/MainPage/components/BottomLayout/style.ts

@@ -0,0 +1,101 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { css } from '@emotion/react';
+import icPolygon from '@src/assets/icons/ic_polygon.svg';
+
+export const Wrapper = styled(motion.section)`
+  display: flex;
+  gap: 12.25px;
+
+  width: 100%;
+  padding: 0 2.86vw;
+  background-color: ${colors.white};
+
+  @media (max-width: 768px) {
+    padding: 0 5.98vw;
+  }
+`;
+
+export const FloatingMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 9.27px;
+  position: sticky;
+  top: 0;
+
+  height: fit-content;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const MenuWrapper = styled(motion.div)<{ isInView?: boolean }>`
+  position: relative;
+
+  background-color: #fbfcfe;
+  border-radius: 10px;
+  border: 1.2px solid rgba(196, 199, 211, 0.3);
+
+  color: rgba(168, 172, 186, 0.88);
+  text-align: center;
+  font-family: SUIT;
+  font-size: 19.46px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 53.54px; /* 275.126% */
+  letter-spacing: -0.584px;
+
+  ${({ isInView }) =>
+    isInView &&
+    css`
+      border-color: transparent;
+      background-color: #24314d !important;
+      color: #fff !important;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: -8px;
+        transform: translateY(-50%);
+        z-index: 99;
+
+        width: 8px;
+        height: 11px;
+        background-image: url(${icPolygon});
+        background-repeat: no-repeat;
+      }
+    `};
+`;
+
+export const Menu = styled(Link)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 190px;
+  height: 72px;
+
+  @media (max-width: 1440px) {
+    width: 152px;
+  }
+`;
+
+export const Layout = styled(motion.div)`
+  flex: 1;
+  width: 80%;
+  padding: 68px 4vw 0 4vw;
+  border-radius: 20.946px;
+  background: #f6f8fc;
+
+  @media (max-width: 768px) {
+    padding: 65px 6.25vw 0 6.25vw;
+  }
+
+  @media (max-width: 428px) {
+    padding: 37.36px 28px 0 28px;
+  }
+`;

src/views/MainPage/components/IntroSection/index.tsx

@@ -4,9 +4,9 @@ import * as S from './style';
 
 export default function IntroCardList() {
   return (
-    <S.IntroSection>
+    <S.IntroSection >
       <S.Header />
-      <div style={{ overflow: 'hidden' }}>
+      <div id="value" style={{ overflow: 'hidden' }}>
         {INTRO_CONTENT_LIST.map((content) => (
           <IntroContent key={content.id} content={content} />
         ))}

src/views/MainPage/components/OwnOrganization/index.tsx

@@ -5,7 +5,7 @@ import * as S from './style';
 
 export default function OwnOrganization() {
   return (
-    <S.Background>
+    <div>
       <Tab
         tab={'(3) 자체 운영 기구'}
         title={'SOPT를 운영하는 자체 기구'}
@@ -18,6 +18,6 @@ export default function OwnOrganization() {
           <OwnOrganizationCard key={organization.nameEng} {...organization} />
         ))}
       </S.Wrapper>
-    </S.Background>
+    </div>
   );
 }

src/views/MainPage/components/OwnOrganization/style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 
 export const Wrapper = styled.div`
   display: flex;
@@ -15,8 +15,3 @@
     gap: 14px;
   }
 `;
-
-export const Background = styled.section`
-  background-color: ${colors.white};
-  padding-top: 146px;
-`;

src/views/MainPage/components/PartConfig/index.tsx

@@ -20,7 +20,7 @@ export default function PartConfig() {
   } = useInfiniteCarousel<TabType>(carouselList, '(-100% - 20px)');
 
   return (
-    <S.Background>
+    <div>
       <Tab
         tab={'(2) 파트 구성'}
         title={'6개의 파트로 이루어져 있어요.'}
@@ -63,6 +63,6 @@ export default function PartConfig() {
         </S.PartConfig>
         <S.RequiredAbility href="/recruit#chapter-info">필요 역량이 궁금하다면?</S.RequiredAbility>
       </S.Wrapper>
-    </S.Background>
+    </div>
   );
 }

src/views/MainPage/components/PartConfig/style.ts

@@ -1,11 +1,7 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 
-export const Background = styled.section`
-  background-color: ${colors.white};
-`;
-
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;