[FIX][FE] props 전달 방식 수정

frontend/src/component/Layout/Footer.tsx

@@ -6,18 +6,18 @@ interface IFooterProps {
   active?: boolean;
 }
 
-export const Footer: React.FC<IFooterProps> = ({ title, onClick, active }) => {
-  const shadow = active ? 'shadow-float' : 'shadow-basic';
-  const fontColor = active ? 'text-gray-900' : 'text-gray-400';
+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={onClick}
+        onClick={props.onClick}
       >
-        {title}
+        {props.title}
       </button>
     </footer>
   );

frontend/src/component/Layout/Header.tsx

@@ -6,13 +6,13 @@ interface IHeaderProps {
   buttonElement?: ReactNode;
 }
 
-export const Header: React.FC<IHeaderProps> = ({ title, isTransparency, buttonElement }) => {
-  const background = isTransparency ? '' : 'bg-white';
+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]`}>
-      {buttonElement}
-      <h1 className="text-base">{title}</h1>
+      {props.buttonElement}
+      <h1 className="text-base">{props.title}</h1>
     </header>
   );
 };

frontend/src/component/Layout/Layout.tsx

@@ -12,23 +12,19 @@ interface ILayoutProps {
   footerOnClick?: () => void;
 }
 
-export const Layout: React.FC<ILayoutProps> = ({
-  children,
-  headerTitle,
-  footerTitle,
-  isHeaderTransparent = false,
-  footerActive = true,
-  headerButton,
-  footerOnClick,
-}) => (
+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={headerTitle} isTransparency={isHeaderTransparent} buttonElement={headerButton} />
+    <Header
+      title={props.headerTitle}
+      isTransparency={props.isHeaderTransparent}
+      buttonElement={props.headerButton}
+    />
 
     {/* Main content */}
-    <main>{children}</main>
+    <main>{props.children}</main>
 
     {/* Footer */}
-    <Footer title={footerTitle} onClick={footerOnClick} active={footerActive} />
+    <Footer title={props.footerTitle} onClick={props.footerOnClick} active={props.footerActive} />
   </div>
 );