Refactor additional service filters and update related pages

- Move filter components to separate ars/filter and payout directories
- Update additional service types and list item component
- Modify page routes and path constants

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/additional-service/payout/list-page.tsx

@@ -23,15 +23,17 @@ import {
 import moment from 'moment';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { useExtensionPayoutExcelMutation } from '@/entities/additional-service/api/payout/use-extension-payout-excel-mutation';
-import { PayoutFilter } from '@/entities/additional-service/ui/filter/payout-filter';
+import { PayoutFilter } from '@/entities/additional-service/ui/payout/filter/payout-filter';
 import { getPayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/model/payout/constant';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { useTranslation } from 'react-i18next';
-import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { PayoutList } from '@/entities/additional-service/ui/payout/payout-list';
+import { PayoutDetail } from '@/entities/additional-service/ui/payout/detail/payout-detail';
 
 export const PayoutListPage = () => {
   // Access check
@@ -56,22 +58,26 @@ export const PayoutListPage = () => {
   const [maxAmount, setMaxAmount] = useState<number | undefined>();
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
+  const [detailTid, setDetailTid] = useState<string>('');
+
   const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
   const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
           setOnActionIntersect(false);
           callList('page');
-        } 
+        }
       }
     });
   };
 
-	const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
+  const { setTarget } = useIntersectionObserver({
+    threshold: 1,
+    onIntersect
   });
 
   useSetHeaderTitle(t('additionalService.payout.title'));
@@ -96,41 +102,41 @@ export const PayoutListPage = () => {
       minAmount: minAmount,
       maxAmount: maxAmount,
       page: {
-				...pageParam,
-				...{ sortType: sortType }
-			}
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
     };
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
       listParams.page.cursor = null;
     }
 
     extensionPayoutList(listParams).then((rs: ExtensionPayoutListResponse) => {
-      if(type === 'page'){
+      if (type === 'page') {
         setListItems([
           ...listItems,
           ...rs.content
         ]);
       }
-      else{
+      else {
         setListItems(rs.content);
       }
-			if(rs.hasNext 
+      if (rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
         setPageParam({
           ...pageParam,
           ...{ cursor: rs.nextCursor }
         });
       }
-      else{
+      else {
         setPageParam({
           ...pageParam,
           ...{ cursor: null }
         });
       }
       setOnActionIntersect(
-        !!rs.hasNext 
+        !!rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
       );
@@ -155,6 +161,17 @@ export const PayoutListPage = () => {
     }
     setEmailBottomSheetOn(false);
   };
+
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if (detailData.mid) {
+      setDetailMid(detailData.mid);
+    }
+    if (detailData.tid) {
+      setDetailTid(detailData.tid);
+    }
+  };
+
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
@@ -276,7 +293,7 @@ export const PayoutListPage = () => {
               </div>
             </section>
 
-            <section className="filter-section">
+            <div className="filter-section">
               <SortTypeBox
                 sortType={sortType}
                 onClickToSort={onClickToSort}
@@ -294,11 +311,15 @@ export const PayoutListPage = () => {
                   }
                 </div>
               </div>
-            </section>
-            <section className="transaction-list">
-              { getListDateGroup() }
-            </section>
-            <div ref={ setTarget }></div>
+            </div>
+            <PayoutList
+              additionalServiceCategory={AdditionalServiceCategory.Payout}
+              listItems={listItems}
+              searchDateType={searchDateType}
+              mid={mid}
+              setDetailData={setDetailData}
+            ></PayoutList>
+            <div ref={setTarget}></div>
             <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
@@ -326,6 +347,13 @@ export const PayoutListPage = () => {
         setMinAmount={setMinAmount}
         setMaxAmount={setMaxAmount}
       ></PayoutFilter>
+      <PayoutDetail
+      detailOn={detailOn}
+      setDetailOn={setDetailOn}
+      mid={detailMid}
+      tid={detailTid}
+      >
+      </PayoutDetail>
       <EmailBottomSheet
         bottomSheetOn={emailBottomSheetOn}
         setBottomSheetOn={setEmailBottomSheetOn}