From 19c95d11ca0f44e81fa8d657285c019aebc356c6 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 13 Aug 2024 14:14:07 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20header=20padding=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/CompletePage/style.css.ts | 4 ++-- src/views/ErrorPage/style.css.ts | 10 ++++++---- src/views/loadings/BigLoding/style.css.ts | 4 ++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/views/CompletePage/style.css.ts b/src/views/CompletePage/style.css.ts index 1dfe7d58..156e695d 100644 --- a/src/views/CompletePage/style.css.ts +++ b/src/views/CompletePage/style.css.ts @@ -9,12 +9,12 @@ export const container = style({ alignItems: 'center', justifyContent: 'center', width: 550, - height: calc.subtract('100vh', '74px'), + height: calc.subtract('100vh', '80px'), minHeight: 700, '@supports': { '(height: 100dvh)': { - height: calc.subtract('100dvh', '74px'), + height: calc.subtract('100dvh', '80px'), }, }, }); diff --git a/src/views/ErrorPage/style.css.ts b/src/views/ErrorPage/style.css.ts index 730fa6eb..247600ae 100644 --- a/src/views/ErrorPage/style.css.ts +++ b/src/views/ErrorPage/style.css.ts @@ -22,11 +22,11 @@ export const container = styleVariants({ withHeader: [ containerBase, { - height: calc.subtract('100vh', '74px'), + height: calc.subtract('100vh', '80px'), '@supports': { 'height: (100dvh)': { - height: calc.subtract('100dvh', '74px'), + height: calc.subtract('100dvh', '80px'), }, }, }, @@ -34,11 +34,13 @@ export const container = styleVariants({ withoutHeader: [ containerBase, { - height: '100vh', + // height: '100vh', + height: calc.subtract('100vh', '80px'), '@supports': { 'height: (100dvh)': { - height: '100dvh', + // height: '100dvh', + height: calc.subtract('100dvh', '80px'), }, }, }, diff --git a/src/views/loadings/BigLoding/style.css.ts b/src/views/loadings/BigLoding/style.css.ts index 72a2af27..bde88307 100644 --- a/src/views/loadings/BigLoding/style.css.ts +++ b/src/views/loadings/BigLoding/style.css.ts @@ -9,11 +9,11 @@ export const container = style({ alignItems: 'center', justifyContent: 'center', width: '100%', - height: calc.subtract('100vh', '74px'), + height: calc.subtract('100vh', '80px'), '@supports': { 'height: (100dvh)': { - height: calc.subtract('100dvh', '74px'), + height: calc.subtract('100dvh', '80px'), }, }, }); From bdde8b097d866d494ee5b38d1121f4395a45cb14 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 13 Aug 2024 15:38:20 +0900 Subject: [PATCH 2/5] =?UTF-8?q?design:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ErrorPage/components/ErrorCode/index.tsx | 44 ++++--- .../components/ErrorCode/style.css.ts | 50 +++++++- src/views/ErrorPage/index.tsx | 15 ++- src/views/ErrorPage/style.css.ts | 121 +++++++++++++++--- 4 files changed, 189 insertions(+), 41 deletions(-) diff --git a/src/views/ErrorPage/components/ErrorCode/index.tsx b/src/views/ErrorPage/components/ErrorCode/index.tsx index dffbe4d5..2752519b 100644 --- a/src/views/ErrorPage/components/ErrorCode/index.tsx +++ b/src/views/ErrorPage/components/ErrorCode/index.tsx @@ -1,3 +1,4 @@ +import { useDevice } from '@hooks/useDevice'; import Icon404Back from 'views/ErrorPage/icons/Icon404Back'; import Icon404Front from 'views/ErrorPage/icons/Icon404Front'; import Icon500Back from 'views/ErrorPage/icons/Icon500Back'; @@ -5,34 +6,45 @@ import Icon500Front from 'views/ErrorPage/icons/Icon500Front'; import IconCone from 'views/ErrorPage/icons/IconCone'; import IconGhost from 'views/ErrorPage/icons/IconGhost'; -import { backText, frontText, iconWrapper, showIcon } from './style.css'; +import { backText, frontText, iconWrapperVar, showIconVar } from './style.css'; export default function ErrorCode({ code }: { code: 404 | 500 }) { + const DEVICE_TYPE = useDevice(); + const isMobile = DEVICE_TYPE === 'MOB'; + return ( -
+
{code === 404 ? ( <> - - - - + {!isMobile && ( + + + + )} + - - - + {!isMobile && ( + + + + )} ) : ( <> - - - - + {!isMobile && ( + + + + )} + - - - + {!isMobile && ( + + + + )} )}
diff --git a/src/views/ErrorPage/components/ErrorCode/style.css.ts b/src/views/ErrorPage/components/ErrorCode/style.css.ts index 0c865b10..5767725d 100644 --- a/src/views/ErrorPage/components/ErrorCode/style.css.ts +++ b/src/views/ErrorPage/components/ErrorCode/style.css.ts @@ -1,10 +1,30 @@ -import { style } from '@vanilla-extract/css'; +import { style, styleVariants } from '@vanilla-extract/css'; -export const iconWrapper = style({ +const iconWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - marginBottom: 43, +}); + +export const iconWrapperVar = styleVariants({ + DESK: [ + iconWrapper, + { + marginBottom: 43, + }, + ], + TAB: [ + iconWrapper, + { + marginBottom: 43, + }, + ], + MOB: [ + iconWrapper, + { + marginBottom: 24, + }, + ], }); export const frontText = style({ @@ -18,8 +38,7 @@ export const frontText = style({ }, }); -export const showIcon = style({ - opacity: 0, +const showIcon = style({ transition: 'all 0.3s ease', selectors: { @@ -29,6 +48,27 @@ export const showIcon = style({ }, }); +export const showIconVar = styleVariants({ + DESK: [ + showIcon, + { + opacity: 0, + }, + ], + TAB: [ + showIcon, + { + opacity: 0, + }, + ], + MOB: [ + showIcon, + { + opacity: 1, + }, + ], +}); + export const backText = style({ transform: 'translateX(-73px)', transition: 'all 0.3s ease', diff --git a/src/views/ErrorPage/index.tsx b/src/views/ErrorPage/index.tsx index dca1b869..17f39521 100644 --- a/src/views/ErrorPage/index.tsx +++ b/src/views/ErrorPage/index.tsx @@ -2,13 +2,15 @@ import { track } from '@amplitude/analytics-browser'; import { useContext } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useDevice } from '@hooks/useDevice'; import { RecruitingInfoContext } from '@store/recruitingInfoContext'; import ErrorCode from './components/ErrorCode'; import { ERROR_MESSAGE } from './constants'; -import { article, contactButton, container, errorButton, errorText, instruction } from './style.css'; +import { article, contactButtonVar, container, errorButtonVar, errorTextVar, instructionVar } from './style.css'; const ErrorPage = ({ code }: { code: 404 | 500 }) => { + const DEVICE_TYPE = useDevice(); const navigate = useNavigate(); const { @@ -36,18 +38,21 @@ const ErrorPage = ({ code }: { code: 404 | 500 }) => {
-

{ERROR_MESSAGE[CODE_KEY]?.text}

-
-

{`문제가 지속적으로 발생하거나 문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}

+

{`문제가 지속적으로 발생하거나 문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}

track('click-error-ask')}> 문의하기 diff --git a/src/views/ErrorPage/style.css.ts b/src/views/ErrorPage/style.css.ts index 247600ae..a88d3714 100644 --- a/src/views/ErrorPage/style.css.ts +++ b/src/views/ErrorPage/style.css.ts @@ -55,38 +55,129 @@ export const article = style({ }); export const errorText = style({ - marginBottom: 28, color: theme.color.baseText, - ...theme.font.TITLE_2_28_SB, }); -export const errorButton = style({ +export const errorTextVar = styleVariants({ + DESK: [ + errorText, + { + marginBottom: 28, + ...theme.font.TITLE_2_28_SB, + }, + ], + TAB: [ + errorText, + { + marginBottom: 28, + ...theme.font.TITLE_2_28_SB, + }, + ], + MOB: [ + errorText, + { + marginBottom: 24, + ...theme.font.TITLE_3_24_SB, + }, + ], +}); + +const errorButton = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: 231, - height: 60, - marginBottom: 135, + borderRadius: 99, backgroundColor: theme.color.errorButtonBackground, - ...theme.font.TITLE_3_24_SB, }); -export const instruction = style({ - marginBottom: 20, +export const errorButtonVar = styleVariants({ + DESK: [ + errorButton, + { + width: 231, + height: 60, + marginBottom: 135, + ...theme.font.TITLE_3_24_SB, + }, + ], + TAB: [ + errorButton, + { + width: 202, + height: 54, + marginBottom: 140, + ...theme.font.TITLE_4_20_SB, + }, + ], + MOB: [ + errorButton, + { + width: 175, + height: 44, + marginBottom: 140, + ...theme.font.TITLE_5_18_SB, + }, + ], +}); + +const instruction = style({ color: theme.color.lightestText, textAlign: 'center', whiteSpace: 'pre-line', - ...theme.font.BODY_1_18_M, }); -export const contactButton = style({ +export const instructionVar = styleVariants({ + DESK: [ + instruction, + { + marginBottom: 20, + ...theme.font.BODY_1_18_M, + }, + ], + TAB: [ + instruction, + { + marginBottom: 24, + ...theme.font.BODY_2_16_M, + }, + ], + MOB: [ + instruction, + { + marginBottom: 24, + ...theme.font.BODY_3_14_M, + }, + ], +}); + +const contactButton = style({ display: 'block', - fontSize: 24, - fontWeight: '600', - lineHeight: '150%' /* 36px */, - letterSpacing: '-0.48px', textDecorationLine: 'underline', margin: '0 auto', color: theme.color.buttonText, }); + +export const contactButtonVar = styleVariants({ + DESK: [ + contactButton, + { + fontSize: 24, + fontWeight: '600', + lineHeight: '150%' /* 36px */, + letterSpacing: '-0.48px', + }, + ], + TAB: [ + contactButton, + { + ...theme.font.HEADING_5_20_B, + }, + ], + MOB: [ + contactButton, + { + ...theme.font.TITLE_5_18_SB, + }, + ], +}); From 2c98cbbec8629e66d43f259169613062125afa86 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 13 Aug 2024 15:39:28 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design:=20nomore=20page=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/components/NoMore/index.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/views/ErrorPage/components/NoMore/index.tsx b/src/views/ErrorPage/components/NoMore/index.tsx index c4b9a112..71e2f31c 100644 --- a/src/views/ErrorPage/components/NoMore/index.tsx +++ b/src/views/ErrorPage/components/NoMore/index.tsx @@ -1,6 +1,8 @@ import { track } from '@amplitude/analytics-browser'; -import { article, contactButton, container, errorButton, errorText, instruction } from '../../style.css'; +import { useDevice } from '@hooks/useDevice'; + +import { article, contactButtonVar, container, errorButtonVar, errorText, instructionVar } from '../../style.css'; interface NoMoreProps { isMakers?: boolean; @@ -8,26 +10,28 @@ interface NoMoreProps { } const NoMore = ({ isMakers, content }: NoMoreProps) => { + const DEVICE_TYPE = useDevice(); + return (
-

{`문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}

+

{`문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}

track(isMakers ? 'click-nomore-ask_makers' : 'click-nomore-ask')}> 문의하기 From 1a42891bd27adac6a775d44294c4d78edd03a9d8 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 13 Aug 2024 15:43:18 +0900 Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ErrorPage/components/NoMore/index.tsx | 2 +- src/views/ErrorPage/index.tsx | 8 +---- src/views/ErrorPage/style.css.ts | 34 ++----------------- 3 files changed, 5 insertions(+), 39 deletions(-) diff --git a/src/views/ErrorPage/components/NoMore/index.tsx b/src/views/ErrorPage/components/NoMore/index.tsx index 71e2f31c..ec3e76de 100644 --- a/src/views/ErrorPage/components/NoMore/index.tsx +++ b/src/views/ErrorPage/components/NoMore/index.tsx @@ -13,7 +13,7 @@ const NoMore = ({ isMakers, content }: NoMoreProps) => { const DEVICE_TYPE = useDevice(); return ( -
+

{content}

{ const DEVICE_TYPE = useDevice(); const navigate = useNavigate(); - const { - recruitingInfo: { isMakers }, - } = useContext(RecruitingInfoContext); - const handleGoBack = (code: 404 | 500) => { const hasPreviousPage = window.history.length > 1; @@ -35,7 +29,7 @@ const ErrorPage = ({ code }: { code: 404 | 500 }) => { const CODE_KEY: 'CODE404' | 'CODE500' = `CODE${code}`; return ( -
+

{ERROR_MESSAGE[CODE_KEY]?.text}

diff --git a/src/views/ErrorPage/style.css.ts b/src/views/ErrorPage/style.css.ts index a88d3714..156c3a49 100644 --- a/src/views/ErrorPage/style.css.ts +++ b/src/views/ErrorPage/style.css.ts @@ -3,50 +3,22 @@ import { calc } from '@vanilla-extract/css-utils'; import { theme } from 'styles/theme.css'; -const containerBase = style({ +export const container = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', + height: calc.subtract('100vh', '80px'), minHeight: 700, '@supports': { 'height: (100dvh)': { - height: '100dvh', + height: calc.subtract('100dvh', '80px'), }, }, }); -export const container = styleVariants({ - withHeader: [ - containerBase, - { - height: calc.subtract('100vh', '80px'), - - '@supports': { - 'height: (100dvh)': { - height: calc.subtract('100dvh', '80px'), - }, - }, - }, - ], - withoutHeader: [ - containerBase, - { - // height: '100vh', - height: calc.subtract('100vh', '80px'), - - '@supports': { - 'height: (100dvh)': { - // height: '100dvh', - height: calc.subtract('100dvh', '80px'), - }, - }, - }, - ], -}); - export const article = style({ display: 'flex', flexDirection: 'column', From db0ace0d32310efdac57392b172b4bdd097b708b Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 13 Aug 2024 15:46:32 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20class=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B9=BC=EB=A8=B9=EC=9D=80=20=EB=B6=80=EB=B6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/components/NoMore/index.tsx | 4 ++-- src/views/ErrorPage/style.css.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/ErrorPage/components/NoMore/index.tsx b/src/views/ErrorPage/components/NoMore/index.tsx index ec3e76de..01ce5261 100644 --- a/src/views/ErrorPage/components/NoMore/index.tsx +++ b/src/views/ErrorPage/components/NoMore/index.tsx @@ -2,7 +2,7 @@ import { track } from '@amplitude/analytics-browser'; import { useDevice } from '@hooks/useDevice'; -import { article, contactButtonVar, container, errorButtonVar, errorText, instructionVar } from '../../style.css'; +import { article, contactButtonVar, container, errorButtonVar, errorTextVar, instructionVar } from '../../style.css'; interface NoMoreProps { isMakers?: boolean; @@ -15,7 +15,7 @@ const NoMore = ({ isMakers, content }: NoMoreProps) => { return (
-

{content}

+

{content}