style: use global var `--header-height`

src/App.module.css

 .page-container {
-    margin-top: 48px;
+    margin-top: var(--header-height);
     height: 100%;
 }

src/common/components/header/Header.module.css

 .container {
-    height: 48px;
+    height: var(--header-height);
     width: 100%;
     padding: 15px;
 

src/contexts/cart/index.tsx

@@ -5,7 +5,7 @@ import type {FC, ReactNode} from "react";
 
 interface CartContextType {
 	cartItem: CartItemData | null
-	setCartItem: (d: CartItemData | null) => any;
+	setCartItem: (d: CartItemData | null) => void;
 }
 
 const CartContext = createContext<CartContextType>({

src/index.css

@@ -30,4 +30,6 @@ a {
   --fs-3: 12px;
   --fs-4: 16px;
   --fs-5: 20px;
+
+  --header-height: 48px;
 }

src/pages/login-page/LoginPage.module.css

 .container {
     width: 100vw;
     height: 100vh;
-    margin-top: -48px;
+    margin-top: calc(-1*var(--header-height));
 
     display: flex;
     flex-direction: column;

src/pages/signup-page/SignupPage.module.css

+.container {
+    width: 100vw;
+    height: 100vh;
+    margin-top: calc(-1*var(--header-height));
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}

src/pages/signup-page/SignupPage.tsx

 import S from './SignupPage.module.css';
 
 const SignupPage = () => {
-    return (<div>SignupPage</div>);
+    return (
+        <div className={S['container']}>
+            <input />
+            <input />
+            <input />
+        </div>
+    );
 };
 
 export default SignupPage;