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 && }