refactor: destructure loaderData in multiple components for cleaner code

app/routes/_news.category.$code.tsx

@@ -1,5 +1,16 @@
+import { getCategories } from '~/apis/common/get-categories'
 import { NewsCategoriesPage } from '~/pages/news-categories'
 
+import type { Route } from './+types/_news.category.$code'
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: categoriesData } = await getCategories()
+  const categoryData = categoriesData.find(
+    (category) => category.id === params.id,
+  )
+  return { categoryData }
+}
+
 const NewsCategoriesLayout = () => <NewsCategoriesPage />
 
 export default NewsCategoriesLayout