[Design] Mobile ver. - MyPage 구현

src/views/MyPage/index.tsx

@@ -1,40 +1,71 @@
 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 (
     <li className={itemWrapper}>
-      <span className={infoLabel}>{label}</span>
-      <span className={infoValue}>{value}</span>
+      <span className={infoLabelVar[DEVICE_TYPE]}>{label}</span>
+      <span className={infoValueVar[DEVICE_TYPE]}>{value}</span>
     </li>
   );
 };
 
-const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => (
-  <li className={buttonValue}>
-    <span className={infoLabel}>{label}</span>
-    <Button isLink to={to} className={buttonWidth} onClick={() => track(trackingEvent)} padding="15x25">
-      {label === '지원서' ? '지원서 확인' : '결과 확인'}
-    </Button>
-  </li>
-);
+const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string; trackingEvent: string }) => {
+  const DEVICE_TYPE = useDevice();
+
+  const handlePreventMobile = (e: MouseEvent<HTMLButtonElement>) => {
+    track(trackingEvent);
+
+    const isMobile = /Mobi/i.test(window.navigator.userAgent);
+    if (isMobile) {
+      alert('PC로 이용해주세요.');
+      e.preventDefault();
+      return;
+    }
+    if (DEVICE_TYPE !== 'DESK') {
+      alert('전체화면 이용을 권장드려요.');
+      return;
+    }
+  };
+
+  return (
+    <li className={buttonValue}>
+      <span className={infoLabelVar[DEVICE_TYPE]}>{label}</span>
+      <Button isLink to={to} className={buttonWidthVar[DEVICE_TYPE]} onClick={handlePreventMobile} padding="15x25">
+        {label === '지원서' ? '지원서 확인' : '결과 확인'}
+      </Button>
+    </li>
+  );
+};
 
 interface MyPageProps {
   part?: string;
   applicationPass?: boolean;
 }
 
 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 <NoMore isMakers={isMakers} content="모집 기간이 아니에요" />;
 
   return (
-    <section className={container}>
+    <section className={containerVar[DEVICE_TYPE]}>
       <Title>지원 현황</Title>
       <Callout>{`지원서는 면접 이후부터 열람이 불가하오니\n백업해두시길 바랍니다.`}</Callout>
-      <ol className={infoContainer}>
+      <ol className={infoContainerVar[DEVICE_TYPE]}>
         <MyInfoItem label="기수" value={season} />
         <MyInfoItem label="이름" value={name} />
         <MyInfoItem label="지원파트" value={part} />

src/views/MyPage/style.css.ts

@@ -1,52 +1,157 @@
-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,
   {
     marginTop: '-15px',
   },
 ]);
 
-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',
+    },
+  ],
 });

src/views/SignedInPage/index.tsx

@@ -33,6 +33,7 @@ const SignedInPage = () => {
 
   return (
     <>
+      <MyPage part={part} applicationPass={applicationPass} />
       {isComplete && <CompletePage />}
       {!isComplete && submit && <MyPage part={part} applicationPass={applicationPass} />}
       {!isComplete && !submit && <ApplyPage onSetComplete={handleSetComplete} />}