Merged

refactor: use named export for UnauthorizedForm

#23

Jiseoup · Jun 16, 2026refactor/component-named-exports → main

refactor

Overview Commits Files changed

+4 -9 · 3

@@ -1,6 +1,6 @@

import { headers } from "next/headers";

import { getDictionary, defaultLocale, hasLocale } from "@/lib/i18n.server";

-import UnauthorizedForm from "@/components/UnauthorizedForm";

+import { UnauthorizedForm } from "@/components/UnauthorizedForm";

// Standalone page — outside the [lang] layout, so there is no locale param.

// Resolve the locale from Accept-Language, mirroring proxy.ts.

@@ -12,13 +12,7 @@ type Props = {

invalid: string;

};

-export default function UnauthorizedForm({

- title,

- description,

- placeholder,

- submit,

- invalid,

-}: Props) {

+export function UnauthorizedForm({ title, description, placeholder, submit, invalid }: Props) {

const inputRef = useRef<HTMLInputElement>(null);

const [error, setError] = useState(false);

const [submitting, setSubmitting] = useState(false);

@@ -107,7 +107,8 @@ GitHub responses are cached for 60 seconds via `next: { revalidate: 60 }` in `gh

- **Server Components by default** — pages use `async` components for data fetching; interactive components (`FileTree.tsx`, `LangSwitcher.tsx`, `ThemeToggle.tsx`, `FilesChanged.tsx`, `FilesChangedWithTree.tsx`, `SidebarDrawer.tsx`, `BranchSelector.tsx`) are `"use client"`

- **Mobile layout** — all pages must be usable on mobile (≥ 320px). Use `md:` breakpoint prefix for desktop-only styles. The sidebar is hidden on mobile and toggled via `SidebarDrawer.tsx`, which accepts the server-rendered `<Sidebar>` as a prop — this is the App Router pattern for mixing server and client components. Do not add new fixed-width layout elements without a responsive fallback.

-- **i18n** — `lib/i18n.server.ts` loads dictionaries server-side; `lib/i18n.ts` holds types and locale config

+- **Component exports** — components in `components/` use named exports (`export function Foo`). The export shape of Next.js file conventions is dictated by the framework: UI conventions (`page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, `global-error.tsx`) are resolved by their **default export**, so it is mandatory there; `route.ts` and `proxy.ts` are resolved by **named exports** (`GET`/`POST`…, and `proxy`/`config`).

+- **i18n** — `lib/i18n.server.ts` loads dictionaries server-side; `lib/i18n.ts` holds types and locale config. The `/unauthorized` page lives outside `app/[lang]/`, so it has no locale param — it resolves the locale from the `Accept-Language` header (mirroring `proxy.ts`) and passes the strings to a client form. `defaultLocale` is `en`: browsers whose language is neither KO nor EN fall back to English.

- **Syntax highlighting** — `CodeViewer.tsx` uses Shiki with `github-light`/`github-dark` themes, switching based on the `dark` class on `<html>`. Line numbers are rendered via CSS counters on `.code-viewer code .line::before` in `globals.css`.

- **Markdown rendering** — `MarkdownBody.tsx` uses `react-markdown` + `remark-gfm` with custom Tailwind-styled components (no `@tailwindcss/typography`). Use this component for any user-generated Markdown content.

- **Diff view** — `FilesChanged.tsx` renders GitHub-style diffs with per-file and global fold/unfold; it accepts `GhPullFile[]` and a dict slice. `FilesChangedWithTree.tsx` wraps it with a changed-files tree sidebar for navigation, and is what the PR detail and commit detail pages actually import.