merge :: 배경색을 언제든지 유동적으로 바꿀 수 있게 변경하기

Team-return · Dec 13, 2023 · 771b0b6 · 771b0b6
2 parents 90e20fe + a315e82
commit 771b0b6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,7 +8,7 @@
   }
   .skeltonUi {
     @apply bg-[#f7f7f7] relative;
-  }  
+  }
   .drag {
     -webkit-user-select: text;
     -moz-user-select: text;
@@ -39,12 +39,6 @@ html {
   user-select: none;
 }
 
-body {
-  min-height: 100vh;
-  margin: auto;
-  padding: 68px 0;
-}
-
 a {
   color: black;
   text-decoration: none;
@@ -59,7 +53,6 @@ input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-
 table {
   width: 100%;
   border: none;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,7 +18,12 @@ export default function RootLayout({
   return (
     <html>
       <SEOConfig />
-      <body className={"md:w-[65vw] sm:w-[85vw] " + notoSans.className}>
+      <body
+        className={
+          "w-screen py-[68px] md:px-[17.5vw] sm:px-[7.5vw] min-h-screen " +
+          notoSans.className
+        }
+      >
         <Provider>
           <Header />
           {children}

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import Image from "next/image";
 import Logo from "@public/Logo.png";
 import { Icon } from "@team-return/design-system";
@@ -10,6 +10,17 @@ import { useMyProfile } from "@/apis/students";
 
 function Header() {
   const pathname = usePathname();
+  useEffect(() => {
+    if (
+      pathname.toString().indexOf("/apply") !== -1 ||
+      pathname.toString().indexOf("/account") !== -1
+    ) {
+      document.querySelector("body")!.style.backgroundColor = "#fafafa";
+    } else {
+      document.querySelector("body")!.style.backgroundColor = "#ffffff";
+    }
+  }, []);
+
   if (pathname.toString().indexOf("/account") !== -1) {
     return null;
   }
@@ -73,9 +84,7 @@ function Header() {
             {profile?.student_name}
           </p>
         </div>
-        <div>
-          {/* <Icon icon={"Chevron"} size={16} color="gray90" /> */}
-        </div>
+        <div>{/* <Icon icon={"Chevron"} size={16} color="gray90" /> */}</div>
       </div>
     </div>
   );

diff --git a/src/components/recruitments/apply/ShadowBox.tsx b/src/components/recruitments/apply/ShadowBox.tsx
@@ -9,7 +9,7 @@ interface PropsType {
 export default function ShadowBox({ children, width, height }: PropsType) {
   return (
     <div
-      className={`bg-white rounded-[8px] shadow-elevaiton`}
+      className={`bg-white rounded-[8px]`}
       style={{ width: width, height: height }}
     >
       {children}