[27기] UI 인터렉션 추가 및 모집 관련 url 추가

components/common/Banner/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import media from 'styles/media';
 
 interface BannerProps {
@@ -37,12 +37,26 @@ const StyledBox = styled.div<BannerProps>`
   gap: 8px;
 `;
 
+const slideUp = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
 const StyledTitle = styled.h1`
   color: ${({ theme }) => theme.palette.white_100};
   ${({ theme }) => theme.textStyleV2.resp.title1_md};
   margin: 0 80px;
   white-space: nowrap;
 
+  animation: ${slideUp} 0.6s ease forwards;
+  animation-delay: 0.2s;
+
   ${media.mobile} {
     ${({ theme }) => theme.textStyleV2.resp.title1_sm};
     white-space: pre-line;
@@ -56,6 +70,9 @@ const StyledDescription = styled.p`
   margin: 0 80px;
   white-space: nowrap;
 
+  animation: ${slideUp} 0.6s ease forwards;
+  animation-delay: 0.2s;
+
   ${media.mobile} {
     ${({ theme }) => theme.textStyleV2.resp.subtitle_sm};
     white-space: pre-line;

components/common/Button/index.tsx

@@ -60,10 +60,16 @@ const StyledButton = styled.button<IButtonStyle>`
     ${({ theme, variant }) => css`
       background-color: ${variant === 'black' && theme.palette.black_70};
     `};
+    ${({ theme, variant }) => css`
+      opacity: ${variant === 'primary' && 0.6};
+    `};
   }
 
   &:active {
     transform: scale(0.9);
+    ${({ variant }) => css`
+      opacity: ${variant === 'primary' && 1};
+    `};
   }
 
   &:disabled {

components/common/JoinSection/index.tsx

@@ -5,17 +5,20 @@ import SectionTemplate from '../../home/SectionTemplate';
 import SectionTitle from '../SectionTitle';
 import { useRouter } from 'next/router';
 import Button from '../Button';
+import Yapp from 'constants/yapp';
 
 interface JoinSectionProps {
   title?: string;
   subTitle?: string;
   btnText?: string;
+  url?: string;
 }
 
 function JoinSection({
   title,
   subTitle,
   btnText,
+  url,
 }: JoinSectionProps): ReactElement {
   const router = useRouter();
 
@@ -33,7 +36,13 @@ function JoinSection({
           <Button
             type="button"
             variant="primary"
-            onClick={() => router.push('/recruit')}
+            onClick={() => {
+              if (!url) {
+                window.open(Yapp.YAPP_RECRUIT_ALL, '_blank');
+              } else {
+                window.open(url, '_blank');
+              }
+            }}
           >
             {btnText || '27기 지원하기'}
           </Button>

components/home/GridSection/index.tsx

@@ -1,39 +1,71 @@
 import type { ReactElement } from 'react';
 import styled from 'styled-components';
 import { SectionTemplate } from 'components/home';
-import { AnimatedBox } from 'components/common';
 import { CURRENT_INFO_DATA } from 'database/home';
 import media from 'styles/media';
-import Image from 'next/image';
 import { PaletteKeyTypes } from 'styles/theme';
 import CircusCard from 'components/common/CircusCard';
 import SectionTitle from 'components/common/SectionTitle';
+import { motion } from 'framer-motion';
+import { useScrollAnimation } from 'hooks/useScrollAnimation';
 
 function GridSection(): ReactElement {
+  const { ref, controls, containerVariants, itemVariants } = useScrollAnimation(
+    {
+      containerVariants: {
+        hidden: { opacity: 0, y: 40 },
+        visible: {
+          opacity: 1,
+          y: 0,
+          transition: { duration: 0.8, ease: 'easeInOut' },
+        },
+      },
+    },
+  );
+
   return (
-    <GridSectionContainer>
-      <SectionTitle
-        title="지금 YAPP은 이렇게 움직여요"
-        subTitle="실무 기반 협업 시스템으로 운영되는 연합 기업형 IT 동아리"
-      />
-      <GridContainer>
-        {CURRENT_INFO_DATA.map(
-          ({ title, content, icon, color, fontColor }, index) => (
-            <CircusCard
-              key={index}
-              title={title}
-              content={content}
-              icon={icon}
-              color={color as PaletteKeyTypes}
-              fontColor={fontColor as PaletteKeyTypes}
-            />
-          ),
-        )}
-      </GridContainer>
-    </GridSectionContainer>
+    <SectionLayout>
+      <motion.section
+        ref={ref}
+        as={motion.section}
+        initial="hidden"
+        animate={controls}
+        variants={containerVariants}
+        style={{ width: '100%' }}
+      >
+        <motion.div variants={itemVariants}>
+          <SectionTitle
+            title="지금 YAPP은 이렇게 움직여요"
+            subTitle="실무 기반 협업 시스템으로 운영되는 연합 기업형 IT 동아리"
+          />
+        </motion.div>
+
+        <GridContainer
+          as={motion.div}
+          initial="hidden"
+          animate={controls}
+          variants={containerVariants}
+        >
+          {CURRENT_INFO_DATA.map(
+            ({ title, content, icon, color, fontColor }, index) => (
+              <motion.div key={index} variants={itemVariants}>
+                <CircusCard
+                  title={title}
+                  content={content}
+                  icon={icon}
+                  color={color as PaletteKeyTypes}
+                  fontColor={fontColor as PaletteKeyTypes}
+                />
+              </motion.div>
+            ),
+          )}
+        </GridContainer>
+      </motion.section>
+    </SectionLayout>
   );
 }
-const GridSectionContainer = styled(SectionTemplate)`
+
+const SectionLayout = styled(SectionTemplate)`
   width: auto;
   background-color: ${({ theme }) => theme.palette.black};
   padding: 188px 80px;
@@ -43,7 +75,7 @@ const GridSectionContainer = styled(SectionTemplate)`
   }
 `;
 
-const GridContainer = styled.article`
+const GridContainer = styled.div`
   width: 100%;
   display: grid;
   row-gap: 32px;
@@ -54,7 +86,7 @@ const GridContainer = styled.article`
   align-items: stretch;
 
   ${media.mobile} {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: 1fr;
     align-items: stretch;
   }
 `;

components/home/IntroSection/Banner27th.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
-import RecuitBtn from '../RecuitBtn';
+import Image from 'next/image';
 
 const Banner27th = () => {
   const [mounted, setMounted] = useState(false);
@@ -14,14 +14,16 @@ const Banner27th = () => {
     <>
       <Banner27thTextContentBox className={mounted ? 'appear' : ''}>
         <TextBox>
-          <BannerTitleBox>채용 타이틀을 입력해주세요</BannerTitleBox>
-          <BannerSubTitleBox>세부 설명이 들어갑니다</BannerSubTitleBox>
+          <Image
+            src="/assets/images/27th/title.png"
+            alt="27th Title"
+            width={580}
+            height={309}
+          />
         </TextBox>
       </Banner27thTextContentBox>
 
-      <BannerBackgroundInner className={mounted ? 'appear' : ''}>
-        <RecuitBtn />
-      </BannerBackgroundInner>
+      <BannerBackgroundInner className={mounted ? 'appear' : ''} />
     </>
   );
 };
@@ -60,7 +62,8 @@ const BannerBackgroundInner = styled.div`
 
 const TextBox = styled.div`
   position: absolute;
-  top: 150px;
+  top: 80px;
+  z-index: 20;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -69,6 +72,10 @@ const TextBox = styled.div`
 
   ${media.tablet} {
     top: 220px;
+    img {
+      width: 340px;
+      height: 181px;
+    }
   }
 `;
 
@@ -90,27 +97,16 @@ const Banner27thTextContentBox = styled.div`
   &.appear {
     transform: translate3d(-50%, 0, 0);
     opacity: 1;
-  }
-`;
 
-const BannerTitleBox = styled.h1`
-  margin: 0;
-  ${({ theme }) => theme.textStyleV2.resp.head_lg};
-  color: ${({ theme }) => theme.palette.white_100};
-
-  ${media.tablet} {
-    ${({ theme }) => theme.textStyleV2.resp.head_md};
+    animation: floatY 1s ease-in-out infinite alternate;
   }
-  ${media.mobile} {
-    ${({ theme }) => theme.textStyleV2.resp.head_sm};
-  }
-`;
 
-const BannerSubTitleBox = styled.div`
-  ${({ theme }) => theme.textStyleV2.resp.subtitle_md};
-  color: ${({ theme }) => theme.palette.white_70};
-
-  ${media.mobile} {
-    ${({ theme }) => theme.textStyleV2.resp.subtitle_sm};
+  @keyframes floatY {
+    0% {
+      transform: translate3d(-50%, 0, 0);
+    }
+    100% {
+      transform: translate3d(-50%, 10px, 0);
+    }
   }
 `;

components/home/NewsSection/index.tsx

@@ -1,13 +1,15 @@
 import { Button, NewsCard } from 'components/common';
 import { SectionTemplate } from 'components/home';
-import Yapp from 'constants/yapp';
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
 import { PaletteKeyTypes } from 'styles/theme';
 import { Medium } from 'types/medium';
-import { motion } from 'framer-motion';
+import { motion, useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
 import SectionTitle from 'components/common/SectionTitle';
+import { useRouter } from 'next/router';
+import Path from 'constants/path';
 
 const colors = [
   'circus_red',
@@ -17,13 +19,27 @@ const colors = [
 const fontColors = ['white_100', 'black_100', 'white_100'] as PaletteKeyTypes[];
 
 function MainContainer({ data }: { data: Medium[] }): ReactElement {
+  const router = useRouter();
   const loopData = [...data, ...data];
   const trackRef = useRef<HTMLDivElement>(null);
   const [trackWidth, setTrackWidth] = useState(0);
 
   const speed = 50;
   const duration = trackWidth / speed;
 
+  const controls = useAnimation();
+  const [ref, inView] = useInView({ triggerOnce: false, threshold: 0.2 });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start({
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      });
+    }
+  }, [inView, controls]);
+
   useEffect(() => {
     function updateWidth() {
       if (trackRef.current) {
@@ -34,8 +50,14 @@ function MainContainer({ data }: { data: Medium[] }): ReactElement {
     window.addEventListener('resize', updateWidth);
     return () => window.removeEventListener('resize', updateWidth);
   }, []);
+
   return (
-    <SocialContainer>
+    <SocialContainer
+      as={motion.section}
+      ref={ref}
+      initial={{ opacity: 0, y: 40 }}
+      animate={controls}
+    >
       <PaddingSection>
         <SectionTitle
           fontColor="black_100"
@@ -44,6 +66,7 @@ function MainContainer({ data }: { data: Medium[] }): ReactElement {
           subTitle="야뿌들의 성장 과정, 활동 후기, 밋업 현장과 다양한 이야기를 담고 있어요."
         />
       </PaddingSection>
+
       <CarouselContainer>
         <CarouselTrack
           ref={trackRef}
@@ -61,17 +84,17 @@ function MainContainer({ data }: { data: Medium[] }): ReactElement {
         </CarouselTrack>
       </CarouselContainer>
 
-      <Button
-        variant="black"
-        onClick={() => window.open(Yapp.YAPP_FACEBOOK, '_blank')}
-      >
+      <Button variant="black" onClick={() => router.push(Path.Story)}>
         이야기 더보기
       </Button>
     </SocialContainer>
   );
 }
 
 const SocialContainer = styled(SectionTemplate)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 200px 0;
 
   ${media.mobile} {
@@ -93,6 +116,7 @@ const CarouselContainer = styled.div`
   overflow: hidden;
   width: 100%;
   margin: 48px 0;
+  position: relative;
 
   &::before,
   &::after {