#90

Reviewed-on: #350

.gitea/ISSUE_TEMPLATE.md

@@ -1,11 +1,3 @@
----
-name: 'Codex task'
-about: 'Codex に実装させるための課題'
-title: ''
-labels:
-  - codex-ready
----
-
 ## 背景
 
 なぜ必要か。

backend/app/controllers/application_controller.rb

@@ -1,4 +1,7 @@
 class ApplicationController < ActionController::API
+  rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
+  rescue_from ActiveRecord::RecordNotUnique, with: :render_record_not_unique
+
   before_action :reject_banned_ip_address!
   before_action :authenticate_user
   before_action :reject_banned_user!
@@ -25,6 +28,29 @@ class ApplicationController < ActionController::API
     end
   end
 
+  def render_bad_request message = 'リクエストが不正です．', field: nil, code: :bad_request
+    render_error(:bad_request, message, field:, code:)
+  end
+
+  def render_unprocessable_entity message = '入力を確認してください．', field: nil, code: :invalid
+    render_error(:unprocessable_entity, message, field:, code:)
+  end
+
+  def render_error status, message, field: nil, code: status
+    error = { code: code.to_s, message: }
+    error[:field] = field.to_s if field.present?
+
+    render json: { errors: [error] }, status:
+  end
+
+  def render_record_invalid error
+    render_validation_error error.record
+  end
+
+  def render_record_not_unique _error = nil
+    render_validation_error base: ['すでに存在してゐます．']
+  end
+
   def reject_banned_ip_address!
     ip_address = IpAddress.find_by(ip_address: IPAddr.new(request.remote_ip).hton)
     return unless ip_address&.banned?
@@ -37,4 +63,28 @@ class ApplicationController < ActionController::API
 
     head :forbidden
   end
+
+  def render_validation_error record = nil, fields: { }, base: [], status: :unprocessable_entity
+    errors = { }
+
+    if record
+      record.errors.each do |error|
+        errors[error.attribute] ||= []
+        errors[error.attribute] << error.message
+      end
+    end
+
+    fields.each do |attr, messages|
+      errors[attr.to_sym] ||= []
+      errors[attr.to_sym].concat(Array(messages))
+    end
+
+    base_errors = Array(base) + Array(errors.delete(:base))
+
+    render json: { type: 'validation_error',
+                   message: '入力内容を確認してください．',
+                   errors:,
+                   base_errors: },
+           status:
+  end
 end

backend/app/controllers/deerjikists_controller.rb

@@ -2,7 +2,8 @@ class DeerjikistsController < ApplicationController
   def show
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
 
     deerjikist = Deerjikist
                  .joins(:tag)
@@ -22,7 +23,9 @@ class DeerjikistsController < ApplicationController
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
     tag_id = params[:tag_id].to_i
-    return head :bad_request if platform.blank? || code.blank? || tag_id <= 0
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
+    return render_bad_request('tag_id が不正です．', field: :tag_id) if tag_id <= 0
 
     deerjikist = Deerjikist.find_or_initialize_by(platform:, code:).tap do |d|
       d.tag_id = tag_id
@@ -38,7 +41,8 @@ class DeerjikistsController < ApplicationController
 
     platform = params[:platform].to_s.strip
     code = params[:code].to_s.strip
-    return head :bad_request if platform.blank? || code.blank?
+    return render_bad_request('platform は必須です．', field: :platform) if platform.blank?
+    return render_bad_request('code は必須です．', field: :code) if code.blank?
 
     Deerjikist.find([platform, code]).destroy!
 

backend/app/controllers/materials_controller.rb

@@ -40,7 +40,8 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -54,7 +55,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url), status: :created
     else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_model_errors(material)
     end
   end
 
@@ -68,7 +69,8 @@ class MaterialsController < ApplicationController
     tag_name_raw = params[:tag].to_s.strip
     file = params[:file]
     url = params[:url].to_s.strip.presence
-    return head :bad_request if tag_name_raw.blank? || (file.blank? && url.blank?)
+    return render_bad_request('タグは必須です．', field: :tag) if tag_name_raw.blank?
+    return render_bad_request('ファイルまたは URL は必須です．') if file.blank? && url.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
     tag = tag_name.tag
@@ -84,7 +86,7 @@ class MaterialsController < ApplicationController
     if material.save
       render json: MaterialRepr.base(material, host: request.base_url)
     else
-      render json: { errors: material.errors.full_messages }, status: :unprocessable_entity
+      render_model_errors(material)
     end
   end
 

backend/app/controllers/nico_tags_controller.rb

@@ -30,12 +30,14 @@ class NicoTagsController < ApplicationController
     id = params[:id].to_i
 
     tag = Tag.find(id)
-    return head :bad_request unless tag.nico?
+    return render_bad_request('ニコニコ・タグを指定してください．', field: :id) unless tag.nico?
 
     linked_tag_names = params[:tags].to_s.split
     linked_tags = Tag.normalise_tags!(linked_tag_names, with_tagme: false,
                                                         with_no_deerjikist: false)
-    return head :bad_request if linked_tags.any? { |t| t.nico? }
+    if linked_tags.any? { |t| t.nico? }
+      return render_bad_request('ニコニコ・タグ同士は連携できません．', field: :tags)
+    end
 
     ApplicationRecord.transaction do
       TagVersioning.record_tag_snapshots!(linked_tags, created_by_user: current_user)

backend/app/controllers/posts_controller.rb

@@ -44,7 +44,7 @@ class PostsController < ApplicationController
         filtered_posts
         .joins("LEFT JOIN (#{ pt_max_sql }) pt_max ON pt_max.post_id = posts.id")
         .reselect('posts.*', Arel.sql("#{ updated_at_all_sql } AS updated_at_all"))
-        .preload(tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+        .preload(:uploaded_user, tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
         .with_attached_thumbnail
 
     q = q.where('posts.url LIKE ?', "%#{ url }%") if url
@@ -95,7 +95,9 @@ class PostsController < ApplicationController
   end
 
   def random
-    post = filtered_posts.preload(tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+    post = filtered_posts.preload(:uploaded_user,
+                                  tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+                         .with_attached_thumbnail
                          .order('RAND()')
                          .first
     return head :not_found unless post
@@ -104,12 +106,24 @@ class PostsController < ApplicationController
   end
 
   def show
-    post = Post.includes(tags: [:deerjikists, :materials, { tag_name: :wiki_page }]).find_by(id: params[:id])
+    post =
+        Post
+        .includes(:uploaded_user, tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
+        .with_attached_thumbnail
+        .find_by(id: params[:id])
     return head :not_found unless post
 
-    render json: PostRepr.base(post, current_user)
-                         .merge(tags: build_tag_tree_for(post.tags),
-                                related: PostRepr.many(post.related(limit: 20)))
+    parent_posts = post.parents.with_attached_thumbnail.order(:id).to_a
+    child_posts = post.children.with_attached_thumbnail.order(:id).to_a
+    sibling_posts = sibling_posts_by_parent(parent_posts.map(&:id))
+    related = post.related(limit: 20).to_a
+
+    render json: PostRepr.detail(post, current_user,
+                                 parent_posts:,
+                                 child_posts:,
+                                 sibling_posts:,
+                                 related:)
+                         .merge(tags: build_tag_tree_for(post.tags))
   end
 
   def create
@@ -148,11 +162,11 @@ class PostsController < ApplicationController
     post.reload
     render json: PostRepr.base(post), status: :created
   rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_validation_error fields: { tags: 'ニコニコ・タグは直接指定できません．' }
   rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_validation_error fields: { parent_post_ids: [e.message] }
   rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_post_form_record_invalid e.record
   end
 
   def viewed
@@ -175,10 +189,10 @@ class PostsController < ApplicationController
 
     force = bool?(:force)
     merge = bool?(:merge)
-    return head :bad_request if force && merge
+    return render_bad_request('force と merge は同時に指定できません．') if force && merge
 
     base_version_no = parse_base_version_no
-    return head :bad_request if !(force) && !(base_version_no)
+    return render_bad_request('base_version_no は必須です．', field: :base_version_no) if !(force) && !(base_version_no)
 
     title = params[:title].presence
     tag_names = params[:tags].to_s.split
@@ -238,11 +252,11 @@ class PostsController < ApplicationController
     json['tags'] = build_tag_tree_for(post.tags)
     render json:, status: :ok
   rescue Tag::NicoTagNormalisationError
-    head :bad_request
+    render_validation_error fields: { tags: ['ニコニコ・タグは直接指定できません．'] }
   rescue ArgumentError => e
-    render json: { errors: [e.message] }, status: :unprocessable_entity
+    render_validation_error fields: { parent_post_ids: [e.message] }
   rescue ActiveRecord::RecordInvalid => e
-    render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+    render_post_form_record_invalid e.record
   end
 
   def changes
@@ -385,7 +399,7 @@ class PostsController < ApplicationController
       return nil unless tag
 
       if path.include?(tag_id)
-        return TagRepr.base(tag).merge(children: [])
+        return TagRepr.inline(tag).merge(children: [])
       end
 
       if memo.key?(tag_id)
@@ -397,12 +411,26 @@ class PostsController < ApplicationController
 
       children = child_ids.filter_map { |cid| build_node.(cid, new_path) }
 
-      memo[tag_id] = TagRepr.base(tag).merge(children:)
+      memo[tag_id] = TagRepr.inline(tag).merge(children:)
     end
 
     root_ids.filter_map { |id| build_node.call(id, []) }
   end
 
+  def sibling_posts_by_parent parent_post_ids
+    return { } if parent_post_ids.blank?
+
+    implications =
+        PostImplication
+        .where(parent_post_id: parent_post_ids)
+        .includes(post: { thumbnail_attachment: :blob })
+        .order(:parent_post_id, :post_id)
+
+    implications.group_by(&:parent_post_id).transform_values { |items|
+      items.map(&:post)
+    }
+  end
+
   def parse_parent_post_ids
     raise ArgumentError, 'parent_post_ids は必須です．' unless params.key?(:parent_post_ids)
 
@@ -416,7 +444,7 @@ class PostsController < ApplicationController
 
   def sync_parent_posts! post, parent_post_ids
     if parent_post_ids.include?(post.id)
-      post.errors.add(:base, '自分自身を親投稿にはできません．')
+      post.errors.add :parent_post_ids, '自分自身を親投稿にはできません．'
       raise ActiveRecord::RecordInvalid, post
     end
 
@@ -424,7 +452,8 @@ class PostsController < ApplicationController
     missing_ids = parent_post_ids - existing_ids
 
     if missing_ids.present?
-      post.errors.add(:base, "存在しない親投稿 ID があります: #{ missing_ids.join(' ') }")
+      post.errors.add :parent_post_ids,
+                      "存在しない親投稿 ID があります: #{ missing_ids.join(' ') }"
       raise ActiveRecord::RecordInvalid, post
     end
 
@@ -640,4 +669,14 @@ class PostsController < ApplicationController
 
     merged.uniq.sort
   end
+
+  def render_post_form_record_invalid record
+    if e.record.is_a?(TagName) || e.record.is_a?(Tag)
+      render_validation_error(fields: { tags: e.record.errors.full_messages.map { |message|
+        "タグ名 “#{ e.record.name }”: #{ message }"
+      } })
+    else
+      render_validation_error(record)
+    end
+  end
 end

backend/app/controllers/preview_controller.rb

@@ -4,7 +4,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return head :bad_request unless url.present?
+    return render_bad_request('URL は必須です．', field: :url) unless url.present?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -16,7 +16,7 @@ class PreviewController < ApplicationController
 
     render json: { title: title }
   rescue => e
-    render json: { error: e.message }, status: :bad_request
+    render_bad_request(e.message, field: :url)
   end
 
   def thumbnail
@@ -25,7 +25,7 @@ class PreviewController < ApplicationController
     return head :unauthorized unless current_user
 
     url = params[:url]
-    return head :bad_request if url.blank?
+    return render_bad_request('URL は必須です．', field: :url) if url.blank?
 
     unless url.start_with?(/http(s)?:\/\//)
       url = 'http://' + url
@@ -40,7 +40,8 @@ class PreviewController < ApplicationController
       File.delete(path) rescue nil
       send_file image.path, type: 'image/png', disposition: 'inline'
     else
-      render json: { error: 'Failed to generate thumbnail' }, status: :internal_server_error
+      render_error(:internal_server_error, 'サムネールを生成できませんでした．',
+                   code: :thumbnail_generation_failed)
     end
   end
 end

backend/app/controllers/tag_children_controller.rb

@@ -5,11 +5,12 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || child_id.blank?
+    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
+    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?
 
     ApplicationRecord.transaction do
       TagVersioning.ensure_snapshot!(child, created_by_user: current_user)
@@ -27,11 +28,12 @@ class TagChildrenController < ApplicationController
 
     parent_id = params[:parent_id]
     child_id = params[:child_id]
-    return head :bad_request if parent_id.blank? || child_id.blank?
+    return render_bad_request('parent_id は必須です．', field: :parent_id) if parent_id.blank?
+    return render_bad_request('child_id は必須です．', field: :child_id) if child_id.blank?
 
     parent = Tag.find(parent_id)
     child = Tag.find(child_id)
-    return head :bad_request if parent.nico? || child.nico?
+    return render_bad_request('ニコニコ・タグの階層は変更できません．') if parent.nico? || child.nico?
 
     ApplicationRecord.transaction do
       TagVersioning.ensure_snapshot!(child, created_by_user: current_user)

backend/app/controllers/tags_controller.rb

@@ -168,7 +168,7 @@ class TagsController < ApplicationController
 
   def show_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -192,7 +192,7 @@ class TagsController < ApplicationController
 
   def deerjikists_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, tag_name: :wiki_page)
@@ -228,7 +228,7 @@ class TagsController < ApplicationController
 
   def materials_by_name
     name = params[:name].to_s.strip
-    return head :bad_request if name.blank?
+    return render_bad_request('name は必須です．', field: :name) if name.blank?
 
     tag = Tag.joins(:tag_name)
              .includes(:tag_name, :materials, tag_name: :wiki_page)
@@ -247,17 +247,16 @@ class TagsController < ApplicationController
 
     name = params[:name].to_s.strip
     category = params[:category].to_s.strip
-    return head :unprocessable_entity if name.blank? || category.blank?
+    return render_unprocessable_entity('名前は必須です．', field: :name) if name.blank?
+    return render_unprocessable_entity('カテゴリは必須です．', field: :category) if category.blank?
 
     if name != tag.name &&
         tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico])
-      return render json: { error: 'システム・タグの名称は変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('システム・タグの名称は変更できません．', field: :name)
     end
 
     if tag.nico? || category == 'nico'
-      return render json: { error: 'ニコタグは変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
     end
 
     alias_names = params[:aliases].to_s.split.uniq
@@ -302,8 +301,7 @@ class TagsController < ApplicationController
     tag = Tag.find(params[:id])
 
     if tag.nico? || (category.present? && category == 'nico')
-      return render json: { error: 'ニコタグは変更できません．' },
-                    status: :unprocessable_entity
+      return render_unprocessable_entity('ニコタグは変更できません．', field: :category)
     end
 
     ApplicationRecord.transaction do

backend/app/controllers/theatre_comments_controller.rb

@@ -15,7 +15,7 @@ class TheatreCommentsController < ApplicationController
     return head :unauthorized unless current_user
 
     content = params[:content]
-    return head :unprocessable_entity if content.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :content) if content.blank?
 
     theatre = Theatre.find_by(id: params[:theatre_id])
     return head :not_found unless theatre

backend/app/controllers/users_controller.rb

@@ -42,12 +42,12 @@ class UsersController < ApplicationController
     return head :unauthorized if user&.id != params[:id].to_i
 
     name = params[:name]
-    return head :bad_request if name.blank?
+    return render_bad_request('名前は必須です．', field: :name) if name.blank?
 
     if user.update(name:)
       render json: user.slice(:id, :name, :inheritance_code, :role), status: :ok
     else
-      render json: user.errors, status: :unprocessable_entity
+      render_model_errors(user)
     end
   end
 

backend/app/controllers/wiki_pages_controller.rb

@@ -46,7 +46,7 @@ class WikiPagesController < ApplicationController
 
   def diff
     id = params[:id]
-    return head :bad_request if id.blank?
+    return render_bad_request('id は必須です．', field: :id) if id.blank?
 
     from = params[:from].presence
     to = params[:to].presence
@@ -56,7 +56,7 @@ class WikiPagesController < ApplicationController
     from_rev = from && page.wiki_revisions.find(from)
     to_rev = to ? page.wiki_revisions.find(to) : page.current_revision
     if ((from_rev && !(from_rev.content?)) || !(to_rev&.content?))
-      return head :unprocessable_entity
+      return render_unprocessable_entity('差分を表示できない版です．')
     end
 
     diffs = Diff::LCS.sdiff(from_rev&.body&.lines || [], to_rev.body.lines)
@@ -89,7 +89,8 @@ class WikiPagesController < ApplicationController
     body = params[:body].to_s
     message = params[:message].presence
 
-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?
 
     tag_name = TagName.find_undiscard_or_create_by!(name: title)
 
@@ -101,8 +102,10 @@ class WikiPagesController < ApplicationController
             message:)
 
     render json: WikiPageRepr.base(page), status: :created
-  rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotUnique
-    head :unprocessable_entity
+  rescue ActiveRecord::RecordInvalid => e
+    render_model_errors(e.record)
+  rescue ActiveRecord::RecordNotUnique
+    render_record_not_unique
   end
 
   def update
@@ -112,7 +115,8 @@ class WikiPagesController < ApplicationController
     title = params[:title]&.strip
     body = params[:body].to_s
 
-    return head :unprocessable_entity if title.blank? || body.blank?
+    return render_unprocessable_entity('タイトルは必須です．', field: :title) if title.blank?
+    return render_unprocessable_entity('本文は必須です．', field: :body) if body.blank?
 
     page = WikiPage.find(params[:id])
     base_revision_id = params[:base_revision_id].presence

backend/app/models/post.rb

@@ -94,7 +94,7 @@ class Post < ApplicationRecord
     return if !(f) || !(b)
 
     if f >= b
-      errors.add :original_created_before, 'オリジナルの作成日時の順番がをかしぃです．'
+      errors.add :original_created_at, 'オリジナルの作成日時の順番がをかしぃです．'
     end
   end
 

backend/app/representations/post_repr.rb

@@ -2,20 +2,65 @@
 
 
 module PostRepr
-  BASE = { include: { tags: TagRepr::BASE, uploaded_user: UserRepr::BASE },
-           methods: [:parent_posts, :child_posts, :sibling_posts] }.freeze
+  BASE_FIELDS = [
+      :id,
+      :version_no,
+      :url,
+      :title,
+      :thumbnail_base,
+      :original_created_from,
+      :original_created_before,
+      :created_at,
+      :updated_at
+  ].freeze
 
   module_function
 
   def base post, current_user = nil
-    json = post.as_json(BASE)
-    return json.merge(viewed: false) unless current_user
+    json = common(post)
+    json['tags'] = tag_json(post.tags)
+    json['uploaded_user'] = post.uploaded_user && UserRepr.base(post.uploaded_user)
+    json['viewed'] = current_user ? current_user.viewed?(post) : false
+    json
+  end
 
-    viewed = current_user.viewed?(post)
-    json.merge(viewed:)
+  def detail post, current_user = nil, parent_posts: [], child_posts: [],
+             sibling_posts: { }, related: []
+    base(post, current_user).merge(
+        'parent_posts' => cards(parent_posts),
+        'child_posts' => cards(child_posts),
+        'sibling_posts' => sibling_posts.transform_keys(&:to_s).transform_values { |posts|
+          cards(posts)
+        },
+        'related' => cards(related))
+  end
+
+  def card post
+    common(post).merge('parent_posts' => [], 'child_posts' => [])
+  end
+
+  def cards posts
+    posts.map { |post| card(post) }
   end
 
   def many posts, current_user = nil
     posts.map { |p| base(p, current_user) }
   end
+
+  def common post
+    BASE_FIELDS.to_h { |field| [field.to_s, post.public_send(field)] }
+               .merge('thumbnail' => thumbnail_url(post))
+  end
+
+  def tag_json tags
+    tags.map { |tag| TagRepr.inline(tag) }
+  end
+
+  def thumbnail_url post
+    return nil unless post.thumbnail.attached?
+
+    Rails.application.routes.url_helpers.rails_blob_url(post.thumbnail, only_path: false)
+  rescue
+    nil
+  end
 end

backend/app/representations/tag_repr.rb

@@ -12,5 +12,9 @@ module TagRepr
                             parents: tag.parents.map { _1.as_json(BASE) })
   end
 
+  def inline tag
+    tag.as_json(BASE).merge(aliases: [], parents: [])
+  end
+
   def many(tags) = tags.map { |t| base(t) }
 end

backend/spec/requests/error_responses_spec.rb

@@ -0,0 +1,47 @@
+require 'rails_helper'
+
+RSpec.describe 'error responses', type: :request do
+  describe 'manual input errors' do
+    it 'returns a stable errors array for bad requests' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: '   ' }
+
+      expect(response).to have_http_status(:bad_request)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'bad_request',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+
+    it 'returns a stable errors array for unprocessable requests' do
+      member = create(:user, :member)
+      tag = create(:tag, :general, name: 'error_response_tag')
+      sign_in_as(member)
+
+      patch "/tags/#{ tag.id }", params: { category: 'nico' }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to contain_exactly(
+          include('code' => 'invalid',
+                  'field' => 'category',
+                  'message' => be_present))
+    end
+  end
+
+  describe 'model validation errors' do
+    it 'returns field, code, and message for model errors' do
+      user = create(:user)
+      sign_in_as(user)
+
+      put "/users/#{ user.id }", params: { name: 'a' * 256 }
+
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(json.fetch('errors')).to include(
+          include('code' => 'too_long',
+                  'field' => 'name',
+                  'message' => be_present))
+    end
+  end
+end

backend/spec/requests/posts_spec.rb

@@ -57,6 +57,23 @@ RSpec.describe 'Posts API', type: :request do
     post_write_params({ base_version_no: base_version.version_no }.merge(params))
   end
 
+  def count_sql_queries
+    count = 0
+
+    callback = lambda do |_name, _started, _finished, _id, payload|
+      next if payload[:cached]
+      next if ['SCHEMA', 'TRANSACTION'].include?(payload[:name])
+
+      count += 1
+    end
+
+    ActiveSupport::Notifications.subscribed(callback, 'sql.active_record') do
+      yield
+    end
+
+    count
+  end
+
   let!(:tag_name) { TagName.create!(name: 'spec_tag') }
   let!(:tag)      { Tag.create!(tag_name: tag_name, category: :general) }
 
@@ -558,6 +575,59 @@ RSpec.describe 'Posts API', type: :request do
           expect(sibling_ids).to include(sibling_post.id)
         end
       end
+
+      it 'does not issue a query per tag or related post' do
+        user = create_member_user!
+
+        tags =
+            15.times.map do |i|
+              tag_name = TagName.create!(name: "show_query_tag_#{ i }")
+              tag = Tag.create!(tag_name:, category: :general)
+              TagName.create!(name: "show_query_alias_#{ i }", canonical: tag_name)
+              PostTag.create!(post: post_record, tag:)
+              tag
+            end
+
+        tags.each_cons(2) do |parent_tag, child_tag|
+          TagImplication.create!(parent_tag:, tag: child_tag)
+        end
+
+        parent_post = Post.create!(
+          title: 'query parent post',
+          url: 'https://example.com/query-parent-post'
+        )
+        sibling_post = Post.create!(
+          title: 'query sibling post',
+          url: 'https://example.com/query-sibling-post'
+        )
+        child_post = Post.create!(
+          title: 'query child post',
+          url: 'https://example.com/query-child-post'
+        )
+
+        PostImplication.create!(post: post_record, parent_post:)
+        PostImplication.create!(post: sibling_post, parent_post:)
+        PostImplication.create!(post: child_post, parent_post: post_record)
+
+        20.times do |i|
+          related_post = Post.create!(
+            title: "query related post #{ i }",
+            url: "https://example.com/query-related-post-#{ i }"
+          )
+          PostSimilarity.create!(post: post_record,
+                                 target_post: related_post,
+                                 cos: 1.0 - (i / 100.0))
+        end
+
+        query_count =
+            count_sql_queries do
+              get "/posts/#{ post_record.id }",
+                  headers: { 'X-Transfer-Code' => user.inheritance_code }
+            end
+
+        expect(response).to have_http_status(:ok)
+        expect(query_count).to be <= 45
+      end
     end
 
     context 'when post does not exist' do

docs/commands.md

@@ -18,12 +18,13 @@ npm install
 npm run dev
 npm run build
 npm run lint
-npm test
+npm run test
+npm run test:run
 ```
 
 ### Full verification
 
 ```sh
 cd backend && bundle exec rspec
-cd ../frontend && npm run build && npm run lint
+cd ../frontend && npm run test:run && npm run build && npm run lint
 ```

frontend/eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'tailwind.config.js'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

frontend/package.json

@@ -8,6 +8,8 @@
     "build": "tsc -b && vite build",
     "postbuild": "node scripts/generate-sitemap.js",
     "lint": "eslint .",
+    "test": "vitest",
+    "test:run": "vitest run",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -45,6 +47,10 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/axios": "^0.14.4",
     "@types/markdown-it": "^14.1.2",
     "@types/mdx": "^2.0.13",
@@ -58,11 +64,13 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.13",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.5"
   },
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "main": "eslint.config.js",

frontend/src/App.tsx

@@ -93,7 +93,7 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 }
 
 
-export default (() => {
+const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
 
@@ -156,4 +156,6 @@ export default (() => {
 	  </DialogueProvider>
 	</BrowserRouter>
       </>)
-}) satisfies FC
+}
+
+export default App

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -19,7 +19,7 @@ type Props = {
     sp?:              boolean }
 
 
-export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }: Props) => {
+const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
   const dndId = `tag-node:${ pathKey }`
 
   const downPosRef = useRef<{ x: number; y: number } | null> (null)
@@ -96,4 +96,6 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }:
 	  <TagLink tag={tag} nestLevel={nestLevel}/>
 	</motion.div>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default DraggableDroppableTagRow

frontend/src/components/ErrorScreen.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import { describe, expect, it } from 'vitest'
+
+import ErrorScreen from '@/components/ErrorScreen'
+
+describe ('ErrorScreen', () => {
+  it.each ([
+    [403, '権限ないよ（笑）'],
+    [404, 'ページないよ（笑）'],
+    [500, '鯖でエラー出たって（嘲笑）'],
+    [503, '鯖死んでるよ（泣）'],
+  ]) ('renders status %s', (status, message) => {
+    render (
+        <HelmetProvider>
+          <ErrorScreen status={status}/>
+        </HelmetProvider>,
+    )
+
+    expect (screen.getByText (String (status))).toBeInTheDocument ()
+    expect (screen.getByText (message)).toBeInTheDocument ()
+    expect (screen.getByAltText ('逃げたギター')).toBeInTheDocument ()
+  })
+
+  it ('throws for unsupported statuses', () => {
+    expect (() => render (
+        <HelmetProvider>
+          <ErrorScreen status={418}/>
+        </HelmetProvider>,
+    )).toThrow ()
+  })
+})

frontend/src/components/ErrorScreen.tsx

@@ -10,7 +10,7 @@ import type { FC } from 'react'
 type Props = { status: number }
 
 
-export default (({ status }: Props) => {
+const ErrorScreen: FC<Props> = ({ status }) => {
   const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
     switch (status)
     {
@@ -58,4 +58,6 @@ export default (({ status }: Props) => {
 	  <p className="mr-[-.5em]">{message}</p>
 	</div>
       </MainArea>)
-}) satisfies FC<Props>
+}
+
+export default ErrorScreen

frontend/src/components/MaterialSidebar.tsx

@@ -31,7 +31,7 @@ const setChildrenById = (
     }))
 
 
-export default (() => {
+const MaterialSidebar: FC = () => {
   const [tags, setTags] = useState<TagWithDepth[]> ([])
   const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
   const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
@@ -94,4 +94,6 @@ export default (() => {
 	  {renderTags (tags)}
 	</ul>
       </SidebarComponent>)
-}) satisfies FC
+}
+
+export default MaterialSidebar

frontend/src/components/MenuSeparator.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react'
 
 
-export default (() => (
+const MenuSeparator: FC = () => (
     <>
       <span className="hidden md:inline flex items-center px-2">|</span>
       <hr className="block md:hidden w-full opacity-25
 		     border-t border-black dark:border-white"/>
-    </>)) satisfies FC
+    </>)
+
+export default MenuSeparator

frontend/src/components/PostEditForm.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostEditForm from '@/components/PostEditForm'
+import { buildPost, buildTag } from '@/test/factories'
+
+const postsApi = vi.hoisted (() => ({
+  updatePost: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (() => false),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => ({
+    choice: vi.fn (),
+  }),
+}))
+
+describe ('PostEditForm', () => {
+  it ('submits edited post fields with the current base version', async () => {
+    const onSave = vi.fn ()
+    const post = buildPost ({
+      id:        8,
+      versionNo: 4,
+      title:     'old',
+      tags:      [
+        buildTag ({ name: 'general-tag', category: 'general' }),
+        buildTag ({ id: 2, name: 'nico-tag', category: 'nico' }),
+      ],
+      parentPosts: [buildPost ({ id: 2, title: 'parent' })],
+    })
+    postsApi.updatePost.mockResolvedValueOnce ({
+      ...post,
+      versionNo: 5,
+      title:     'new',
+      tags:      [buildTag ({ name: 'new-tag' })],
+    })
+
+    render (<PostEditForm post={post} onSave={onSave}/>)
+
+    const [title, parentIds] = screen.getAllByRole ('textbox')
+    fireEvent.change (title, { target: { value: 'new' } })
+    fireEvent.change (parentIds, { target: { value: '3 4' } })
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (postsApi.updatePost).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            id:            8,
+            title:         'new',
+            parentPostIds: '3 4',
+            tags:          'general-tag',
+          }),
+          { baseVersionNo: 4 },
+      )
+    })
+    expect (onSave).toHaveBeenCalledWith (expect.objectContaining ({ versionNo: 5 }))
+    expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
+  })
+})

frontend/src/components/PostEditForm.tsx

@@ -2,16 +2,24 @@ import { useEffect, useState } from 'react'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
+import { isApiError } from '@/lib/api'
+import { extractValidationError } from '@/lib/apiErrors'
 import { updatePost } from '@/lib/posts'
+import { inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
+import type { FieldErrors } from '@/lib/apiErrors'
 import type { Post, Tag } from '@/types'
 
+type PostFormField =
+    'parentPostId' | 'tags' | 'originalCreatedFrom' | 'originalCreatedBefore'
+
 
 const tagsToStr = (tags: Tag[]): string => {
   const result: Tag[] = []
@@ -32,8 +40,10 @@ type Props = { post:    Post
 	       onSave:  (newPost: Post) => void }
 
 
-export default (({ post, onSave }: Props) => {
+const PostEditForm: FC<Props> = ({ post, onSave }) => {
+  const [baseErrors, setBaseErrors] = useState<string[]> ([])
   const [disabled, setDisabled] = useState (false)
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors> ({ })
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
   const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -46,6 +56,9 @@ export default (({ post, onSave }: Props) => {
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
+    setFieldErrors ({ })
+    setBaseErrors ([])
+
     try
     {
       const data = await updatePost (...args)
@@ -62,11 +75,22 @@ export default (({ post, onSave }: Props) => {
     }
     catch (e)
     {
-      const response = (e as any)?.response
+      const response = isApiError<{ mergeable?: boolean }> (e) ? e.response : undefined
 
       if (response?.status !== 409)
 	{
-	  toast ({ description: '更新はできなかったよ……' })
+	  const validationError = extractValidationError<PostFormField> (e)
+
+	  if (validationError)
+	    {
+	      setFieldErrors (validationError.fieldErrors)
+	      setBaseErrors (validationError.baseErrors)
+	      toast ({ description: '更新はできなかったよ……' })
+	      return
+	    }
+
+	  toast ({ title: '失敗……', description: '入力を確認してください．' })
+
 	  return
 	}
 
@@ -121,33 +145,41 @@ export default (({ post, onSave }: Props) => {
 
   return (
       <form onSubmit={handleSubmit} className="max-w-xl pt-2 space-y-4">
+	<FieldError messages={baseErrors}/>
+
 	{/* タイトル */}
 	<div>
 	  <Label>タイトル</Label>
 	  <input
 	      type="text"
 	      disabled={disabled}
-	      className="w-full border rounded p-2"
+	      className={inputClass ()}
 	      value={title ?? ''}
 	      onChange={ev => setTitle (ev.target.value)}/>
 	</div>
 
 	{/* 親投稿 */}
 	<div>
-	  <Label>親投稿</Label>
+	  <Label invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}>
+	    親投稿
+	  </Label>
 	  <input
 	      type="text"
 	      disabled={disabled}
 	      value={parentPostIds}
 	      onChange={e => setParentPostIds (e.target.value)}
-	      className="w-full border p-2 rounded"/>
+	      aria-invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}
+	      className={inputClass (fieldErrors.parentPostIds
+				     && fieldErrors.parentPostIds.length > 0)}/>
+	  <FieldError messages={fieldErrors.parentPostIds}/>
 	</div>
 
 	{/* タグ */}
 	<PostFormTagsArea
 	    disabled={disabled}
 	    tags={tags}
-	    setTags={setTags}/>
+	    setTags={setTags}
+	    errors={fieldErrors.tags}/>
 
 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
@@ -155,13 +187,14 @@ export default (({ post, onSave }: Props) => {
 	    originalCreatedFrom={originalCreatedFrom}
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
-	    setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	    setOriginalCreatedBefore={setOriginalCreatedBefore}
+	    errors={fieldErrors.originalCreatedAt}/>
 
 	{/* 送信 */}
-	<Button
-	    type="submit"
-	    disabled={disabled}>
+	<Button type="submit" disabled={disabled}>
 	  更新
 	</Button>
       </form>)
-}) satisfies FC<Props>
+}
+
+export default PostEditForm

frontend/src/components/PostEmbed.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostEmbed from '@/components/PostEmbed'
+import { buildPost } from '@/test/factories'
+
+const dialogue = vi.hoisted (() => ({
+  confirm: vi.fn (),
+}))
+
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => dialogue,
+}))
+
+vi.mock ('@/components/NicoViewer', () => ({
+  default: ({ id }: { id: string }) => <div>Nico:{id}</div>,
+}))
+
+vi.mock ('react-youtube', () => ({
+  default: ({ videoId }: { videoId: string }) => <div>YouTube:{videoId}</div>,
+}))
+
+describe ('PostEmbed', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('embeds nicovideo watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.nicovideo.jp/watch/sm12345' })}/>)
+
+    expect (screen.getByText ('Nico:sm12345')).toBeInTheDocument ()
+  })
+
+  it ('embeds x/twitter status URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://x.com/someone/status/12345' })}/>)
+
+    expect (screen.getByRole ('link', { name: '@someone' })).toBeInTheDocument ()
+  })
+
+  it ('embeds youtube watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.youtube.com/watch?v=abc123' })}/>)
+
+    expect (screen.getByText ('YouTube:abc123')).toBeInTheDocument ()
+  })
+
+  it ('asks before framing unknown external pages', async () => {
+    dialogue.confirm.mockResolvedValueOnce (true)
+    render (
+        <PostEmbed
+            post={buildPost ({ url: 'https://example.com/page', title: 'external' })}/>,
+    )
+
+    fireEvent.click (screen.getByRole ('link', { name: '外部ページを表示' }))
+
+    await waitFor (() => {
+      expect (dialogue.confirm).toHaveBeenCalled ()
+    })
+    expect (await screen.findByTitle ('external')).toHaveAttribute (
+        'src',
+        'https://example.com/page',
+    )
+  })
+})

frontend/src/components/PostEmbed.tsx

@@ -16,8 +16,9 @@ type Props = {
     onMetadataChange?:  (meta: NiconicoMetadata) => void }
 
 
-export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
+const PostEmbed: FC<Props> = ({ ref, post, onLoadComplete, onMetadataChange }) => {
   const dialogue = useDialogue ()
+  const [framed, setFramed] = useState (false)
 
   const url = new URL (post.url)
 
@@ -44,7 +45,7 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
   case 'twitter.com':
   case 'x.com':
     {
-      const mUserId = url.pathname.match (/(?<=\/)[^\/]+?(?=\/|$|\?)/)
+      const mUserId = url.pathname.match (/(?<=\/)[^/]+?(?=\/|$|\?)/)
       const mStatusId = url.pathname.match (/(?<=\/status\/)\d+?(?=\/|$|\?)/)
       if (!(mUserId) || !(mStatusId))
 	break
@@ -72,8 +73,6 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
     }
   }
 
-  const [framed, setFramed] = useState (false)
-
   return (
       <>
 	{framed
@@ -101,4 +100,6 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
 	      </a>
 	    </div>)}
       </>)
-}) satisfies FC<Props>
+}
+
+export default PostEmbed

frontend/src/components/PostFormTagsArea.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostFormTagsArea from '@/components/PostFormTagsArea'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostFormTagsArea', () => {
+  it ('updates text and fetches autocomplete for the selected token', async () => {
+    const setTags = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 3 })])
+
+    renderWithProviders (<PostFormTagsArea tags="虹" setTags={setTags}/>)
+
+    const textarea = screen.getByRole ('textbox')
+    fireEvent.focus (textarea)
+    fireEvent.select (textarea, { target: { selectionStart: 1, selectionEnd: 1 } })
+    fireEvent.change (textarea, { target: { value: '虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹', nico: '0' } },
+      )
+    })
+    expect (setTags).toHaveBeenCalledWith ('虹夏')
+  })
+})

frontend/src/components/PostFormTagsArea.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
+import FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
@@ -33,10 +34,11 @@ const replaceToken = (value: string, start: number, end: number, text: string) =
 
 type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | 'onBlur'> & {
     tags:     string
-    setTags:  (tags: string) => void }
+    setTags:  (tags: string) => void
+    errors?:  string[] }
 
 
-export default (({ tags, setTags, ...rest }: Props) => {
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -74,11 +76,12 @@ export default (({ tags, setTags, ...rest }: Props) => {
 
   return (
       <div className="relative w-full">
-	<Label>タグ</Label>
+	<Label invalid={errors && errors.length > 0}>タグ</Label>
 	<TextArea
 	    {...rest}
 	    ref={ref}
 	    value={tags}
+	    invalid={errors && errors.length > 0}
 	    onChange={ev => setTags (ev.target.value)}
 	    onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
 	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
@@ -96,5 +99,8 @@ export default (({ tags, setTags, ...rest }: Props) => {
 			     : [] as Tag[]}
 		activeIndex={-1}
 		onSelect={handleTagSelect}/>)}
+	<FieldError messages={errors}/>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostFormTagsArea

frontend/src/components/PostList.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostList from '@/components/PostList'
+import { buildPost } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const prefetchers = vi.hoisted (() => ({
+  prefetchForURL: vi.fn (),
+}))
+
+vi.mock ('@/lib/prefetchers', () => prefetchers)
+
+describe ('PostList', () => {
+  beforeEach (() => {
+    prefetchers.prefetchForURL.mockResolvedValue (undefined)
+  })
+
+  it ('renders post thumbnails as links to post details', () => {
+    renderWithProviders (
+        <PostList posts={[
+          buildPost ({ id: 1, title: 'First', thumbnail: 'first.jpg' }),
+          buildPost ({ id: 2, title: null, url: 'https://example.com/second' }),
+        ]}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: 'First' })).toHaveAttribute (
+        'href',
+        '/posts/1',
+    )
+    expect (
+        screen.getByRole ('link', { name: 'https://example.com/second' }),
+    ).toHaveAttribute ('href', '/posts/2')
+  })
+
+  it ('calls the optional click handler', () => {
+    const onClick = vi.fn ()
+    renderWithProviders (<PostList posts={[buildPost ()]} onClick={onClick}/>)
+
+    fireEvent.click (screen.getByRole ('link', { name: 'テスト投稿' }))
+
+    expect (onClick).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/PostList.tsx

@@ -14,7 +14,7 @@ type Props = { posts:     Post[]
 	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-export default (({ posts, onClick }: Props) => {
+const PostList: FC<Props> = ({ posts, onClick }) => {
   const location = useLocation ()
 
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
@@ -70,4 +70,6 @@ export default (({ posts, onClick }: Props) => {
 	      </PrefetchLink>)
 	})}
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostList

frontend/src/components/PostOriginalCreatedTimeField.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+
+describe ('PostOriginalCreatedTimeField', () => {
+  it ('updates from and before values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const inputs = screen.getAllByDisplayValue ('')
+    fireEvent.change (inputs[0], { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (inputs[1], { target: { value: '2026-01-03T03:04' } })
+
+    expect (setFrom).toHaveBeenCalledWith (expect.any (String))
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('infers an exclusive before value on blur', () => {
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={vi.fn ()}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const input = screen.getAllByDisplayValue ('')[0]
+    fireEvent.blur (input, { target: { value: '2026-01-02T03:04' } })
+
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('resets both values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom="2026-01-01T00:00:00Z"
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore="2026-01-02T00:00:00Z"
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const buttons = screen.getAllByRole ('button', { name: 'リセット' })
+    fireEvent.click (buttons[0])
+    fireEvent.click (buttons[1])
+
+    expect (setFrom).toHaveBeenCalledWith (null)
+    expect (setBefore).toHaveBeenCalledWith (null)
+  })
+})

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,4 +1,5 @@
 import DateTimeField from '@/components/common/DateTimeField'
+import { FieldError } from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import { Button } from '@/components/ui/button'
 
@@ -9,21 +10,28 @@ type Props = {
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
-    setOriginalCreatedBefore: (x: string | null) => void }
+    setOriginalCreatedBefore: (x: string | null) => void
+    errors?:                  string[] }
 
 
-export default (({ disabled,
-		   originalCreatedFrom,
-		   setOriginalCreatedFrom,
-		   originalCreatedBefore,
-		   setOriginalCreatedBefore }: Props) => (
+const PostOriginalCreatedTimeField: FC<Props> = (
+    { disabled,
+      originalCreatedFrom,
+      setOriginalCreatedFrom,
+      originalCreatedBefore,
+      setOriginalCreatedBefore,
+      errors }: Props,
+) => (
     <div>
-      <Label>オリジナルの作成日時</Label>
+      <Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
 	      className="mr-2"
 	      disabled={disabled ?? false}
+	      aria-invalid={errors && errors.length > 0}
+	      invalid={errors && errors.length > 0}
 	      value={originalCreatedFrom ?? undefined}
 	      onChange={setOriginalCreatedFrom}
 	      onBlur={ev => {
@@ -51,11 +59,14 @@ export default (({ disabled,
 	  </Button>
 	</div>
       </div>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
 	      className="mr-2"
 	      disabled={disabled}
+	      aria-invalid={errors && errors.length > 0}
+	      invalid={errors && errors.length > 0}
 	      value={originalCreatedBefore ?? undefined}
 	      onChange={setOriginalCreatedBefore}/>
 	  より前
@@ -71,4 +82,8 @@ export default (({ disabled,
 	  </Button>
 	</div>
       </div>
-    </div>)) satisfies FC<Props>
+
+      <FieldError messages={errors}/>
+    </div>)
+
+export default PostOriginalCreatedTimeField

frontend/src/components/RouteBlockerOverlay.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import RouteBlockerOverlay, { useOverlayStore } from '@/components/RouteBlockerOverlay'
+
+describe ('RouteBlockerOverlay', () => {
+  afterEach (() => {
+    useOverlayStore.setState ({ active: false })
+    document.body.style.overflow = ''
+    document.body.removeAttribute ('aria-busy')
+  })
+
+  it ('renders nothing while inactive', () => {
+    useOverlayStore.setState ({ active: false })
+
+    const { container } = render (<RouteBlockerOverlay/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('renders a blocking progressbar and marks the body busy while active', () => {
+    useOverlayStore.setState ({ active: true })
+
+    render (<RouteBlockerOverlay/>)
+
+    expect (screen.getByRole ('progressbar', { name: 'Loading' })).toBeInTheDocument ()
+    expect (document.body).toHaveAttribute ('aria-busy', 'true')
+    expect (document.body.style.overflow).toBe ('hidden')
+  })
+})

frontend/src/components/RouteBlockerOverlay.tsx

@@ -13,7 +13,7 @@ export const useOverlayStore = create<OverlayStore> (set => ({
     setActive:  v => set ({ active: v }) }))
 
 
-export default (() => {
+const RouteBlockerOverlay: FC = () => {
   const active = useOverlayStore (s => s.active)
 
   useEffect (() => {
@@ -43,4 +43,6 @@ export default (() => {
 	  </div>
 	</div>
       </div>)
-}) satisfies FC
+}
+
+export default RouteBlockerOverlay

frontend/src/components/SortHeader.test.tsx

@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import SortHeader from '@/components/SortHeader'
+import { renderWithProviders } from '@/test/render'
+
+describe ('SortHeader', () => {
+  it ('toggles the active sort direction and resets the page', () => {
+    renderWithProviders (
+        <SortHeader
+            by="title"
+            label="タイトル"
+            currentOrder="title:asc"
+            defaultDirection={{ title: 'asc' }}/>,
+        { route: '/posts?tags=x&page=4&order=title%3Aasc' },
+    )
+
+    expect (screen.getByRole ('link', { name: 'タイトル ▲' })).toHaveAttribute (
+        'href',
+        '/posts?tags=x&page=1&order=title%3Adesc',
+    )
+  })
+
+  it ('uses default direction for inactive fields', () => {
+    renderWithProviders (
+        <SortHeader
+            by="updated_at"
+            label="更新"
+            currentOrder="title:desc"
+            defaultDirection={{ title: 'asc', updated_at: 'desc' }}/>,
+        { route: '/posts?page=2' },
+    )
+
+    expect (screen.getByRole ('link', { name: '更新' })).toHaveAttribute (
+        'href',
+        '/posts?page=1&order=updated_at%3Adesc',
+    )
+  })
+})

frontend/src/components/TagDetailSidebar.tsx

@@ -151,7 +151,7 @@ const DropSlot = ({ cat }: { cat: Category }) => {
 type Props = { post: Post; sp?: boolean }
 
 
-export default (({ post, sp }: Props) => {
+const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
@@ -376,4 +376,6 @@ export default (({ post, sp }: Props) => {
 	  </DragOverlay>
 	</DndContext>
       </SidebarComponent>)
-}) satisfies FC<Props>
+}
+
+export default TagDetailSidebar

frontend/src/components/TagLink.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TagLink from '@/components/TagLink'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagLink', () => {
+  it ('links tag names to post search and shows counts', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ name: '虹 夏', postCount: 4 })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '虹 夏' })).toHaveAttribute (
+        'href',
+        '/posts?tags=%E8%99%B9+%E5%A4%8F',
+    )
+    expect (screen.getByText ('4')).toBeInTheDocument ()
+  })
+
+  it ('links wiki markers to the correct detail route', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ hasWiki: true, name: 'a/b' })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '?' })).toHaveAttribute (
+        'href',
+        '/wiki/a%2Fb',
+    )
+  })
+
+  it ('renders aliases and non-link tags when requested', () => {
+    renderWithProviders (
+        <TagLink
+            tag={buildTag ({ matchedAlias: '別名', name: '正式名' })}
+            linkFlg={false}
+            withWiki={false}
+            withCount={false}/>,
+    )
+
+    expect (screen.getByText ('別名')).toBeInTheDocument ()
+    expect (screen.getByText ('正式名')).toBeInTheDocument ()
+    expect (screen.queryByRole ('link')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/TagLink.tsx

@@ -27,12 +27,12 @@ type Props =
     | PropsWithoutLink
 
 
-export default (({ tag,
+const TagLink: FC<Props> = ({ tag,
 		   nestLevel = 0,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
-		   ...props }: Props) => {
+		   ...props }) => {
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -126,4 +126,6 @@ export default (({ tag,
 	{withCount && (
 	    <span className="ml-1">{tag.postCount}</span>)}
       </>)
-}) satisfies FC<Props>
+}
+
+export default TagLink

frontend/src/components/TagSearch.tsx

@@ -12,7 +12,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import type { Tag } from '@/types'
 
 
-export default (() => {
+const TagSearch: FC = () => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
@@ -115,4 +115,6 @@ export default (() => {
 		      activeIndex={activeIndex}
 		      onSelect={handleTagSelect}/>
       </div>)
-}) satisfies FC
+}
+
+export default TagSearch

frontend/src/components/TagSearchBox.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagSearchBox from '@/components/TagSearchBox'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagSearchBox', () => {
+  it ('renders suggestions and selects tags on mouse down', () => {
+    const handleSelect = vi.fn ()
+    const tag = buildTag ({ id: 9, name: '候補', postCount: 2 })
+
+    renderWithProviders (
+        <TagSearchBox suggestions={[tag]} activeIndex={0} onSelect={handleSelect}/>,
+    )
+
+    fireEvent.mouseDown (screen.getByText ('候補'))
+
+    expect (handleSelect).toHaveBeenCalledWith (tag)
+    expect (screen.getByText ('2')).toBeInTheDocument ()
+  })
+
+  it ('renders nothing when suggestions are empty', () => {
+    const { container } = renderWithProviders (
+        <TagSearchBox suggestions={[]} activeIndex={-1} onSelect={vi.fn ()}/>,
+    )
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+})

frontend/src/components/TagSearchBox.tsx

@@ -10,7 +10,7 @@ type Props = { suggestions: Tag[]
 	       onSelect:    (tag: Tag) => void }
 
 
-export default (({ suggestions, activeIndex, onSelect }: Props) => {
+const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
   if (suggestions.length === 0)
     return
 
@@ -26,4 +26,6 @@ export default (({ suggestions, activeIndex, onSelect }: Props) => {
 	      <TagLink tag={tag} linkFlg={false} withWiki={false}/>
 	    </li>))}
       </ul>)
-}) satisfies FC<Props>
+}
+
+export default TagSearchBox

frontend/src/components/TagSidebar.tsx

@@ -19,7 +19,7 @@ type Props = { posts:     Post[]
 	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-export default (({ posts, onClick }: Props) => {
+const TagSidebar: FC<Props> = ({ posts, onClick }) => {
   const navigate = useNavigate ()
 
   const [tagsVsbl, setTagsVsbl] = useState (false)
@@ -126,4 +126,6 @@ export default (({ posts, onClick }: Props) => {
 	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
 	</a>
       </SidebarComponent>)
-}) satisfies FC<Props>
+}
+
+export default TagSidebar

frontend/src/components/TopNav.tsx

@@ -26,7 +26,7 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
     pathName: string }): Menu => {
   const postCount = tag?.postCount ?? 0
 
-  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (pathName) && wikiId)
+  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^/]+/.test (pathName) && wikiId)
   const wikiTitle = pathName.split ('/')[2] ?? ''
 
   const tagFlg = /^\/tags\/\d+/.test (pathName)
@@ -80,7 +80,7 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
 }
 
 
-export default (({ user }: Props) => {
+const TopNav: FC<Props> = ({ user }) => {
   const location = useLocation ()
 
   const dirRef = useRef<(-1) | 1> (1)
@@ -159,12 +159,12 @@ export default (({ user }: Props) => {
   useEffect (() => {
     const unsubscribe = WikiIdBus.subscribe (setWikiId)
     return () => unsubscribe ()
-  }, [activeIdx])
+  }, [])
 
   useEffect (() => {
     setMenuOpen (false)
     setOpenItemIdx (activeIdx)
-  }, [location])
+  }, [activeIdx, location])
 
   return (
       <>
@@ -433,4 +433,6 @@ export default (({ user }: Props) => {
 	      </motion.div>)}
 	</AnimatePresence>
       </>)
-}) satisfies FC<Props>
+}
+
+export default TopNav

frontend/src/components/TopNavUser.test.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TopNavUser from '@/components/TopNavUser'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TopNavUser', () => {
+  it ('renders nothing without a user', () => {
+    const { container } = renderWithProviders (<TopNavUser user={null}/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('links named users to settings', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: '山田' })}/>)
+
+    expect (screen.getByRole ('link', { name: '山田' })).toHaveAttribute (
+        'href',
+        '/users/settings',
+    )
+  })
+
+  it ('uses the anonymous display name', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: null })}/>)
+
+    expect (screen.getByRole ('link', { name: '名もなきニジラー' })).toBeInTheDocument ()
+  })
+})

frontend/src/components/TopNavUser.tsx

@@ -10,7 +10,7 @@ type Props = { user:  User | null,
 	       sp?:   boolean }
 
 
-export default (({ user, sp }: Props) => {
+const TopNavUser: FC<Props> = ({ user, sp }) => {
   if (!(user))
     return
 
@@ -28,4 +28,6 @@ export default (({ user, sp }: Props) => {
 	  {user.name || '名もなきニジラー'}
 	</PrefetchLink>
       </>)
-}) satisfies FC<Props>
+}
+
+export default TopNavUser

frontend/src/components/TwitterEmbed.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TwitterEmbed from '@/components/TwitterEmbed'
+
+describe ('TwitterEmbed', () => {
+  it ('renders tweet and user links', () => {
+    render (<TwitterEmbed userId="user_name" statusId="12345"/>)
+
+    expect (screen.getByRole ('link', { name: '@user_name' })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name?ref_src=twsrc%3Etfw',
+    )
+    expect (screen.getByRole ('link', { name: /\d/ })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name/status/12345?ref_src=twsrc%5Etfw',
+    )
+  })
+})

frontend/src/components/TwitterEmbed.tsx

@@ -5,7 +5,7 @@ type Props = {
     statusId: string }
 
 
-export default (({ userId, statusId }: Props) => {
+const TwitterEmbed: FC<Props> = ({ userId, statusId }) => {
   const now = (new Date).toLocaleDateString ()
 
   return (
@@ -18,4 +18,6 @@ export default (({ userId, statusId }: Props) => {
 	</blockquote>
 	<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"/>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default TwitterEmbed

frontend/src/components/WikiBody.tsx

@@ -25,7 +25,7 @@ const mdComponents = { a: (({ href, children }) => (
 				  </a>))) } as const satisfies Components
 
 
-export default (({ title, body }: Props) => {
+const WikiBody: FC<Props> = ({ title, body }) => {
   const { data } = useQuery ({
       enabled: Boolean (body),
       queryKey: wikiKeys.index ({ }),
@@ -39,4 +39,6 @@ export default (({ title, body }: Props) => {
       <ReactMarkdown components={mdComponents} remarkPlugins={remarkPlugins}>
 	{body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`}
       </ReactMarkdown>)
-}) satisfies FC<Props>
+}
+
+export default WikiBody

frontend/src/components/common/DateTimeField.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DateTimeField from '@/components/common/DateTimeField'
+
+describe ('DateTimeField', () => {
+  it ('renders an ISO value as a datetime-local value', () => {
+    render (<DateTimeField aria-label="日時" value="2026-01-02T03:04:05.000Z"/>)
+
+    const input = screen.getByLabelText ('日時')
+
+    expect (input).toHaveValue ('2026-01-02T12:04')
+  })
+
+  it ('reports local changes as ISO strings and empty values as null', () => {
+    const handleChange = vi.fn ()
+    render (<DateTimeField aria-label="日時" onChange={handleChange}/>)
+
+    const input = screen.getByLabelText ('日時')
+    fireEvent.change (input, { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (input, { target: { value: '' } })
+
+    const first = handleChange.mock.calls[0]?.[0]
+    expect (new Date (first).getFullYear ()).toBe (2026)
+    expect (handleChange).toHaveBeenLastCalledWith (null)
+  })
+})

frontend/src/components/common/DateTimeField.tsx

@@ -22,10 +22,11 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
     value?:     string
     onChange?:  (isoUTC: string | null) => void
     className?: string
-    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void }
+    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void
+    invalid?:   boolean }
 
 
-export default (({ value, onChange, className, onBlur, ...rest }: Props) => {
+const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid, ...rest }) => {
   const [local, setLocal] = useState ('')
 
   useEffect (() => {
@@ -35,13 +36,25 @@ export default (({ value, onChange, className, onBlur, ...rest }: Props) => {
   return (
       <input
 	  {...rest}
-	  className={cn ('border rounded p-2', className)}
+	  className={cn ('border rounded p-2',
+			 (invalid
+			  ? ['border-red-500 bg-red-50 text-red-900',
+			     'focus:border-red-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-red-200',
+			     'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			  : ['border-gray-300',
+			     'focus:border-blue-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-blue-200']),
+			 className)}
 	  type="datetime-local"
 	  value={local}
+	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
 	    onChange?.(v ? (new Date (v)).toISOString () : null)
 	  }}
 	  onBlur={onBlur}/>)
-}) satisfies FC<Props>
+}
+
+export default DateTimeField

frontend/src/components/common/FieldError.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react'
+
+type Props = { messages?: string[] }
+
+
+export const FieldError: FC<Props> = ({ messages }: Props) => {
+  if (!(messages) || messages.length === 0)
+    return null
+
+  return (
+      <ul className="mt-1 space-y-1 text-red-700 dark:text-red-300">
+	{messages.map ((message, i) => <li key={i}>{message}</li>)}
+      </ul>)
+}
+
+
+export default FieldError

frontend/src/components/common/Form.tsx

@@ -3,7 +3,9 @@ import type { FC, ReactNode } from 'react'
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => (
+const Form: FC<Props> = ({ children }) => (
     <div className="max-w-xl mx-auto p-4 space-y-4">
       {children}
-    </div>)) satisfies FC<Props>
+    </div>)
+
+export default Form

frontend/src/components/common/Label.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import Label from '@/components/common/Label'
+
+describe ('Label', () => {
+  it ('renders a plain label', () => {
+    render (<Label>名前</Label>)
+
+    expect (screen.getByText ('名前')).toBeInTheDocument ()
+  })
+
+  it ('renders and toggles the optional checkbox', () => {
+    const handleChange = vi.fn ()
+
+    render (
+        <Label checkBox={{ label: '不明', checked: false, onChange: handleChange }}>
+          日時
+        </Label>,
+    )
+
+    fireEvent.click (screen.getByRole ('checkbox', { name: '不明' }))
+
+    expect (handleChange).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/common/Label.tsx

@@ -1,28 +1,39 @@
 import React from 'react'
 
+import { cn } from '@/lib/utils'
+
+import type { FC } from 'react'
+
 type Props = { children:  React.ReactNode
-               checkBox?: { label:    string
-                            checked:  boolean
-                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+	       checkBox?: { label:    string
+			    checked:  boolean
+			    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+	       invalid?:  boolean }
 
 
-export default ({ children, checkBox }: Props) => {
+const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
+  const labelClassName = cn ('block font-semibold mb-1',
+			     invalid && 'text-red-700 dark:text-red-300')
+
   if (!(checkBox))
     {
       return (
-          <label className="block font-semibold mb-1">
-            {children}
-          </label>)
+	  <label className={labelClassName}>
+	    {children}
+	  </label>)
     }
 
   return (
       <div className="flex gap-2 mb-1">
-        <label className="flex-1 block font-semibold">{children}</label>
-        <label className="flex items-center block gap-1">
-          <input type="checkbox"
-                 checked={checkBox.checked}
-                 onChange={checkBox.onChange}/>
-          {checkBox.label}
-        </label>
+	<label className="flex-1 block font-semibold">{children}</label>
+	<label className="flex items-center block gap-1">
+	  <input type="checkbox"
+		 checked={checkBox.checked}
+		 onChange={checkBox.onChange}/>
+	  {checkBox.label}
+	</label>
       </div>)
 }
+
+
+export default Label

frontend/src/components/common/PageTitle.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import PageTitle from '@/components/common/PageTitle'
+
+
+describe ('PageTitle', () => {
+  it ('renders children as a level 1 heading', () => {
+    render (<PageTitle>Test title</PageTitle>)
+
+    const heading = screen.getByRole ('heading', { level: 1 })
+
+    expect (heading.textContent).toBe ('Test title')
+  })
+})

frontend/src/components/common/PageTitle.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 
+import type { FC } from 'react'
+
 type Props = { children: React.ReactNode }
 
 
-export default ({ children }: Props) => (
+const PageTitle: FC<Props> = ({ children }) => (
     <h1 className="text-2xl font-bold mb-2">
       {children}
     </h1>)
+
+export default PageTitle

frontend/src/components/common/Pagination.test.tsx

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Pagination from '@/components/common/Pagination'
+import { renderWithProviders } from '@/test/render'
+
+describe ('Pagination', () => {
+  it ('builds page links while preserving existing query parameters', () => {
+    renderWithProviders (
+        <Pagination page={3} totalPages={5} siblingCount={1}/>,
+        { route: '/posts?tags=abc&page=3' },
+    )
+
+    expect (screen.getByLabelText ('前のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=2',
+    )
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=4',
+    )
+    expect (screen.getByText ('3')).toHaveAttribute ('aria-current', 'page')
+  })
+
+  it ('does not render active previous and next controls at the edges', () => {
+    const { rerender } = renderWithProviders (
+        <Pagination page={1} totalPages={1}/>,
+        { route: '/tags' },
+    )
+
+    expect (screen.queryByLabelText ('前のページ')).not.toBeInTheDocument ()
+    expect (screen.queryByLabelText ('次のページ')).not.toBeInTheDocument ()
+
+    rerender (<Pagination page={1} totalPages={2}/>)
+
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute ('href', '/tags?page=2')
+  })
+})

frontend/src/components/common/Pagination.tsx

@@ -48,7 +48,7 @@ const getPages = (
 }
 
 
-export default (({ page, totalPages, siblingCount = 3 }) => {
+const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
   const location = useLocation ()
 
   const buildTo = (p: number) => {
@@ -124,4 +124,6 @@ export default (({ page, totalPages, siblingCount = 3 }) => {
 	      </>)}
 	</div>
       </nav>)
-}) satisfies FC<Props>
+}
+
+export default Pagination

frontend/src/components/common/SectionTitle.tsx

@@ -5,7 +5,9 @@ import type { ComponentPropsWithoutRef, FC } from 'react'
 type Props = ComponentPropsWithoutRef<'h2'>
 
 
-export default (({ children, className, ...rest }: Props) => (
+const SectionTitle: FC<Props> = ({ children, className, ...rest }) => (
     <h2 {...rest} className={cn ('text-xl my-4', className)}>
       {children}
-    </h2>)) satisfies FC<Props>
+    </h2>)
+
+export default SectionTitle

frontend/src/components/common/SubsectionTitle.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 
+import type { FC } from 'react'
+
 type Props = { children: React.ReactNode }
 
 
-export default ({ children }: Props) => (
+const SubsectionTitle: FC<Props> = ({ children }) => (
     <h3 className="my-2">
       {children}
     </h3>)
+
+export default SubsectionTitle

frontend/src/components/common/TabGroup.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+
+describe ('TabGroup', () => {
+  it ('uses the init tab and switches tabs when clicked', () => {
+    render (
+        <TabGroup>
+          <Tab name="A">Alpha</Tab>
+          <Tab name="B" init>Beta</Tab>
+        </TabGroup>,
+    )
+
+    expect (screen.queryByText ('Alpha')).not.toBeInTheDocument ()
+    expect (screen.getByText ('Beta')).toBeInTheDocument ()
+
+    fireEvent.click (screen.getByText ('A'))
+
+    expect (screen.getByText ('Alpha')).toBeInTheDocument ()
+    expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/common/TabGroup.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import React, { useState } from 'react'
 import { cn } from '@/lib/utils'
 
@@ -10,7 +12,7 @@ type Props = { children: React.ReactNode }
 export const Tab = ({ children }: TabProps) => <>{children}</>
 
 
-export default ({ children }: Props) => {
+const TabGroup: FC<Props> = ({ children }) => {
   const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
 
   const [current, setCurrent] = useState<number> (() => {
@@ -37,3 +39,5 @@ export default ({ children }: Props) => {
 	</div>
       </div>)
 }
+
+export default TabGroup

frontend/src/components/common/TagInput.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TagInput from '@/components/common/TagInput'
+import { buildTag } from '@/test/factories'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('TagInput', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('updates value and fetches autocomplete for the last token', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
+
+    render (<TagInput value="ぼっち 虹" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'ぼっち 虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹夏' } },
+      )
+    })
+    expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
+  })
+
+  it ('does not fetch when the last token is blank', () => {
+    const setValue = vi.fn ()
+    render (<TagInput value="" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: ' ' } })
+
+    expect (api.apiGet).not.toHaveBeenCalled ()
+    expect (setValue).toHaveBeenCalledWith (' ')
+  })
+})

frontend/src/components/common/TagInput.tsx

@@ -12,7 +12,7 @@ type Props = {
     value:      string
     setValue:   (value: string) => void }
 
-export default (({ value, setValue }: Props) => {
+const TagInput: FC<Props> = ({ value, setValue }) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -62,9 +62,12 @@ export default (({ value, setValue }: Props) => {
     case 'Enter':
       if (activeIndex < 0)
 	break
-      ev.preventDefault ()
-      const selected = suggestions[activeIndex]
-      selected && handleTagSelect (selected)
+      {
+	ev.preventDefault ()
+	const selected = suggestions[activeIndex]
+	if (selected)
+	  handleTagSelect (selected)
+      }
       break
 
     case 'Escape':
@@ -94,4 +97,6 @@ export default (({ value, setValue }: Props) => {
 	    activeIndex={activeIndex}
 	    onSelect={handleTagSelect}/>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default TagInput

frontend/src/components/common/TextArea.tsx

@@ -1,9 +1,25 @@
 import { forwardRef } from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { TextareaHTMLAttributes } from 'react'
 
-type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }
 
 
-export default forwardRef<HTMLTextAreaElement, Props> (({ ...props }, ref) => (
-    <textarea ref={ref} className="rounded border w-full p-2 h-32" {...props}/>))
+export default forwardRef<HTMLTextAreaElement, Props> (
+    ({ className, invalid = false, ...props }, ref) => (
+	<textarea
+	    ref={ref}
+	    aria-invalid={invalid}
+	    className={cn ('rounded border w-full p-2 h-32',
+			   (invalid
+			    ? ['border-red-500 bg-red-50 text-red-900',
+			       'focus:border-red-500 focus:outline-none focus:ring-2',
+			       'foucs:ring-red-200',
+			       'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			    : ['border-gray-300',
+			       'focus:border-blue-500 focus:outline-none focus:ring-2',
+			       'focus:ring-blue-200']),
+			   className)}
+	    {...props}/>))

frontend/src/components/common/TypographyAndForm.test.tsx

@@ -0,0 +1,37 @@
+import { createRef } from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Form from '@/components/common/Form'
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
+import TextArea from '@/components/common/TextArea'
+
+describe ('common typography and form components', () => {
+  it ('renders Form children inside the standard container', () => {
+    render (<Form><span>Content</span></Form>)
+
+    expect (screen.getByText ('Content')).toBeInTheDocument ()
+  })
+
+  it ('renders SectionTitle as an h2', () => {
+    render (<SectionTitle>Section</SectionTitle>)
+
+    expect (screen.getByRole ('heading', { level: 2, name: 'Section' })).toBeInTheDocument ()
+  })
+
+  it ('renders SubsectionTitle as an h3', () => {
+    render (<SubsectionTitle>Subsection</SubsectionTitle>)
+
+    expect (screen.getByRole ('heading', { level: 3, name: 'Subsection' })).toBeInTheDocument ()
+  })
+
+  it ('forwards refs and props to TextArea', () => {
+    const ref = createRef<HTMLTextAreaElement> ()
+
+    render (<TextArea ref={ref} aria-label="Body" defaultValue="text"/>)
+
+    expect (ref.current).toBe (screen.getByLabelText ('Body'))
+    expect (screen.getByLabelText ('Body')).toHaveValue ('text')
+  })
+})

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -57,7 +57,7 @@ let nextDialogueId = 1
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => {
+const DialogueProvider: FC<Props> = ({ children }) => {
   const [queue, setQueue] = useState<DialogueRequest[]> ([])
 
   const push = useCallback ((request: Omit<DialogueRequest, 'id'>) => {
@@ -174,7 +174,7 @@ export default (({ children }: Props) => {
 	      </DialogContent>)}
 	</Dialog>
       </DialogueContext.Provider>)
-}) satisfies FC<Props>
+}
 
 
 export const useDialogue = () => {
@@ -185,3 +185,5 @@ export const useDialogue = () => {
 
   return dialogue
 }
+
+export default DialogueProvider

frontend/src/components/layout/MainArea.tsx

@@ -9,10 +9,12 @@ type Props = {
     className?: string }
 
 
-export default (({ children, className }: Props) => (
+const MainArea: FC<Props> = ({ children, className }) => (
     <motion.main
 	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 	className={cn ('flex-1 overflow-y-auto p-4', className)}
 	layout="position">
       {children}
-    </motion.main>)) satisfies FC<Props>
+    </motion.main>)
+
+export default MainArea

frontend/src/components/layout/SidebarComponent.tsx

@@ -6,7 +6,7 @@ import type { FC, ReactNode } from 'react'
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => (
+const SidebarComponent: FC<Props> = ({ children }) => (
     <motion.div
 	layout="position"
 	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
@@ -27,4 +27,6 @@ export default (({ children }: Props) => (
       </Helmet>
 
       {children}
-    </motion.div>)) satisfies FC<Props>
+    </motion.div>)
+
+export default SidebarComponent

frontend/src/components/ui/use-toast.tsx

@@ -18,13 +18,6 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
 let count = 0
 
 function genId() {
@@ -32,23 +25,21 @@ function genId() {
   return count.toString()
 }
 
-type ActionType = typeof actionTypes
-
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
+      type: "ADD_TOAST"
       toast: ToasterToast
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
+      type: "UPDATE_TOAST"
       toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
+      type: "DISMISS_TOAST"
       toastId?: ToasterToast["id"]
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
+      type: "REMOVE_TOAST"
       toastId?: ToasterToast["id"]
     }
 

frontend/src/components/users/InheritDialogue.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import { useState } from 'react'
 
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
@@ -18,7 +20,7 @@ type Props = { visible:         boolean
 	       setUser:         (user: User) => void }
 
 
-export default ({ visible, onVisibleChange, setUser }: Props) => {
+const InheritDialogue: FC<Props> = ({ visible, onVisibleChange, setUser }) => {
   const dialogue = useDialogue ()
 
   const [inputCode, setInputCode] = useState ('')
@@ -68,3 +70,5 @@ export default ({ visible, onVisibleChange, setUser }: Props) => {
 	</DialogContent>
       </Dialog>)
 }
+
+export default InheritDialogue

frontend/src/components/users/UserCodeDialogue.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { Dialog,
@@ -17,7 +19,7 @@ type Props = { visible:         boolean
 	       setUser:         React.Dispatch<React.SetStateAction<User | null>> }
 
 
-export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+const UserCodeDialogue: FC<Props> = ({ visible, onVisibleChange, user, setUser }) => {
   const dialogue = useDialogue ()
 
   const handleChange = async () => {
@@ -69,3 +71,5 @@ export default ({ visible, onVisibleChange, user, setUser }: Props) => {
 	</DialogContent>
       </Dialog>)
 }
+
+export default UserCodeDialogue

frontend/src/lib/api.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted (() => {
+  const client = {
+    delete: vi.fn (),
+    get:    vi.fn (),
+    patch:  vi.fn (),
+    post:   vi.fn (),
+    put:    vi.fn (),
+  }
+
+  return {
+    client,
+    isAxiosError: vi.fn (),
+  }
+})
+
+vi.mock ('axios', () => ({
+  default: {
+    create:       vi.fn (() => mocks.client),
+    isAxiosError: mocks.isAxiosError,
+  },
+}))
+
+vi.mock ('@/config', () => ({
+  API_BASE_URL: '/api',
+}))
+
+describe ('api helpers', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    localStorage.clear ()
+  })
+
+  it ('adds the transfer code header and camelizes get responses', async () => {
+    localStorage.setItem ('user_code', 'abc123')
+    mocks.client.get.mockResolvedValueOnce ({
+      data: { post_id: 1, nested_value: { created_at: 'now' } },
+    })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<{ postId: number; nestedValue: { createdAt: string } }> (
+        '/posts/1',
+        { headers: { 'X-Extra': '1' }, params: { page: 2 } },
+    )
+
+    expect (mocks.client.get).toHaveBeenCalledWith (
+        '/posts/1',
+        {
+          headers: { 'X-Transfer-Code': 'abc123', 'X-Extra': '1' },
+          params:  { page: 2 },
+        },
+    )
+    expect (data).toEqual ({ postId: 1, nestedValue: { createdAt: 'now' } })
+  })
+
+  it ('passes an empty body for post-like requests when body is omitted', async () => {
+    mocks.client.patch.mockResolvedValueOnce ({ data: { ok_value: true } })
+
+    const { apiPatch } = await import ('@/lib/api')
+    const data = await apiPatch<{ okValue: boolean }> ('/posts/1')
+
+    expect (mocks.client.patch).toHaveBeenCalledWith (
+        '/posts/1',
+        {},
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (data.okValue).toBe (true)
+  })
+
+  it ('does not camelize blob responses', async () => {
+    const blob = new Blob (['csv'])
+    mocks.client.get.mockResolvedValueOnce ({ data: blob })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<Blob> ('/exports', { responseType: 'blob' })
+
+    expect (data).toBe (blob)
+  })
+
+  it ('delegates deletes and exposes axios error detection', async () => {
+    const err = new Error ('bad')
+    mocks.client.delete.mockResolvedValueOnce ({})
+    mocks.isAxiosError.mockReturnValueOnce (true)
+
+    const { apiDelete, isApiError } = await import ('@/lib/api')
+    await apiDelete ('/posts/1')
+
+    expect (mocks.client.delete).toHaveBeenCalledWith (
+        '/posts/1',
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (isApiError (err)).toBe (true)
+    expect (mocks.isAxiosError).toHaveBeenCalledWith (err)
+  })
+})

frontend/src/lib/api.ts

@@ -28,7 +28,7 @@ const apiP = async <T> (
   const res = await client[method] (path, body ?? { }, withUserCode (opt))
   if (opt?.responseType === 'blob')
     return res.data as T
-  return toCamel (res.data as any, { deep: true }) as T
+  return toCamel (res.data as Record<string, unknown>, { deep: true }) as T
 }
 
 
@@ -39,7 +39,7 @@ export const apiGet = async <T> (
   const res = await client.get (path, withUserCode (opt))
   if (opt?.responseType === 'blob')
     return res.data as T
-  return toCamel (res.data as any, { deep: true }) as T
+  return toCamel (res.data as Record<string, unknown>, { deep: true }) as T
 }
 
 
@@ -72,4 +72,5 @@ export const apiDelete = async (
 }
 
 
-export const isApiError = (err: unknown): err is AxiosError => axios.isAxiosError (err)
+export const isApiError = <T = unknown> (err: unknown): err is AxiosError<T> =>
+    axios.isAxiosError (err)

frontend/src/lib/apiErrors.ts

@@ -0,0 +1,31 @@
+import toCamel from 'camelcase-keys'
+
+import { isApiError } from '@/lib/api'
+
+export type FieldErrors<T extends string = string> = Partial<Record<T, string[]>>
+
+export type ValidationError<T extends string = string> =
+    { message:      string
+      fieldErrors:  FieldErrors<T>
+      baseErrors:   string[] }
+
+type RawValidationError = { type?:        string
+			    message?:     string
+			    errors?:      Record<string, string[]>
+			    baseErrors?:  string[] }
+
+
+export const extractValidationError = <T extends string = string> (err: unknown) => {
+  if (!(isApiError (err)) || err.response?.status !== 422)
+    return null
+
+  const data = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			{ deep: true }) as RawValidationError
+
+  if (data.type !== 'validation_error' && !(data.errors))
+    return null
+
+  return { message: data.message ?? '入力内容を確認してください．',
+	   fieldErrors: (data.errors ?? { }) as FieldErrors<T>,
+	   baseErrors: data.baseErrors ?? [] }
+}

frontend/src/lib/posts.test.ts

@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchPostChanges, fetchPosts, toggleViewedFlg, updatePost } from '@/lib/posts'
+
+import type { FetchPostsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiDelete: vi.fn (),
+  apiGet:    vi.fn (),
+  apiPost:   vi.fn (),
+  apiPut:    vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchPostsParams = {
+  url:                 '',
+  title:               '',
+  tags:                '',
+  match:               'all',
+  originalCreatedFrom: '',
+  originalCreatedTo:   '',
+  createdFrom:         '',
+  createdTo:           '',
+  updatedFrom:         '',
+  updatedTo:           '',
+  page:                1,
+  limit:               20,
+  order:               'updated_at:desc',
+}
+
+describe ('posts API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps post search parameters to backend snake_case names', async () => {
+    api.apiGet.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    await fetchPosts ({
+      ...baseParams,
+      title:               'title',
+      tags:                'a b',
+      originalCreatedFrom: '2026-01-01',
+      updatedTo:           '2026-02-01',
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts',
+        {
+          params: {
+            title:                 'title',
+            tags:                  'a b',
+            match:                 'all',
+            original_created_from: '2026-01-01',
+            updated_to:            '2026-02-01',
+            page:                  1,
+            limit:                 20,
+            order:                 'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('updates posts with version and merge controls', async () => {
+    api.apiPut.mockResolvedValueOnce ({ id: 5 })
+
+    await updatePost (
+        {
+          id:                    5,
+          title:                 'new title',
+          tags:                  'tag',
+          parentPostIds:         '1 2',
+          originalCreatedFrom:   null,
+          originalCreatedBefore: '2026-01-02T00:00:00Z',
+        },
+        { baseVersionNo: 7, force: true, merge: false },
+    )
+
+    expect (api.apiPut).toHaveBeenCalledWith (
+        '/posts/5',
+        {
+          title:                   'new title',
+          tags:                    'tag',
+          parent_post_ids:         '1 2',
+          original_created_from:   null,
+          original_created_before: '2026-01-02T00:00:00Z',
+        },
+        {
+          params: {
+            base_version_no: '7',
+            force:           '1',
+            merge:           '0',
+          },
+        },
+    )
+  })
+
+  it ('uses the viewed endpoint method matching the requested state', async () => {
+    await toggleViewedFlg ('9', true)
+    await toggleViewedFlg ('9', false)
+
+    expect (api.apiPost).toHaveBeenCalledWith ('/posts/9/viewed')
+    expect (api.apiDelete).toHaveBeenCalledWith ('/posts/9/viewed')
+  })
+
+  it ('keeps optional post history filters out when blank', async () => {
+    api.apiGet.mockResolvedValueOnce ({ versions: [], count: 0 })
+
+    await fetchPostChanges ({ page: 2, limit: 50 })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts/versions',
+        { params: { page: 2, limit: 50 } },
+    )
+  })
+})

frontend/src/lib/prefetchers.test.ts

@@ -0,0 +1,112 @@
+import { QueryClient } from '@tanstack/react-query'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { prefetchForURL } from '@/lib/prefetchers'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPost:        vi.fn (),
+  fetchPostChanges: vi.fn (),
+  fetchPosts:       vi.fn (),
+}))
+
+const tagsApi = vi.hoisted (() => ({
+  fetchTag:        vi.fn (),
+  fetchTagByName:  vi.fn (),
+  fetchTagChanges: vi.fn (),
+  fetchTags:       vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPage:        vi.fn (),
+  fetchWikiPageByTitle: vi.fn (),
+  fetchWikiPages:       vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/tags', () => tagsApi)
+vi.mock ('@/lib/wiki', () => wikiApi)
+
+const qc = () => new QueryClient ({
+  defaultOptions: { queries: { retry: false } },
+})
+
+describe ('prefetchForURL', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+    postsApi.fetchPost.mockResolvedValue ({ id: 1 })
+    postsApi.fetchPostChanges.mockResolvedValue ({ versions: [], count: 0 })
+    tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
+    tagsApi.fetchTag.mockResolvedValue ({ id: 1 })
+    tagsApi.fetchTagByName.mockResolvedValue (null)
+    tagsApi.fetchTagChanges.mockResolvedValue ({ versions: [], count: 0 })
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    wikiApi.fetchWikiPage.mockResolvedValue ({ id: 1 })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValue (null)
+  })
+
+  it ('prefetches post indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/posts?tags=a+b&match=any&page=2&limit=5&order=title%3Aasc',
+    )
+
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          tags:  'a b',
+          match: 'any',
+          page:  2,
+          limit: 5,
+          order: 'title:asc',
+        }),
+    )
+  })
+
+  it ('prefetches post detail pages', async () => {
+    await prefetchForURL (qc (), 'http://localhost/posts/12')
+
+    expect (postsApi.fetchPost).toHaveBeenCalledWith ('12')
+  })
+
+  it ('prefetches tag indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/tags?post=9&name=x&category=general&page=4&post_count_lte=10',
+    )
+
+    expect (tagsApi.fetchTags).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          post:         9,
+          name:         'x',
+          category:     'general',
+          page:         4,
+          postCountLTE: 10,
+        }),
+    )
+  })
+
+  it ('prefetches wiki show pages and related tag/post data', async () => {
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce ({
+      id:    3,
+      title: 'Actual',
+      body:  'body',
+    })
+
+    await prefetchForURL (qc (), 'http://localhost/wiki/Alias')
+
+    expect (wikiApi.fetchWikiPageByTitle).toHaveBeenCalledWith ('Alias', { version: undefined })
+    expect (wikiApi.fetchWikiPage).toHaveBeenCalledWith ('3', {})
+    expect (tagsApi.fetchTagByName).toHaveBeenCalledWith ('Actual')
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({ tags: 'Actual', limit: 8 }),
+    )
+  })
+
+  it ('ignores routes without a prefetcher', async () => {
+    await prefetchForURL (qc (), 'http://localhost/unknown')
+
+    expect (postsApi.fetchPosts).not.toHaveBeenCalled ()
+    expect (tagsApi.fetchTags).not.toHaveBeenCalled ()
+    expect (wikiApi.fetchWikiPages).not.toHaveBeenCalled ()
+  })
+})

frontend/src/lib/queryKeys.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
+
+describe ('query keys', () => {
+  it ('uses stable namespaces for posts, tags, and wiki', () => {
+    expect (postsKeys.show ('3')).toEqual (['posts', '3'])
+    expect (postsKeys.related ('3')).toEqual (['related', '3'])
+    expect (tagsKeys.deerjikists ('7')).toEqual (['tags', 'deerjikists', '7'])
+    expect (wikiKeys.show ('Title', { version: '2' })).toEqual (
+        ['wiki', 'Title', { version: '2' }],
+    )
+  })
+})

frontend/src/lib/remark-wiki-autolink.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import remarkWikiAutolink from '@/lib/remark-wiki-autolink'
+
+import type { Root } from 'mdast'
+
+describe ('remarkWikiAutolink', () => {
+  it ('links matching wiki page names and prefers longer matches', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [{
+        type:     'paragraph',
+        children: [{ type: 'text', value: '虹夏 and 虹' }],
+      }],
+    }
+
+    remarkWikiAutolink (['虹', '虹夏']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9%E5%A4%8F',
+          children: [{ type: 'text', value: '虹夏' }],
+        },
+        { type: 'text', value: ' and ' },
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9',
+          children: [{ type: 'text', value: '虹' }],
+        },
+      ],
+    })
+  })
+
+  it ('does not link text inside existing links or code', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [
+        {
+          type:     'paragraph',
+          children: [{
+            type:     'link',
+            url:      '/existing',
+            children: [{ type: 'text', value: '虹' }],
+          }],
+        },
+        {
+          type:  'code',
+          value: '虹',
+        },
+      ],
+    }
+
+    remarkWikiAutolink (['虹']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [{
+        type:     'link',
+        url:      '/existing',
+        children: [{ type: 'text', value: '虹' }],
+      }],
+    })
+    expect (tree.children[1]).toMatchObject ({ type: 'code', value: '虹' })
+  })
+})

frontend/src/lib/remark-wiki-autolink.ts

@@ -38,7 +38,7 @@ export default (pageNames: string[], basePath = '/wiki'): ((tree: Root) => void)
 	      let last = 0
 	      const parts: RootContent[] = []
 
-	      while (m = re.exec (value))
+	      while ((m = re.exec (value)) !== null)
 		{
 		  const start = m.index
 		  const end = start + m[0].length
@@ -70,7 +70,7 @@ export default (pageNames: string[], basePath = '/wiki'): ((tree: Root) => void)
 	    }
 	}
 
-      const maybeChidren = (node as any).children
+      const maybeChidren = 'children' in node ? node.children : undefined
       if (Array.isArray (maybeChidren))
 	{
 	  const parent = node as Parent

frontend/src/lib/tags.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchTag, fetchTagByName, fetchTags } from '@/lib/tags'
+
+import type { FetchTagsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchTagsParams = {
+  post:         null,
+  name:         '',
+  category:     null,
+  postCountGTE: 0,
+  postCountLTE: null,
+  createdFrom:  '',
+  createdTo:    '',
+  updatedFrom:  '',
+  updatedTo:    '',
+  page:         1,
+  limit:        30,
+  order:        'updated_at:desc',
+}
+
+describe ('tags API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps tag filters to backend parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ({ tags: [], count: 0 })
+
+    await fetchTags ({
+      ...baseParams,
+      name:         '虹',
+      category:     'character',
+      postCountGTE: 10,
+      postCountLTE: 20,
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/tags',
+        {
+          params: {
+            name:           '虹',
+            category:       'character',
+            post_count_gte: 10,
+            post_count_lte: 20,
+            page:           1,
+            limit:          30,
+            order:          'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('returns null when tag fetches fail', async () => {
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await expect (fetchTag ('1')).resolves.toBeNull ()
+    await expect (fetchTagByName ('unknown')).resolves.toBeNull ()
+  })
+})

frontend/src/lib/users.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+
+import { canEditContent } from '@/lib/users'
+
+import type { UserRole } from '@/types'
+
+const userWithRole = (role: UserRole) => ({ role })
+
+describe ('user permission helpers', () => {
+  it ('allows admins and members to edit content', () => {
+    expect (canEditContent (userWithRole ('admin'))).toBe (true)
+    expect (canEditContent (userWithRole ('member'))).toBe (true)
+  })
+
+  it ('does not allow guests or missing users to edit content', () => {
+    expect (canEditContent (userWithRole ('guest'))).toBe (false)
+    expect (canEditContent (null)).toBe (false)
+    expect (canEditContent (undefined)).toBe (false)
+  })
+})

frontend/src/lib/users.ts

@@ -0,0 +1,7 @@
+import type { User, UserRole } from '@/types'
+
+const CONTENT_EDITOR_ROLES: readonly UserRole[] = ['admin', 'member']
+
+export const canEditContent = (
+    user: Pick<User, 'role'> | null | undefined,
+): boolean => user != null && CONTENT_EDITOR_ROLES.includes (user.role)

frontend/src/lib/utils.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn, originalCreatedAtString, toDate } from '@/lib/utils'
+
+describe ('utils', () => {
+  it ('converts strings to dates and leaves date instances intact', () => {
+    const date = new Date ('2026-01-02T03:04:05Z')
+
+    expect (toDate ('2026-01-02T03:04:05Z')).toBeInstanceOf (Date)
+    expect (toDate (date)).toBe (date)
+  })
+
+  it ('merges conditional Tailwind classes', () => {
+    const hidden = false
+
+    expect (cn ('p-2', hidden && 'hidden', 'p-4')).toBe ('p-4')
+  })
+
+  it ('renders unknown original creation time ranges', () => {
+    expect (originalCreatedAtString (null, null)).toBe ('年月日不詳')
+    expect (
+        originalCreatedAtString (
+            '2026-01-01T00:00:00+09:00',
+            '2026-01-02T00:00:00+09:00',
+        ),
+    ).toContain ('時刻不詳')
+  })
+})

frontend/src/lib/utils.ts

@@ -71,3 +71,15 @@ export const originalCreatedAtString = (
 	       .join (' '))
   return rtn === '〜' ? '年月日不詳' : rtn
 }
+
+
+export const inputClass = (invalid?: boolean, className?: string): string =>
+    cn ('w-full rounded border p-2',
+	(invalid
+	 ? ['border-red-500 bg-red-50 text-red-900',
+	    'placeholder:text-red-300',
+	    'focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-200',
+	    'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+	 : ['border-gray-300',
+	    'focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200']),
+	className)

frontend/src/lib/wiki.test.ts

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchWikiPage, fetchWikiPageByTitle, fetchWikiPages } from '@/lib/wiki'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('wiki API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('fetches wiki index and show pages with expected parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ([])
+    api.apiGet.mockResolvedValueOnce ({ id: 1 })
+
+    await fetchWikiPages ({ title: '虹' })
+    await fetchWikiPage ('1', { version: '3' })
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki',
+        { params: { title: '虹' } },
+    )
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        2,
+        '/wiki/1',
+        { params: { version: '3' } },
+    )
+  })
+
+  it ('encodes title path segments and returns null on misses', async () => {
+    api.apiGet.mockResolvedValueOnce ({ id: 2 })
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await fetchWikiPageByTitle ('a/b c', { version: undefined })
+    await expect (fetchWikiPageByTitle ('missing', {})).resolves.toBeNull ()
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki/title/a%2Fb%20c',
+        { params: { version: undefined } },
+    )
+  })
+})

frontend/src/pages/Forbidden.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={403}/>
+const Forbidden: FC = () => <ErrorScreen status={403}/>
+
+export default Forbidden

frontend/src/pages/MorePage.tsx

@@ -11,7 +11,7 @@ import type { FC } from 'react'
 import type { User } from '@/types'
 
 
-export default (() => {
+const MorePage: FC = () => {
   const menu = menuOutline (
       { tag: null, wikiId: null, user: { } as User, pathName: location.pathname })
 
@@ -43,4 +43,6 @@ export default (() => {
 		  </section>))}
 	    </div>))}
       </MainArea>)
-}) satisfies FC
+}
+
+export default MorePage

frontend/src/pages/NotFound.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={404}/>
+const NotFound: FC = () => <ErrorScreen status={404}/>
+
+export default NotFound

frontend/src/pages/ServiceUnavailable.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={503}/>
+const ServiceUnavailable: FC = () => <ErrorScreen status={503}/>
+
+export default ServiceUnavailable

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
@@ -18,7 +18,7 @@ import type { FC, FormEvent } from 'react'
 import type { Deerjikist, Platform } from '@/types'
 
 
-export default (() => {
+const DeerjikistDetailPage: FC = () => {
   const { id } = useParams ()
   const tagId = String (id ?? '')
   const tagKey = tagsKeys.deerjikists (tagId)
@@ -26,7 +26,7 @@ export default (() => {
   const { data: qData, isLoading: loading } =
       useQuery ({ queryKey: tagKey, queryFn: () => fetchDeerjikistsByTag (tagId) })
   const tag = qData?.tag
-  const deerjikists = qData?.deerjikists ?? []
+  const deerjikists = useMemo (() => qData?.deerjikists ?? [], [qData])
 
   const [data, setData] =
       useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
@@ -152,4 +152,6 @@ export default (() => {
 	    </div>
 	)}
       </MainArea>)
-}) satisfies FC
+}
+
+export default DeerjikistDetailPage

frontend/src/pages/materials/MaterialBasePage.test.tsx

@@ -0,0 +1,26 @@
+import { screen } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialBasePage from '@/pages/materials/MaterialBasePage'
+import { renderWithProviders } from '@/test/render'
+
+vi.mock ('@/components/MaterialSidebar', () => ({
+  default: () => <aside>Material sidebar</aside>,
+}))
+
+describe ('MaterialBasePage', () => {
+  it ('renders the material sidebar and nested route outlet', () => {
+    renderWithProviders (
+        <Routes>
+          <Route path="/materials" element={<MaterialBasePage/>}>
+            <Route index element={<div>Outlet content</div>}/>
+          </Route>
+        </Routes>,
+        { route: '/materials' },
+    )
+
+    expect (screen.getByText ('Material sidebar')).toBeInTheDocument ()
+    expect (screen.getByText ('Outlet content')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/materials/MaterialBasePage.tsx

@@ -5,8 +5,10 @@ import MaterialSidebar from '@/components/MaterialSidebar'
 import type { FC } from 'react'
 
 
-export default (() => (
+const MaterialBasePage: FC = () => (
     <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
       <MaterialSidebar/>
       <Outlet/>
-    </div>)) satisfies FC
+    </div>)
+
+export default MaterialBasePage

frontend/src/pages/materials/MaterialDetailPage.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import { buildMaterial, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+  apiPut: vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPages: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/lib/wiki', () => wikiApi)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+const renderPage = () =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/materials/:id" element={<MaterialDetailPage/>}/>
+      </Routes>,
+      { route: '/materials/8' },
+  )
+
+describe ('MaterialDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    vi.stubGlobal ('fetch', vi.fn (async () => ({
+      blob: async () => new Blob (['image'], { type: 'image/png' }),
+    })))
+  })
+
+  it ('loads and displays material detail', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({
+          id:          8,
+          tag:         buildTag ({ name: '素材タグ' }),
+          file:        'image.png',
+          contentType: 'image/png',
+        }),
+    )
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith ('/materials/8')
+    })
+    expect (await screen.findByAltText ('素材タグ')).toHaveAttribute ('src', 'image.png')
+  })
+
+  it ('submits edited material fields', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'old' }), url: '' }),
+    )
+    api.apiPut.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'new' }) }),
+    )
+
+    renderPage ()
+
+    fireEvent.click (await screen.findByText ('編輯'))
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'new' } })
+    fireEvent.change (textboxes[1], { target: { value: 'https://example.com/ref' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith ('/materials/8', expect.any (FormData))
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('tag')).toBe ('new')
+    expect (formData.get ('url')).toBe ('https://example.com/ref')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '更新成功!' })
+  })
+})

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -21,7 +21,7 @@ import type { Material, Tag } from '@/types'
 type MaterialWithTag = Material & { tag: Tag }
 
 
-export default (() => {
+const MaterialDetailPage: FC = () => {
   const { id } = useParams ()
 
   const [file, setFile] = useState<File | null> (null)
@@ -179,4 +179,6 @@ export default (() => {
 	      </TabGroup>
 	    </>))}
       </MainArea>)
-}) satisfies FC
+}
+
+export default MaterialDetailPage