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

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

Merged
merged 7 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from 6 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
4 changes: 2 additions & 2 deletions src/components/common/SEO/index.tsx
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
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
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
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
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
2 changes: 2 additions & 0 deletions src/views/MainPage/index.tsx
Copy link
Member

Choose a reason for hiding this comment

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

요거 이렇게 구현하면 YB 모집 딱! 시작할때 시간 맞춰서 배포해야돼서 불편할 것 같아요

분명 제가 예전에 valid 시간인지 체크하도록 구현해놨는데 누가 없앳어? 하고 찾아보니... 저네요... ^^
다른 작업하다가 갑자기 얘를 지워버렸네요.. (아마 뭐 테스트해보고 싶었거나 35기엔 이 배너가 재활용되지 않을거라고 생각했던 것 같아요)

요 코드 다시 살려두면 좋을 것 같아요
미리 배포해둘 수 있게!

Copy link
Member Author

Choose a reason for hiding this comment

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

아하 ! checkIsTimeInRage 로 지원 기간인지 확인하여 해당 반환값인 isValidTopBanner 조건부 렌더링 하라는 말씀이신거죵 ??

Copy link
Member

Choose a reason for hiding this comment

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

네넹 맞아요 그 모집 시간 이후부터만 배너 뜰 수 있게!
지금 상태로 배포하면 모집 기간과 무관하게 계속 탑 배너가 뜰테니까유 !

Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
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 Banner from './components/Banner';
import Introduce from './components/Introduce';
import ScrollInteractiveLogo from './components/ScrollInteractiveLogo';

function MainPage() {
return (
<PageLayout>
<TopBanner />
<Banner />
<Introduce />
<IntroSection />
Expand Down
Loading