From 507efa0e88415085da078b42ee6676f53431e075 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 21 Oct 2024 19:43:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20100dvh=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/errorPage/ErrorPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/errorPage/ErrorPage.tsx b/src/pages/errorPage/ErrorPage.tsx index 9b9443a0..d76fd03d 100644 --- a/src/pages/errorPage/ErrorPage.tsx +++ b/src/pages/errorPage/ErrorPage.tsx @@ -23,6 +23,8 @@ const Wrapper = styled.div` flex-direction: column; align-items: center; + width: 100%; + height: 100dvh; padding: 16.7rem 9.8rem 23.7rem 9.9rem; `; From f4513702221c0e33d6181e9a1b4431983cbe3e86 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 21 Oct 2024 20:00:22 +0900 Subject: [PATCH 2/3] =?UTF-8?q?design:=20join=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=B0=B0=EA=B2=BD=20=EA=B7=B8=EB=9D=BC=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20svg=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/index.tsx | 3 +++ src/assets/svgs/joinBgImg.svg | 33 +++++++++++++++++++++++++++++++++ src/pages/join/JoinPage.tsx | 26 +++++++------------------- 3 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 src/assets/svgs/joinBgImg.svg diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 670c2626..3ec616ad 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -55,3 +55,6 @@ export { default as ModalRejectImg } from './img_modal_reject.svg?react'; export { default as ComingSoonModalImg } from './comingSoonModalImg.svg?react'; export { default as GhostImg } from './img_ghost.svg?react'; export { default as HbHomeMainSvg } from './img_hbhome_main.svg?react'; + +// 가입 페이지 배경 +export { default as JoinBgImgSvg } from './joinBgImg.svg?react'; diff --git a/src/assets/svgs/joinBgImg.svg b/src/assets/svgs/joinBgImg.svg new file mode 100644 index 00000000..57d1f6f6 --- /dev/null +++ b/src/assets/svgs/joinBgImg.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/join/JoinPage.tsx b/src/pages/join/JoinPage.tsx index 33f94829..e4f0c08d 100644 --- a/src/pages/join/JoinPage.tsx +++ b/src/pages/join/JoinPage.tsx @@ -4,14 +4,13 @@ import JoinButton from '@pages/join/components/Button'; import Welcome from '@pages/join/components/Welcome'; import { Gap } from '@pages/login/SignupPage'; import googleLogin from '@pages/login/utils/googleLogin'; +import { JoinBgImgSvg } from '@assets/svgs'; const JoinPage = () => { return ( <> - - - + @@ -45,27 +44,16 @@ const Wrapper = styled.div` z-index: 2; width: 100%; - height: 100%; + height: 100dvh; min-height: calc(var(--vh, 1vh) * 100 - 44px); padding: 10vh 2rem 3.5rem; - - background-image: url(''); `; -const GradEllipse = styled.div<{ $type: number }>` - position: absolute; - top: ${({ $type }) => ($type === 1 ? '12.5rem' : $type === 2 ? '14.3rem' : '29.2rem')}; - left: ${({ $type }) => ($type === 1 ? '-5.5rem' : $type === 2 ? '15.6rem' : '6rem')}; - z-index: 1; - - width: 27.7rem; - height: 27.9rem; - border-radius: '50%'; +const JoinBgImgSvgIcon = styled(JoinBgImgSvg)` + position: fixed; - background: ${({ $type }) => ($type === 1 ? '#DFEDF9' : $type === 2 ? '#E2E6FA' : '#D9F7FF')}; - - opacity: 0.8; - filter: blur(60px); + width: 100%; + height: 100dvh; `; const BigMainLogoIcon = styled(BigMainLogoIc)` From 0dd9285699018c85772ce459ea0f52adf0442430 Mon Sep 17 00:00:00 2001 From: se0jinYoon Date: Mon, 21 Oct 2024 20:31:25 +0900 Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=84=A0,=ED=9B=84=EB=B0=B0=20?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20svg?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/index.tsx | 2 + src/assets/svgs/joinHbBgImg.svg | 28 ++++++++++++ src/assets/svgs/joinSbBgImg.svg | 52 ++++++++++++++++++++++ src/pages/login/SignupPage.tsx | 76 +++++++-------------------------- 4 files changed, 97 insertions(+), 61 deletions(-) create mode 100644 src/assets/svgs/joinHbBgImg.svg create mode 100644 src/assets/svgs/joinSbBgImg.svg diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 3ec616ad..9233c1f4 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -58,3 +58,5 @@ export { default as HbHomeMainSvg } from './img_hbhome_main.svg?react'; // 가입 페이지 배경 export { default as JoinBgImgSvg } from './joinBgImg.svg?react'; +export { default as JoinHbBgSvg } from './joinHbBgImg.svg?react'; +export { default as JoinSbBgSvg } from './joinSbBgImg.svg?react'; diff --git a/src/assets/svgs/joinHbBgImg.svg b/src/assets/svgs/joinHbBgImg.svg new file mode 100644 index 00000000..13e38c19 --- /dev/null +++ b/src/assets/svgs/joinHbBgImg.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/joinSbBgImg.svg b/src/assets/svgs/joinSbBgImg.svg new file mode 100644 index 00000000..71038a27 --- /dev/null +++ b/src/assets/svgs/joinSbBgImg.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/login/SignupPage.tsx b/src/pages/login/SignupPage.tsx index b6f2c7dc..75657816 100644 --- a/src/pages/login/SignupPage.tsx +++ b/src/pages/login/SignupPage.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import theme from '@styles/theme'; import { useLocation } from 'react-router-dom'; import googleLogin from './utils/googleLogin'; +import { JoinHbBgSvg, JoinSbBgSvg } from '@assets/svgs'; const SignupPage = () => { const role = useLocation().state.role; @@ -10,21 +11,8 @@ const SignupPage = () => { return ( <> - {role === 'SENIOR' ? ( - <> - - - - - ) : ( - <> - - - - - )} + {role === 'SENIOR' ? : } - {role === 'SENIOR' ? : } 반가워요! {isSenior ? ( @@ -45,7 +33,7 @@ const SignupPage = () => { )} - + {role === 'SENIOR' ? : } googleLogin(role)}> 구글로 시작하기 @@ -60,13 +48,13 @@ export default SignupPage; const SignUpContainer = styled.div` display: flex; flex-direction: column; - justify-content: stretch; + justify-content: space-evenly; align-items: center; position: relative; z-index: 1; width: 100%; - height: 100%; + height: 100dvh; min-height: calc(var(--vh, 1vh) * 100 - 44px); padding: 6rem 2rem 3.6rem; `; @@ -75,36 +63,18 @@ export const Gap = styled.div` flex-grow: 1; `; -const GradEllipseSb = styled.div<{ $type: number }>` - position: absolute; - top: ${({ $type }) => ($type === 1 ? '12.5rem' : $type === 2 ? '14.3rem' : '29.2rem')}; - left: ${({ $type }) => ($type === 1 ? '-5.5rem' : $type === 2 ? '15.6rem' : '6rem')}; - z-index: 0; - - width: 27.7rem; - height: 27.9rem; - border-radius: '50%'; - - background: ${({ $type }) => ($type === 1 ? '#DFEDF9' : $type === 2 ? '#E2E6FA' : '#D9F7FF')}; +const JoinSbBgSvgIcon = styled(JoinSbBgSvg)` + position: fixed; - opacity: 0.8; - filter: blur(60px); + width: 100%; + height: 100dvh; `; -const GradEllipseHb = styled.div<{ $type: number }>` - position: absolute; - top: ${({ $type }) => ($type === 1 ? '14.3rem' : $type === 2 ? '12.5rem' : '29.2rem')}; - left: ${({ $type }) => ($type === 1 ? '-5.9rem' : $type === 2 ? '17.8rem' : '3.8rem')}; - z-index: 0; +const JoinHbBgSvgIcon = styled(JoinHbBgSvg)` + position: fixed; - width: 27.7rem; - height: 27.9rem; - border-radius: '50%'; - - background: ${({ $type }) => ($type === 1 ? '#E2FAFA' : $type === 2 ? '#F9E1DF' : '#D9F7FF')}; - - opacity: 0.8; - filter: blur(60px); + width: 100%; + height: 100dvh; `; const MetaText = styled.p` @@ -119,6 +89,8 @@ const DescTextWrapper = styled.div` flex-direction: column; justify-content: center; align-items: center; + + padding-bottom: 3.2rem; `; const DescText = styled.span<{ $isActive: boolean }>` ${({ theme }) => theme.fonts.Title1_SB_16}; @@ -154,21 +126,3 @@ const GoogleLogoIcon = styled(GoogleLogoIc)` height: 33px; margin: 10px; `; - -const OnboardingBackgroundSBIcon = styled(OnboardingBackgroundSBIc)` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - z-index: -1; -`; - -const OnboardingBackgroundHBIcon = styled(OnboardingBackgroundHBIc)` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - z-index: -1; -`;