[28기] 28기 채용 배포

components/common/Banner/index.tsx

@@ -4,19 +4,28 @@ import media from 'styles/media';
 
 interface BannerProps {
   backgroundImg?: string;
+  backgroundImgTablet?: string;
+  backgroundImgMobile?: string;
   className?: string;
   title?: string;
   description?: string;
 }
 
 function Banner({
   className,
-  backgroundImg = '/assets/images/27th/banner_project_story.png',
+  backgroundImg = '/assets/images/28th/project_page_pc.png',
+  backgroundImgTablet = '/assets/images/28th/project_page_tablet.png',
+  backgroundImgMobile = '/assets/images/28th/project_page_mo.png',
   title,
   description,
 }: BannerProps): ReactElement {
   return (
-    <StyledBox backgroundImg={backgroundImg} className={className}>
+    <StyledBox
+      backgroundImg={backgroundImg}
+      backgroundImgTablet={backgroundImgTablet}
+      backgroundImgMobile={backgroundImgMobile}
+      className={className}
+    >
       <InnerTextContainer>
         <StyledTitle>{title}</StyledTitle>
         <StyledDescription>{description}</StyledDescription>
@@ -39,6 +48,14 @@ const StyledBox = styled.div<BannerProps>`
   flex-direction: column;
   justify-content: center;
   gap: 8px;
+
+  ${media.tablet} {
+    background-image: url(${({ backgroundImgTablet }) => backgroundImgTablet});
+  }
+
+  ${media.mobile} {
+    background-image: url(${({ backgroundImgMobile }) => backgroundImgMobile});
+  }
 `;
 
 const InnerTextContainer = styled.div`
@@ -71,7 +88,7 @@ const slideUp = keyframes`
 `;
 
 const StyledTitle = styled.h1`
-  color: ${({ theme }) => theme.palette.white_100};
+  color: ${({ theme }) => theme.palette.discovery_28th_title};
   ${({ theme }) => theme.textStyleV2.resp.title1_md};
   white-space: nowrap;
   margin-top: 0;
@@ -88,7 +105,7 @@ const StyledTitle = styled.h1`
 `;
 
 const StyledDescription = styled.p`
-  color: ${({ theme }) => theme.palette.white_50};
+  color: ${({ theme }) => theme.palette.discovery_28th_button};
   ${({ theme }) => theme.textStyleV2.resp.subtitle_md};
   white-space: nowrap;
   margin-top: 0;

components/common/JoinSection/index.tsx

@@ -4,17 +4,19 @@ import media from 'styles/media';
 import SectionTemplate from '../../home/SectionTemplate';
 import SectionTitle from '../SectionTitle';
 import Button from '../Button';
-import Yapp from 'constants/yapp';
+import { LINK_BY_STATUS, RecruitStatus } from '../../../constants/status';
 
 interface JoinSectionProps {
+  status: RecruitStatus;
   title?: string;
   subTitle?: string;
   btnText?: string;
-  caution?: string;
   url?: string;
+  caution?: string;
 }
 
 function JoinSection({
+  status,
   title,
   subTitle,
   btnText,
@@ -27,26 +29,19 @@ function JoinSection({
         <ImageContainer>
           <InnerContainer>
             <SectionTitle
-              title={title || 'FIND YOUR BALANCE'}
-              subTitle={
-                subTitle ||
-                `지원하기 버튼 하나로\nYAPP ${Yapp.YAPP_GENERATION}기의 야뿌가 되어보세요.`
-              }
+              title={title || 'MOMENT OF DISCOVERY'}
+              subTitle={subTitle}
               caution={caution}
               align="center"
             />
             <Button
               type="button"
-              variant="primary"
+              variant="black"
               onClick={() => {
-                if (!url) {
-                  window.open(Yapp.YAPP_RECRUIT_ALL, '_blank');
-                } else {
-                  window.open(url, '_blank');
-                }
+                window.open(url || LINK_BY_STATUS[status], '_blank');
               }}
             >
-              {btnText || `${Yapp.YAPP_GENERATION}기 지원하기`}
+              {btnText}
             </Button>
           </InnerContainer>
         </ImageContainer>
@@ -75,7 +70,7 @@ const ImageContainer = styled.div`
   width: 100%;
   height: 800px;
   border-radius: 32px;
-  background: url('/assets/images/27th/recruit.png') no-repeat center;
+  background: url('/assets/images/28th/recruit_bg.png') no-repeat center;
   background-size: cover;
 
   ${media.tablet} {

components/common/SectionTitle/index.tsx

@@ -15,8 +15,8 @@ interface SectionTitleProps {
 
 function SectionTitle({
   className,
-  fontColor = 'white',
-  subFontColor = 'white_50',
+  fontColor = 'black_100',
+  subFontColor = 'black_60',
   title = '',
   subTitle = '',
   align = 'flex-start',

components/home/AnimatedTextSection/index.tsx

@@ -30,7 +30,7 @@ function AnimatedTextSection(): ReactElement {
 const SectionContainer = styled.section`
   width: 100%;
   height: 100vh;
-  background-color: ${({ theme }) => theme.palette.black};
+  background-color: ${({ theme }) => theme.palette.white};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -49,9 +49,9 @@ const HighLightText = styled(motion.div)`
 
   background: linear-gradient(
     270deg,
-    rgba(255, 255, 255, 0.3) 0%,
-    rgba(255, 255, 255, 0.8) 50%,
-    rgba(255, 255, 255, 0.3) 100%
+    rgba(0, 0, 0, 0.3) 0%,
+    rgba(0, 0, 0, 0.8) 50%,
+    rgba(0, 0, 0, 0.3) 100%
   );
   background-position: center;
   background-size: cover;
@@ -60,7 +60,7 @@ const HighLightText = styled(motion.div)`
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 
-  ${media.mobile} {
+  ${media.small} {
     ${({ theme }) => theme.textStyleV2.resp.subtitle2_sm};
   }
 `;

components/home/GridSection/index.tsx

@@ -25,7 +25,12 @@ function GridSection(): ReactElement {
     >
       <SectionInner>
         <motion.div ref={ref} variants={itemVariants}>
-          <SectionTitle title={title} subTitle={subTitle} />
+          <SectionTitle
+            title={title}
+            subTitle={subTitle}
+            fontColor="black_100"
+            subFontColor="black_50"
+          />
         </motion.div>
 
         <GridContainer
@@ -57,7 +62,7 @@ function GridSection(): ReactElement {
 const SectionLayout = styled(motion.section)`
   display: flex;
   justify-content: center;
-  background-color: ${({ theme }) => theme.palette.black};
+  background-color: ${({ theme }) => theme.palette.white};
   width: auto;
   padding: 160px 80px;
 

components/home/IntroSection/Banner28th.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import media from 'styles/media';
+import Image from 'next/image';
+
+const Banner28th = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <>
+      <Banner28thTextContentBox className={mounted ? 'appear' : ''}>
+        <TitlePc>
+          <Image
+            src="/assets/images/28th/title_pc.png"
+            alt="28th Title"
+            width={1200}
+            height={303}
+            priority
+          />
+        </TitlePc>
+        <TitleTablet>
+          <Image
+            src="/assets/images/28th/title_tablet.png"
+            alt="28th Title"
+            width={720}
+            height={200}
+            priority
+          />
+        </TitleTablet>
+        <TitleMobile>
+          <Image
+            src="/assets/images/28th/title_mobile.png"
+            alt="28th Title"
+            width={423}
+            height={107}
+            priority
+          />
+        </TitleMobile>
+      </Banner28thTextContentBox>
+
+      <BannerBackgroundInner className={mounted ? 'appear' : ''} />
+    </>
+  );
+};
+
+export default Banner28th;
+
+const BannerBackgroundInner = styled.div`
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  opacity: 0;
+  transition: transform 1s ease, opacity 1s ease;
+
+  &.appear {
+    opacity: 1;
+  }
+
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: url('/assets/images/28th/banner_home_pc.png');
+
+  ${media.tablet} {
+    background-image: url('/assets/images/28th/banner_home_tablet.png');
+  }
+
+  ${media.mobile} {
+    background-image: url('/assets/images/28th/banner_home_mobile.png');
+  }
+`;
+
+const TitlePc = styled.div`
+  display: block;
+  ${media.tablet} {
+    display: none;
+  }
+`;
+
+const TitleTablet = styled.div`
+  display: none;
+  ${media.tablet} {
+    display: block;
+  }
+  ${media.mobile} {
+    display: none;
+  }
+`;
+
+const TitleMobile = styled.div`
+  display: none;
+  ${media.mobile} {
+    display: block;
+  }
+`;
+
+const Banner28thTextContentBox = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 80px;
+  z-index: 20;
+  display: flex;
+  height: fit-content;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+
+  transition: transform 1s ease, opacity 1s ease;
+  transform: translate3d(-50%, -2rem, 0);
+  opacity: 0;
+
+  &.appear {
+    transform: translate3d(-50%, 0, 0);
+    opacity: 1;
+
+    animation: floatY 1s ease-in-out infinite alternate;
+  }
+
+  ${media.tablet} {
+    top: 220px;
+  }
+
+  @keyframes floatY {
+    0% {
+      transform: translate3d(-50%, 0, 0);
+    }
+    100% {
+      transform: translate3d(-50%, 10px, 0);
+    }
+  }
+`;

components/home/IntroSection/BannerPre.tsx

@@ -1,10 +1,10 @@
 import { Button } from 'components/common';
-import { NEXT_GENERATION_RECRUIT_LINK } from 'database/recruit';
 import YappuLogo from 'public/assets/images/Pre/illust_mini.svg';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
 import Dday from '../Dday';
+import Yapp from '../../../constants/yapp';
 
 const BannerPre = () => {
   const [mounted, setMounted] = useState(false);
@@ -29,7 +29,9 @@ const BannerPre = () => {
         <StyledButton
           variant="primary"
           borderRadius={16}
-          onClick={() => (window.location.href = NEXT_GENERATION_RECRUIT_LINK)}
+          onClick={() =>
+            (window.location.href = Yapp.NEXT_GENERATION_RECRUIT_LINK)
+          }
         >
           ⏰ 26기 모집 알림 신청하기
         </StyledButton>