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.

Sign up for GitHub

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

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

Merged
merged 7 commits into from
Sep 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
74b1e6a
feat: KeyColor 상태 네이밍 수정 및 반영
wuzoo Sep 4, 2024
d96a368
chore: 34 -> 35, gradient 수정
wuzoo Sep 4, 2024
a8eaca0
feat: 상단 TopBanner 추가
wuzoo Sep 4, 2024
c1ba253
chore: og image 변경
wuzoo Sep 4, 2024
2c2e1a6
chore: merge develop
wuzoo Sep 4, 2024
b80fe00
chore: 테스트 코드 ! 연산자 삭제
wuzoo Sep 4, 2024
d0b9740
feat: 지원기간 여부에 따라 TopBanner 조건부 렌더링
wuzoo Sep 5, 2024
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
4 changes: 2 additions & 2 deletions src/components/common/SEO/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 공식 홈페이지 이미지" />

Expand All @@ -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 공식 홈페이지 이미지" />
Expand Down
11 changes: 6 additions & 5 deletions src/views/MainPage/components/Banner/RecruitButton/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 애니메이션은 마우스 hover 시 그라데이션이 마우스 움직임에 따라 수평으로 움직이도록 구현하기 위해 쓰인 친구예요 (관련 PR)

그런데 이 슬랙 메시지 보면 선화가 요청한 것은 hover 되지 않았을 때 그라데이션의 짙은 부분이 수평으로 움직이는 애니메이션이 추가되길 원한 것 같고, 현재 그 부분은 구현되어있지 않은 것 같은데용!

선화도 리소스에 보고 선택해달라고 했으니
우선 해당 PR은 이대로 머지 시키고, 다른 페이지 먼저 작업한 후에
새로 브랜치 파서 애니메이션 작업만 추가 진행해도 될 것 같아용

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 넵 ! 사실 저도 언석, 승히님이 따로 말씀이 없으셔서 일단은 후순위로 나중에 구현하는 걸로 생각했던 것 같아요

추후에 작업하겠습니다 !

color: ${colors.gray800};
text-align: center;
font-family: SUIT;
Expand All @@ -34,7 +35,7 @@ export const RecruitButtonWrapper = styled(Link)`
}

&:hover {
background: #f0ffaa;
background: #8fc0ff;
}
`;

Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/views/MainPage/components/Banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
10 changes: 5 additions & 5 deletions src/views/MainPage/components/TopBanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
Expand Down
16 changes: 9 additions & 7 deletions src/views/MainPage/components/TopBanner/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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`
Expand Down Expand Up @@ -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) {
Expand All @@ -85,6 +86,7 @@ export const Description = styled.div`
flex-grow: 1;

text-align: center;
font-size: 16rem;
font-weight: 500;

/* 모바일 뷰 */
Expand Down
5 changes: 5 additions & 0 deletions src/views/MainPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
Loading