design: PasswordPage 반응형

src/views/PasswordPage/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 PasswordForm from './components/PasswordForm';
-import { container } from './style.css';
+import { containerVar } from './style.css';
 
 const PasswordPage = () => {
+  const DEVICE_TYPE = useDevice();
   const { NoMoreRecruit, isLoading, isMakers } = useDate();
 
   if (isLoading) return <BigLoading />;
   if (NoMoreRecruit) return <NoMore isMakers={isMakers} content="모집 기간이 아니에요" />;
 
   return (
-    <div className={container}>
+    <div className={containerVar[DEVICE_TYPE]}>
       <Title>비밀번호 재설정하기</Title>
       <PasswordForm />
     </div>

src/views/PasswordPage/style.css.ts

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