첫 커밋

2025-09-05 15:36:48 +09:00
commit 05238b04c1
825 changed files with 176358 additions and 0 deletions
--- a/src/widgets/navigation/footer.tsx
+++ b/src/widgets/navigation/footer.tsx
@@ -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>
+    </>
+  );
+};