계좌성명조회

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -26,6 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { snackBar } from '@/shared/lib';
+import { AccountHolderSearchDetail } from '@/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail';
 
 export const AccountHolderSearchPage = () => {
   const { navigate } = useNavigate();
@@ -52,8 +53,8 @@ export const AccountHolderSearchPage = () => {
   const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
   const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
   const [detailTid, setDetailTid] = useState<string>('');
-  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 
   useSetHeaderTitle(t('additionalService.services.accountHolderSearch'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -173,11 +174,13 @@ export const AccountHolderSearchPage = () => {
     setResultStatus(val);
   };
 
-  const setDetailDate = (detailData: DetailData) => {
+  const setDetailData = (detailData: DetailData) => {
     setDetailOn(detailData.detailOn);
-    setDetailTid(detailData.tid);
-    if(detailData?.serviceCode) {
-      setDetailServiceCode(detailData?.serviceCode);
+    if(detailData.mid){
+      setDetailMid(detailData.mid);
+    }
+    if(detailData.tid){
+      setDetailTid(detailData.tid);
     }
   }
 
@@ -259,8 +262,9 @@ export const AccountHolderSearchPage = () => {
               </div>
             </div>
             <AccountHolderSearchList
-              listItems={listItems}
-              mid={mid}
+              listItems={ listItems }
+              mid={ mid }
+              setDetailData={ setDetailData }
             ></AccountHolderSearchList>
             <div ref={setTarget}></div>
           </div>
@@ -284,7 +288,12 @@ export const AccountHolderSearchPage = () => {
         setBank={setBank}
         setResultStatus={setResultStatus}
       ></AccountHolderSearchFilter>
-
+      <AccountHolderSearchDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        mid={ detailMid }
+        tid={ detailTid }
+      ></AccountHolderSearchDetail>
       <EmailBottomSheet
         bottomSheetOn={emailBottomSheetOn}
         setBottomSheetOn={setEmailBottomSheetOn}