refactor: 이벤트핸들러 함수 따로 분리

sprint-team3 · Mar 22, 2024 · 85f0a73 · 85f0a73
1 parent 4e5cf67
commit 85f0a73
Showing 1 changed file with 8 additions and 21 deletions.
diff --git a/src/components/mypage/MyPosts/index.tsx b/src/components/mypage/MyPosts/index.tsx
@@ -53,6 +53,10 @@ const MyPosts = () => {
 
   const pageSize = getPostPageSize(currentDeviceType);
 
+  const handleClickPage = (pageNumber: number) => setPage(pageNumber);
+  const handleSelectFilter = (selectedId: string) => setSelectFilter({ category: selectedId });
+  const handleOptionChange = (value: string | number) => setSortOption((prev) => ({ ...prev, order: value as Order }));
+
   const { pagedDataList, totalCount } = useProcessedDataList({
     initialDataList: MockApiResponse.activities,
     selectFilter,
@@ -72,26 +76,14 @@ const MyPosts = () => {
           <span className={cx('selected-game-count')}>{totalCount}</span>
         </h2>
         <div className={cx('dropdown', 'sm-only')}>
-          <Dropdown
-            options={dropdownOptions}
-            onChange={(value) => setSortOption((prev) => ({ ...prev, order: value as Order }))}
-            isSmall
-          />
+          <Dropdown options={dropdownOptions} onChange={handleOptionChange} isSmall />
         </div>
       </div>
       <div className={cx('card-area')}>
         <div className={cx('filter-sort')}>
-          <Filter
-            items={GAME_FILTERS}
-            selectedFilterId={selectFilter.category}
-            onChange={(selectedId) => setSelectFilter({ category: selectedId })}
-          />
+          <Filter items={GAME_FILTERS} selectedFilterId={selectFilter.category} onChange={handleSelectFilter} />
           <div className={cx('dropdown', 'sm-hidden')}>
-            <Dropdown
-              options={dropdownOptions}
-              onChange={(value) => setSortOption((prev) => ({ ...prev, order: value as Order }))}
-              isSmall
-            />
+            <Dropdown options={dropdownOptions} onChange={handleOptionChange} isSmall />
           </div>
         </div>
         {totalCount ? (
@@ -113,12 +105,7 @@ const MyPosts = () => {
           <EmptyCard text='No Post' />
         )}
       </div>
-      <Pagination
-        totalCount={totalCount}
-        pageState={page}
-        postPerPage={pageSize}
-        onClick={(pageNumber) => setPage(pageNumber)}
-      />
+      <Pagination totalCount={totalCount} pageState={page} postPerPage={pageSize} onClick={handleClickPage} />
     </div>
   );
 };