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

frontend/src/component/Layout/Footer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import { buttonActiveType } from './enumTypes';
+
+interface IFooterProps {
+  title?: string;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+export const Footer = (props: IFooterProps) => {
+  const buttonStyle = props.active ? buttonActiveType.ACTIVE : buttonActiveType.PASSIVE;
+
+  return (
+    <footer className="absolute bottom-5 w-[95%] h-[6%]">
+      <button
+        className={classNames(
+          'w-full',
+          'h-full',
+          'bg-white',
+          'text-black',
+          'p-2',
+          'rounded-lg',
+          buttonStyle,
+        )}
+        type="button"
+        onClick={props.onClick}
+      >
+        {props.title}
+      </button>
+    </footer>
+  );
+};

frontend/src/component/Layout/Header.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+import { backgroundType } from './enumTypes';
+
+interface IHeaderProps {
+  title?: string;
+  isTransparency?: boolean;
+  buttonElement?: ReactElement;
+}
+
+export const Header = (props: IHeaderProps) => {
+  const background = props.isTransparency ? backgroundType.TRANSPARENCY : backgroundType.WHITE;
+
+  return (
+    <header
+      className={classNames(
+        'w-full',
+        'h-16',
+        'p-4',
+        'flex ',
+        'items-center ',
+        'text-black ',
+        'gap-[16px]',
+        background,
+      )}
+    >
+      {props.buttonElement}
+      <h1 className="text-base">{props.title}</h1>
+    </header>
+  );
+};

frontend/src/component/Layout/Layout.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+interface ILayoutProps {
+  children: ReactElement;
+  headerTitle?: string;
+  footerTitle?: string;
+  isHeaderTransparent?: boolean;
+  footerActive?: boolean;
+  headerButton?: ReactElement;
+  handleFooterClick?: () => void;
+}
+
+export const Layout = (props: ILayoutProps) => (
+  <div
+    className={classNames('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.handleFooterClick}
+      active={props.footerActive}
+    />
+  </div>
+);

frontend/src/component/Layout/enumTypes.ts

@@ -0,0 +1,9 @@
+export enum buttonActiveType {
+  'ACTIVE' = 'shadow-float text-gray-900',
+  'PASSIVE' = 'shadow-basic text-gray-400',
+}
+
+export enum backgroundType {
+  'TRANSPARENCY' = '',
+  'WHITE' = 'bg-white',
+}

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: [],