フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

AGENTS.md

@@ -84,12 +84,14 @@ cd frontend
 npm run dev
 npm run build
 npm run lint
+npm run test
+npm run test:run
 npm run preview
 ```
 
 `npm run build` runs `tsc -b && vite build`, then `postbuild` runs `node scripts/generate-sitemap.js`.
 
-Do not write or report `npm test` as a repository command unless a `test` script is added to `frontend/package.json`.
+`npm run test` runs Vitest in watch mode. Use `npm run test:run` for a non-watch frontend test run.
 
 ## Coding style
 
@@ -122,13 +124,49 @@ Do not write or report `npm test` as a repository command unless a `test` script
 - Keep page-level code under `frontend/src/pages` and shared UI/feature code under `frontend/src/components` unless existing patterns point elsewhere.
 - Match existing Tailwind, component, and import alias conventions.
 
+### Frontend TSX style
+
+- Preserve the local TSX formatting style. Do not normalize TSX to common Prettier-style React formatting unless explicitly asked.
+- Prefer `const` arrow functions for TypeScript/TSX component and helper declarations.
+- Put two blank lines before and after top-level `const` function declarations, unless imports, exports, or file boundaries make that awkward.
+- In TSX, indent nested tag attributes with one tab relative to the tag line. With the project tab width, this visually appears as 4 spaces.
+- Keep a tag's closing marker on the same line as the final prop when the tag spans multiple lines. Do not put `/>` or `>` on its own line unless the existing surrounding code does so.
+- Keep JSX closing parentheses in the existing compact style, for example `</div>)` rather than moving `)` onto a separate line.
+
+Preferred:
+
+```tsx
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
+  return (
+      <TextArea
+	  {...rest}
+	  ref={ref}
+	  value={tags}
+	  invalid={errors && errors.length > 0}
+	  onChange={ev => setTags (ev.target.value)}/>)
+}
+```
+
+Avoid:
+
+```tsx
+function PostFormTagsArea ({ tags, setTags }: Props) {
+  return (
+    <TextArea
+      value={tags}
+      onChange={ev => setTags (ev.target.value)}
+    />
+  )
+}
+```
+
 ## Codex workflow
 
 - First inspect existing patterns; do not invent new architecture when a local convention exists.
 - Keep changes scoped to the requested issue.
 - Do not scan or summarize dependency/generated/runtime directories such as `node_modules`, `dist`, `tmp`, `log`, and `storage` unless explicitly needed.
 - Before touching wiki, tag, versioning, BAN, IP BAN, or authentication behavior, inspect the related request specs and service objects.
-- If frontend code changes, run the existing frontend verification commands that apply: `npm run build` and `npm run lint`.
+- If frontend code changes, run the existing frontend verification commands that apply: `npm run build`, `npm run lint`, and `npm run test:run`.
 - If backend code changes, run the relevant RSpec command; for broad backend changes, run `bundle exec rspec`.
 - If a verification command cannot be run or fails, report the exact command and failure.