From 50e960a86542565ae649ad1baea169ca3bad5a70 Mon Sep 17 00:00:00 2001
From: lydiacho <81505421+lydiacho@users.noreply.github.com>
Date: Fri, 16 Aug 2024 02:02:07 +0900
Subject: [PATCH] =?UTF-8?q?[Design]=20Mobile=20ver.=20-=20ApplyPage,=20Rev?=
 =?UTF-8?q?iewPage=20=EA=B5=AC=ED=98=84=20(#401)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* cherry-pick: useDevice 기본인수 추가 및 Footer mobMax 설정

* chore: 임시 gitignore 수정

* design: ApplyHeader 반응형

* design: ApplyInfo 반응형

* design: BottomSection 반응형

* design: CommonSection 반응형

* design: DefaultSection 반응형

* design: ~Section container align center 추가

* "design: FileInput 반응형"
"
design: FileInput 반응형

* design: Info 반응형

* design: LinkInput 반응형

* chore: 임시 .gitignore 해제

* design: PartSection 반응형 및 section 공통 style 분리

* design: ApplyHeader 반응형

* fix: 테스트용 분기 수정 제거

* design: ApplyPage 전체 검토

* design: ReviewPage ApplyCategory top 추가

* fix: DEVICE_TYPE -> deviceType

* fix: App.tsx import 에러 수정
---
 .gitignore                                    |   2 +-
 src/App.tsx                                   |   2 +-
 src/common/components/Dialog/index.tsx        |   4 +-
 .../components/ApplyCategory/index.tsx        |  11 +-
 .../components/ApplyCategory/style.css.ts     |  67 +++++++--
 .../components/ApplyHeader/index.tsx          |   8 +-
 .../components/ApplyHeader/style.css.ts       |  41 ++++-
 .../ApplyPage/components/ApplyInfo/index.tsx  |  39 ++---
 .../components/ApplyInfo/style.css.ts         | 135 +++++++++++++++--
 .../components/BottomSection/index.tsx        |   6 +-
 .../components/BottomSection/style.css.ts     |  29 +++-
 .../components/CommonSection/index.tsx        |   8 +-
 .../components/CommonSection/style.css.ts     |  15 --
 .../components/DefaultSection/index.tsx       |  40 ++---
 .../components/DefaultSection/style.css.ts    | 141 +++++++++++++++---
 .../ApplyPage/components/FileInput/index.tsx  |  27 +++-
 .../components/FileInput/style.css.ts         | 111 ++++++++++++--
 src/views/ApplyPage/components/Info/index.tsx |   9 +-
 .../ApplyPage/components/Info/style.css.ts    |  52 ++++++-
 .../ApplyPage/components/LinkInput/index.tsx  |  13 +-
 .../components/LinkInput/style.css.ts         |  64 ++++++--
 .../components/PartSection/index.tsx          |   8 +-
 .../components/PartSection/style.css.ts       |  15 --
 src/views/ApplyPage/index.tsx                 |  10 +-
 src/views/ApplyPage/style.css.ts              |  74 ++++++++-
 src/views/ReviewPage/index.tsx                |   6 +-
 src/views/dialogs/CompleteDialog/index.tsx    |   8 +-
 src/views/dialogs/DraftDialog/index.tsx       |   6 +-
 .../dialogs/ExistingApplicantDialog/index.tsx |   8 +-
 src/views/dialogs/ExitDialog/index.tsx        |  12 +-
 .../dialogs/PreventApplyDialog/index.tsx      |   6 +-
 .../dialogs/PreventReviewDialog/index.tsx     |   8 +-
 .../dialogs/SessionExpiredDialog/index.tsx    |   8 +-
 src/views/dialogs/SubmitDialog/index.tsx      |  32 ++--
 34 files changed, 793 insertions(+), 232 deletions(-)
 delete mode 100644 src/views/ApplyPage/components/CommonSection/style.css.ts
 delete mode 100644 src/views/ApplyPage/components/PartSection/style.css.ts

diff --git a/.gitignore b/.gitignore
index 50c8dda2..3b0b4037 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 7af1e0ca..8739cd47 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ 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';
 import ErrorPage from 'views/ErrorPage';
 import MainPage from 'views/MainPage';
 import PasswordPage from 'views/PasswordPage';
@@ -20,7 +21,6 @@ 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 8a95eaa9..492183a5 100644
--- a/src/common/components/Dialog/index.tsx
+++ b/src/common/components/Dialog/index.tsx
@@ -10,10 +10,10 @@ interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
 }
 
 const Dialog = forwardRef<HTMLDialogElement, DialogProps>(({ children, ...dialogElementProps }: DialogProps, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   return createPortal(
-    <dialog ref={ref} className={containerVar[DEVICE_TYPE]} {...dialogElementProps}>
+    <dialog ref={ref} className={containerVar[deviceType]} {...dialogElementProps}>
       {children}
     </dialog>,
     document.getElementById('modal')!,
diff --git a/src/views/ApplyPage/components/ApplyCategory/index.tsx b/src/views/ApplyPage/components/ApplyCategory/index.tsx
index 3e070609..1da8d9b5 100644
--- a/src/views/ApplyPage/components/ApplyCategory/index.tsx
+++ b/src/views/ApplyPage/components/ApplyCategory/index.tsx
@@ -1,24 +1,29 @@
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useDevice } from '@hooks/useDevice';
 import useScrollPosition from '@hooks/useScrollPosition';
 
 import { CATEGORY } from './constant';
-import { activeLinkStyle, categoryLinkStyle, categoryList, container } from './style.css';
+import { activeLinkStyleVar, categoryLinkStyleVar, categoryList, container, containerVar } from './style.css';
 
 interface ApplyCategoryProps {
   isReview: boolean;
   minIndex: number;
 }
 const ApplyCategory = memo(({ isReview, minIndex }: ApplyCategoryProps) => {
+  const deviceType = useDevice();
   const { isScrollingDown, isScrollTop } = useScrollPosition(isReview ? 380 : 950);
 
   return (
-    <nav className={container[isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']}>
+    <nav
+      className={`${container[isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']} ${containerVar[isReview && deviceType === 'TAB' ? 'REVIEW_TAB' : deviceType]}`}>
       <ul className={categoryList}>
         {CATEGORY.map(({ index, text, path }) => (
           <li key={path}>
-            <Link to={path} className={minIndex === index ? activeLinkStyle : categoryLinkStyle}>
+            <Link
+              to={path}
+              className={`${activeLinkStyleVar[minIndex === index ? 'active' : 'default']} ${categoryLinkStyleVar[deviceType]}`}>
               {text}
             </Link>
           </li>
diff --git a/src/views/ApplyPage/components/ApplyCategory/style.css.ts b/src/views/ApplyPage/components/ApplyCategory/style.css.ts
index 12ecd523..1881f041 100644
--- a/src/views/ApplyPage/components/ApplyCategory/style.css.ts
+++ b/src/views/ApplyPage/components/ApplyCategory/style.css.ts
@@ -6,11 +6,9 @@ import { theme } from 'styles/theme.css';
 export const containerBase = style({
   display: 'flex',
   justifyContent: 'center',
-  width: 1440,
   margin: '0px auto',
 
   position: 'sticky',
-  top: 178,
 
   backgroundColor: theme.color.white,
   zIndex: Z_INDEX.applyCategory,
@@ -35,21 +33,32 @@ export const container = styleVariants({
   ],
 });
 
+export const containerVar = styleVariants({
+  DESK: {
+    top: 178,
+  },
+  TAB: {
+    top: 238,
+  },
+  MOB: {
+    top: 153,
+  },
+  REVIEW_TAB: {
+    top: 177,
+  },
+});
+
 export const categoryList = style({
   display: 'flex',
 });
 
-export const categoryLinkStyle = style({
+const categoryLinkStyle = style({
   display: 'flex',
   justifyContent: 'center',
-  width: 240,
-  padding: '26px 0',
-  ...theme.font.HEADING_6_18_B,
-  color: theme.color.lightestText,
   backgroundColor: theme.color.white,
-  borderBottom: `2px solid transparent`,
+  minWidth: 104,
 
-  transition: 'all 0.2s ease-out',
+  transition: 'background-color 0.2s ease-out, color 0.2s ease',
 
   selectors: {
     '&:hover': {
@@ -59,10 +68,40 @@ export const categoryLinkStyle = style({
   },
 });
 
-export const activeLinkStyle = style([
-  categoryLinkStyle,
-  {
+export const activeLinkStyleVar = styleVariants({
+  active: {
     color: theme.color.primary,
-    borderBottom: `2px solid ${theme.color.primary}`,
+    borderBottom: `4px solid ${theme.color.primary}`,
+  },
+  default: {
+    color: theme.color.lightestText,
+    borderBottom: `2px solid transparent`,
   },
-]);
+});
+
+export const categoryLinkStyleVar = styleVariants({
+  DESK: [
+    categoryLinkStyle,
+    {
+      width: 240,
+      padding: '26px 0',
+      ...theme.font.HEADING_6_18_B,
+    },
+  ],
+  TAB: [
+    categoryLinkStyle,
+    {
+      width: 'calc(129px + (111 * ((100vw - 431px) / 337)))',
+      padding: '26px 0',
+      ...theme.font.HEADING_7_16_B,
+    },
+  ],
+  MOB: [
+    categoryLinkStyle,
+    {
+      width: 'calc(104px + (25 * ((100vw - 375px) / 56)))',
+      padding: '16px 0',
+      ...theme.font.HEADING_7_16_B,
+    },
+  ],
+});
diff --git a/src/views/ApplyPage/components/ApplyHeader/index.tsx b/src/views/ApplyPage/components/ApplyHeader/index.tsx
index 0384b62a..b29db190 100644
--- a/src/views/ApplyPage/components/ApplyHeader/index.tsx
+++ b/src/views/ApplyPage/components/ApplyHeader/index.tsx
@@ -2,9 +2,10 @@ import { useContext } from 'react';
 
 import Button from '@components/Button';
 import Title from '@components/Title';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
-import { buttonWrapper, headerContainer } from './style.css';
+import { buttonWrapper, headerContainerVar } from './style.css';
 
 interface ApplyHeaderProps {
   isReview: boolean;
@@ -14,16 +15,17 @@ interface ApplyHeaderProps {
 }
 
 const ApplyHeader = ({ isReview, isLoading, onSaveDraft, onSubmitData }: ApplyHeaderProps) => {
+  const deviceType = useDevice();
   const {
     recruitingInfo: { soptName, season, group, isMakers },
   } = useContext(RecruitingInfoContext);
 
   return (
-    <header className={headerContainer}>
+    <header className={headerContainerVar[deviceType]}>
       <Title>
         {season}기 {isMakers ? soptName : group} 지원서
       </Title>
-      {!isReview && (
+      {!isReview && deviceType !== 'MOB' && (
         <div className={buttonWrapper}>
           <Button isLoading={isLoading} onClick={onSaveDraft} buttonStyle="line" padding="10x24">
             임시저장
diff --git a/src/views/ApplyPage/components/ApplyHeader/style.css.ts b/src/views/ApplyPage/components/ApplyHeader/style.css.ts
index 0cf0cce1..15bf8e54 100644
--- a/src/views/ApplyPage/components/ApplyHeader/style.css.ts
+++ b/src/views/ApplyPage/components/ApplyHeader/style.css.ts
@@ -1,22 +1,51 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 import { Z_INDEX } from '@constants/zIndex';
 import { theme } from 'styles/theme.css';
 
-export const headerContainer = style({
+const headerContainer = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '24px 360px 20px',
   position: 'sticky',
-  top: 74,
-  width: 1440,
-  margin: '60px auto 0px',
   boxShadow: `0 0 0 1px ${theme.color.white}`,
   backgroundColor: theme.color.white,
   zIndex: Z_INDEX.applyHeader,
 });
 
+export const headerContainerVar = styleVariants({
+  DESK: [
+    headerContainer,
+    {
+      padding: '24px 0 20px 6px',
+      margin: '60px auto 0px',
+
+      top: 79,
+      width: 732,
+    },
+  ],
+  TAB: [
+    headerContainer,
+    {
+      flexDirection: 'column',
+      alignItems: 'baseline',
+      gap: 13,
+      top: 73,
+      width: 431,
+      padding: '24px 32px 20px',
+      margin: '60px auto 0px',
+    },
+  ],
+  MOB: [
+    headerContainer,
+    {
+      padding: '23px 31.5px 20px',
+      top: 73,
+      width: 375,
+    },
+  ],
+});
+
 export const buttonWrapper = style({
   display: 'flex',
   gap: 8,
diff --git a/src/views/ApplyPage/components/ApplyInfo/index.tsx b/src/views/ApplyPage/components/ApplyInfo/index.tsx
index 2897a316..1b8abaf2 100644
--- a/src/views/ApplyPage/components/ApplyInfo/index.tsx
+++ b/src/views/ApplyPage/components/ApplyInfo/index.tsx
@@ -3,21 +3,23 @@ import { ko } from 'date-fns/locale';
 import { memo, useContext } from 'react';
 
 import Callout from '@components/Callout';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import {
   dateItems,
-  dateLabel,
-  dateText,
+  dateLabelVar,
+  dateTextVar,
   dateWrapper,
-  infoContainer,
-  infoItems,
+  infoContainerVar,
   infoItemsBold,
-  infoWrapper,
+  infoItemsVar,
+  infoWrapperVar,
 } from './style.css';
 import { APPLY_INFO } from '../../constant';
 
 const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
+  const deviceType = useDevice();
   const {
     recruitingInfo: {
       applicationStart,
@@ -49,10 +51,10 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
   const formattedFinalPassConfirmStart = format(new Date(finalPassConfirmStart || ''), 'M월 dd일 (E)', { locale: ko });
 
   return (
-    <section className={infoContainer}>
+    <section className={infoContainerVar[deviceType]}>
       {!isReview && (
-        <ul className={infoWrapper}>
-          <li key="first-info" className={infoItems}>
+        <ul className={infoWrapperVar[deviceType]}>
+          <li key="first-info" className={infoItemsVar[deviceType]}>
             지원서 작성 전에{` `}
             <a
               href="https://makers.sopt.org/recruit"
@@ -64,7 +66,7 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
             을 꼭 숙지하고 지원해 주시기 바랍니다.
           </li>
           {APPLY_INFO.sections.map(({ id, content }) => (
-            <li key={id} className={infoItems}>
+            <li key={id} className={infoItemsVar[deviceType]}>
               {content.map(({ text, weight }) => (
                 <span key={text} className={weight === 'strong' ? infoItemsBold : ''}>
                   {text}
@@ -82,20 +84,23 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
       {!isReview && (
         <ol className={dateWrapper}>
           <li className={dateItems}>
-            <span className={dateLabel}>지원 기간</span>
-            <span className={dateText}>{`${formattedApplicationStart} - ${formattedApplicationEnd}`}</span>
+            <span className={dateLabelVar[deviceType]}>지원 기간</span>
+            <span
+              className={
+                dateTextVar[deviceType]
+              }>{`${formattedApplicationStart} ${deviceType !== 'DESK' ? '\n' : ''}- ${formattedApplicationEnd}`}</span>
           </li>
           <li className={dateItems}>
-            <span className={dateLabel}>서류 발표</span>
-            <span className={dateText}>{formattedApplicationConfirmStart}</span>
+            <span className={dateLabelVar[deviceType]}>서류 발표</span>
+            <span className={dateTextVar[deviceType]}>{formattedApplicationConfirmStart}</span>
           </li>
           <li className={dateItems}>
-            <span className={dateLabel}>면접 평가</span>
-            <span className={dateText}>{`${formattedInterviewStart} - ${formattedInterviewEnd}`}</span>
+            <span className={dateLabelVar[deviceType]}>면접 평가</span>
+            <span className={dateTextVar[deviceType]}>{`${formattedInterviewStart} - ${formattedInterviewEnd}`}</span>
           </li>
           <li className={dateItems}>
-            <span className={dateLabel}>최종 발표</span>
-            <span className={dateText}>{formattedFinalPassConfirmStart}</span>
+            <span className={dateLabelVar[deviceType]}>최종 발표</span>
+            <span className={dateTextVar[deviceType]}>{formattedFinalPassConfirmStart}</span>
           </li>
         </ol>
       )}
diff --git a/src/views/ApplyPage/components/ApplyInfo/style.css.ts b/src/views/ApplyPage/components/ApplyInfo/style.css.ts
index 4875cdc2..b09e60b4 100644
--- a/src/views/ApplyPage/components/ApplyInfo/style.css.ts
+++ b/src/views/ApplyPage/components/ApplyInfo/style.css.ts
@@ -1,34 +1,100 @@
-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',
   gap: 50,
-  margin: '90px 0 82px 0',
-  width: 720,
 });
 
-export const infoWrapper = style({
+export const infoContainerVar = styleVariants({
+  DESK: [
+    infoContainer,
+    {
+      width: 720,
+      margin: '90px 0 82px 0',
+    },
+  ],
+  TAB: [
+    infoContainer,
+    {
+      width: 367,
+      margin: '42px 0 50px 0',
+    },
+  ],
+  MOB: [
+    infoContainer,
+    {
+      width: 312,
+      margin: '20px 0 66px 0',
+    },
+  ],
+});
+
+const infoWrapper = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: 16,
 });
 
-export const infoItems = style({
+export const infoWrapperVar = styleVariants({
+  DESK: [
+    infoWrapper,
+    {
+      gap: 16,
+    },
+  ],
+  TAB: [
+    infoWrapper,
+    {
+      gap: 16,
+    },
+  ],
+  MOB: [
+    infoWrapper,
+    {
+      gap: 14,
+    },
+  ],
+});
+
+const infoItems = style({
   color: theme.color.lighterText,
-  ...theme.font.BODY_1_18_M,
-  marginLeft: 20,
   listStyle: 'outside',
   whiteSpace: 'pre-wrap',
-  letterSpacing: '-0.27px',
 
   '::marker': {
     fontSize: 10,
   },
 });
 
+export const infoItemsVar = styleVariants({
+  DESK: [
+    infoItems,
+    {
+      marginLeft: 20,
+      ...theme.font.BODY_1_18_M,
+      letterSpacing: '-0.27px',
+    },
+  ],
+  TAB: [
+    infoItems,
+    {
+      marginLeft: 20,
+      ...theme.font.BODY_2_16_M,
+      letterSpacing: '-0.24px',
+    },
+  ],
+  MOB: [
+    infoItems,
+    {
+      marginLeft: 12,
+      ...theme.font.BODY_3_14_M,
+      letterSpacing: '-0.21px',
+    },
+  ],
+});
+
 export const infoItemsBold = style({
   fontWeight: 700,
 });
@@ -42,17 +108,56 @@ export const dateWrapper = style({
 export const dateItems = style({
   display: 'flex',
   gap: 12,
-  alignItems: 'center',
+  alignItems: 'baseline',
 });
 
-export const dateLabel = style({
+const dateLabel = style({
   padding: '6px 13px',
   borderRadius: 8,
-  ...theme.font.TITLE_5_18_SB,
   color: theme.color.lighterText,
   backgroundColor: theme.color.subBackground,
 });
 
-export const dateText = style({
-  ...theme.font.BODY_1_18_M,
+export const dateLabelVar = styleVariants({
+  DESK: [
+    dateLabel,
+    {
+      ...theme.font.TITLE_5_18_SB,
+      letterSpacing: '-0.27px',
+    },
+  ],
+  TAB: [
+    dateLabel,
+    {
+      ...theme.font.TITLE_6_16_SB,
+      letterSpacing: '-0.24px',
+    },
+  ],
+  MOB: [
+    dateLabel,
+    {
+      ...theme.font.TITLE_7_14_SB,
+      letterSpacing: '-0.21px',
+    },
+  ],
+});
+
+export const dateTextVar = styleVariants({
+  DESK: [
+    {
+      ...theme.font.BODY_1_18_M,
+    },
+  ],
+  TAB: [
+    {
+      whiteSpace: 'pre-line',
+      ...theme.font.BODY_2_16_M,
+    },
+  ],
+  MOB: [
+    {
+      whiteSpace: 'pre-line',
+      ...theme.font.BODY_3_14_M,
+    },
+  ],
 });
diff --git a/src/views/ApplyPage/components/BottomSection/index.tsx b/src/views/ApplyPage/components/BottomSection/index.tsx
index e223ea80..5ec96763 100644
--- a/src/views/ApplyPage/components/BottomSection/index.tsx
+++ b/src/views/ApplyPage/components/BottomSection/index.tsx
@@ -4,10 +4,11 @@ import Checkbox from '@components/Checkbox';
 import Contentbox from '@components/Checkbox/components/Contentbox';
 import SelectBox from '@components/Select';
 import { PRIVACY_POLICY } from '@constants/policy';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import { SELECT_OPTIONS } from 'views/ApplyPage/constant';
 
-import { doubleLineCheck, label, line, sectionContainer } from './style.css';
+import { doubleLineCheck, labelVar, line, sectionContainer } from './style.css';
 
 interface BottomSectionProps {
   isReview: boolean;
@@ -15,6 +16,7 @@ interface BottomSectionProps {
 }
 
 const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
+  const deviceType = useDevice();
   const {
     recruitingInfo: { isMakers },
   } = useContext(RecruitingInfoContext);
@@ -33,7 +35,7 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
         />
       )}
       <div id="check-necessary" className={doubleLineCheck}>
-        <p className={label}>
+        <p className={labelVar[deviceType]}>
           {isMakers
             ? 'SOPT makers의 행사 및 정기 모임은 일요일에 진행됩니다.'
             : 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}
diff --git a/src/views/ApplyPage/components/BottomSection/style.css.ts b/src/views/ApplyPage/components/BottomSection/style.css.ts
index 49109f6d..4a35ac22 100644
--- a/src/views/ApplyPage/components/BottomSection/style.css.ts
+++ b/src/views/ApplyPage/components/BottomSection/style.css.ts
@@ -1,16 +1,17 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 import { theme } from 'styles/theme.css';
 
 export const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
+
   gap: 50,
 });
 
 export const line = style({
   width: '100%',
-  margin: '100px 0 67px 0',
+  margin: '100px 0',
   border: `1px solid ${theme.color.border}`,
 });
 
@@ -20,7 +21,7 @@ export const doubleLineCheck = style({
   flexDirection: 'column',
 });
 
-export const label = style({
+const label = style({
   display: 'flex',
   alignItems: 'center',
   marginBottom: 16,
@@ -28,7 +29,27 @@ export const label = style({
   width: 'fit-content',
 
   color: theme.color.baseText,
-  ...theme.font.TITLE_5_18_SB,
+});
+
+export const labelVar = styleVariants({
+  DESK: [
+    label,
+    {
+      ...theme.font.TITLE_5_18_SB,
+    },
+  ],
+  TAB: [
+    label,
+    {
+      ...theme.font.TITLE_5_18_SB,
+    },
+  ],
+  MOB: [
+    label,
+    {
+      ...theme.font.TITLE_6_16_SB,
+    },
+  ],
 });
 
 export const circle = style({
diff --git a/src/views/ApplyPage/components/CommonSection/index.tsx b/src/views/ApplyPage/components/CommonSection/index.tsx
index 59aa5a33..bb6280cb 100644
--- a/src/views/ApplyPage/components/CommonSection/index.tsx
+++ b/src/views/ApplyPage/components/CommonSection/index.tsx
@@ -1,7 +1,8 @@
 import Textarea from '@components/Textarea';
+import { useDevice } from '@hooks/useDevice';
+import { sectionContainerVar, sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Answers, Questions } from 'views/ApplyPage/types';
 
-import { sectionContainer, title } from './style.css';
 import FileInput from '../FileInput';
 import Info from '../Info';
 import LinkInput from '../LinkInput';
@@ -14,6 +15,7 @@ interface CommonSectionProps {
 }
 
 const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft }: CommonSectionProps) => {
+  const deviceType = useDevice();
   const commonQuestionsById = commonQuestionsDraft?.reduce(
     (acc, draft) => {
       acc ? (acc[draft.id] = draft) : undefined;
@@ -23,8 +25,8 @@ const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft
   );
 
   return (
-    <section ref={refCallback} id="common" className={sectionContainer}>
-      <h2 className={title}>공통 질문</h2>
+    <section ref={refCallback} id="common" className={sectionContainerVar[deviceType]}>
+      <h2 className={sectionTitleVar[deviceType]}>공통 질문</h2>
       {questions?.map(({ urls, value, id, charLimit, isFile, placeholder, optional }) => {
         const draftItem = commonQuestionsById?.[id];
         const defaultValue = draftItem ? draftItem.answer.answer : '';
diff --git a/src/views/ApplyPage/components/CommonSection/style.css.ts b/src/views/ApplyPage/components/CommonSection/style.css.ts
deleted file mode 100644
index 3ef138db..00000000
--- a/src/views/ApplyPage/components/CommonSection/style.css.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import { theme } from 'styles/theme.css';
-
-export const sectionContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 50,
-  paddingTop: 40,
-});
-
-export const title = style({
-  ...theme.font.TITLE_2_28_SB,
-  color: theme.color.baseText,
-});
diff --git a/src/views/ApplyPage/components/DefaultSection/index.tsx b/src/views/ApplyPage/components/DefaultSection/index.tsx
index 655cd8fc..ce1a1330 100644
--- a/src/views/ApplyPage/components/DefaultSection/index.tsx
+++ b/src/views/ApplyPage/components/DefaultSection/index.tsx
@@ -5,30 +5,33 @@ import { InputLine, TextBox } from '@components/Input';
 import Radio from '@components/Radio';
 import SelectBox from '@components/Select';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
+import { useDevice } from '@hooks/useDevice';
 import { SELECT_OPTIONS } from 'views/ApplyPage/constant';
+import { sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Applicant } from 'views/ApplyPage/types';
 
 import Postcode from './components/Postcode';
 import { DEFAULT_PROFILE } from './constants';
 import IconUser from './icons/IconUser';
 import {
-  doubleWrapper,
-  errorText,
+  doubleWrapperVar,
+  errorTextVar,
   profileImage,
+  profileLabelSizeVar,
   profileLabelVar,
-  profileText,
+  profileTextVar,
   profileTextWrapper,
-  profileWrapper,
-  sectionContainer,
-  title,
+  profileWrapperVar,
+  sectionContainerVar,
 } from './style.css';
 
 interface ProfileImageProps {
   disabled: boolean;
   pic?: string;
+  deviceType: 'DESK' | 'TAB' | 'MOB';
 }
 
-const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
+const ProfileImage = ({ disabled, pic, deviceType }: ProfileImageProps) => {
   const {
     register,
     clearErrors,
@@ -66,7 +69,7 @@ const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
 
   return (
     <TextBox label="사진" name="picture" size="lg" required>
-      <div className={profileWrapper}>
+      <div className={profileWrapperVar[deviceType]}>
         <input
           id="picture"
           type="file"
@@ -81,18 +84,18 @@ const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
         <div>
           <label
             htmlFor="picture"
-            className={profileLabelVar[disabled ? 'disabled' : errors.picture ? 'error' : 'default']}>
+            className={`${profileLabelVar[disabled ? 'disabled' : errors.picture ? 'error' : 'default']} ${profileLabelSizeVar[deviceType]}`}>
             {hasImage ? (
               <img src={image || pic} alt="지원서 프로필 사진" className={`amp-block ${profileImage}`} />
             ) : (
               <IconUser />
             )}
-            {errors.picture && <p className={errorText}>{errors.picture?.message as string}</p>}
+            {errors.picture && <p className={errorTextVar[deviceType]}>{errors.picture?.message as string}</p>}
           </label>
         </div>
         <ul className={profileTextWrapper}>
           {DEFAULT_PROFILE.map((el) => (
-            <li key={el} className={profileText}>
+            <li key={el} className={profileTextVar[deviceType]}>
               &#183; {el}
             </li>
           ))}
@@ -110,6 +113,7 @@ interface DefaultSectionProps {
 }
 
 const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: DefaultSectionProps) => {
+  const deviceType = useDevice();
   const {
     address,
     birthday,
@@ -127,10 +131,10 @@ const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: Def
   } = applicantDraft || {};
 
   return (
-    <section ref={refCallback} id="default" className={sectionContainer}>
-      <h2 className={title}>기본 인적사항</h2>
-      <ProfileImage pic={pic} disabled={isReview} />
-      <div className={doubleWrapper}>
+    <section ref={refCallback} id="default" className={sectionContainerVar[deviceType]}>
+      <h2 className={sectionTitleVar[deviceType]}>기본 인적사항</h2>
+      <ProfileImage pic={pic} disabled={isReview} deviceType={deviceType} />
+      <div className={doubleWrapperVar[deviceType]}>
         <TextBox label="이름" name="name" required size="sm">
           <InputLine value={name} name="name" readOnly disabled={isReview} />
         </TextBox>
@@ -144,7 +148,7 @@ const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: Def
           disabled={isReview}
         />
       </div>
-      <div className={doubleWrapper}>
+      <div className={doubleWrapperVar[deviceType]}>
         <TextBox label="생년월일" name="birthday" required size="sm">
           <InputLine
             name="birthday"
@@ -178,7 +182,7 @@ const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: Def
           disabled={isReview}
         />
       </TextBox>
-      <div className={doubleWrapper}>
+      <div className={doubleWrapperVar[deviceType]}>
         <TextBox label="학교" name="college" required size="sm">
           <InputLine
             defaultValue={college}
@@ -208,7 +212,7 @@ const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: Def
           />
         </div>
       </div>
-      <div className={doubleWrapper}>
+      <div className={doubleWrapperVar[deviceType]}>
         <TextBox label="학과" name="major" required size="sm">
           <InputLine
             defaultValue={major}
diff --git a/src/views/ApplyPage/components/DefaultSection/style.css.ts b/src/views/ApplyPage/components/DefaultSection/style.css.ts
index a04e1fde..c3c83294 100644
--- a/src/views/ApplyPage/components/DefaultSection/style.css.ts
+++ b/src/views/ApplyPage/components/DefaultSection/style.css.ts
@@ -2,28 +2,70 @@ import { style, styleVariants } from '@vanilla-extract/css';
 
 import { theme } from 'styles/theme.css';
 
-export const sectionContainer = style({
+const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: 50,
-  paddingTop: 90,
 });
 
-export const title = style({
-  ...theme.font.TITLE_2_28_SB,
-  color: theme.color.baseText,
+export const sectionContainerVar = styleVariants({
+  DESK: [
+    sectionContainer,
+    {
+      gap: 50,
+      paddingTop: 100,
+    },
+  ],
+  TAB: [
+    sectionContainer,
+    {
+      gap: 50,
+      paddingTop: 100,
+    },
+  ],
+  MOB: [
+    sectionContainer,
+    {
+      gap: 30,
+      paddingTop: 70,
+    },
+  ],
 });
 
-export const doubleWrapper = style({
-  display: 'flex',
-  gap: 8,
+export const doubleWrapperVar = styleVariants({
+  DESK: {
+    display: 'flex',
+    gap: 8,
+  },
+  TAB: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 50,
+  },
+  MOB: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 30,
+  },
 });
 
 // ProfileImage styles
 
-export const profileWrapper = style({
-  display: 'flex',
-  gap: 28,
+export const profileWrapperVar = styleVariants({
+  DESK: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 28,
+  },
+  TAB: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 17,
+  },
+  MOB: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 16,
+  },
 });
 
 const profileLabel = style({
@@ -32,8 +74,6 @@ const profileLabel = style({
   justifyContent: 'center',
   alignItems: 'center',
   padding: 6,
-  width: 134,
-  height: 176,
   border: `1px solid ${theme.color.border}`,
   borderRadius: 10,
   cursor: 'pointer',
@@ -61,13 +101,50 @@ export const profileLabelVar = styleVariants({
   ],
 });
 
-export const errorText = style({
+export const profileLabelSizeVar = styleVariants({
+  DESK: {
+    width: 134,
+    height: 176,
+  },
+  TAB: {
+    width: 134,
+    height: 176,
+  },
+  MOB: {
+    width: 106,
+    height: 140,
+  },
+});
+
+const errorText = style({
   position: 'absolute',
-  bottom: -30,
   left: 0,
-  width: 330,
+  width: 'max-content',
   color: theme.color.error,
-  ...theme.font.LABEL_2_16_SB,
+});
+
+export const errorTextVar = styleVariants({
+  DESK: [
+    errorText,
+    {
+      bottom: -30,
+      ...theme.font.LABEL_2_16_SB,
+    },
+  ],
+  TAB: [
+    errorText,
+    {
+      bottom: -30,
+      ...theme.font.LABEL_2_16_SB,
+    },
+  ],
+  MOB: [
+    errorText,
+    {
+      bottom: -26,
+      ...theme.font.LABEL_3_14_SB,
+    },
+  ],
 });
 
 export const profileImage = style({
@@ -80,11 +157,31 @@ export const profileTextWrapper = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
-  marginTop: 19,
+  paddingBottom: 28,
 });
 
-export const profileText = style({
-  ...theme.font.BODY_2_16_R,
+const profileText = style({
   color: theme.color.lighterText,
-  whiteSpace: 'pre-wrap',
+});
+
+export const profileTextVar = styleVariants({
+  DESK: [
+    profileText,
+    {
+      whiteSpace: 'pre-wrap',
+      ...theme.font.BODY_2_16_R,
+    },
+  ],
+  TAB: [
+    profileText,
+    {
+      ...theme.font.BODY_3_14_R,
+    },
+  ],
+  MOB: [
+    profileText,
+    {
+      ...theme.font.BODY_4_13_R,
+    },
+  ],
 });
diff --git a/src/views/ApplyPage/components/FileInput/index.tsx b/src/views/ApplyPage/components/FileInput/index.tsx
index 0cbf4108..5573e8cb 100644
--- a/src/views/ApplyPage/components/FileInput/index.tsx
+++ b/src/views/ApplyPage/components/FileInput/index.tsx
@@ -6,9 +6,19 @@ import { useFormContext } from 'react-hook-form';
 import 'firebase/compat/storage';
 import { STATE_CHANGED, storage } from '@constants/firebase.ts';
 import { VALIDATION_CHECK } from '@constants/validationCheck';
+import { useDevice } from '@hooks/useDevice';
 
 import IconPlusButton from './icons/IconPlusButton';
-import { container, errorText, fileInput, fileLabelVar, fileNameVar, textWrapper } from './style.css';
+import {
+  containerVar,
+  errorTextVar,
+  fileInput,
+  fileLabelSizeVar,
+  fileLabelVar,
+  fileNameSizeVar,
+  fileNameVar,
+  textWrapperVar,
+} from './style.css';
 
 interface FileInputProps {
   section: string;
@@ -22,6 +32,7 @@ const LIMIT_SIZE = 1024 ** 2 * 50; // 50MB
 const ACCEPTED_FORMATS = '.pdf';
 
 const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputProps) => {
+  const deviceType = useDevice();
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [uploadPercent, setUploadPercent] = useState(-1);
@@ -155,7 +166,7 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
   }, [section, id, defaultFileId, defaultFileUrl, defaultFileName, fileValue, fileAnswer, isFileDeleted, setValue]);
 
   return (
-    <div className={container}>
+    <div className={containerVar[deviceType]}>
       <input
         id={`file-${id}`}
         type="file"
@@ -168,10 +179,12 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
       />
       <label
         htmlFor={`file-${id}`}
-        className={fileLabelVar[errors[`file${id}`] ? 'error' : fileName === '' ? 'default' : 'selected']}>
-        <div className={textWrapper}>
-          <span>파일</span>
-          <span className={`amp-mask ${fileNameVar[getFileNameClass()]}`}>{getDisplayText()}</span>
+        className={`${fileLabelVar[errors[`file${id}`] ? 'error' : fileName === '' ? 'default' : 'selected']} ${fileLabelSizeVar[deviceType]}`}>
+        <div className={textWrapperVar[deviceType]}>
+          <span>참고 자료</span>
+          <span className={`${fileNameVar[getFileNameClass()]} ${fileNameSizeVar[deviceType]}`}>
+            {getDisplayText()}
+          </span>
         </div>
         <IconPlusButton
           isSelected={fileName !== 'delete-file' && fileValue}
@@ -179,7 +192,7 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
           disabled={disabledStatus}
         />
       </label>
-      {errors[`file${id}`] && <p className={errorText}>{errors[`file${id}`]?.message as string}</p>}
+      {errors[`file${id}`] && <p className={errorTextVar[deviceType]}>{errors[`file${id}`]?.message as string}</p>}
     </div>
   );
 };
diff --git a/src/views/ApplyPage/components/FileInput/style.css.ts b/src/views/ApplyPage/components/FileInput/style.css.ts
index 225e0bd1..7730b2a5 100644
--- a/src/views/ApplyPage/components/FileInput/style.css.ts
+++ b/src/views/ApplyPage/components/FileInput/style.css.ts
@@ -2,9 +2,28 @@ import { style, styleVariants } from '@vanilla-extract/css';
 
 import { theme } from 'styles/theme.css';
 
-export const container = style({
+const container = style({
   position: 'relative',
-  width: 720,
+});
+export const containerVar = styleVariants({
+  DESK: [
+    container,
+    {
+      width: 720,
+    },
+  ],
+  TAB: [
+    container,
+    {
+      width: 367,
+    },
+  ],
+  MOB: [
+    container,
+    {
+      width: 312,
+    },
+  ],
 });
 
 export const fileInput = style({
@@ -16,7 +35,6 @@ export const fileLabel = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
-  padding: '12px 22px',
   border: `1px solid ${theme.color.border}`,
   borderRadius: 12,
   backgroundColor: theme.color.subBackground,
@@ -37,6 +55,27 @@ export const fileLabel = style({
   },
 });
 
+export const fileLabelSizeVar = styleVariants({
+  DESK: [
+    fileLabel,
+    {
+      padding: '12px 22px',
+    },
+  ],
+  TAB: [
+    fileLabel,
+    {
+      padding: '12px 14px 11px 22px',
+    },
+  ],
+  MOB: [
+    fileLabel,
+    {
+      padding: '13px 16px',
+    },
+  ],
+});
+
 export const fileLabelVar = styleVariants({
   default: [fileLabel, {}],
   selected: [
@@ -54,17 +93,39 @@ export const fileLabelVar = styleVariants({
   ],
 });
 
-export const textWrapper = style({
+const textWrapper = style({
   display: 'flex',
   alignItems: 'center',
-  gap: 24,
+  width: '100%',
 
   color: theme.color.lighterText,
-  ...theme.font.BODY_1_18_M,
+});
+
+export const textWrapperVar = styleVariants({
+  DESK: [
+    textWrapper,
+    {
+      ...theme.font.BODY_1_18_M,
+      gap: 24,
+    },
+  ],
+  TAB: [
+    textWrapper,
+    {
+      ...theme.font.BODY_1_18_M,
+      gap: 24,
+    },
+  ],
+  MOB: [
+    textWrapper,
+    {
+      ...theme.font.BODY_3_14_M,
+      gap: 12,
+    },
+  ],
 });
 
 const fileName = style({
-  width: 570,
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
@@ -76,6 +137,18 @@ const fileName = style({
     },
   },
 });
+
+export const fileNameSizeVar = styleVariants({
+  DESK: {
+    width: 555,
+  },
+  TAB: {
+    width: 210,
+  },
+  MOB: {
+    width: 185,
+  },
+});
 export const fileNameVar = styleVariants({
   default: [
     fileName,
@@ -91,10 +164,30 @@ export const fileNameVar = styleVariants({
   ],
 });
 
-export const errorText = style({
+const errorText = style({
   marginTop: 8,
   color: theme.color.error,
-  ...theme.font.LABEL_2_16_SB,
+});
+
+export const errorTextVar = styleVariants({
+  DESK: [
+    errorText,
+    {
+      ...theme.font.LABEL_2_16_SB,
+    },
+  ],
+  TAB: [
+    errorText,
+    {
+      ...theme.font.LABEL_2_16_SB,
+    },
+  ],
+  MOB: [
+    errorText,
+    {
+      ...theme.font.LABEL_3_14_SB,
+    },
+  ],
 });
 
 // IconPlusButton style
diff --git a/src/views/ApplyPage/components/Info/index.tsx b/src/views/ApplyPage/components/Info/index.tsx
index 225ad8b6..9963f1fa 100644
--- a/src/views/ApplyPage/components/Info/index.tsx
+++ b/src/views/ApplyPage/components/Info/index.tsx
@@ -1,11 +1,14 @@
-import { container, info } from './style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { containerVar, infoVar } from './style.css';
 
 const Info = ({ value }: { value: string }) => {
+  const deviceType = useDevice();
   return (
     <article>
-      <ol className={container}>
+      <ol className={containerVar[deviceType]}>
         {value?.split('\n').map((text, idx) => (
-          <li className={info} key={`${idx},${text}`}>
+          <li className={infoVar[deviceType]} key={`${idx},${text}`}>
             {text}
           </li>
         ))}
diff --git a/src/views/ApplyPage/components/Info/style.css.ts b/src/views/ApplyPage/components/Info/style.css.ts
index 9871da10..b87a1590 100644
--- a/src/views/ApplyPage/components/Info/style.css.ts
+++ b/src/views/ApplyPage/components/Info/style.css.ts
@@ -1,17 +1,59 @@
-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: 16,
   margin: '20px 0 50px',
 });
 
+export const containerVar = styleVariants({
+  DESK: [
+    container,
+    {
+      gap: 16,
+    },
+  ],
+  TAB: [
+    container,
+    {
+      gap: 16,
+    },
+  ],
+  MOB: [
+    container,
+    {
+      gap: 14,
+    },
+  ],
+});
+
 export const info = style({
   color: theme.color.lighterText,
-  ...theme.font.BODY_1_18_M,
   whiteSpace: 'pre-line',
-  letterSpacing: '-0.27px',
+});
+
+export const infoVar = styleVariants({
+  DESK: [
+    info,
+    {
+      ...theme.font.BODY_1_18_M,
+      letterSpacing: '-0.27px',
+    },
+  ],
+  TAB: [
+    info,
+    {
+      ...theme.font.BODY_2_16_M,
+      letterSpacing: '-0.24px',
+    },
+  ],
+  MOB: [
+    info,
+    {
+      ...theme.font.BODY_3_14_M,
+      letterSpacing: '-0.21px',
+    },
+  ],
 });
diff --git a/src/views/ApplyPage/components/LinkInput/index.tsx b/src/views/ApplyPage/components/LinkInput/index.tsx
index 268542da..64b9bee0 100644
--- a/src/views/ApplyPage/components/LinkInput/index.tsx
+++ b/src/views/ApplyPage/components/LinkInput/index.tsx
@@ -1,21 +1,24 @@
-import { container, label, link } from './style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { containerVar, label, linkVar } from './style.css';
 
 const LinkInput = ({ urls }: { urls: string[] }) => {
+  const deviceType = useDevice();
   return (
     <>
       {urls.length === 1 && (
-        <div className={container}>
+        <div className={containerVar[deviceType]}>
           <span className={label}>링크</span>
-          <a className={link} href={urls[0]} target="_blank" rel="noreferrer noopener">
+          <a className={linkVar[deviceType]} href={urls[0]} target="_blank" rel="noreferrer noopener">
             {urls[0]}
           </a>
         </div>
       )}
       {urls.length > 1 &&
         urls.map((url, idx) => (
-          <div key={url} className={container}>
+          <div key={url} className={containerVar[deviceType]}>
             <span className={label}>링크 {idx + 1}</span>
-            <a className={link} href={url} target="_blank" rel="noreferrer noopener">
+            <a className={linkVar[deviceType]} href={url} target="_blank" rel="noreferrer noopener">
               {url}
             </a>
           </div>
diff --git a/src/views/ApplyPage/components/LinkInput/style.css.ts b/src/views/ApplyPage/components/LinkInput/style.css.ts
index 58f05dd7..f7e48c15 100644
--- a/src/views/ApplyPage/components/LinkInput/style.css.ts
+++ b/src/views/ApplyPage/components/LinkInput/style.css.ts
@@ -1,27 +1,52 @@
-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',
-  gap: 24,
   alignItems: 'center',
-  width: 720,
-  height: 53,
-  padding: '12px 22px',
+  justifyContent: 'space-between',
   borderRadius: 12,
   color: theme.color.lighterText,
   backgroundColor: theme.color.subBackground,
 });
 
+export const containerVar = styleVariants({
+  DESK: [
+    container,
+    {
+      width: 720,
+      padding: '12px 22px',
+      ...theme.font.BODY_1_18_M,
+    },
+  ],
+  TAB: [
+    container,
+    {
+      width: 367,
+      padding: '12px 14px 11px 22px',
+      ...theme.font.BODY_1_18_M,
+    },
+  ],
+  MOB: [
+    container,
+    {
+      width: 312,
+      padding: '13px 16px',
+      ...theme.font.BODY_3_14_M,
+    },
+  ],
+});
+
 export const label = style({
   width: 'fit-content',
-  ...theme.font.BODY_1_18_M,
 });
 
 export const link = style({
-  width: 'fit-content',
-  ...theme.font.HEADING_6_18_B,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontWeight: 600,
 
   '::placeholder': {
     color: theme.color.placeholder,
@@ -34,3 +59,24 @@ export const link = style({
     },
   },
 });
+
+export const linkVar = styleVariants({
+  DESK: [
+    link,
+    {
+      width: 620,
+    },
+  ],
+  TAB: [
+    link,
+    {
+      width: 267,
+    },
+  ],
+  MOB: [
+    link,
+    {
+      width: 235,
+    },
+  ],
+});
diff --git a/src/views/ApplyPage/components/PartSection/index.tsx b/src/views/ApplyPage/components/PartSection/index.tsx
index fe655cfb..1b9f1841 100644
--- a/src/views/ApplyPage/components/PartSection/index.tsx
+++ b/src/views/ApplyPage/components/PartSection/index.tsx
@@ -2,9 +2,10 @@ import { useFormContext } from 'react-hook-form';
 
 import SelectBox from '@components/Select';
 import Textarea from '@components/Textarea';
+import { useDevice } from '@hooks/useDevice';
+import { sectionContainerVar, sectionTitleVar } from 'views/ApplyPage/style.css';
 import { Answers, Questions } from 'views/ApplyPage/types';
 
-import { sectionContainer, title } from './style.css';
 import FileInput from '../FileInput';
 import Info from '../Info';
 import LinkInput from '../LinkInput';
@@ -30,6 +31,7 @@ const PartSection = ({
   partQuestionsDraft,
   questionTypes,
 }: PartSectionProps) => {
+  const deviceType = useDevice();
   const { getValues } = useFormContext();
 
   const partOptions = questionTypes?.sort((a, b) => a.id - b.id).map(({ typeKr }) => typeKr);
@@ -47,8 +49,8 @@ const PartSection = ({
   );
 
   return (
-    <section ref={refCallback} id="partial" className={sectionContainer}>
-      <h2 className={title}>파트별 질문</h2>
+    <section ref={refCallback} id="partial" className={sectionContainerVar[deviceType]}>
+      <h2 className={sectionTitleVar[deviceType]}>파트별 질문</h2>
       <SelectBox
         defaultValue={part}
         label="지원파트"
diff --git a/src/views/ApplyPage/components/PartSection/style.css.ts b/src/views/ApplyPage/components/PartSection/style.css.ts
deleted file mode 100644
index 3ef138db..00000000
--- a/src/views/ApplyPage/components/PartSection/style.css.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import { theme } from 'styles/theme.css';
-
-export const sectionContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 50,
-  paddingTop: 40,
-});
-
-export const title = style({
-  ...theme.font.TITLE_2_28_SB,
-  color: theme.color.baseText,
-});
diff --git a/src/views/ApplyPage/index.tsx b/src/views/ApplyPage/index.tsx
index d21d0097..2b64ada6 100644
--- a/src/views/ApplyPage/index.tsx
+++ b/src/views/ApplyPage/index.tsx
@@ -7,6 +7,7 @@ import Button from '@components/Button';
 import Footer from '@components/Layout/components/Footer';
 import useCheckBrowser from '@hooks/useCheckBrowser';
 import useDate from '@hooks/useDate';
+import { useDevice } from '@hooks/useDevice';
 import useScrollToHash from '@hooks/useScrollToHash';
 import { DraftDialog, PreventApplyDialog, SubmitDialog } from 'views/dialogs';
 import NoMore from 'views/ErrorPage/components/NoMore';
@@ -24,7 +25,7 @@ import useGetDraft from './hooks/useGetDraft';
 import useGetQuestions from './hooks/useGetQuestions';
 import useMutateDraft from './hooks/useMutateDraft';
 import useMutateSubmit from './hooks/useMutateSubmit';
-import { buttonWrapper, container, formContainer } from './style.css';
+import { buttonWrapper, container, formContainerVar } from './style.css';
 
 import type { ApplyRequest } from './types';
 
@@ -33,6 +34,7 @@ interface ApplyPageProps {
 }
 
 const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
+  const deviceType = useDevice();
   useCheckBrowser(); // 크롬 브라우저 권장 알럿
 
   const draftDialog = useRef<HTMLDialogElement>(null);
@@ -301,7 +303,11 @@ const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
         />
         <ApplyInfo isReview={isReview} />
         <ApplyCategory isReview={isReview} minIndex={minIndex} />
-        <form id="apply-form" name="apply-form" onSubmit={handleSubmit(handleApplySubmit)} className={formContainer}>
+        <form
+          id="apply-form"
+          name="apply-form"
+          onSubmit={handleSubmit(handleApplySubmit)}
+          className={formContainerVar[deviceType]}>
           <DefaultSection
             isMakers={isMakers}
             isReview={isReview}
diff --git a/src/views/ApplyPage/style.css.ts b/src/views/ApplyPage/style.css.ts
index 1c9e9c83..2f713ae7 100644
--- a/src/views/ApplyPage/style.css.ts
+++ b/src/views/ApplyPage/style.css.ts
@@ -1,4 +1,6 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { theme } from 'styles/theme.css';
 
 // ApplyPage.tsx
 export const container = style({
@@ -14,9 +16,28 @@ export const formContainer = style({
   gap: 100,
 
   marginBottom: 362,
-  width: 720,
 });
 
+export const formContainerVar = styleVariants({
+  DESK: [
+    formContainer,
+    {
+      width: 720,
+    },
+  ],
+  TAB: [
+    formContainer,
+    {
+      width: 367,
+    },
+  ],
+  MOB: [
+    formContainer,
+    {
+      width: 312,
+    },
+  ],
+});
 export const content = style({});
 
 export const buttonWrapper = style({
@@ -26,3 +47,52 @@ export const buttonWrapper = style({
 
   marginTop: 46,
 });
+
+// section common styles
+
+export const sectionTitleVar = styleVariants({
+  DESK: {
+    width: 720,
+    ...theme.font.TITLE_2_28_SB,
+    color: theme.color.baseText,
+  },
+  TAB: {
+    width: 367,
+    ...theme.font.TITLE_3_24_SB,
+    color: theme.color.baseText,
+  },
+  MOB: {
+    width: 312,
+    ...theme.font.TITLE_5_18_SB,
+    color: theme.color.baseText,
+  },
+});
+
+export const sectionContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const sectionContainerVar = styleVariants({
+  DESK: [
+    sectionContainer,
+    {
+      paddingTop: 166,
+      gap: 50,
+    },
+  ],
+  TAB: [
+    sectionContainer,
+    {
+      paddingTop: 100,
+      gap: 50,
+    },
+  ],
+  MOB: [
+    sectionContainer,
+    {
+      paddingTop: 49,
+      gap: 40,
+    },
+  ],
+});
diff --git a/src/views/ReviewPage/index.tsx b/src/views/ReviewPage/index.tsx
index a3a065f0..dcf5868e 100644
--- a/src/views/ReviewPage/index.tsx
+++ b/src/views/ReviewPage/index.tsx
@@ -2,6 +2,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import useDate from '@hooks/useDate';
+import { useDevice } from '@hooks/useDevice';
 import useScrollToHash from '@hooks/useScrollToHash';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import ApplyCategory from 'views/ApplyPage/components/ApplyCategory';
@@ -13,12 +14,13 @@ import DefaultSection from 'views/ApplyPage/components/DefaultSection';
 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 { container, formContainerVar } from 'views/ApplyPage/style.css';
 import { PreventReviewDialog } from 'views/dialogs';
 import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 const ReviewPage = () => {
+  const deviceType = useDevice();
   const preventReviewDialog = useRef<HTMLDialogElement>(null);
   const sectionsRef = useRef<HTMLSelectElement[]>([]);
 
@@ -110,7 +112,7 @@ const ReviewPage = () => {
           <ApplyHeader isReview={isReview} />
           <ApplyInfo isReview={isReview} />
           <ApplyCategory isReview={isReview} minIndex={minIndex} />
-          <form id="apply-form" name="apply-form" className={formContainer}>
+          <form id="apply-form" name="apply-form" className={formContainerVar[deviceType]}>
             <DefaultSection
               isMakers={isMakers}
               isReview={isReview}
diff --git a/src/views/dialogs/CompleteDialog/index.tsx b/src/views/dialogs/CompleteDialog/index.tsx
index 59640f57..97d6c47d 100644
--- a/src/views/dialogs/CompleteDialog/index.tsx
+++ b/src/views/dialogs/CompleteDialog/index.tsx
@@ -7,15 +7,15 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css';
 
 const CompleteDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   return (
     <Dialog ref={ref}>
-      <p className={mainTextVar[DEVICE_TYPE]}>비밀번호 재설정이 완료되었어요.</p>
-      <p className={subTextVar[DEVICE_TYPE]}>&apos;로그인&apos; 페이지로 이동할게요.</p>
+      <p className={mainTextVar[deviceType]}>비밀번호 재설정이 완료되었어요.</p>
+      <p className={subTextVar[deviceType]}>&apos;로그인&apos; 페이지로 이동할게요.</p>
       <form
         method="dialog"
-        className={`${buttonWrapperVar[DEVICE_TYPE]} ${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        className={`${buttonWrapperVar[deviceType]} ${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
         <Link to="/" className={buttonInside.solid}>
           확인
         </Link>
diff --git a/src/views/dialogs/DraftDialog/index.tsx b/src/views/dialogs/DraftDialog/index.tsx
index 74276694..6796ac49 100644
--- a/src/views/dialogs/DraftDialog/index.tsx
+++ b/src/views/dialogs/DraftDialog/index.tsx
@@ -6,14 +6,14 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css';
 
 const DraftDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   return (
     <Dialog ref={ref}>
-      <p className={mainTextVar[DEVICE_TYPE]}>임시 저장이 완료되었어요.</p>
+      <p className={mainTextVar[deviceType]}>임시 저장이 완료되었어요.</p>
       <form
         method="dialog"
-        className={`${buttonWrapperVar[DEVICE_TYPE]} ${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        className={`${buttonWrapperVar[deviceType]} ${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
         <button className={buttonInside.solid}>확인</button>
       </form>
     </Dialog>
diff --git a/src/views/dialogs/ExistingApplicantDialog/index.tsx b/src/views/dialogs/ExistingApplicantDialog/index.tsx
index 683e72a6..0ef54018 100644
--- a/src/views/dialogs/ExistingApplicantDialog/index.tsx
+++ b/src/views/dialogs/ExistingApplicantDialog/index.tsx
@@ -7,13 +7,13 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css';
 
 const ExistingApplicantDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   return (
     <Dialog ref={ref}>
-      <p className={mainTextVar[DEVICE_TYPE]}>이미 가입된 계정이 있어요.</p>
-      <div className={buttonWrapperVar[DEVICE_TYPE]}>
-        <form method="dialog" className={`${buttonOutside.line} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+      <p className={mainTextVar[deviceType]}>이미 가입된 계정이 있어요.</p>
+      <div className={buttonWrapperVar[deviceType]}>
+        <form method="dialog" className={`${buttonOutside.line} ${buttonOutsideVar[deviceType]}`}>
           <button className={buttonInside.line}>다시 입력하기</button>
         </form>
         <div className={buttonOutside.solid}>
diff --git a/src/views/dialogs/ExitDialog/index.tsx b/src/views/dialogs/ExitDialog/index.tsx
index 06f0686d..a7701048 100644
--- a/src/views/dialogs/ExitDialog/index.tsx
+++ b/src/views/dialogs/ExitDialog/index.tsx
@@ -6,17 +6,17 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css';
 
 const ExitDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   return (
     <Dialog ref={ref}>
-      <p className={mainTextVar[DEVICE_TYPE]}>이대로 나가시겠어요?</p>
-      <p className={subTextVar[DEVICE_TYPE]}>변경사항이 있는 경우 임시저장을 해주세요.</p>
-      <div className={buttonWrapperVar[DEVICE_TYPE]}>
-        <form method="dialog" className={`${buttonOutside.line} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+      <p className={mainTextVar[deviceType]}>이대로 나가시겠어요?</p>
+      <p className={subTextVar[deviceType]}>변경사항이 있는 경우 임시저장을 해주세요.</p>
+      <div className={buttonWrapperVar[deviceType]}>
+        <form method="dialog" className={`${buttonOutside.line} ${buttonOutsideVar[deviceType]}`}>
           <button className={buttonInside.line}>머물기</button>
         </form>
-        <div className={`${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        <div className={`${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
           <button className={buttonInside.solid}>나가기</button>
         </div>
       </div>
diff --git a/src/views/dialogs/PreventApplyDialog/index.tsx b/src/views/dialogs/PreventApplyDialog/index.tsx
index 86776693..268400ee 100644
--- a/src/views/dialogs/PreventApplyDialog/index.tsx
+++ b/src/views/dialogs/PreventApplyDialog/index.tsx
@@ -6,7 +6,7 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar } from '../style.css';
 
 const PreventApplyDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   const handlePreventESCKeyPress = (e: KeyboardEvent<HTMLDialogElement>) => {
     if (e.key === 'Escape') e.preventDefault();
@@ -14,10 +14,10 @@ const PreventApplyDialog = forwardRef<HTMLDialogElement>((_, ref) => {
 
   return (
     <Dialog ref={ref} onKeyDown={handlePreventESCKeyPress}>
-      <p className={mainTextVar[DEVICE_TYPE]}>지원서 제출 기한이 지났어요.</p>
+      <p className={mainTextVar[deviceType]}>지원서 제출 기한이 지났어요.</p>
       <form
         method="dialog"
-        className={`${buttonWrapperVar[DEVICE_TYPE]} ${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        className={`${buttonWrapperVar[deviceType]} ${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
         <button className={buttonInside.solid}>확인</button>
       </form>
     </Dialog>
diff --git a/src/views/dialogs/PreventReviewDialog/index.tsx b/src/views/dialogs/PreventReviewDialog/index.tsx
index a0688f22..6a9fb416 100644
--- a/src/views/dialogs/PreventReviewDialog/index.tsx
+++ b/src/views/dialogs/PreventReviewDialog/index.tsx
@@ -7,7 +7,7 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css';
 
 const PreventReviewDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   const handlePreventESCKeyPress = (e: KeyboardEvent<HTMLDialogElement>) => {
     if (e.key === 'Escape') e.preventDefault();
@@ -15,11 +15,11 @@ const PreventReviewDialog = forwardRef<HTMLDialogElement>((_, ref) => {
 
   return (
     <Dialog ref={ref} onKeyDown={handlePreventESCKeyPress}>
-      <p className={mainTextVar[DEVICE_TYPE]}>지원서 제출을 먼저 해주세요.</p>
-      <p className={subTextVar[DEVICE_TYPE]}>&apos;지원서&apos; 페이지로 이동할게요.</p>
+      <p className={mainTextVar[deviceType]}>지원서 제출을 먼저 해주세요.</p>
+      <p className={subTextVar[deviceType]}>&apos;지원서&apos; 페이지로 이동할게요.</p>
       <form
         method="dialog"
-        className={`${buttonWrapperVar[DEVICE_TYPE]} ${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        className={`${buttonWrapperVar[deviceType]} ${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
         <Link to="/" className={buttonInside.solid}>
           확인
         </Link>
diff --git a/src/views/dialogs/SessionExpiredDialog/index.tsx b/src/views/dialogs/SessionExpiredDialog/index.tsx
index 98bd8c8b..4cb1bb3f 100644
--- a/src/views/dialogs/SessionExpiredDialog/index.tsx
+++ b/src/views/dialogs/SessionExpiredDialog/index.tsx
@@ -7,7 +7,7 @@ import { useDevice } from '@hooks/useDevice';
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css';
 
 const SessionExpiredDialog = forwardRef<HTMLDialogElement>((_, ref) => {
-  const DEVICE_TYPE = useDevice();
+  const deviceType = useDevice();
 
   const handlePreventESCKeyPress = (e: KeyboardEvent<HTMLDialogElement>) => {
     if (e.key === 'Escape') e.preventDefault();
@@ -26,11 +26,11 @@ const SessionExpiredDialog = forwardRef<HTMLDialogElement>((_, ref) => {
 
   return (
     <Dialog ref={ref} onKeyDown={handlePreventESCKeyPress}>
-      <p className={mainTextVar[DEVICE_TYPE]}>로그인을 다시 해주세요.</p>
-      <p className={subTextVar[DEVICE_TYPE]}>세션이 만료되었거나 비정상적인 로그인이에요.</p>
+      <p className={mainTextVar[deviceType]}>로그인을 다시 해주세요.</p>
+      <p className={subTextVar[deviceType]}>세션이 만료되었거나 비정상적인 로그인이에요.</p>
       <form
         method="dialog"
-        className={`${buttonWrapperVar[DEVICE_TYPE]} ${buttonOutside.solid} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+        className={`${buttonWrapperVar[deviceType]} ${buttonOutside.solid} ${buttonOutsideVar[deviceType]}`}>
         <button className={buttonInside.solid} onClick={handleLogout}>
           확인
         </button>
diff --git a/src/views/dialogs/SubmitDialog/index.tsx b/src/views/dialogs/SubmitDialog/index.tsx
index 9d5b8f20..3dfe58f1 100644
--- a/src/views/dialogs/SubmitDialog/index.tsx
+++ b/src/views/dialogs/SubmitDialog/index.tsx
@@ -18,18 +18,18 @@ import {
 import { buttonInside, buttonOutside, buttonOutsideVar, buttonWrapperVar, mainTextVar, subTextVar } from '../style.css';
 
 const MyInfoItem = ({
-  DEVICE_TYPE,
+  deviceType,
   label,
   value,
 }: {
-  DEVICE_TYPE: 'MOB' | 'TAB' | 'DESK';
+  deviceType: 'MOB' | 'TAB' | 'DESK';
   label: string;
   value: string;
 }) => {
   return (
-    <li className={infoWrapperVar[DEVICE_TYPE]}>
-      <label className={infoLabelVar[DEVICE_TYPE]}>{label}</label>
-      <span className={infoValueVar[DEVICE_TYPE]}>{value}</span>
+    <li className={infoWrapperVar[deviceType]}>
+      <label className={infoLabelVar[deviceType]}>{label}</label>
+      <span className={infoValueVar[deviceType]}>{value}</span>
     </li>
   );
 };
@@ -49,7 +49,7 @@ const SubmitDialog = forwardRef<HTMLDialogElement, SubmitDialogProps>(
   ({ userInfo: { name, email, phone, part }, dataIsPending, onSendData }, ref) => {
     const [isChecked, setIsChecked] = useState(false);
 
-    const DEVICE_TYPE = useDevice();
+    const deviceType = useDevice();
 
     const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
       setIsChecked(e.target.checked);
@@ -57,13 +57,13 @@ const SubmitDialog = forwardRef<HTMLDialogElement, SubmitDialogProps>(
 
     return (
       <Dialog ref={ref}>
-        <p className={mainTextVar[DEVICE_TYPE]}>이대로 제출하시겠어요?</p>
-        <p className={subTextVar[DEVICE_TYPE]}>제출 완료하신 지원서는 수정하실 수 없어요.</p>
-        <ol className={infoContainerVar[DEVICE_TYPE]}>
-          <MyInfoItem DEVICE_TYPE={DEVICE_TYPE} label="이름" value={name} />
-          <MyInfoItem DEVICE_TYPE={DEVICE_TYPE} label="이메일" value={email} />
-          <MyInfoItem DEVICE_TYPE={DEVICE_TYPE} label="전화번호" value={phone} />
-          <MyInfoItem DEVICE_TYPE={DEVICE_TYPE} label="지원파트" value={part} />
+        <p className={mainTextVar[deviceType]}>이대로 제출하시겠어요?</p>
+        <p className={subTextVar[deviceType]}>제출 완료하신 지원서는 수정하실 수 없어요.</p>
+        <ol className={infoContainerVar[deviceType]}>
+          <MyInfoItem deviceType={deviceType} label="이름" value={name} />
+          <MyInfoItem deviceType={deviceType} label="이메일" value={email} />
+          <MyInfoItem deviceType={deviceType} label="전화번호" value={phone} />
+          <MyInfoItem deviceType={deviceType} label="지원파트" value={part} />
         </ol>
         <div className={checkboxContainer}>
           <label className={checkboxWrapper}>
@@ -77,16 +77,16 @@ const SubmitDialog = forwardRef<HTMLDialogElement, SubmitDialogProps>(
             <span>확인했습니다.</span>
           </label>
         </div>
-        <div className={buttonWrapperVar[DEVICE_TYPE]}>
+        <div className={buttonWrapperVar[deviceType]}>
           <form
             method="dialog"
-            className={`${dataIsPending ? buttonOutside.disabled : buttonOutside.line} ${buttonOutsideVar[DEVICE_TYPE]}`}
+            className={`${dataIsPending ? buttonOutside.disabled : buttonOutside.line} ${buttonOutsideVar[deviceType]}`}
             onSubmit={() => setIsChecked(false)}>
             <button className={buttonInside.line} disabled={dataIsPending} onClick={() => track('click-apply-cancel')}>
               {dataIsPending ? <ButtonLoading width={48} height={18} /> : '검토하기'}
             </button>
           </form>
-          <div className={`${buttonOutside[!isChecked ? 'disabled' : 'solid']} ${buttonOutsideVar[DEVICE_TYPE]}`}>
+          <div className={`${buttonOutside[!isChecked ? 'disabled' : 'solid']} ${buttonOutsideVar[deviceType]}`}>
             <button className={buttonInside.solid} onClick={onSendData} disabled={!isChecked || dataIsPending}>
               {dataIsPending ? <ButtonLoading width={48} height={18} /> : '제출하기'}
             </button>