Atomic Design Pattern 적용기

// index.tsx
function ApplicationsPage() {

  usePropsStoreInitializer((set, get) => ({...
    },
    applicationsForBulkNotify: new Map(),
    handleApplicationForBulkNotifyCheck: (application, checked) => {...
    },

    requestBulkApplicationsNotify: async ({...
    }

    loading: true,
    tableLoading: true,

    deleteApplication: async (deleteApplicationId: number) => {...
    },

    notifyApplication: async (screeningStatus, isNotified, applicationId) => {...
    },

    handleProductIdFilterValueChange: (productIdFilterValue) =>
      set({ productIdFilterValue, currentPage: 1 }),

    handleApplyingStatusFilterValueChange: (applyingStatusFilterValue) =>
      set({ applyingStatusFilterValue, currentPage: 1 }),

    handleScreeningStatusFilterValueChange: (screeningStatusFilterValue) =>
      set({ screeningStatusFilterValue, currentPage: 1 }),

    queryFilterKey: 'name',
    handleQueryFilterKeyChange: (queryFilterKey: QueryKey) =>
      set({ queryFilterKey, queryFilterValue: '', currentPage: 1 }),

    queryFilterValue: '',
    handleQueryFilterValueChange: (queryFilterValue: string) =>
      set({ queryFilterValue, currentPage: 1 }),

    handleOpenedApplicationStatusChange: (openedApplicationStatus) =>
      set({ openedApplicationStatus }),

    updateApplicationStatus: async () => {...
    },

    handleOpenedApplicationEvaluationChange: (openedApplicationEvaluation) =>
      set({ openedApplicationEvaluation }),

    updateApplicationEvaluation: async () => {...
    },

    ...createPaginationState(set),
  }));

  return <Applications />;
}

// Applications.tsx
export function Applications() {
  const [applicationsCount, paginationProps] = usePropsStore((state) => {...
  });
  const PAGE_SECTION_MAXWIDTH = '1600px';
  return (
    <>
      <ApplicationEvaluationModal />
      <ApplicationStatusModal />
      <PageContents.Container>
        <PageContents.Header title="지원현황" itemCount={applicationsCount} />
        <PageContents.Section maxWidth={PAGE_SECTION_MAXWIDTH}>
          <QueryFilters />
        </PageContents.Section>
        <PageContents.Section maxWidth={PAGE_SECTION_MAXWIDTH}>
          <Filters />
        </PageContents.Section>
        <PageContents.Section maxWidth={PAGE_SECTION_MAXWIDTH}>
          <ApplicationTable />
        </PageContents.Section>
        <PageContents.Footer maxWidth={PAGE_SECTION_MAXWIDTH}>
          <PaginationWithPageSize {...paginationProps} />
        </PageContents.Footer>
      </PageContents.Container>
    </>
  );
}

// templates/Filters.tsx
export function Filters() {
  const [
    productIdFilterValue,
    handleProductIdFilterValueChange,
    applyingStatusFilterValue,
    handleApplyingStatusFilterValueChange,
    screeningStatusFilterValue,
    handleScreeningStatusFilterValueChange,
  ] = usePropsStore((state) => [...
  ]);

  const APPLYING_STATUS_FILTER_OPTIONS = [...
  ];

  const SCREENING_STATUS_FILTER_OPTIONS = [...
  ];

  const COMMON_FILTER_PROPS = {...
  };

  return (
    <FormGroup backgroundColor="gray" border={false}>
      <div className={scss.filters_container}>
        <div className={scss.filaters}>
          <ProductSearchbox
            id="교육상품"
            placeholder="모든 교육상품"
            inputWidth="400px"
            productId={productIdFilterValue}
            onChange={(product) => handleProductIdFilterValueChange(product?.id)}
          />
          <ComplexSelectbox
            {...COMMON_FILTER_PROPS}
            id="지원상태"
            options={APPLYING_STATUS_FILTER_OPTIONS}
            placeholder="모든 지원상태"
            value={applyingStatusFilterValue}
            onChange={handleApplyingStatusFilterValueChange}
          />
          <ComplexSelectbox
            id="심사결과"
            {...COMMON_FILTER_PROPS}
            options={SCREENING_STATUS_FILTER_OPTIONS}
            placeholder="모든 심사상태"
            value={screeningStatusFilterValue}
            onChange={handleScreeningStatusFilterValueChange}
          />
        </div>
        <Button
          variant="ghost"
          onClick={() => {
            handleProductIdFilterValueChange();
            handleApplyingStatusFilterValueChange();
            handleScreeningStatusFilterValueChange();
          }}
        >
          모두 초기화
        </Button>
      </div>
    </FormGroup>
  );
}