첫 커밋
This commit is contained in:
focp212@naver.com
101
src/widgets/navigation/footer.tsx
Normal file
101
src/widgets/navigation/footer.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import {
|
||||
FooterProps,
|
||||
FooterItemActiveKey
|
||||
} from '@/entities/common/model/types';
|
||||
|
||||
export const FooterNavigation = ({
|
||||
setMenuOn,
|
||||
footerCurrentPage
|
||||
}: FooterProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const onClickToNavigate = (path?: string) => {
|
||||
if(!!path){
|
||||
navigate(path);
|
||||
}
|
||||
};
|
||||
const onClickToOpenMenu = () => {
|
||||
setMenuOn(true);
|
||||
};
|
||||
|
||||
const buttonItems = [
|
||||
{
|
||||
activeIcon: IMAGE_ROOT + '/home-active.svg',
|
||||
inactiveIcon: IMAGE_ROOT + '/home.svg',
|
||||
path: PATHS.home,
|
||||
activeKey: FooterItemActiveKey.Home,
|
||||
title: '홈'
|
||||
},
|
||||
{
|
||||
activeIcon: IMAGE_ROOT + '/chart-active.svg',
|
||||
inactiveIcon: IMAGE_ROOT + '/chart.svg',
|
||||
path: PATHS.transaction.allTransaction.list,
|
||||
activeKey: FooterItemActiveKey.Transaction,
|
||||
title: '거래조회'
|
||||
},
|
||||
{
|
||||
activeIcon: IMAGE_ROOT + '/money-active.svg',
|
||||
inactiveIcon: IMAGE_ROOT + '/money.svg',
|
||||
path: PATHS.settlement.list,
|
||||
activeKey: FooterItemActiveKey.Settlement,
|
||||
title: '정산내역'
|
||||
},
|
||||
{
|
||||
activeIcon: IMAGE_ROOT + '/users-active.svg',
|
||||
inactiveIcon: IMAGE_ROOT + '/users.svg',
|
||||
path: PATHS.account.user.manage,
|
||||
activeKey: FooterItemActiveKey.Account,
|
||||
title: '사용자관리'
|
||||
},
|
||||
{
|
||||
activeIcon: IMAGE_ROOT + '/more-active.svg',
|
||||
inactiveIcon: IMAGE_ROOT + '/more.svg',
|
||||
title: '더보기'
|
||||
},
|
||||
];
|
||||
|
||||
const getFooterButtonItems = () => {
|
||||
let rs = [];
|
||||
for(let i=0;i<buttonItems.length;i++){
|
||||
rs.push(
|
||||
<button
|
||||
key={ `footer-button-item-${i}` }
|
||||
className={ `tab-button ${((footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? 'active': '')}` }
|
||||
data-tab={ `tab-${i}` }
|
||||
data-active-icon={ buttonItems[i]?.activeIcon }
|
||||
data-inactive-icon={ buttonItems[i]?.inactiveIcon }
|
||||
onClick={ () => {
|
||||
if(!!buttonItems[i]?.path){
|
||||
onClickToNavigate(buttonItems[i]?.path);
|
||||
}
|
||||
else{
|
||||
onClickToOpenMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<div className="tab-icon">
|
||||
<img
|
||||
className="tab-icon-img"
|
||||
src={ (footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? buttonItems[i]?.activeIcon: buttonItems[i]?.inactiveIcon }
|
||||
alt={ buttonItems[i]?.title }
|
||||
/>
|
||||
</div>
|
||||
<span className="tab-text">{ buttonItems[i]?.title }</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="bottom-tabbar">
|
||||
{ getFooterButtonItems() }
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
138
src/widgets/navigation/header.tsx
Normal file
138
src/widgets/navigation/header.tsx
Normal file
@@ -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>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user