From ca96a3c48184f06d21899c118d83d44bd664bdd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Tue, 12 Nov 2024 11:15:04 +0900
Subject: [PATCH] =?UTF-8?q?[Feat][Fe]=20#134=20:=20classNames=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/Layout/Footer.tsx | 11 ++++++++++-
 frontend/src/component/Layout/Header.tsx | 14 +++++++++++++-
 frontend/src/component/Layout/Layout.tsx |  5 ++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/Layout/Footer.tsx b/frontend/src/component/Layout/Footer.tsx
index 5175283e..68f00066 100644
--- a/frontend/src/component/Layout/Footer.tsx
+++ b/frontend/src/component/Layout/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { buttonActiveType } from './enumTypes';
 
 interface IFooterProps {
@@ -13,7 +14,15 @@ export const Footer = (props: IFooterProps) => {
   return (
     <footer className="absolute bottom-5 w-[95%] h-[6%]">
       <button
-        className={`w-full h-full bg-white text-black p-2 rounded-lg ${buttonStyle}`}
+        className={classNames(
+          'w-full',
+          'h-full',
+          'bg-white',
+          'text-black',
+          'p-2',
+          'rounded-lg',
+          buttonStyle,
+        )}
         type="button"
         onClick={props.onClick}
       >
diff --git a/frontend/src/component/Layout/Header.tsx b/frontend/src/component/Layout/Header.tsx
index befce90e..6150d542 100644
--- a/frontend/src/component/Layout/Header.tsx
+++ b/frontend/src/component/Layout/Header.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import classNames from 'classnames';
 import { backgroundType } from './enumTypes';
 
 interface IHeaderProps {
@@ -11,7 +12,18 @@ export const Header = (props: IHeaderProps) => {
   const background = props.isTransparency ? backgroundType.TRANSPARENCY : backgroundType.WHITE;
 
   return (
-    <header className={`w-full h-16 p-4 flex items-center ${background} text-black gap-[16px]`}>
+    <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>
diff --git a/frontend/src/component/Layout/Layout.tsx b/frontend/src/component/Layout/Layout.tsx
index a23f2d2f..a855ced3 100644
--- a/frontend/src/component/Layout/Layout.tsx
+++ b/frontend/src/component/Layout/Layout.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import classNames from 'classnames';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -13,7 +14,9 @@ interface ILayoutProps {
 }
 
 export const Layout = (props: ILayoutProps) => (
-  <div className="flex flex-col items-center w-full h-full bg-gray-400">
+  <div
+    className={classNames('flex', 'flex-col', 'items-center', 'w-full', 'h-full', 'bg-gray-400')}
+  >
     {/* Header */}
     <Header
       title={props.headerTitle}