헤더 디자인 디테일 변경

SKKU-Online-Learning-System · Oct 30, 2023 · c837479 · c837479
1 parent 30213cd
commit c837479
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/front-end/components/Header/Header.tsx b/front-end/components/Header/Header.tsx
@@ -37,7 +37,7 @@ const Header = () => {
 	};
 
 	return (
-		<header className="border-b-2">
+		<header>
 			<UpperHeader
 				onOpenLoginModal={onOpenLoginModal}
 				onOpenSignUpModal={onOpenSignUp}

diff --git a/front-end/components/Header/UpperHeader.tsx b/front-end/components/Header/UpperHeader.tsx
@@ -17,7 +17,7 @@ type PropsType = {
 };
 
 const upperHeaderStyle =
-	' text-[var(--color-onBackground-300)] mx-4 text-sm font-semibold no-underline cursor-pointer transition-colors duration-150 hover:text-[var(--color-green-300)]';
+	'text-[var(--color-onBackground-300)] mx-6 text-sm font-semibold no-underline cursor-pointer transition-colors duration-150 hover:text-[var(--color-green-300)]';
 
 const UpperHeader = ({ onOpenLoginModal, onOpenSignUpModal }: PropsType) => {
 	const router = useRouter();
@@ -36,7 +36,7 @@ const UpperHeader = ({ onOpenLoginModal, onOpenSignUpModal }: PropsType) => {
 	};
 
 	return (
-		<div className="fixed top-0 z-10 flex items-center justify-end w-screen h-8 px-10 mr-8 bg-white ">
+		<div className="fixed top-0 z-10 flex items-center justify-end w-screen h-8 px-10 mr-8 bg-white">
 			{!!isLoggined &&
 				(isLoggined === userLoginAuthState.LOGGINED ? (
 					<div>

diff --git a/front-end/components/Layout.tsx b/front-end/components/Layout.tsx
@@ -5,7 +5,7 @@ import Footer from './Footer';
 import ErrorManager from '../pages/ErrorManager';
 
 const Layout = ({ children }: { children?: ReactElement[] }) => (
-	<div className="flex flex-col w-screen h-screen max-w-full bg-white">
+	<div className="relative flex flex-col w-screen h-screen max-w-full bg-white">
 		<Header />
 		<ErrorManager>
 			<main className="flex-1 pb-15">{children}</main>

diff --git a/front-end/styles/output.css b/front-end/styles/output.css
@@ -671,6 +671,10 @@ video {
   z-index: 2;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -813,6 +817,11 @@ video {
   margin-bottom: auto;
 }
 
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
 .-ml-10 {
   margin-left: -2.5rem;
 }
@@ -1374,6 +1383,11 @@ video {
   flex: 1 1 0%;
 }
 
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @-webkit-keyframes pulse {
   50% {
     opacity: .5;
@@ -2666,6 +2680,18 @@ video {
   opacity: 1.0;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.opacity-10 {
+  opacity: 0.1;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);