[FE][FEAT] #134 : Layout Component 구현

frontend/src/component/Layout/Footer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface IFooterProps {
+  title?: string;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+export const Footer: React.FC<IFooterProps> = (props: IFooterProps) => {
+  const shadow = props.active ? 'shadow-float' : 'shadow-basic';
+  const fontColor = props.active ? 'text-gray-900' : 'text-gray-400';
+
+  return (
+    <footer className="absolute bottom-5 w-[95%] h-[6%]">
+      <button
+        className={`w-full h-full bg-white text-black p-2 rounded-lg ${shadow} ${fontColor}`}
+        type="button"
+        onClick={props.onClick}
+      >
+        {props.title}
+      </button>
+    </footer>
+  );
+};

frontend/src/component/Layout/Header.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+interface IHeaderProps {
+  title?: string;
+  isTransparency?: boolean;
+  buttonElement?: ReactNode;
+}
+
+export const Header: React.FC<IHeaderProps> = (props: IHeaderProps) => {
+  const background = props.isTransparency ? '' : 'bg-white';
+
+  return (
+    <header className={`w-full h-16 p-4 flex items-center ${background} text-black gap-[16px]`}>
+      {props.buttonElement}
+      <h1 className="text-base">{props.title}</h1>
+    </header>
+  );
+};

frontend/src/component/Layout/Layout.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+interface ILayoutProps {
+  children: ReactNode;
+  headerTitle?: string;
+  footerTitle?: string;
+  isHeaderTransparent?: boolean;
+  footerActive?: boolean;
+  headerButton?: ReactNode;
+  footerOnClick?: () => void;
+}
+
+export const Layout: React.FC<ILayoutProps> = (props: ILayoutProps) => (
+  <div className="flex flex-col items-center w-full h-full bg-gray-400">
+    {/* Header */}
+    <Header
+      title={props.headerTitle}
+      isTransparency={props.isHeaderTransparent}
+      buttonElement={props.headerButton}
+    />
+
+    {/* Main content */}
+    <main>{props.children}</main>
+
+    {/* Footer */}
+    <Footer title={props.footerTitle} onClick={props.footerOnClick} active={props.footerActive} />
+  </div>
+);

frontend/tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
         grayscale: {
           white: '#FFFFFF',
           50: 'rgba(60, 60, 67, 0.36)',
-          100: '#EDF2F7',
+          100: '#B7B7B7',
           200: '#6D6D6D',
           400: '#555555',
           800: '#3E3E3E',
@@ -43,6 +43,10 @@ module.exports = {
         '5xl': '3rem',
         '6xl': '4rem',
       },
+      boxShadow: {
+        float: '0 4px 20px rgba(0, 0, 0, 0.13)',
+        basic: 'inset 0 0 3px rgba(0, 0, 0, 0.11)',
+      },
     }, // 필요한 커스터마이징을 여기서 설정 가능
   },
   plugins: [],