[Feat][Fe] #134 : classNames 사용

boostcampwm-2024 · Nov 12, 2024 · ca96a3c · ca96a3c
1 parent 0d65616
commit ca96a3c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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}