diff --git a/src/views/MyPage/index.tsx b/src/views/MyPage/index.tsx index 7f89c37e..ef735d22 100644 --- a/src/views/MyPage/index.tsx +++ b/src/views/MyPage/index.tsx @@ -1,33 +1,63 @@ import { track } from '@amplitude/analytics-browser'; -import { useContext } from 'react'; +import { MouseEvent, useContext } from 'react'; import Button from '@components/Button'; import Callout from '@components/Callout'; import Title from '@components/Title'; import useDate from '@hooks/useDate'; +import { useDevice } from '@hooks/useDevice'; import { RecruitingInfoContext } from '@store/recruitingInfoContext'; import NoMore from 'views/ErrorPage/components/NoMore'; import BigLoading from 'views/loadings/BigLoding'; -import { buttonWidth, container, infoContainer, infoLabel, infoValue, itemWrapper, buttonValue } from './style.css'; +import { + itemWrapper, + buttonValue, + containerVar, + infoContainerVar, + infoLabelVar, + infoValueVar, + buttonWidthVar, +} from './style.css'; const MyInfoItem = ({ label, value }: { label: string; value?: string | number | boolean }) => { + const DEVICE_TYPE = useDevice(); + return (
  • - {label} - {value} + {label} + {value}
  • ); }; -const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => ( -
  • - {label} - -
  • -); +const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => { + const DEVICE_TYPE = useDevice(); + + const handlePreventMobile = (e: MouseEvent) => { + track(trackingEvent); + + const isMobile = /Mobi/i.test(window.navigator.userAgent); + if (isMobile) { + alert('PC로 이용해주세요.'); + e.preventDefault(); + return; + } + if (DEVICE_TYPE !== 'DESK') { + alert('전체화면 이용을 권장드려요.'); + return; + } + }; + + return ( +
  • + {label} + +
  • + ); +}; interface MyPageProps { part?: string; @@ -35,6 +65,7 @@ interface MyPageProps { } const MyPage = ({ part, applicationPass }: MyPageProps) => { + const DEVICE_TYPE = useDevice(); const { recruitingInfo: { name, season }, } = useContext(RecruitingInfoContext); @@ -44,10 +75,10 @@ const MyPage = ({ part, applicationPass }: MyPageProps) => { if (NoMoreRecruit) return ; return ( -
    +
    지원 현황 {`지원서는 면접 이후부터 열람이 불가하오니\n백업해두시길 바랍니다.`} -
      +
        diff --git a/src/views/MyPage/style.css.ts b/src/views/MyPage/style.css.ts index e8013341..e7246f63 100644 --- a/src/views/MyPage/style.css.ts +++ b/src/views/MyPage/style.css.ts @@ -1,45 +1,125 @@ -import { style } from '@vanilla-extract/css'; +import { style, styleVariants } from '@vanilla-extract/css'; import { theme } from 'styles/theme.css'; -export const container = style({ +const container = style({ display: 'flex', flexDirection: 'column', - gap: 50, justifyContent: 'center', - margin: 95, }); -export const infoContainer = style({ +export const containerVar = styleVariants({ + DESK: [ + container, + { + gap: 50, + margin: '90px 0 70px', + }, + ], + TAB: [ + container, + { + gap: 50, + margin: '90px 0 191px', + }, + ], + MOB: [ + container, + { + gap: 30, + margin: '23px 0 74px', + }, + ], +}); + +const infoContainer = style({ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', - width: 467, height: 455, - padding: '38px 80px', border: `1px solid ${theme.color.border}`, borderRadius: 18, }); +export const infoContainerVar = styleVariants({ + DESK: [ + infoContainer, + { + width: 467, + padding: '38px 80px', + }, + ], + TAB: [ + infoContainer, + { + width: 367, + padding: '38px 50px', + }, + ], + MOB: [ + infoContainer, + { + width: 312, + padding: '38px 34px', + }, + ], +}); + export const itemWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }); -export const infoLabel = style({ - width: 63, - color: theme.color.lighterText, - ...theme.font.BODY_1_18_M, +export const infoLabelVar = styleVariants({ + DESK: { + width: 63, + color: theme.color.lighterText, + ...theme.font.BODY_1_18_M, + }, + TAB: { + width: 63, + color: theme.color.lighterText, + ...theme.font.BODY_1_18_M, + }, + MOB: { + width: 56, + color: theme.color.lighterText, + ...theme.font.BODY_2_16_M, + }, }); -export const infoValue = style({ +const infoValue = style({ width: 132, color: theme.color.baseText, textAlign: 'center', ...theme.font.TITLE_5_18_SB, }); +export const infoValueVar = styleVariants({ + DESK: [ + infoValue, + { + width: 132, + ...theme.font.TITLE_5_18_SB, + }, + ], + TAB: [ + infoValue, + { + width: 132, + ...theme.font.TITLE_5_18_SB, + }, + ], + MOB: [ + infoValue, + { + width: 111, + ...theme.font.TITLE_6_16_SB, + }, + ], +}); + export const buttonValue = style([ itemWrapper, { @@ -47,6 +127,31 @@ export const buttonValue = style([ }, ]); -export const buttonWidth = style({ - width: 133, +const buttonWidth = style({ + paddingLeft: 0, + paddingRight: 0, +}); + +export const buttonWidthVar = styleVariants({ + DESK: [ + buttonWidth, + { + width: 132, + letterSpacing: '-0.36px', + }, + ], + TAB: [ + buttonWidth, + { + width: 132, + letterSpacing: '-0.36px', + }, + ], + MOB: [ + buttonWidth, + { + width: 111, + letterSpacing: '-0.24px', + }, + ], }); diff --git a/src/views/SignedInPage/index.tsx b/src/views/SignedInPage/index.tsx index 6323fb49..b0ae5723 100644 --- a/src/views/SignedInPage/index.tsx +++ b/src/views/SignedInPage/index.tsx @@ -33,6 +33,7 @@ const SignedInPage = () => { return ( <> + {isComplete && } {!isComplete && submit && } {!isComplete && !submit && }