[Feat] 메인페이지 업데이트 + OG 이미지 변경 (#408)

* feat: KeyColor 상태 네이밍 수정 및 반영 * chore: 34 -> 35, gradient 수정 * feat: 상단 TopBanner 추가 * chore: og image 변경 * chore: 테스트 코드 ! 연산자 삭제 * feat: 지원기간 여부에 따라 TopBanner 조건부 렌더링
sopt-makers · Sep 6, 2024 · 7c19baa · 7c19baa
1 parent c86613f
commit 7c19baa
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 20 deletions.
diff --git a/src/components/common/SEO/index.tsx b/src/components/common/SEO/index.tsx
@@ -17,7 +17,7 @@ function SEO(props: HeadProps) {
       <meta property="twitter:site" content="https://sopt.org/" />
       <meta
         name="twitter:image"
-        content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/34th_OG_IMG.png"
+        content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/about/35th/OG+1.png"
       />
       <meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />
 
@@ -32,7 +32,7 @@ function SEO(props: HeadProps) {
         property="og:image"
         content={
           projectImageURL ||
-          'https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/34th_OG_IMG.png'
+          'https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/about/35th/OG+1.png'
         }
       />
       <meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />

diff --git a/src/views/MainPage/components/Banner/RecruitButton/style.ts b/src/views/MainPage/components/Banner/RecruitButton/style.ts
@@ -9,8 +9,9 @@ export const RecruitButtonWrapper = styled(Link)`
   justify-content: center;
   align-items: center;
   border-radius: 99px;
-  background: linear-gradient(274deg, #bdec00 10%, #f0ffb6 100%);
-  animation: ${BackgroundMove} 3s linear 0s infinite alternate;
+  background: linear-gradient(274deg, #3c92ff 10%, #8fc0ff 74.12%, #3c92ff 100%);
+
+  animation: ${BackgroundMove} 3s linear infinite;
   color: ${colors.gray800};
   text-align: center;
   font-family: SUIT;
@@ -34,7 +35,7 @@ export const RecruitButtonWrapper = styled(Link)`
   }
 
   &:hover {
-    background: #f0ffaa;
+    background: #8fc0ff;
   }
 `;
 
@@ -72,12 +73,12 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
     bottom: 0;
     background-image: radial-gradient(
         circle 110px at ${(props) => props.x}px ${(props) => props.y}px,
-        #bdec00,
+        #3c92ff,
         transparent
       ),
       radial-gradient(
         circle 180px at ${(props) => props.x}px ${(props) => props.y}px,
-        #fdffaa,
+        #8fc0ff,
         transparent
       );
     opacity: 0;

diff --git a/src/views/MainPage/components/Banner/index.tsx b/src/views/MainPage/components/Banner/index.tsx
@@ -19,7 +19,7 @@ export default function Banner() {
             <S.Title>함께라서 외칠 수 있는 열정</S.Title>
             <S.Title>오직 이곳 SOPT에서만.</S.Title>
             <RecruitButton>
-              {isValid ? '34기 YB 지원하기 ' : '모집 알림 신청하기 '}&gt;{' '}
+              {isValid ? '35기 YB 지원하기 ' : '모집 알림 신청하기 '}&gt;{' '}
             </RecruitButton>
           </S.Content>
           <S.DownScrollIcon onClick={onScrollMoveDown} />

diff --git a/src/views/MainPage/components/TopBanner/index.tsx b/src/views/MainPage/components/TopBanner/index.tsx
@@ -6,17 +6,17 @@ import useGetVisitor from '../../hooks/useGetVisitor';
 import * as S from './style';
 
 export default function TopBanner() {
-  const TARGET_DATE = new Date('2024-03-08 18:00:00');
+  const TARGET_DATE = new Date('2024-09-13 18:00:00');
   const isMobile = useIsMobile();
   const CHANGE_POSITION = isMobile ? 495 : 605;
   const { data } = useGetVisitor(); // 방문자 조회
 
-  const [isYellow, setIsYellow] = useState<boolean>(false);
+  const [isKeyColor, setIsKeyColor] = useState<boolean>(false);
 
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
-      scrollPosition <= CHANGE_POSITION ? setIsYellow(false) : setIsYellow(true);
+      scrollPosition <= CHANGE_POSITION ? setIsKeyColor(false) : setIsKeyColor(true);
     };
 
     window.addEventListener('scroll', handleScroll);
@@ -27,10 +27,10 @@ export default function TopBanner() {
   });
 
   return (
-    <S.Container href="/recruit" isYellow={isYellow}>
+    <S.Container href="/recruit" isKeyColor={isKeyColor}>
       <S.Wrapper>
         <div>
-          <S.Title>솝트의 34번째 열정이 되어주세요!</S.Title>
+          <S.Title>솝트의 35번째 열정이 되어주세요!</S.Title>
         </div>
         <S.Description>
           <S.Timer>

diff --git a/src/views/MainPage/components/TopBanner/style.ts b/src/views/MainPage/components/TopBanner/style.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import Link from 'next/link';
 import { css } from '@emotion/react';
 
-export const Container = styled(Link)<{ isYellow: boolean }>`
+export const Container = styled(Link)<{ isKeyColor: boolean }>`
   display: flex;
   justify-content: center;
   position: fixed;
@@ -12,18 +12,18 @@ export const Container = styled(Link)<{ isYellow: boolean }>`
   width: 100%;
   z-index: 95;
 
-  ${({ isYellow }) =>
-    isYellow
+  ${({ isKeyColor }) =>
+    isKeyColor
       ? css`
-          background-color: #bdec00;
-          color: #101111;
+          background-color: #5ba3ff;
+          color: #0f1012;
           & h1,
           p {
-            color: #101111;
+            color: #0f1012;
           }
           & path,
           circle {
-            stroke: #101111;
+            stroke: #0f1012;
           }
         `
       : css`
@@ -71,6 +71,7 @@ export const Wrapper = styled.section`
 export const Title = styled.h1`
   text-align: center;
   line-height: 130%;
+  font-size: 16rem;
 
   /* 모바일 뷰 */
   @media (max-width: 26.75rem) {
@@ -85,6 +86,7 @@ export const Description = styled.div`
   flex-grow: 1;
 
   text-align: center;
+  font-size: 16rem;
   font-weight: 500;
 
   /* 모바일 뷰 */

diff --git a/src/views/MainPage/index.tsx b/src/views/MainPage/index.tsx
@@ -1,13 +1,18 @@
 import PageLayout from '@src/components/common/PageLayout';
 import BottomLayout from '@src/views/MainPage/components/BottomLayout';
 import IntroSection from '@src/views/MainPage/components/IntroSection';
+import TopBanner from '@src/views/MainPage/components/TopBanner';
+import { checkIsTimeInRange } from '../../lib/utils/date';
 import Banner from './components/Banner';
 import Introduce from './components/Introduce';
 import ScrollInteractiveLogo from './components/ScrollInteractiveLogo';
 
 function MainPage() {
+  const isValid = checkIsTimeInRange('2024-09-08 10:00:00', '2024-09-13 18:00:00'); // 모집 여부
+
   return (
     <PageLayout>
+      {isValid && <TopBanner />}
       <Banner />
       <Introduce />
       <IntroSection />