Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/common/AnimatedButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
10 changes: 5 additions & 5 deletions components/common/FloatingButton/index.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions components/common/HamburgerMenu/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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`
Expand Down
12 changes: 6 additions & 6 deletions components/common/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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};
`;

Expand Down
8 changes: 4 additions & 4 deletions components/common/TabMenu/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
`;

Expand Down
2 changes: 1 addition & 1 deletion components/home/AnimatedTextSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function AnimatedTextSection(): ReactElement {
<AnimatedButton
height={65}
fontColor="white"
buttonColor="orange_400"
buttonColor="blue_100"
className="recruitButton"
buttonText={buttonName}
onClick={() => {
Expand Down
168 changes: 168 additions & 0 deletions components/home/IntroSection/Banner25th.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
`;
54 changes: 2 additions & 52 deletions components/home/IntroSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -24,7 +24,7 @@ function IntroSection(): ReactElement {
onMouseLeave={handleEnter}
onMouseMove={handleMove}
>
<Banner24th />
<Banner25th />
<FloatingArrow />
</IntroSectionContainer>
);
Expand Down Expand Up @@ -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;
10 changes: 10 additions & 0 deletions components/home/NewsSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand Down
4 changes: 2 additions & 2 deletions components/home/SponsorSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function SponsorSection(): ReactElement {
width={148}
height={65}
fontColor="white"
buttonColor="orange_400"
buttonColor="blue_100"
>
후원 문의
</StyledButton>
Expand Down Expand Up @@ -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} {
Expand Down
Loading
Loading