가맹점관리

src/entities/menu/model/types.ts

@@ -16,6 +16,4 @@ export interface MenuCategoryProps {
   setMenuOn?: (menuOn: boolean) => void;
   editMode?: boolean;
   setChangeMenuId: (menuId?: string) => void;
-  buttonRef: any
-  btnRef?: any;
 };

src/entities/menu/ui/menu-category.tsx

@@ -12,8 +12,7 @@ export const MenuCategory = ({
   subMenu,
   setMenuOn,
   editMode,
-  setChangeMenuId,
-  buttonRef,btnRef
+  setChangeMenuId
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
@@ -40,7 +39,7 @@ export const MenuCategory = ({
         ...userFavorite,
         {
           title: title,
-          img: IMAGE_ROOT + '/ico_menu_0'+randomNum+'.svg',
+          img: `${IMAGE_ROOT}/ico_menu_0${randomNum}.svg`,
           path: path,
           menuId: menuId
         }
@@ -106,7 +105,6 @@ export const MenuCategory = ({
             <li
               key={ `menu-item-key-${i}` }
               onClick={ () => onClickToNavigate(subMenu[i]?.path) }
-              
             >{ subMenu[i]?.menuName }</li>
           ); 
         }
@@ -119,13 +117,8 @@ export const MenuCategory = ({
 
   return (
     <>
-      <div 
-        className={`menu-category ${btnRef? 'ok': 'no'}`}
-        
-      >
-        <div className="category-header"
-          ref={ btnRef || null }
-        >
+      <div className={`menu-category`}>
+        <div className="category-header">
           <div className={ 'category-icon ' + menuIcon }></div>
           <span>{ menuName }</span>
         </div>

src/entities/merchant/model/types.ts

@@ -54,7 +54,7 @@ export enum InfoWrapKeys {
   Escrow = 'Escrow'
 };
 export interface MerchantMidParams {
-  mid: string;
+  mid?: string;
 };
 export interface MerchantMidResponse {
   memberCompanyId?: string;
@@ -82,7 +82,7 @@ export interface MerchantMidResponse {
   accountHolderName?: string;
 };
 export interface MerchantMidStatusParams {
-  mid: string;
+  mid?: string;
 };
 export interface MerchantMidStatusResponse {
   onlineInfomation: OnlineInfomation;

src/entities/merchant/ui/info-wrap.tsx

@@ -8,35 +8,51 @@ import {
   MerchantMidParams,
   MerchantMidResponse
 } from '../model/types';
+import { useStore } from '@/shared/model/store';
 
 export const InfoWrap = () => {
+  const userMids = useStore.getState().UserStore.userMids;
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string | undefined>(userMids[0]);
   const [data, setData] = useState<MerchantMidResponse>();
 
   const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
+  
   const { mutateAsync: merchantMid } = useMerchantMidMutation();
 
-  const callInfo = () => {
+  const callInfo = (selectedMid?: string) => {
     let params: MerchantMidParams = {
-      mid: mid,
+      mid: selectedMid || mid
     };
     merchantMid(params).then((rs: MerchantMidResponse) => {
       setData(rs);
     });
   };
 
+  const onChangeMid = (value: string) => {
+    setMid(value);
+    callInfo(value);
+  };
+
   useEffect(() => {
-    // callInfo();
+    callInfo();
   }, []);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
-        <select>
-          <option value="1">nicetest00g</option>
-          <option value="2">nicetest00g</option>
-          <option value="3">nicetest00g</option>
+        <select
+          onChange={ (e) => onChangeMid(e.target.value) }
+        >
+        { 
+          midOptions.map((value, index) => (
+            <option
+              key={ value.value }
+              value={ value.value }
+            >{ value.name }</option>
+          )) 
+        }  
         </select>
       </div>
 

src/entities/merchant/ui/registration-status-wrap.tsx

@@ -12,10 +12,13 @@ import {
 import { OnlineInfoWrap } from './info-wrap/online-info-wrap';
 import { CardInfoWrap } from './info-wrap/card-info-wrap';
 import { EscrowInfoWrap } from './info-wrap/escrow-info-wrap';
+import { useStore } from '@/shared/model/store';
 
 export const RegistrationStatusWrap = () => {
+  const userMids = useStore.getState().UserStore.userMids;
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string | undefined>(userMids[0]);
   const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
   const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
   const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
@@ -24,9 +27,9 @@ export const RegistrationStatusWrap = () => {
   const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
   const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation();
 
-  const callInfo = () => {
+  const callInfo = (selectedMid?: string) => {
     let params: MerchantMidStatusParams = {
-      mid: mid
+      mid: selectedMid || mid
     };
     merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
       setOnlineInfomation(rs.onlineInfomation);
@@ -36,17 +39,29 @@ export const RegistrationStatusWrap = () => {
     });
   };
 
+  const onChangeMid = (value: string) => {
+    setMid(value);
+    callInfo(value);
+  };
+
   useEffect(() => {
-    // callInfo();
+    callInfo();
   }, []);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
-        <select>
-          <option value="1">nicetest00g</option>
-          <option value="2">nicetest00g</option>
-          <option value="3">nicetest00g</option>
+        <select
+          onChange={ (e) => onChangeMid(e.target.value) }
+        >
+        { 
+          midOptions.map((value, index) => (
+            <option
+              key={ value.value }
+              value={ value.value }
+            >{ value.name }</option>
+          )) 
+        }  
         </select>
       </div>
       <div className="merchant-info">

src/shared/ui/menu/index.tsx

@@ -28,7 +28,7 @@ export const Menu = ({
   const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
 
   const buttonRefs = useRef<Array<HTMLDivElement>>([]);
-  const btnRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
@@ -42,21 +42,6 @@ export const Menu = ({
       behavior: 'smooth'
     });
     */
-   if(index === 1){
-    /*
-    btnRef.current?.scrollTo({
-         top: 300,
-         behavior: "smooth"
-    });
-    */
-    btnRef.current?.scrollIntoView({
-      block: 'start',
-      behavior: 'smooth'
-    });
-    
-   }
-    
-    
   };
   const onClickToMenuClose = () => {
     if(editMode){
@@ -70,7 +55,6 @@ export const Menu = ({
   const getMenuCategory = () => {
     let rs = [];
     for(let i=0;i<MenuItems.length;i++){
-      if(i===1){
       rs.push(
         <MenuCategory
           key={ `menu-category-${i}` }
@@ -81,28 +65,8 @@ export const Menu = ({
           setMenuOn={ setMenuOn }
           editMode={ editMode }
           setChangeMenuId= { setChangeMenuId }
-          buttonRef={ buttonRefs.current[i] }
-          btnRef={ btnRef }
         />
       );
-      }
-      else{
-        rs.push(
-        <MenuCategory
-          key={ `menu-category-${i}` }
-          menuId={ MenuItems[i]?.menuId }
-          menuIcon={ MenuItems[i]?.menuIcon }
-          menuName={ MenuItems[i]?.menuName }
-          subMenu={ MenuItems[i]?.subMenu }
-          setMenuOn={ setMenuOn }
-          editMode={ editMode }
-          setChangeMenuId= { setChangeMenuId }
-          buttonRef={ buttonRefs.current[i] }
-          
-        />
-      );
-      }
-      
     }
     return rs;
   };
@@ -121,13 +85,8 @@ export const Menu = ({
   
   useEffect(() => {
     shortBtnsSetting();
-    const handleScroll = (e: Event) => {
-      // console.log(e, window.scrollY);
-    };
-    window.addEventListener('scroll', handleScroll);
   }, []);
   
-  
   return (
     <>
       <motion.div 
@@ -194,7 +153,10 @@ export const Menu = ({
             </div>
           </div>
             
-          <div className="full-menu-list">
+          <div 
+            className="full-menu-list" 
+            ref={ scrollRef }
+          >
           { getMenuCategory() }
           </div>
         </div>