141 lines
4.0 KiB
TypeScript
141 lines
4.0 KiB
TypeScript
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,
|
|
favoriteEdit
|
|
}: 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 }
|
|
favoriteEdit={ favoriteEdit }
|
|
></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">
|
|
<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>
|
|
}
|
|
</>
|
|
);
|
|
};
|