From fc8c14ce9e76d3c39df76753262be6d56980523a Mon Sep 17 00:00:00 2001 From: lydiacho Date: Fri, 16 Aug 2024 21:20:30 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20ScrollToTop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Layout/components/ScrollToTop.tsx | 14 ++++++++++++++ src/common/components/Layout/index.tsx | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 src/common/components/Layout/components/ScrollToTop.tsx diff --git a/src/common/components/Layout/components/ScrollToTop.tsx b/src/common/components/Layout/components/ScrollToTop.tsx new file mode 100644 index 00000000..4637ead2 --- /dev/null +++ b/src/common/components/Layout/components/ScrollToTop.tsx @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +const ScrollToTop = () => { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +}; + +export default ScrollToTop; diff --git a/src/common/components/Layout/index.tsx b/src/common/components/Layout/index.tsx index 96bc09d5..dafbf68f 100644 --- a/src/common/components/Layout/index.tsx +++ b/src/common/components/Layout/index.tsx @@ -5,6 +5,7 @@ import { Outlet } from 'react-router-dom'; import { RecruitingInfoContext } from '@store/recruitingInfoContext'; import Header from './components/Header'; +import ScrollToTop from './components/ScrollToTop'; import { container, mainWrapper } from './style.css'; const Head = () => { @@ -61,6 +62,7 @@ const Layout = ({ children }: PropsWithChildren) => { return (
+
{children || }
From 8b018a911198913ad52caa8b7e79b23dc530deee Mon Sep 17 00:00:00 2001 From: lydiacho Date: Fri, 16 Aug 2024 21:22:28 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20Head,=20ScrollToTop=20Settings=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Layout/components/Settings/Head.tsx | 56 ++++++++++++++++++ .../components/{ => Settings}/ScrollToTop.tsx | 0 src/common/components/Layout/index.tsx | 58 +------------------ 3 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 src/common/components/Layout/components/Settings/Head.tsx rename src/common/components/Layout/components/{ => Settings}/ScrollToTop.tsx (100%) diff --git a/src/common/components/Layout/components/Settings/Head.tsx b/src/common/components/Layout/components/Settings/Head.tsx new file mode 100644 index 00000000..59ddc2c4 --- /dev/null +++ b/src/common/components/Layout/components/Settings/Head.tsx @@ -0,0 +1,56 @@ +import { useContext } from 'react'; +import { Helmet } from 'react-helmet-async'; + +import { RecruitingInfoContext } from '@store/recruitingInfoContext'; + +const Head = () => { + const { + recruitingInfo: { season, isMakers }, + } = useContext(RecruitingInfoContext); + + const TOUCH_ICON = isMakers ? '/makers-touch-icon.png' : '/apple-touch-icon.png'; + const ICON = isMakers ? '/makersIcon.svg' : '/icon.svg'; + const FAVICON = isMakers ? '/makersFavicon.ico' : '/favicon.ico'; + const SITE_NAME = isMakers === undefined ? 'SOPT 리크루팅' : `SOPT ${isMakers ? 'makers ' : ''}리크루팅`; + const TITLE = + season === undefined ? 'SOPT 모집 지원하기' : `SOPT ${isMakers ? 'makers ' : ''}${season}기 모집 지원하기`; + const IMAGE = isMakers ? '/makersOg.png' : '/imgOg.png'; + const DESCRIPTION = + isMakers === undefined + ? `SOPT의 신입 기수 모집페이지입니다.` + : `SOPT${isMakers ? ' makers' : ''}의 신입 기수 모집페이지입니다.`; + const URL = isMakers ? 'https://recruiting.sopt.org' : 'https://recruit.sopt.org'; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + {TITLE} + + + + ); +}; + +export default Head; diff --git a/src/common/components/Layout/components/ScrollToTop.tsx b/src/common/components/Layout/components/Settings/ScrollToTop.tsx similarity index 100% rename from src/common/components/Layout/components/ScrollToTop.tsx rename to src/common/components/Layout/components/Settings/ScrollToTop.tsx diff --git a/src/common/components/Layout/index.tsx b/src/common/components/Layout/index.tsx index dafbf68f..22381897 100644 --- a/src/common/components/Layout/index.tsx +++ b/src/common/components/Layout/index.tsx @@ -1,63 +1,11 @@ -import { PropsWithChildren, useContext } from 'react'; -import { Helmet } from 'react-helmet-async'; +import { PropsWithChildren } from 'react'; import { Outlet } from 'react-router-dom'; -import { RecruitingInfoContext } from '@store/recruitingInfoContext'; - import Header from './components/Header'; -import ScrollToTop from './components/ScrollToTop'; +import Head from './components/Settings/Head'; +import ScrollToTop from './components/Settings/ScrollToTop'; import { container, mainWrapper } from './style.css'; -const Head = () => { - const { - recruitingInfo: { season, isMakers }, - } = useContext(RecruitingInfoContext); - - const TOUCH_ICON = isMakers ? '/makers-touch-icon.png' : '/apple-touch-icon.png'; - const ICON = isMakers ? '/makersIcon.svg' : '/icon.svg'; - const FAVICON = isMakers ? '/makersFavicon.ico' : '/favicon.ico'; - const SITE_NAME = isMakers === undefined ? 'SOPT 리크루팅' : `SOPT ${isMakers ? 'makers ' : ''}리크루팅`; - const TITLE = - season === undefined ? 'SOPT 모집 지원하기' : `SOPT ${isMakers ? 'makers ' : ''}${season}기 모집 지원하기`; - const IMAGE = isMakers ? '/makersOg.png' : '/imgOg.png'; - const DESCRIPTION = - isMakers === undefined - ? `SOPT의 신입 기수 모집페이지입니다.` - : `SOPT${isMakers ? ' makers' : ''}의 신입 기수 모집페이지입니다.`; - const URL = isMakers ? 'https://recruiting.sopt.org' : 'https://recruit.sopt.org'; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - {TITLE} - - - - ); -}; - const Layout = ({ children }: PropsWithChildren) => { return (
From 82ed661f9b7b40f8f1694fb1ec1e89ee860d9081 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Fri, 16 Aug 2024 21:26:18 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EB=94=94=EB=A0=89=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=AA=85=20=EC=B9=B4=EB=A9=9C=EC=BC=80=EC=9D=B4=EC=8A=A4?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/Layout/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/Layout/index.tsx b/src/common/components/Layout/index.tsx index 22381897..e5f76b56 100644 --- a/src/common/components/Layout/index.tsx +++ b/src/common/components/Layout/index.tsx @@ -2,8 +2,8 @@ import { PropsWithChildren } from 'react'; import { Outlet } from 'react-router-dom'; import Header from './components/Header'; -import Head from './components/Settings/Head'; -import ScrollToTop from './components/Settings/ScrollToTop'; +import Head from './components/settings/Head'; +import ScrollToTop from './components/settings/ScrollToTop'; import { container, mainWrapper } from './style.css'; const Layout = ({ children }: PropsWithChildren) => {