feat: add intentional reader routes

src/routes/index.test.tsx

@@ -1,12 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import { Home } from './index'
-
-describe('Home', () => {
-  it('starts without ambient post content', () => {
-    render(<Home />)
-
-    expect(screen.getByText('目的を決めてから開く')).toBeInTheDocument()
-    expect(screen.queryByRole('article')).not.toBeInTheDocument()
-  })
-})

src/routes/index.tsx

@@ -1,13 +1,7 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/')({ component: Home })
-
-export function Home() {
-  return (
-    <main className="landing">
-      <p className="brand">TWITTER LITE</p>
-      <h1>目的を決めてから開く</h1>
-      <p>ユーザー名か検索語を入力するまで、投稿は表示しません。</p>
-    </main>
-  )
-}
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/user', search: { target: '' } })
+  },
+})

src/routes/search.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AppShell } from '#/components/app-shell'
+import { SearchForm } from '#/features/posts/components/search-form'
+import { postSearchRouteSchema } from '#/features/posts/inputs'
+
+export const Route = createFileRoute('/search')({
+  validateSearch: (search) => postSearchRouteSchema.parse(search),
+  component: SearchRoute,
+})
+
+function SearchRoute() {
+  const values = Route.useSearch()
+  const navigate = Route.useNavigate()
+  return (
+    <AppShell active="search">
+      <h1>何を確認しますか？</h1>
+      <p className="intro">入力した条件だけを検索します。</p>
+      <SearchForm
+        initialFollowing={values.following}
+        initialProduct={values.product}
+        initialQuery={values.q}
+        key={`${values.q}:${values.product}:${values.following}`}
+        onSubmit={(search) => navigate({ search })}
+      />
+    </AppShell>
+  )
+}

src/routes/user.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AppShell } from '#/components/app-shell'
+import { UserForm } from '#/features/posts/components/user-form'
+import { userRouteSearchSchema } from '#/features/posts/inputs'
+
+export const Route = createFileRoute('/user')({
+  validateSearch: (search) => userRouteSearchSchema.parse(search),
+  component: UserRoute,
+})
+
+function UserRoute() {
+  const { target } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  return (
+    <AppShell active="user">
+      <h1>誰の投稿を見ますか？</h1>
+      <p className="intro">履歴やおすすめは表示しません。</p>
+      <UserForm
+        initialTarget={target}
+        key={target}
+        onSubmit={(nextTarget) => navigate({ search: { target: nextTarget } })}
+      />
+    </AppShell>
+  )
+}