design: SignupPage 반응형

src/views/SignInPage/components/SignInInfo/style.css.ts

@@ -10,8 +10,8 @@ const calloutButton = style({
 
 export const calloutButtonVar = styleVariants({
   DESK: [calloutButton, { ...theme.font.TITLE_5_18_SB }],
-  TAB: [calloutButton, { ...theme.font.TITLE_6_16_SB, border: 'none' }],
-  MOB: [calloutButton, { ...theme.font.TITLE_7_14_SB, border: 'none' }],
+  TAB: [calloutButton, { ...theme.font.TITLE_6_16_SB }],
+  MOB: [calloutButton, { ...theme.font.TITLE_7_14_SB }],
 });
 
 export const strongText = style({

src/views/SignupPage/index.tsx

@@ -1,19 +1,21 @@
 import Title from '@components/Title';
 import useDate from '@hooks/useDate';
+import { useDevice } from '@hooks/useDevice';
 import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
 import SignupForm from './components/SignupForm';
-import { container } from './style.css';
+import { containerVar } from './style.css';
 
 const SignupPage = () => {
+  const DEVICE_TYPE = useDevice();
   const { NoMoreRecruit, NoMoreApply, isLoading, isMakers } = useDate();
 
   if (isLoading) return <BigLoading />;
   if (NoMoreRecruit || NoMoreApply) return <NoMore isMakers={isMakers} content="모집 기간이 아니에요" />;
 
   return (
-    <div className={container}>
+    <div className={containerVar[DEVICE_TYPE]}>
       <Title>새 지원서 작성하기</Title>
       <SignupForm />
     </div>

src/views/SignupPage/style.css.ts

@@ -1,10 +1,33 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: 50,
+});
 
-  margin: '90px auto 324px',
-  width: 468,
+export const containerVar = styleVariants({
+  DESK: [
+    container,
+    {
+      gap: 50,
+      margin: '90px 0 274px 0',
+      width: 468,
+    },
+  ],
+  TAB: [
+    container,
+    {
+      gap: 50,
+      margin: '75px 0 200px 0',
+      width: 367,
+    },
+  ],
+  MOB: [
+    container,
+    {
+      gap: 30,
+      margin: '43px 0 150px 0',
+      width: 312,
+    },
+  ],
 });