[Design] Mobile ver. - ErrorPage 구현

src/views/CompletePage/style.css.ts

@@ -9,12 +9,12 @@ export const container = style({
   alignItems: 'center',
   justifyContent: 'center',
   width: 550,
-  height: calc.subtract('100vh', '74px'),
+  height: calc.subtract('100vh', '80px'),
   minHeight: 700,
 
   '@supports': {
     '(height: 100dvh)': {
-      height: calc.subtract('100dvh', '74px'),
+      height: calc.subtract('100dvh', '80px'),
     },
   },
 });

src/views/ErrorPage/components/ErrorCode/index.tsx

@@ -1,38 +1,50 @@
+import { useDevice } from '@hooks/useDevice';
 import Icon404Back from 'views/ErrorPage/icons/Icon404Back';
 import Icon404Front from 'views/ErrorPage/icons/Icon404Front';
 import Icon500Back from 'views/ErrorPage/icons/Icon500Back';
 import Icon500Front from 'views/ErrorPage/icons/Icon500Front';
 import IconCone from 'views/ErrorPage/icons/IconCone';
 import IconGhost from 'views/ErrorPage/icons/IconGhost';
 
-import { backText, frontText, iconWrapper, showIcon } from './style.css';
+import { backText, frontText, iconWrapperVar, showIconVar } from './style.css';
 
 export default function ErrorCode({ code }: { code: 404 | 500 }) {
+  const DEVICE_TYPE = useDevice();
+  const isMobile = DEVICE_TYPE === 'MOB';
+
   return (
-    <div className={iconWrapper}>
+    <div className={iconWrapperVar[DEVICE_TYPE]}>
       {code === 404 ? (
         <>
-          <i className={frontText}>
-            <Icon404Front />
-          </i>
-          <i className={showIcon}>
+          {!isMobile && (
+            <i className={frontText}>
+              <Icon404Front />
+            </i>
+          )}
+          <i className={showIconVar[DEVICE_TYPE]}>
             <IconGhost />
           </i>
-          <i className={backText}>
-            <Icon404Back />
-          </i>
+          {!isMobile && (
+            <i className={backText}>
+              <Icon404Back />
+            </i>
+          )}
         </>
       ) : (
         <>
-          <i className={frontText}>
-            <Icon500Front />
-          </i>
-          <i className={showIcon}>
+          {!isMobile && (
+            <i className={frontText}>
+              <Icon500Front />
+            </i>
+          )}
+          <i className={showIconVar[DEVICE_TYPE]}>
             <IconCone />
           </i>
-          <i className={backText}>
-            <Icon500Back />
-          </i>
+          {!isMobile && (
+            <i className={backText}>
+              <Icon500Back />
+            </i>
+          )}
         </>
       )}
     </div>

src/views/ErrorPage/components/ErrorCode/style.css.ts

@@ -1,10 +1,30 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-export const iconWrapper = style({
+const iconWrapper = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  marginBottom: 43,
+});
+
+export const iconWrapperVar = styleVariants({
+  DESK: [
+    iconWrapper,
+    {
+      marginBottom: 43,
+    },
+  ],
+  TAB: [
+    iconWrapper,
+    {
+      marginBottom: 43,
+    },
+  ],
+  MOB: [
+    iconWrapper,
+    {
+      marginBottom: 24,
+    },
+  ],
 });
 
 export const frontText = style({
@@ -18,8 +38,7 @@ export const frontText = style({
   },
 });
 
-export const showIcon = style({
-  opacity: 0,
+const showIcon = style({
   transition: 'all 0.3s ease',
 
   selectors: {
@@ -29,6 +48,27 @@ export const showIcon = style({
   },
 });
 
+export const showIconVar = styleVariants({
+  DESK: [
+    showIcon,
+    {
+      opacity: 0,
+    },
+  ],
+  TAB: [
+    showIcon,
+    {
+      opacity: 0,
+    },
+  ],
+  MOB: [
+    showIcon,
+    {
+      opacity: 1,
+    },
+  ],
+});
+
 export const backText = style({
   transform: 'translateX(-73px)',
   transition: 'all 0.3s ease',

src/views/ErrorPage/components/NoMore/index.tsx

@@ -1,33 +1,37 @@
 import { track } from '@amplitude/analytics-browser';
 
-import { article, contactButton, container, errorButton, errorText, instruction } from '../../style.css';
+import { useDevice } from '@hooks/useDevice';
+
+import { article, contactButtonVar, container, errorButtonVar, errorTextVar, instructionVar } from '../../style.css';
 
 interface NoMoreProps {
   isMakers?: boolean;
   content: string;
 }
 
 const NoMore = ({ isMakers, content }: NoMoreProps) => {
+  const DEVICE_TYPE = useDevice();
+
   return (
-    <section className={container[isMakers == undefined ? 'withoutHeader' : 'withHeader']}>
+    <section className={container}>
       <article className={article}>
-        <p className={errorText}>{content}</p>
+        <p className={errorTextVar[DEVICE_TYPE]}>{content}</p>
         <a
           href={isMakers ? 'https://makers.sopt.org/' : 'https://www.sopt.org/'}
-          className={errorButton}
+          className={errorButtonVar[DEVICE_TYPE]}
           target="_blank"
           rel="noreferrer noopener"
           onClick={() => track(isMakers ? 'click-nomore-official_makers' : 'click-nomore-official')}>
           공식 홈페이지 가기
         </a>
       </article>
-      <p className={instruction}>{`문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}</p>
+      <p className={instructionVar[DEVICE_TYPE]}>{`문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}</p>
       <a
         id="chat-channel-button"
         href={isMakers ? 'https://pf.kakao.com/_sxaIWG' : 'https://pf.kakao.com/_JdTKd'}
         target="_blank"
         rel="noreferrer noopener"
-        className={contactButton}
+        className={contactButtonVar[DEVICE_TYPE]}
         onClick={() => track(isMakers ? 'click-nomore-ask_makers' : 'click-nomore-ask')}>
         문의하기
       </a>

src/views/ErrorPage/index.tsx

@@ -1,20 +1,16 @@
 import { track } from '@amplitude/analytics-browser';
-import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { RecruitingInfoContext } from '@store/recruitingInfoContext';
+import { useDevice } from '@hooks/useDevice';
 
 import ErrorCode from './components/ErrorCode';
 import { ERROR_MESSAGE } from './constants';
-import { article, contactButton, container, errorButton, errorText, instruction } from './style.css';
+import { article, contactButtonVar, container, errorButtonVar, errorTextVar, instructionVar } from './style.css';
 
 const ErrorPage = ({ code }: { code: 404 | 500 }) => {
+  const DEVICE_TYPE = useDevice();
   const navigate = useNavigate();
 
-  const {
-    recruitingInfo: { isMakers },
-  } = useContext(RecruitingInfoContext);
-
   const handleGoBack = (code: 404 | 500) => {
     const hasPreviousPage = window.history.length > 1;
 
@@ -33,21 +29,24 @@ const ErrorPage = ({ code }: { code: 404 | 500 }) => {
   const CODE_KEY: 'CODE404' | 'CODE500' = `CODE${code}`;
 
   return (
-    <section className={container[isMakers == undefined ? 'withoutHeader' : 'withHeader']}>
+    <section className={container}>
       <article className={article}>
         <ErrorCode code={code} />
-        <p className={errorText}>{ERROR_MESSAGE[CODE_KEY]?.text}</p>
-        <button className={errorButton} onClick={handleClickErrorButton}>
+        <p className={errorTextVar[DEVICE_TYPE]}>{ERROR_MESSAGE[CODE_KEY]?.text}</p>
+        <button className={errorButtonVar[DEVICE_TYPE]} onClick={handleClickErrorButton}>
           {ERROR_MESSAGE[CODE_KEY]?.button}
         </button>
       </article>
-      <p className={instruction}>{`문제가 지속적으로 발생하거나 문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}</p>
+      <p
+        className={
+          instructionVar[DEVICE_TYPE]
+        }>{`문제가 지속적으로 발생하거나 문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}</p>
       <a
         id="chat-channel-button"
         href="http://pf.kakao.com/_sxaIWG"
         target="_blank"
         rel="noreferrer noopener"
-        className={contactButton}
+        className={contactButtonVar[DEVICE_TYPE]}
         onClick={() => track('click-error-ask')}>
         문의하기
       </a>