From 0fad844c4c989ca1f4f169f66d9584f7d7a5c203 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sat, 10 Aug 2024 21:32:19 +0900 Subject: [PATCH 1/5] =?UTF-8?q?design:=20mypage=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MyPage/index.tsx | 47 ++++++++---- src/views/MyPage/style.css.ts | 119 +++++++++++++++++++++++++++---- src/views/SignedInPage/index.tsx | 5 +- 3 files changed, 142 insertions(+), 29 deletions(-) diff --git a/src/views/MyPage/index.tsx b/src/views/MyPage/index.tsx index 7f89c37e..0e3a9b6e 100644 --- a/src/views/MyPage/index.tsx +++ b/src/views/MyPage/index.tsx @@ -5,29 +5,49 @@ 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(); + + return ( +
  • + {label} + +
    • + ); +}; interface MyPageProps { part?: string; @@ -35,6 +55,7 @@ interface MyPageProps { } const MyPage = ({ part, applicationPass }: MyPageProps) => { + const DEVICE_TYPE = useDevice(); const { recruitingInfo: { name, season }, } = useContext(RecruitingInfoContext); @@ -44,10 +65,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..e557adc2 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, + marginTop: 90, + }, + ], + TAB: [ + container, + { + gap: 50, + marginTop: 90, + }, + ], + MOB: [ + container, + { + gap: 30, + marginTop: 23, + }, + ], +}); + +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,17 @@ export const buttonValue = style([ }, ]); -export const buttonWidth = style({ - width: 133, +export const buttonWidthVar = styleVariants({ + DESK: { + width: 132, + letterSpacing: '-0.36px', + }, + TAB: { + width: 132, + letterSpacing: '-0.36px', + }, + MOB: { + width: 111, + letterSpacing: '-0.24px', + }, }); diff --git a/src/views/SignedInPage/index.tsx b/src/views/SignedInPage/index.tsx index 6323fb49..2e39b121 100644 --- a/src/views/SignedInPage/index.tsx +++ b/src/views/SignedInPage/index.tsx @@ -33,9 +33,10 @@ const SignedInPage = () => { return ( <> - {isComplete && } + + {/* {isComplete && } {!isComplete && submit && } - {!isComplete && !submit && } + {!isComplete && !submit && } */} ); }; From 386ca2594d14df13fee840fdc7e5e06dc5f07663 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sat, 10 Aug 2024 21:40:31 +0900 Subject: [PATCH 2/5] =?UTF-8?q?design:=20button=20=EC=88=98=ED=8F=89=20pad?= =?UTF-8?q?ding=200=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MyPage/style.css.ts | 38 ++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/views/MyPage/style.css.ts b/src/views/MyPage/style.css.ts index e557adc2..9e8aee88 100644 --- a/src/views/MyPage/style.css.ts +++ b/src/views/MyPage/style.css.ts @@ -127,17 +127,31 @@ export const buttonValue = style([ }, ]); +const buttonWidth = style({ + paddingLeft: 0, + paddingRight: 0, +}); + export const buttonWidthVar = styleVariants({ - DESK: { - width: 132, - letterSpacing: '-0.36px', - }, - TAB: { - width: 132, - letterSpacing: '-0.36px', - }, - MOB: { - width: 111, - letterSpacing: '-0.24px', - }, + DESK: [ + buttonWidth, + { + width: 132, + letterSpacing: '-0.36px', + }, + ], + TAB: [ + buttonWidth, + { + width: 132, + letterSpacing: '-0.36px', + }, + ], + MOB: [ + buttonWidth, + { + width: 111, + letterSpacing: '-0.24px', + }, + ], }); From dd11b861317b1d2142986e292ae3ee4c7426301a Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sat, 10 Aug 2024 21:53:14 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design:=20container=20marginBottom=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MyPage/style.css.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/MyPage/style.css.ts b/src/views/MyPage/style.css.ts index 9e8aee88..e7246f63 100644 --- a/src/views/MyPage/style.css.ts +++ b/src/views/MyPage/style.css.ts @@ -13,21 +13,21 @@ export const containerVar = styleVariants({ container, { gap: 50, - marginTop: 90, + margin: '90px 0 70px', }, ], TAB: [ container, { gap: 50, - marginTop: 90, + margin: '90px 0 191px', }, ], MOB: [ container, { gap: 30, - marginTop: 23, + margin: '23px 0 74px', }, ], }); From bfe1ca44d517514188789dfb26ec31ad1e898d2c Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 11 Aug 2024 02:10:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20ReviewPage=20=EC=A0=91=EC=86=8D=20?= =?UTF-8?q?=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MyPage/index.tsx | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/views/MyPage/index.tsx b/src/views/MyPage/index.tsx index 0e3a9b6e..ef735d22 100644 --- a/src/views/MyPage/index.tsx +++ b/src/views/MyPage/index.tsx @@ -1,5 +1,5 @@ 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'; @@ -34,15 +34,25 @@ const MyInfoItem = ({ label, value }: { label: string; value?: string | number | 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 (
      1. {label} -
        2. From bef97daf077dbdd038ee53226262c9e2eb7e36bc Mon Sep 17 00:00:00 2001 From: lydiacho Date: Mon, 12 Aug 2024 04:08:21 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=EC=A3=BC=EC=84=9D=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/SignedInPage/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/SignedInPage/index.tsx b/src/views/SignedInPage/index.tsx index 2e39b121..b0ae5723 100644 --- a/src/views/SignedInPage/index.tsx +++ b/src/views/SignedInPage/index.tsx @@ -34,9 +34,9 @@ const SignedInPage = () => { return ( <> - {/* {isComplete && } + {isComplete && } {!isComplete && submit && } - {!isComplete && !submit && } */} + {!isComplete && !submit && } ); };