Merge pull request #19 from MARU-EGG/USER-hader-component

[User] Feat: Header component

src/routes/app-routes.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import AdminRoutes from './admin-routes';
 import PageTest from '../ui/pages/page-test';
+import MaruEgg from '../ui/pages/maru-egg';
 
 const AppRoutes: React.FC = () => {
   return (
     <Routes>
-      <Route path="/" element={<div>챗봇이 들어갈 곳</div>} />
+      <Route path="/" element={<MaruEgg />} />
       <Route path="/admin/*" element={<AdminRoutes />} />
       <Route path="/test/*" element={<PageTest />} />
     </Routes>

src/ui/components/molecule/user/header/header.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg';
+import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg';
+import maruEgg from '../../../../../assets/maru-egg.png';
+import IconButton from '../../../atom/icon/icon-button';
+
+interface HeaderProps {
+  type: string;
+}
+
+const Header = ({ type }: HeaderProps) => {
+  const navigate = useNavigate();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const handleRefreshClick = () => {
+    navigate('/');
+    console.log('새로고침');
+  };
+
+  const handleMenuClick = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  return (
+    <div className="flex items-center justify-between px-3 py-2">
+      <IconButton onClick={handleRefreshClick}>
+        <RefreshIcon />
+      </IconButton>
+      <div className="flex items-center">
+        <img className="mr-2 h-8 w-8" src={maruEgg} alt="마루에그 캐릭터" />
+        <div className="mr-8 text-title text-primary-blue">명지대학교 입학처 챗봇</div>
+        <ul role="list" className="flex list-disc items-center marker:text-primary-blue">
+          <li className="pl-0">
+            <div className="flex text-body2">
+              <p className="text-primary-blue">{type}&nbsp;</p>
+              <p>질문중</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <IconButton onClick={handleMenuClick}>
+        <MenuIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+export default Header;

src/ui/pages/maru-egg.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Header from '../components/molecule/user/header/header';
+
+const MaruEgg: React.FC = () => {
+  return (
+    <div className="min-w-[360px]">
+      <Header type="수시" />
+    </div>
+  );
+};
+
+export default MaruEgg;