From 3179b95e79cac1d9ad844de40de8897693272f12 Mon Sep 17 00:00:00 2001 From: Eonseok Jeon <121864459+eonseok-jeon@users.noreply.github.com> Date: Wed, 14 Aug 2024 20:36:41 +0900 Subject: [PATCH] =?UTF-8?q?[Design]=20Mobile=20ver.=20-=20Dialog=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(#392)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * design: dialog 반응형 크기 구현 * design: dialog 반응형 구현 * chore: dialogs import 방식 통일 * design: dialog 버튼 font 반응형으로 수정 --- src/App.tsx | 2 +- src/common/components/Dialog/index.tsx | 8 +- src/common/components/Dialog/style.css.ts | 26 ++++- src/views/ApplyPage/index.tsx | 3 +- src/views/ReviewPage/index.tsx | 2 +- .../components/SignupForm/index.tsx | 2 +- src/views/dialogs/CompleteDialog/index.tsx | 13 ++- src/views/dialogs/DraftDialog/index.tsx | 11 +- .../dialogs/ExistingApplicantDialog/index.tsx | 11 +- src/views/dialogs/ExitDialog/index.tsx | 15 ++- .../dialogs/PreventApplyDialog/index.tsx | 11 +- .../dialogs/PreventReviewDialog/index.tsx | 13 ++- .../dialogs/SessionExpiredDialog/index.tsx | 13 ++- src/views/dialogs/SubmitDialog/index.tsx | 49 ++++---- src/views/dialogs/SubmitDialog/style.css.ts | 105 ++++++++++++++++-- src/views/dialogs/index.tsx | 4 + src/views/dialogs/style.css.ts | 79 ++++++++++++- 17 files changed, 296 insertions(+), 71 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 190e52c1..7af1e0ca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,6 @@ import Layout from '@components/Layout'; import { RecruitingInfoContext, RecruitingInfoType } from '@store/recruitingInfoContext'; import { ModeType, ThemeContext } from '@store/themeContext'; import { dark, light } from 'styles/theme.css'; -import SessionExpiredDialog from 'views/dialogs/SessionExpiredDialog'; import ErrorPage from 'views/ErrorPage'; import MainPage from 'views/MainPage'; import PasswordPage from 'views/PasswordPage'; @@ -21,6 +20,7 @@ import ReviewPage from 'views/ReviewPage'; import SignupPage from 'views/SignupPage'; import 'styles/reset.css'; +import { SessionExpiredDialog } from 'views/dialogs'; const router = createBrowserRouter([ { diff --git a/src/common/components/Dialog/index.tsx b/src/common/components/Dialog/index.tsx index afe4e588..8a95eaa9 100644 --- a/src/common/components/Dialog/index.tsx +++ b/src/common/components/Dialog/index.tsx @@ -1,15 +1,19 @@ import { forwardRef, type DialogHTMLAttributes, type ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import { container } from './style.css'; +import { useDevice } from '@hooks/useDevice'; + +import { containerVar } from './style.css'; interface DialogProps extends DialogHTMLAttributes { children?: ReactNode; } const Dialog = forwardRef(({ children, ...dialogElementProps }: DialogProps, ref) => { + const DEVICE_TYPE = useDevice(); + return createPortal( - + {children} , document.getElementById('modal')!, diff --git a/src/common/components/Dialog/style.css.ts b/src/common/components/Dialog/style.css.ts index 5103cc05..bb4a3ecb 100644 --- a/src/common/components/Dialog/style.css.ts +++ b/src/common/components/Dialog/style.css.ts @@ -1,8 +1,7 @@ import { colors } from '@sopt-makers/colors'; -import { style } from '@vanilla-extract/css'; +import { style, styleVariants } from '@vanilla-extract/css'; -export const container = style({ - width: 400, +const container = style({ padding: 24, backgroundColor: colors.white, // subBackground borderRadius: 14, @@ -12,3 +11,24 @@ export const container = style({ backgroundColor: colors.grayAlpha500, // backgroundDimmed }, }); + +export const containerVar = styleVariants({ + DESK: [ + container, + { + width: 400, + }, + ], + TAB: [ + container, + { + width: 400, + }, + ], + MOB: [ + container, + { + width: 313, + }, + ], +}); diff --git a/src/views/ApplyPage/index.tsx b/src/views/ApplyPage/index.tsx index 8ca243d7..d21d0097 100644 --- a/src/views/ApplyPage/index.tsx +++ b/src/views/ApplyPage/index.tsx @@ -8,8 +8,7 @@ import Footer from '@components/Layout/components/Footer'; import useCheckBrowser from '@hooks/useCheckBrowser'; import useDate from '@hooks/useDate'; import useScrollToHash from '@hooks/useScrollToHash'; -import { DraftDialog, SubmitDialog } from 'views/dialogs'; -import PreventApplyDialog from 'views/dialogs/PreventApplyDialog'; +import { DraftDialog, PreventApplyDialog, SubmitDialog } from 'views/dialogs'; import NoMore from 'views/ErrorPage/components/NoMore'; import BigLoading from 'views/loadings/BigLoding'; diff --git a/src/views/ReviewPage/index.tsx b/src/views/ReviewPage/index.tsx index 141c6c9d..a3a065f0 100644 --- a/src/views/ReviewPage/index.tsx +++ b/src/views/ReviewPage/index.tsx @@ -14,7 +14,7 @@ import PartSection from 'views/ApplyPage/components/PartSection'; import useGetDraft from 'views/ApplyPage/hooks/useGetDraft'; import useGetQuestions from 'views/ApplyPage/hooks/useGetQuestions'; import { container, formContainer } from 'views/ApplyPage/style.css'; -import PreventReviewDialog from 'views/dialogs/PreventReviewDialog'; +import { PreventReviewDialog } from 'views/dialogs'; import NoMore from 'views/ErrorPage/components/NoMore'; import BigLoading from 'views/loadings/BigLoding'; diff --git a/src/views/SignupPage/components/SignupForm/index.tsx b/src/views/SignupPage/components/SignupForm/index.tsx index 75c0b8e3..56137cb2 100644 --- a/src/views/SignupPage/components/SignupForm/index.tsx +++ b/src/views/SignupPage/components/SignupForm/index.tsx @@ -11,7 +11,7 @@ import { PRIVACY_POLICY } from '@constants/policy'; import { VALIDATION_CHECK } from '@constants/validationCheck'; import useVerificationStatus from '@hooks/useVerificationStatus'; import { RecruitingInfoContext } from '@store/recruitingInfoContext'; -import ExistingApplicantDialog from 'views/dialogs/ExistingApplicantDialog'; +import { ExistingApplicantDialog } from 'views/dialogs'; import useMutateSignUp from 'views/SignupPage/hooks/useMutateSignUp'; import { formWrapper } from './style.css'; diff --git a/src/views/dialogs/CompleteDialog/index.tsx b/src/views/dialogs/CompleteDialog/index.tsx index a313918b..59640f57 100644 --- a/src/views/dialogs/CompleteDialog/index.tsx +++ b/src/views/dialogs/CompleteDialog/index.tsx @@ -2,15 +2,20 @@ import { forwardRef } from 'react'; import { Link } from 'react-router-dom'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText, subText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css'; const CompleteDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + return ( -

비밀번호 재설정이 완료되었어요.

-

'로그인' 페이지로 이동할게요.

-
+

비밀번호 재설정이 완료되었어요.

+

'로그인' 페이지로 이동할게요.

+ 확인 diff --git a/src/views/dialogs/DraftDialog/index.tsx b/src/views/dialogs/DraftDialog/index.tsx index 6857cb13..74276694 100644 --- a/src/views/dialogs/DraftDialog/index.tsx +++ b/src/views/dialogs/DraftDialog/index.tsx @@ -1,14 +1,19 @@ import { forwardRef } from 'react'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css'; const DraftDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + return ( -

임시 저장이 완료되었어요.

- +

임시 저장이 완료되었어요.

+ diff --git a/src/views/dialogs/ExistingApplicantDialog/index.tsx b/src/views/dialogs/ExistingApplicantDialog/index.tsx index 15a37281..683e72a6 100644 --- a/src/views/dialogs/ExistingApplicantDialog/index.tsx +++ b/src/views/dialogs/ExistingApplicantDialog/index.tsx @@ -2,15 +2,18 @@ import { forwardRef } from 'react'; import { Link } from 'react-router-dom'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css'; const ExistingApplicantDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + return ( -

이미 가입된 계정이 있어요.

-
-
+

이미 가입된 계정이 있어요.

+
+
diff --git a/src/views/dialogs/ExitDialog/index.tsx b/src/views/dialogs/ExitDialog/index.tsx index 6358daad..06f0686d 100644 --- a/src/views/dialogs/ExitDialog/index.tsx +++ b/src/views/dialogs/ExitDialog/index.tsx @@ -1,19 +1,22 @@ import { forwardRef } from 'react'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText, subText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css'; const ExitDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + return ( -

이대로 나가시겠어요?

-

변경사항이 있는 경우 임시저장을 해주세요.

-
-
+

이대로 나가시겠어요?

+

변경사항이 있는 경우 임시저장을 해주세요.

+
+ -
+
diff --git a/src/views/dialogs/PreventApplyDialog/index.tsx b/src/views/dialogs/PreventApplyDialog/index.tsx index 93c482b4..86776693 100644 --- a/src/views/dialogs/PreventApplyDialog/index.tsx +++ b/src/views/dialogs/PreventApplyDialog/index.tsx @@ -1,18 +1,23 @@ import { forwardRef, type KeyboardEvent } from 'react'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css'; const PreventApplyDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + const handlePreventESCKeyPress = (e: KeyboardEvent) => { if (e.key === 'Escape') e.preventDefault(); }; return ( -

지원서 제출 기한이 지났어요.

-
+

지원서 제출 기한이 지났어요.

+
diff --git a/src/views/dialogs/PreventReviewDialog/index.tsx b/src/views/dialogs/PreventReviewDialog/index.tsx index fd59dde7..a0688f22 100644 --- a/src/views/dialogs/PreventReviewDialog/index.tsx +++ b/src/views/dialogs/PreventReviewDialog/index.tsx @@ -2,19 +2,24 @@ import { forwardRef, type KeyboardEvent } from 'react'; import { Link } from 'react-router-dom'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText, subText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css'; const PreventReviewDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + const handlePreventESCKeyPress = (e: KeyboardEvent) => { if (e.key === 'Escape') e.preventDefault(); }; return ( -

지원서 제출을 먼저 해주세요.

-

'지원서' 페이지로 이동할게요.

-
+

지원서 제출을 먼저 해주세요.

+

'지원서' 페이지로 이동할게요.

+ 확인 diff --git a/src/views/dialogs/SessionExpiredDialog/index.tsx b/src/views/dialogs/SessionExpiredDialog/index.tsx index d0b1601b..98bd8c8b 100644 --- a/src/views/dialogs/SessionExpiredDialog/index.tsx +++ b/src/views/dialogs/SessionExpiredDialog/index.tsx @@ -2,10 +2,13 @@ import { track } from '@amplitude/analytics-browser'; import { forwardRef, type KeyboardEvent } from 'react'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; -import { buttonInside, buttonOutside, buttonWrapper, mainText, subText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css'; const SessionExpiredDialog = forwardRef((_, ref) => { + const DEVICE_TYPE = useDevice(); + const handlePreventESCKeyPress = (e: KeyboardEvent) => { if (e.key === 'Escape') e.preventDefault(); }; @@ -23,9 +26,11 @@ const SessionExpiredDialog = forwardRef((_, ref) => { return ( -

로그인을 다시 해주세요.

-

세션이 만료되었거나 비정상적인 로그인이에요.

- +

로그인을 다시 해주세요.

+

세션이 만료되었거나 비정상적인 로그인이에요.

+ diff --git a/src/views/dialogs/SubmitDialog/index.tsx b/src/views/dialogs/SubmitDialog/index.tsx index 020b8509..9d5b8f20 100644 --- a/src/views/dialogs/SubmitDialog/index.tsx +++ b/src/views/dialogs/SubmitDialog/index.tsx @@ -2,6 +2,7 @@ import { track } from '@amplitude/analytics-browser'; import { type ChangeEvent, forwardRef, useState } from 'react'; import Dialog from '@components/Dialog'; +import { useDevice } from '@hooks/useDevice'; import ButtonLoading from 'views/loadings/ButtonLoading'; import { @@ -9,18 +10,26 @@ import { checkboxWrapper, checkmark, hiddenCheckbox, - infoContainer, - infoLabel, - infoValue, - infoWrapper, + infoContainerVar, + infoLabelVar, + infoValueVar, + infoWrapperVar, } from './style.css'; -import { buttonInside, buttonOutside, buttonWrapper, mainText, subText } from '../style.css'; +import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css'; -const MyInfoItem = ({ label, value }: { label: string; value: string }) => { +const MyInfoItem = ({ + DEVICE_TYPE, + label, + value, +}: { + DEVICE_TYPE: 'MOB' | 'TAB' | 'DESK'; + label: string; + value: string; +}) => { return ( -
  • - - {value} +
  • + + {value}
    • ); }; @@ -40,19 +49,21 @@ const SubmitDialog = forwardRef( ({ userInfo: { name, email, phone, part }, dataIsPending, onSendData }, ref) => { const [isChecked, setIsChecked] = useState(false); + const DEVICE_TYPE = useDevice(); + const handleCheck = (e: ChangeEvent) => { setIsChecked(e.target.checked); }; return ( -

    이대로 제출하시겠어요?

    -

    제출 완료하신 지원서는 수정하실 수 없어요.

    -
      - - - - +

      이대로 제출하시겠어요?

      +

      제출 완료하신 지원서는 수정하실 수 없어요.

      +
        + + + +
      -
      +
      setIsChecked(false)}> -
      +
      diff --git a/src/views/dialogs/SubmitDialog/style.css.ts b/src/views/dialogs/SubmitDialog/style.css.ts index 612e60be..6604fcbe 100644 --- a/src/views/dialogs/SubmitDialog/style.css.ts +++ b/src/views/dialogs/SubmitDialog/style.css.ts @@ -1,40 +1,129 @@ import { colors } from '@sopt-makers/colors'; -import { style } from '@vanilla-extract/css'; +import { style, styleVariants } from '@vanilla-extract/css'; import { theme } from 'styles/theme.css'; -export const infoContainer = style({ +const infoContainer = style({ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', - width: 352, - height: 252, - marginTop: 20, - padding: '33px 44px', // FIXME: gray20으로 수정해야 함. backgroundColor: colors.gray30, borderRadius: 10, }); +export const infoContainerVar = styleVariants({ + DESK: [ + infoContainer, + { + width: 352, + height: 252, + marginTop: 20, + padding: '33px 44px', + }, + ], + TAB: [ + infoContainer, + { + width: 352, + height: 252, + marginTop: 20, + padding: '33px 44px', + }, + ], + MOB: [ + infoContainer, + { + width: 265, + height: 245, + marginTop: 14, + padding: '35px 30px', + }, + ], +}); + export const infoWrapper = style({ display: 'flex', gap: 48, alignItems: 'center', }); -export const infoLabel = style({ +export const infoWrapperVar = styleVariants({ + DESK: [ + infoWrapper, + { + gap: 48, + }, + ], + TAB: [ + infoWrapper, + { + gap: 48, + }, + ], + MOB: [ + infoWrapper, + { + gap: 39, + }, + ], +}); + +const infoLabel = style({ width: 56, minWidth: 56, color: colors.gray300, ...theme.font.BODY_2_16_R, }); -export const infoValue = style({ +export const infoLabelVar = styleVariants({ + DESK: [ + infoLabel, + { + ...theme.font.BODY_2_16_R, + }, + ], + TAB: [ + infoLabel, + { + ...theme.font.BODY_2_16_R, + }, + ], + MOB: [ + infoLabel, + { + ...theme.font.BODY_3_14_R, + }, + ], +}); + +const infoValue = style({ color: colors.gray950, wordBreak: 'break-all', ...theme.font.BODY_2_16_M, }); +export const infoValueVar = styleVariants({ + DESK: [ + infoValue, + { + ...theme.font.BODY_2_16_M, + }, + ], + TAB: [ + infoValue, + { + ...theme.font.BODY_2_16_M, + }, + ], + MOB: [ + infoValue, + { + ...theme.font.BODY_3_14_M, + }, + ], +}); + export const checkboxContainer = style({ display: 'flex', alignItems: 'center', diff --git a/src/views/dialogs/index.tsx b/src/views/dialogs/index.tsx index 27a95ba7..1a60000b 100644 --- a/src/views/dialogs/index.tsx +++ b/src/views/dialogs/index.tsx @@ -1,4 +1,8 @@ export { default as CompleteDialog } from './CompleteDialog'; export { default as DraftDialog } from './DraftDialog'; +export { default as ExistingApplicantDialog } from './ExistingApplicantDialog'; export { default as ExitDialog } from './ExitDialog'; +export { default as PreventApplyDialog } from './PreventApplyDialog'; +export { default as PreventReviewDialog } from './PreventReviewDialog'; +export { default as SessionExpiredDialog } from './SessionExpiredDialog'; export { default as SubmitDialog } from './SubmitDialog'; diff --git a/src/views/dialogs/style.css.ts b/src/views/dialogs/style.css.ts index 7b0e5e05..acdda0ce 100644 --- a/src/views/dialogs/style.css.ts +++ b/src/views/dialogs/style.css.ts @@ -3,26 +3,88 @@ import { style, styleVariants } from '@vanilla-extract/css'; import { theme } from 'styles/theme.css'; -export const mainText = style({ +const mainText = style({ color: colors.gray950, - ...theme.font.HEADING_5_20_B, }); -export const subText = style({ +export const mainTextVar = styleVariants({ + DESK: [ + mainText, + { + ...theme.font.HEADING_5_20_B, + }, + ], + TAB: [ + mainText, + { + ...theme.font.HEADING_5_20_B, + }, + ], + MOB: [ + mainText, + { + ...theme.font.HEADING_7_16_B, + }, + ], +}); + +const subText = style({ marginTop: 2, color: colors.gray300, ...theme.font.BODY_2_16_M, }); -export const buttonWrapper = style({ +export const subTextVar = styleVariants({ + DESK: [ + subText, + { + ...theme.font.BODY_2_16_M, + }, + ], + TAB: [ + subText, + { + ...theme.font.BODY_2_16_M, + }, + ], + MOB: [ + subText, + { + ...theme.font.BODY_3_14_M, + }, + ], +}); + +const buttonWrapper = style({ display: 'flex', - gap: 12, + alignItems: 'center', justifyContent: 'flex-end', marginLeft: 'auto', marginTop: 20, }); +export const buttonWrapperVar = styleVariants({ + DESK: [ + buttonWrapper, + { + gap: 12, + }, + ], + TAB: [ + buttonWrapper, + { + gap: 12, + }, + ], + MOB: [ + buttonWrapper, + { + gap: 8, + }, + ], +}); + const buttonOutsideBase = style({ width: 'fit-content', borderRadius: 12, @@ -54,6 +116,12 @@ export const buttonOutside = styleVariants({ ], }); +export const buttonOutsideVar = styleVariants({ + DESK: { ...theme.font.LABEL_3_14_SB }, + TAB: { ...theme.font.LABEL_3_14_SB }, + MOB: { ...theme.font.LABEL_4_12_SB }, +}); + const buttonInsideBase = style({ display: 'flex', alignItems: 'center', @@ -62,7 +130,6 @@ const buttonInsideBase = style({ padding: '13px 20px', borderRadius: 12, transition: 'background-color 0.3s ease-out', - ...theme.font.LABEL_3_14_SB, ':active': { margin: '0 auto',