diff --git a/components/common/Header/index.tsx b/components/common/Header/index.tsx index eb46d49..69652e6 100644 --- a/components/common/Header/index.tsx +++ b/components/common/Header/index.tsx @@ -10,6 +10,8 @@ import { Hamburger, YappLogo } from 'public/assets/icons'; import { ReactElement, useEffect, useRef } from 'react'; import styled from 'styled-components'; import media from 'styles/media'; +import Button from '../Button'; +import { NEXT_GENERATION_RECRUIT_LINK } from 'database/recruit'; function Header(): ReactElement { const { asPath } = useRouter(); @@ -46,6 +48,17 @@ function Header(): ReactElement { {name} ))} + @@ -109,5 +122,9 @@ const MobileHeaderMenu = styled(Hamburger)` cursor: pointer; } `; +const ButtonText = styled.span` + color: white; + font-size: 1.6rem; +`; export default Header; diff --git a/components/home/Dday/index.tsx b/components/home/Dday/index.tsx new file mode 100644 index 0000000..ee1a3f6 --- /dev/null +++ b/components/home/Dday/index.tsx @@ -0,0 +1,138 @@ +import { Box } from 'components/common'; +import { ReactElement, useEffect, useState } from 'react'; +import styled from 'styled-components'; +import media from 'styles/media'; + +function Dday(): ReactElement { + const [timeLeft, setTimeLeft] = useState({ + days: 0, + hours: 0, + mins: 0, + secs: 0, + }); + useEffect(() => { + const interval = setInterval(() => { + const today = new Date(); + const targetDate = new Date('2025-04-10'); // 채용 시작 날짜 + const diffTime = targetDate.getTime() - today.getTime(); + + const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); + const diffHours = Math.floor( + (diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), + ); + const diffMinutes = Math.floor( + (diffTime % (1000 * 60 * 60)) / (1000 * 60), + ); + const diffSeconds = Math.floor((diffTime % (1000 * 60)) / 1000); + + setTimeLeft({ + days: diffDays, + hours: diffHours, + mins: diffMinutes, + secs: diffSeconds, + }); + + if (diffTime <= 0) { + clearInterval(interval); + } + }, 1000); + + return () => clearInterval(interval); + }, []); + + return ( + + + {timeLeft.days} + DAYS + + : + + + {timeLeft.hours} + HOURS + + : + + + {timeLeft.mins} + MINS + + : + + {timeLeft.secs} + SECS + + + ); +} + +const DdayContainer = styled.div` + position: relative; + display: flex; + gap: 12px; +`; +const StyledBox = styled(Box)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + ${media.tablet} { + width: 151.75px; + height: 147px; + } + ${media.mobile} { + width: 64.75px; + height: 81px; + } +`; +const TimeSpan = styled.span` + color: ${({ theme }) => theme.palette.blue_100}; + font-weight: 700; + font-size: 6rem; + ${media.mobile} { + font-size: 2.4rem; + } +`; +const TimeText = styled.span` + color: ${({ theme }) => theme.palette.grey_400}; + font-weight: 600; + font-size: 2.6rem; + ${media.mobile} { + font-size: 1.5rem; + } +`; +const Dot = styled.div` + width: 17px; + color: ${({ theme }) => theme.palette.white}; + font-size: 6rem; + font-weight: 600; + line-height: 160%; + display: flex; + align-items: center; + margin: 0 0.4rem; + ${media.mobile} { + font-size: 2.4rem; + } +`; +export default Dday; diff --git a/components/home/IntroSection/Banner26th.tsx b/components/home/IntroSection/Banner26th.tsx new file mode 100644 index 0000000..58e414f --- /dev/null +++ b/components/home/IntroSection/Banner26th.tsx @@ -0,0 +1,172 @@ +import { Box, Button } from 'components/common'; +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import media from 'styles/media'; +import Dday from '../Dday'; +import YappuLogo from 'public/assets/images/26th/illust_mini.svg'; +import { NEXT_GENERATION_RECRUIT_LINK } from 'database/recruit'; + +const Banner26th = () => { + const [mounted, setMounted] = useState(false); + useEffect(() => { + setMounted(true); + }, []); + + return ( + <> + + + + 탐색을 넘어 세상을 넓혀가는 +

+ 26기의 주인공이 +
+ 되어주세요 +

+ 4.10 (목) - 4.20 (일) + + + (window.location.href = NEXT_GENERATION_RECRUIT_LINK)} + > + ⏰ 26기 모집 알림 신청하기 + + + ; + + ); +}; +export default Banner26th; + +const BannerBackgroundInner = styled.div` + width: 100%; + height: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + background: url('/assets/images/26th/banner-pc.png'), + linear-gradient(#bdeaff, #67b2ff); + transform: scale(0.8); + opacity: 0; + transition: transform 2s ease, opacity 2s ease; + + &.appear { + transform: scale(1); + opacity: 1; + } + + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + + ${media.mobile} { + background: url('/assets/images/26th/banner-tablet.png'), + linear-gradient(#bdeaff, #67b2ff); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + } + + ${media.small} { + background: url('/assets/images/26th/banner-mobile.png'), + linear-gradient(#bdeaff, #67b2ff); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + } +`; + +const Banner25thTextContentBox = styled.div` + position: absolute; + top: 10%; + left: 50%; + z-index: 20; + flex: 1; + display: flex; + height: fit-content; + flex-direction: column; + justify-content: center; + align-items: center; + white-space: nowrap; + gap: 8rem; + transition: transform 2s ease, opacity 2s ease; + transform: translate3d(-50%, -2rem, 0); + opacity: 0; + + &.appear { + transform: translate3d(-50%, 0, 0); + opacity: 1; + } +`; + +const BannerTitleBox = styled.div` + display: flex; + gap: 1rem; + height: fit-content; + flex-direction: column; + justify-content: center; + align-items: center; + + & > h3 { + margin: 0; + text-align: center; + font-size: 6.8rem; + font-weight: 700; + line-height: 125%; + letter-spacing: -0.07rem; + color: ${({ theme }) => theme.palette.black}; + } + ${media.mobile} { + & > h3 { + font-size: 3.6rem; + letter-spacing: -0.032rem; + } + } + ${media.small} { + top: 20%; + gap: 1rem; + + & > h3 { + font-size: 2rem; + letter-spacing: -0.032rem; + } + } + + ${media.small} { + gap: 0.8rem; + } +`; +const BannerTitleSpan = styled.span` + color: ${({ theme }) => theme.palette.blue_100}; + font-weight: 600; +`; +const BannerRecruitDateBox = styled.div` + color: ${({ theme }) => theme.palette.grey_700}; + font-weight: 600; + font-size: 2.6rem; + margin-top: 4rem; +`; + +const YappuLogoBox = styled(YappuLogo)``; + +const YappSubTitleBox = styled.div` + font-size: 2.8rem; + color: ${({ theme }) => theme.palette.grey_700}; + margin-top: 1.4rem; + + ${media.small} { + } +`; + +const StyledButton = styled(Button)` + ${media.mobile} { + width: 229px; + height: 59px; + } +`; diff --git a/components/home/IntroSection/index.tsx b/components/home/IntroSection/index.tsx index 53aed5a..cf0c6c3 100644 --- a/components/home/IntroSection/index.tsx +++ b/components/home/IntroSection/index.tsx @@ -3,7 +3,7 @@ import type { MouseEvent, ReactElement } from 'react'; import { useState } from 'react'; import styled from 'styled-components'; import media from 'styles/media'; -import Banner25th from './Banner25th'; +import Banner26th from './Banner26th'; function IntroSection(): ReactElement { const [isHover, setIsHover] = useState(false); @@ -24,14 +24,14 @@ function IntroSection(): ReactElement { onMouseLeave={handleEnter} onMouseMove={handleMove} > - + ); } const IntroSectionContainer = styled.div` - background-color: black; + background: linear-gradient(#bdeaff, #67b2ff); position: relative; display: flex; flex-direction: column; @@ -39,6 +39,9 @@ const IntroSectionContainer = styled.div` align-items: center; width: 100%; height: calc(100vh - 70px); + @media (max-height: 874px) { + height: 110vh; + } ${media.mobile} { height: calc(100vh - 64px); } diff --git a/components/recruit/RecruitBanner/index.tsx b/components/recruit/RecruitBanner/index.tsx index 22b0a9d..382f9e5 100644 --- a/components/recruit/RecruitBanner/index.tsx +++ b/components/recruit/RecruitBanner/index.tsx @@ -4,15 +4,15 @@ import Yapp from 'constants/yapp'; import { IS_RECRUITING, NEXT_GENERATION_RECRUIT_LINK, - RECRUIT_BANNER, - RECRUIT_BANNER_ACTIVE, + RECRUIT_BANNER_PRE, } from 'database/recruit'; import DOMPurify from 'isomorphic-dompurify'; import styled from 'styled-components'; import media from 'styles/media'; function RecruitBanner() { - const BannerInfo = IS_RECRUITING ? RECRUIT_BANNER_ACTIVE : RECRUIT_BANNER; + // const BannerInfo = IS_RECRUITING ? RECRUIT_BANNER_ACTIVE : RECRUIT_BANNER; + const BannerInfo = RECRUIT_BANNER_PRE; const { title, description } = BannerInfo; return ( @@ -38,7 +38,8 @@ function RecruitBanner() { buttonColor="grey_850" borderColor="lightGrey" > - {IS_RECRUITING ? '모든 공고 보기' : '지원마감'} + {/* {IS_RECRUITING ? '모든 공고 보기' : '지원마감'} */} + 모집 알림 신청하기 diff --git a/database/recruit.ts b/database/recruit.ts index eaab5e3..ca9e8a7 100644 --- a/database/recruit.ts +++ b/database/recruit.ts @@ -17,6 +17,11 @@ export const RECRUIT_BANNER = { description: `${Yapp.YAPP_GENERATION}기 모집이 완료되었습니다!
다음 기수는 2025년 4월에 예정되어 있습니다.`, buttonName: `${Number(Yapp.YAPP_GENERATION) + 1}기에서 만나요!`, }; +export const RECRUIT_BANNER_PRE = { + title: 'YAPP 26기 모집 준비 중 🚧', + description: `YAPP 26기에서 6개월간 활동할 기획자(PM)/디자이너/개발자 신입 회원을 모집합니다.
IT 분야에 대한 열정과 의지가 넘쳐나고, 동아리에서 많은 사람들과 즐겁게 활동하고 싶은 분들의 많은 지원 바랍니다!`, + buttonName: '모집 알림 신청하기', +}; export const RECRUIT_BANNER_ACTIVE = { title: `YAPP
${Yapp.YAPP_GENERATION}기 모집`, @@ -26,7 +31,7 @@ export const RECRUIT_BANNER_ACTIVE = { }; export const NEXT_GENERATION_RECRUIT_LINK = - 'https://docs.google.com/forms/d/1Pz_bPLk7olNj45XnakQIB6LNGE9MnaZenzowIQ-mPQ8/viewform?pli=1&pli=1&pli=1&edit_requested=true'; + 'https://forms.gle/Ag7ZHViSHX8m6R3V8'; /** 모집 개요 */ export const RECRUIT_OVERVIEW = { diff --git a/public/assets/images/26th/banner-mobile.png b/public/assets/images/26th/banner-mobile.png new file mode 100644 index 0000000..58a1028 Binary files /dev/null and b/public/assets/images/26th/banner-mobile.png differ diff --git a/public/assets/images/26th/banner-pc.png b/public/assets/images/26th/banner-pc.png new file mode 100644 index 0000000..0cc1fa7 Binary files /dev/null and b/public/assets/images/26th/banner-pc.png differ diff --git a/public/assets/images/26th/banner-tablet.png b/public/assets/images/26th/banner-tablet.png new file mode 100644 index 0000000..53d6e88 Binary files /dev/null and b/public/assets/images/26th/banner-tablet.png differ diff --git a/public/assets/images/26th/illust_mini.svg b/public/assets/images/26th/illust_mini.svg new file mode 100644 index 0000000..22c3606 --- /dev/null +++ b/public/assets/images/26th/illust_mini.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +