[ 25기 ] 25기 모집 전 공식 웹 수정 사항 반영 (#171)

YAPP-admin · Oct 18, 2024 · ae407d4 · ae407d4
2 parents cba2f71 + 212639f
commit ae407d4
Show file tree

Hide file tree

Showing 25 changed files with 348 additions and 145 deletions.
diff --git a/components/common/AnimatedButton/index.tsx b/components/common/AnimatedButton/index.tsx
@@ -85,7 +85,7 @@ const ButtonStyled = styled(Button)<{ variant?: AnimatedButtonVariant }>`
       variant === 'primary'
         ? css`
             background: ${({ theme }) => theme.palette.grey_900};
-            color: ${({ theme }) => theme.palette.orange_300};
+            color: ${({ theme }) => theme.palette.blue_200};
           `
         : css`
             background: ${({ theme }) => theme.palette.orange_400};

diff --git a/components/common/FloatingButton/index.tsx b/components/common/FloatingButton/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import Button from 'components/common/Button';
+import Yapp from 'constants/yapp';
+import { Facebook, Kakao, Mail, Plus } from 'public/assets/icons';
 import type { ReactElement } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
-import Button from 'components/common/Button';
-import { Mail, Facebook, Plus, Kakao } from 'public/assets/icons';
 import media from 'styles/media';
-import Yapp from 'constants/yapp';
 
 function FloatingButton(): ReactElement {
   const [visible, setVisible] = useState(false);
@@ -80,7 +80,7 @@ const TriggerButton = styled(Button)<{ visible: boolean }>`
   right: 48px;
   z-index: 10000;
   background: ${({ theme }) =>
-    `linear-gradient(208.15deg, ${theme.palette.orange_300} 12.08%, ${theme.palette.orange_500} 86.71%)`};
+    `linear-gradient(208.15deg, ${theme.palette.blue_100} 12.08%, ${theme.palette.blue_100} 86.71%)`};
 
   ${media.mobile} {
     width: 48px;

diff --git a/components/common/HamburgerMenu/index.tsx b/components/common/HamburgerMenu/index.tsx
@@ -1,9 +1,9 @@
-import { ReactElement, useEffect } from 'react';
 import { HEADER_MENUS } from 'constants/headerMenus';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { ReactElement, useEffect } from 'react';
 import styled from 'styled-components';
 import { fadeIn } from 'styles/utils-styles';
-import { useRouter } from 'next/router';
-import Link from 'next/link';
 
 interface HamburgerMenuProps {
   handleOpenMenu: () => void;
@@ -72,7 +72,7 @@ const MenuItem = styled.a<{ active: boolean }>`
   cursor: pointer;
   ${({ theme }) => theme.textStyle.mobile.Title_1}
   color: ${({ theme, active }) =>
-    active ? theme.palette.orange_400 : theme.palette.white};
+    active ? theme.palette.blue_100 : theme.palette.white};
 `;
 
 const Background = styled.div`

diff --git a/components/common/Header/index.tsx b/components/common/Header/index.tsx
@@ -1,15 +1,15 @@
+import HamburgerMenu from 'components/common/HamburgerMenu';
 import Breakpoints from 'constants/breakpoints';
 import { HEADER_MENUS } from 'constants/headerMenus';
+import Path from 'constants/path';
+import useToggle from 'hooks/useToggle';
+import useWindowDimensions from 'hooks/useWindowDimensions';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Hamburger, YappLogo } from 'public/assets/icons';
-import React, { ReactElement, useEffect, useRef } from 'react';
+import { ReactElement, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
-import useToggle from 'hooks/useToggle';
-import HamburgerMenu from 'components/common/HamburgerMenu';
-import useWindowDimensions from 'hooks/useWindowDimensions';
-import Path from 'constants/path';
 
 function Header(): ReactElement {
   const { asPath } = useRouter();
@@ -98,7 +98,7 @@ const HeaderMenu = styled.div`
 const MenuText = styled.a<{ active: boolean }>`
   cursor: pointer;
   color: ${({ theme, active }) =>
-    active ? theme.palette.orange_400 : theme.palette.white};
+    active ? theme.palette.blue_100 : theme.palette.white};
   ${({ theme }) => theme.textStyle.web.Category};
 `;
 

diff --git a/components/common/TabMenu/index.tsx b/components/common/TabMenu/index.tsx
@@ -1,9 +1,9 @@
+import { FieldNameTypes } from 'components/recruit/RecruitField';
 import type { Dispatch, ReactElement, SetStateAction } from 'react';
 import styled, { css } from 'styled-components';
-import { FieldNameTypes } from 'components/recruit/RecruitField';
-import { ProjectField } from 'types/project';
-import { PaletteKeyTypes } from 'styles/theme';
 import media from 'styles/media';
+import { PaletteKeyTypes } from 'styles/theme';
+import { ProjectField } from 'types/project';
 
 interface ITabMenuStyle {
   backgroundColor?: PaletteKeyTypes;
@@ -105,7 +105,7 @@ const AnimatedBackground = styled.span<
   }
 
   border-radius: 124px;
-  background-color: ${({ theme }) => theme.palette.orange_400};
+  background-color: ${({ theme }) => theme.palette.blue_100};
   transition: all 0.2s ease-in-out;
 `;
 

diff --git a/components/home/AnimatedTextSection/index.tsx b/components/home/AnimatedTextSection/index.tsx
@@ -37,7 +37,7 @@ function AnimatedTextSection(): ReactElement {
       <AnimatedButton
         height={65}
         fontColor="white"
-        buttonColor="orange_400"
+        buttonColor="blue_100"
         className="recruitButton"
         buttonText={buttonName}
         onClick={() => {

diff --git a/components/home/IntroSection/Banner25th.tsx b/components/home/IntroSection/Banner25th.tsx
@@ -0,0 +1,168 @@
+import YappSubTitle from 'public/assets/images/25th/yapp_subtitle.svg';
+import YappuLogo from 'public/assets/images/25th/yappu.svg';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import media from 'styles/media';
+
+const Banner25th = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <>
+      <Banner24thTextContentBox className={mounted ? 'appear' : ''}>
+        <BannerTitleBox>
+          <YappuLogoBox />
+          <YappSubTitleBox />
+        </BannerTitleBox>
+        <h3>
+          큐브를 완성할
+          <br />
+          25기 야뿌를 찾습니다
+        </h3>
+        {/* <CubeBox /> */}
+      </Banner24thTextContentBox>
+
+      <BannerBackgroundInner className={mounted ? 'appear' : ''} />
+    </>
+  );
+};
+
+export default Banner25th;
+
+const BannerBackgroundInner = styled.div`
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  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;
+  background-image: url('/assets/images/25th/banner-pc.png');
+
+  ${media.mobile} {
+    background-image: url('/assets/images/25th/banner-tablet.png');
+  }
+
+  ${media.small} {
+    background-image: url('/assets/images/25th/banner-phone.png');
+  }
+`;
+
+const CubeBox = styled.div`
+  width: 900px;
+  height: 376px;
+  margin: 0 auto;
+
+  background-size: cover; // 비율을 고정하여 화면에 맞게 조정
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: url('/assets/images/25th/cube-pc.png');
+
+  ${media.mobile} {
+    width: 680px;
+    height: 287px;
+    background-image: url('/assets/images/25th/cube-tablet.png');
+  }
+
+  ${media.small} {
+    width: 287px;
+    height: 120px;
+    background-image: url('/assets/images/25th/cube-mobile.png');
+  }
+`;
+const Banner24thTextContentBox = 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: 2rem;
+
+  transition: transform 2s ease, opacity 2s ease;
+  transform: translate3d(-50%, -2rem, 0);
+  opacity: 0;
+
+  &.appear {
+    transform: translate3d(-50%, 0, 0);
+    opacity: 1;
+  }
+
+  & > h3 {
+    margin: 0;
+    text-align: center;
+    font-size: 4.25rem;
+    font-weight: 700;
+    line-height: 125%;
+    letter-spacing: -0.07rem;
+    color: ${({ theme }) => theme.palette.white};
+  }
+  ${media.mobile} {
+    & > h3 {
+      font-size: 3rem;
+      letter-spacing: -0.032rem;
+    }
+  }
+  ${media.small} {
+    top: 20%;
+    gap: 1rem;
+
+    & > h3 {
+      font-size: 2rem;
+      letter-spacing: -0.032rem;
+    }
+  }
+`;
+
+const BannerTitleBox = styled.div`
+  display: flex;
+  gap: 1rem;
+  height: fit-content;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  ${media.small} {
+    gap: 0.8rem;
+  }
+`;
+
+const YappuLogoBox = styled(YappuLogo)`
+  width: 44.38px;
+  height: 36.95px;
+  ${media.small} {
+    width: 2rem;
+    height: 2rem;
+  }
+`;
+
+const YappSubTitleBox = styled(YappSubTitle)`
+  width: 254px;
+  height: 48px;
+
+  ${media.small} {
+    width: 161px;
+    height: 30px;
+  }
+`;
diff --git 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 Banner24th from './Banner24th';
+import Banner25th from './Banner25th';
 
 function IntroSection(): ReactElement {
   const [isHover, setIsHover] = useState(false);
@@ -24,7 +24,7 @@ function IntroSection(): ReactElement {
       onMouseLeave={handleEnter}
       onMouseMove={handleMove}
     >
-      <Banner24th />
+      <Banner25th />
       <FloatingArrow />
     </IntroSectionContainer>
   );
@@ -82,54 +82,4 @@ const ArrowDownConatiner = styled.div`
   }
 `;
 
-const MainBanner = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: ${({ theme }) => theme.palette.black};
-`;
-
-const Dimension = styled.span`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
-  z-index: 2;
-  background-color: ${({ theme }) => theme.palette.black};
-`;
-
-const ContentWrapper = styled.div`
-  text-align: center;
-  z-index: 3;
-`;
-
-const TitleContainer = styled.div`
-  margin: 0 5px 48px 5px;
-  text-align: center;
-  word-break: keep-all;
-
-  .main-text {
-    color: ${({ theme }) => theme.palette['white']};
-    font-family: 'Poppins-ExtraBold';
-    font-size: 80px;
-    font-weight: 800;
-    line-height: 100%;
-    letter-spacing: 0;
-
-    ${media.mobile} {
-      font-size: 58px;
-      font-weight: 800;
-      line-height: 100%;
-      letter-spacing: 0;
-    }
-
-    ${media.small} {
-      font-size: 32px;
-      font-weight: 800;
-      line-height: 100%;
-      letter-spacing: 0;
-    }
-  }
-`;
-
 export default IntroSection;
diff --git a/components/home/NewsSection/index.tsx b/components/home/NewsSection/index.tsx
@@ -35,6 +35,16 @@ const SocialContainer = styled(SectionTemplate)`
 const CardContainer = styled.article`
   margin: 49px 0;
   text-align: center;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  ${media.mobile} {
+    grid-template-columns: 1fr 1fr;
+  }
+  ${media.small} {
+    grid-template-columns: 1fr;
+  }
 `;
 
 const StyledButton = styled(Button)`

diff --git a/components/home/SponsorSection/index.tsx b/components/home/SponsorSection/index.tsx
@@ -30,7 +30,7 @@ function SponsorSection(): ReactElement {
           width={148}
           height={65}
           fontColor="white"
-          buttonColor="orange_400"
+          buttonColor="blue_100"
         >
           후원 문의
         </StyledButton>
@@ -88,7 +88,7 @@ const Sponsor = styled.li`
 const StyledButton = styled(Button)`
   transition: background-color 0.5s;
   &:hover {
-    background-color: ${({ theme }) => theme.palette.orange_600};
+    background-color: ${({ theme }) => theme.palette.blue_200};
   }
 
   ${media.mobile} {