refactor: Home 페이지 app route 구조 개선

app/(home)/@feed/(feed)/@following/page.tsx

@@ -0,0 +1,7 @@
+export const runtime = "edge";
+
+const FollowingPage = () => {
+  return <div>Following Page</div>;
+};
+
+export default FollowingPage;

app/(home)/@feed/(feed)/@global/page.tsx

@@ -0,0 +1,22 @@
+import { Feed } from "components/(home)/@feed/feed";
+import { ARTICLES_PER_PAGE, INITIAL_PAGE } from "constants/articles";
+import { articleRepository } from "repositories/article";
+
+type Props = {
+  searchParams: Record<string, string>;
+};
+
+export const runtime = "edge";
+
+const GlobalPage = async ({ searchParams }: Props) => {
+  const page = Number(searchParams.page) || INITIAL_PAGE;
+
+  const { articles, articlesCount } = await articleRepository.findAll({
+    offset: (page - 1) * ARTICLES_PER_PAGE,
+    limit: ARTICLES_PER_PAGE,
+  });
+
+  return <Feed articles={articles} total={articlesCount} />;
+};
+
+export default GlobalPage;

app/(home)/@feed/(feed)/layout.tsx

@@ -0,0 +1,29 @@
+import type { PropsWithChildren, ReactNode } from "react";
+
+import { Tabs } from "components/shared/ui/tabs";
+
+const enum FeedType {
+  GLOBAL = "global",
+  FOLLOWING = "following",
+}
+
+type Props = {
+  global: ReactNode;
+  following: ReactNode;
+};
+
+const FeedLayout = ({ global, following }: PropsWithChildren<Props>) => {
+  return (
+    <Tabs.Root defaultValue={FeedType.GLOBAL}>
+      <Tabs.List>
+        <Tabs.Trigger value={FeedType.FOLLOWING}>Following Feed</Tabs.Trigger>
+        <Tabs.Trigger value={FeedType.GLOBAL}>Global Feed</Tabs.Trigger>
+      </Tabs.List>
+
+      <Tabs.Content value={FeedType.FOLLOWING}>{following}</Tabs.Content>
+      <Tabs.Content value={FeedType.GLOBAL}>{global}</Tabs.Content>
+    </Tabs.Root>
+  );
+};
+
+export default FeedLayout;

app/(home)/@feed/(feed)/loading.tsx

@@ -0,0 +1,7 @@
+import { Loader } from "components/shared/loader";
+
+const FeedLoading = () => {
+  return <Loader />;
+};
+
+export default FeedLoading;

components/(home)/side-bar/side-bar.tsx → app/(home)/@tags/(tags)/layout.tsx

@@ -1,15 +1,14 @@
-import { Tags } from "components/shared/ui/tags";
+import type { PropsWithChildren } from "react";
 
-export const SideBar = () => {
+const TagsLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="absolute left-[100%] top-[52px] pl-10">
       <div className="w-56 rounded-md bg-zinc-100 px-3 py-2">
         <p className="mb-3 text-base font-medium text-zinc-800">Popular Tags</p>
-
-        <Tags.Root as="div">
-          <Tags.Item as="a">tag</Tags.Item>
-        </Tags.Root>
+        {children}
       </div>
     </div>
   );
 };
+
+export default TagsLayout;

app/(home)/@tags/(tags)/page.tsx

@@ -0,0 +1,20 @@
+import { Tags } from "components/shared/ui/tags";
+import { tagRepository } from "repositories/tag";
+
+export const runtime = "edge";
+
+const TagsPage = async () => {
+  const { tags } = await tagRepository.findAll();
+
+  return (
+    <Tags.Root as="div">
+      {tags.map((tag) => (
+        <Tags.Item key={tag} as="a">
+          {tag}
+        </Tags.Item>
+      ))}
+    </Tags.Root>
+  );
+};
+
+export default TagsPage;

app/(home)/layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+import { Banner } from "components/(home)/banner";
+
+type Props = {
+  feed: ReactNode;
+  tags: ReactNode;
+};
+
+const HomeLayout = ({ feed, tags }: Props) => {
+  return (
+    <>
+      <Banner />
+
+      <div className="flex justify-center">
+        <div className="page relative">
+          <div className="pt-4">{feed}</div>
+
+          {tags}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HomeLayout;

components/(home)/@feed/article-item/index.ts

@@ -0,0 +1 @@
+export { ArticleItem } from "./article-item";

components/(home)/@feed/articles/articles.tsx

@@ -0,0 +1,17 @@
+import type { Article } from "models/article";
+
+import { ArticleItem } from "../article-item";
+
+type Props = {
+  articles: Article[];
+};
+
+export const Articles = ({ articles }: Props) => {
+  return (
+    <div className="flex flex-col">
+      {articles.map((article) => (
+        <ArticleItem key={article.slug} article={article} />
+      ))}
+    </div>
+  );
+};

components/(home)/@feed/articles/index.ts

@@ -0,0 +1 @@
+export { Articles } from "./articles";

components/(home)/@feed/feed.tsx

@@ -0,0 +1,18 @@
+import type { Article } from "models/article";
+
+import { Articles } from "./articles";
+import { ArticlesPagination } from "./articles-pagination";
+
+type Props = {
+  articles: Article[];
+  total: number;
+};
+
+export const Feed = ({ articles, total }: Props) => {
+  return (
+    <div className="flex flex-col gap-10">
+      <Articles articles={articles} />
+      <ArticlesPagination articlesCount={total} />
+    </div>
+  );
+};