첫 커밋

src/widgets/navigation/header.tsx

@@ -0,0 +1,138 @@
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { Menu } from '@/shared/ui/menu';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { PATHS } from '@/shared/constants/paths';
+import { 
+  HeaderType,
+  HeaderNavigationProps
+} from '@/entities/common/model/types';
+
+export const HeaderNavigation = ({ 
+  onBack, 
+  headerTitle, 
+  menuOn,
+  headerType, 
+  setMenuOn
+}: HeaderNavigationProps) => {
+  const {
+    navigate,
+    navigateBack
+  } = useNavigate();
+  
+  const handleBack = () => {
+    if(onBack){
+      onBack();
+    }
+    else{
+      navigateBack();
+    }
+  };
+  const handleClose = () => {
+    if(onBack){
+      onBack();
+    }
+    else{
+      navigateBack();
+    }
+  };
+  const onClickToGoToAlarm = () => {
+    navigate(PATHS.alarm.list);
+  };
+  
+  return (
+    <>
+      {
+        (headerType === HeaderType.Home
+          || headerType === HeaderType.Alim 
+          || headerType === HeaderType.LeftArrow
+        ) &&
+        <Menu 
+          menuOn={ menuOn }
+          setMenuOn={ setMenuOn }
+        ></Menu>
+      }
+      { 
+        (headerType !== HeaderType.NoHeader) &&
+        <header className="header">
+        {
+          // 홈에서만 적용
+          (headerType === HeaderType.Home) &&
+          <div className="header-content">
+            <div className="header-left">
+              <h1 className="app-title blind">나이스가맹점관리자</h1>
+                <div className="input-wrapper">
+                  <select className="heading-select">
+                    <option value="1">madzoneviper</option>
+                    <option value="2">stormflarewolf</option>
+                    <option value="3">blazefangco</option>
+                  </select>
+                </div>
+            </div>
+            <div className="header-right">
+              <button 
+                className="header-btn notification-btn"
+                onClick={ () => onClickToGoToAlarm() }
+              >
+                <span className="notification-icon"></span>
+                <span className="notification-badge"></span>
+              </button>
+              {
+              /*
+              <button className="header-btn profile-btn" id="profileBtn">
+                  <span className="profile-icon">👤</span>
+              </button>
+              */
+              }
+            </div>
+          </div>
+        }
+        {
+          (headerType === HeaderType.Alim) &&
+          <div className="header-content sub">
+            <div className="header-center">{ headerTitle }</div>
+            <div className="header-right">
+              <button 
+                className="header-btn notification-btn"
+                onClick={ () => onClickToGoToAlarm() }
+              >
+                  <span className="notification-icon"></span>
+                  <span className="notification-badge"></span>
+              </button>
+            </div>
+          </div>
+        }
+        {
+          (headerType === HeaderType.LeftArrow) && 
+          <div className="header-content">
+            <div className="header-left">
+              <button className="header-btn">
+                <img 
+                  src={ IMAGE_ROOT + '/ico_back.svg' }
+                  alt="뒤로가기"
+                  onClick={ () => handleBack() }
+                />
+              </button>
+            </div>
+            <div className="header-center">{ headerTitle }</div>
+          </div>
+        }
+        {
+          (headerType === HeaderType.RightClose) && 
+          <div className="header-content sub">
+            <div className="header-center">{ headerTitle }</div>
+            <div className="header-right">
+              <button className="header-btn">
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => handleClose() }
+                />
+              </button>
+            </div>
+          </div>
+        }
+        </header>
+      }
+    </>
+  );
+};