25 Create cording rules

.cursor/rules/source-review.mdc

@@ -0,0 +1,169 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# ソースレビュー ルール
+
+## 概要
+
+このルールは、現在チェックアウトしているブランチに紐づくプルリクエストの内容と差分を自動で取得し、どのような変更が行われたかを要約する一連の流れを、プロンプト一発で実施できるようにします。
+
+---
+
+## 使い方
+
+1. 対象のブランチを `git checkout` でチェックアウトする。
+2. 以下のプロンプトを入力するだけで、PRの内容・差分・要約が自動で出力されます。
+
+このブランチで作成されているプルリクエストの内容と差分をチェックし、どのような変更が行われたかまとめてください。
+また、レビューを詳しくした方が良いと思われる箇所に関して、提案してください。
+
+---
+
+## 実行フロー（自動化される処理）
+
+1. `git branch --show-current` で現在のブランチ名を取得
+2. `PAGER=cat gh pr view` でPRのタイトル・説明・レビュワー・状態などを取得
+3. `PAGER=cat gh pr diff` でPRの差分（diff）を取得
+4. 取得した情報をもとに、PRの目的・主な変更点・影響範囲などを日本語で要約
+
+---
+
+## レビュー観点（コーディングルールベース）
+
+### 共通ルール
+- **ボーイスカウトルール**: コードを見つけたときよりも綺麗にする
+- **YAGNI原則**: 必要になるまで機能を実装しない
+- **DRY原則**: 再利用可能なロジックを関数に抽出し、コードの重複を避ける
+- **KISS原則**: シンプルで分かりやすいコードを書く
+- **SOLID原則**: オブジェクト指向設計の原則に従う
+- **タイポ検出**: タイポを検出し、修正を提案する
+
+### TypeScript/JavaScript
+- インデントには2スペースを使用
+- Google JavaScript Style Guideに準拠
+- MDNにリストされている非推奨または廃止された機能の使用を避ける
+- プロパティ名にはキャメルケースを使用し、必要に応じてPropTypesを適用
+- フックの使用に関する公式Reactガイドラインに従う
+- インラインスタイルを避ける
+- 'var'の代わりに'let'または'const'を使用
+- パフォーマンス最適化（メモ化、レンダリング最適化）を適切に実装
+- 不要な再レンダリングを防ぐために、関数コンポーネントにはReact.memo()を、クラスコンポーネントにはPureComponentを使用
+- コード分割と遅延ロードを実装
+- セキュリティ脆弱性（特にXSS）に注意
+- ユーザー入力をサニタイズし、dangerouslySetInnerHTMLの使用を避ける
+
+### Go
+- インデントにはタブを使用（Go言語の標準的な方法）
+- gofmtツールを使用してコードをフォーマット
+- goimportsを使用してインポートを管理
+- go vetを使用して疑わしい構造を検出
+- golintを使用してスタイルエラーを検出
+- テストとベンチマークの実行
+- Go Style Guideに従う
+- クリーンアーキテクチャの原則に従う
+- DDD（Domain-Driven Design）の原則を適用
+
+### React (TSX)
+- セマンティックなHTML要素を使用
+- Reactのベストプラクティスに従う
+- WAI-ARIA属性を実装
+- 適切なキーボードナビゲーションサポート
+- 可視テキストのない要素にはaria-labelまたはaria-labelledbyを使用
+- モーダルやその他の動的コンテンツにフォーカス管理を実装
+
+### テスト
+- テストフレームワークのベストプラクティスに従う
+- テストの説明を詳細に記述
+- 適切なアサーションとマッチャーを使用
+- 重要なパスとエッジケースのテストカバレッジを実装
+- テストを独立させ、テスト間で状態を共有しない
+
+### Docker
+- Dockerfile Best Practicesに従う
+- マルチステージビルドを活用
+- 適切なベースイメージを選択
+- ビルドキャッシュを効果的に利用
+- 最小権限の原則に従う
+- .dockerignoreファイルを使用
+- RUN命令を結合
+- 適切な環境変数の設定
+- 必要最小限のファイルのみをコピー
+- ヘルスチェックの実装
+- Linterツールの使用を検討
+
+### Markdown
+- [markdownlint-cli2](mdc:https:/github.com/DavidAnson/markdownlint-cli2)に準拠していること
+
+---
+
+## 自動実行設定（git push時）
+
+### Git Hooks設定
+
+#### 1. pre-pushフックの作成
+```bash
+# .githooks/pre-push ファイルを作成
+#!/bin/bash
+set -e
+
+echo "🔍 ソースレビューを開始します..."
+
+# 現在のブランチ名を取得
+CURRENT_BRANCH=$(git branch --show-current)
+
+# プルリクエストが存在するかチェック
+if gh pr view --json url 2>/dev/null | grep -q "url"; then
+    echo "📋 プルリクエストが見つかりました。レビューを実行します..."
+
+    # PRの情報を取得
+    echo "=== PR情報 ==="
+    PAGER=cat gh pr view
+
+    echo ""
+    echo "=== 差分 ==="
+    PAGER=cat gh pr diff
+
+    echo ""
+    echo "=== レビュー結果 ==="
+    echo "このPRのレビューが完了しました。詳細は上記の情報を確認してください。"
+else
+    echo "⚠️  このブランチにはプルリクエストが作成されていません。"
+    echo "プルリクエストを作成してから再度pushしてください。"
+    exit 1
+fi
+```
+
+#### 2. フックファイルの権限設定
+```bash
+chmod +x .githooks/pre-push
+```
+
+#### 3. Git設定でフックディレクトリを指定
+```bash
+git config core.hooksPath .githooks
+```
+
+### 実行タイミング
+- `git push` 実行時に自動的にソースレビューが実行される
+- プルリクエストが存在しない場合はpushがブロックされる
+- レビュー結果がコンソールに出力される
+
+---
+
+## 注意事項
+- `gh` CLIがインストールされている必要があります。
+- GitHub認証が済んでいる必要があります。
+- `PAGER`環境変数の影響でエラーが出る場合は、一時的に`PAGER=cat`を利用します。
+- プルリクエストが作成されていないブランチではpushが失敗します。
+
+---
+
+## 例
+
+このブランチで作成されているプルリクエストの内容と差分をチェックし、どのような変更が行われたかまとめてください。
+
+---
+
+このルールを使うことで、PRレビューの効率化・自動化が可能です。 

.cursor/settings.json

@@ -0,0 +1,7 @@
+// TODO:機能している？
+{
+  "cursor.review": {
+    "enabled": true,
+    "autoReview": true
+  }
+}

.githooks/pre-commit

@@ -17,7 +17,7 @@ if [ -n "$CHANGED_GO_FILES" ]; then
   # Lint
   echo "Running golangci-lint..."
   docker-compose run -T --rm lint
-  if [ $? -ne 0 ];then
+  if [ $? -ne 0 ]; then
     echo "golangci-lint failed. Please fix the issues before committing."
     exit 1
   fi
@@ -32,7 +32,6 @@ if [ -n "$CHANGED_MD_FILES" ]; then
   # Markdown Lint
   echo "Running markdownlint..."
   docker-compose run -T --rm markdownlint npx markdownlint-cli2 --fix $CHANGED_MD_FILES
-  # npx markdownlint-cli2 --fix $CHANGED_MD_FILES
   if [ $? -ne 0 ]; then
     echo "markdownlint failed. Please fix the issues before committing."
     exit 1

.gitignore

@@ -2,5 +2,3 @@
 
 # テストカバレッジレポート
 */coverage.out
-
-node_modules/

.vscode/extensions.json

@@ -20,6 +20,7 @@
     "bierner.markdown-mermaid",
     "bradlc.vscode-tailwindcss",
     "christian-kohler.npm-intellisense",
-    "davidanson.vscode-markdownlint"
+    "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker"
   ]
 }

README.md

@@ -1 +1,9 @@
+# README
+
+## Setup
+
+[Setup procedure](./docs/develop/setup/index.md)
+
+## Other
+
 ![CodeRabbit Pull Request Reviews](https://img.shields.io/coderabbit/prs/github/zucky2021/book-tracker-v2?labelColor=171717&color=FF570A&link=https%3A%2F%2Fcoderabbit.ai&label=CodeRabbit%20Reviews)

docker-compose.yml

@@ -106,6 +106,7 @@ services:
   markdownlint:
     image: node:24-alpine
     container_name: markdownlint
+    restart: no
     working_dir: /work
     volumes:
       - .:/work

docs/develop/setup/index.md

@@ -0,0 +1 @@
+# Setup (環境構築)

docs/develop/setup/script.sh

@@ -0,0 +1 @@
+#!/bin/bash

frontend/src/App.tsx

@@ -9,6 +9,7 @@ const App: React.FC = () => {
     const checkHealth = async (retries = 5) => {
       for (let i = 0; i < retries; i++) {
         try {
+          // FIXME:URLのハードコードを避ける
           const response = await fetch("http://localhost:8080/health");
           if (response.ok) {
             const data = await response.json();

frontend/src/components/Memo.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
 type MemoProps = {
   bookId: string;
@@ -17,12 +17,14 @@ type MemoData = {
 };
 
 // メモモーダル
-const Memo = ({ bookId, userId, onClose }: MemoProps) => {
+const Memo = memo(({ bookId, userId, onClose }: MemoProps) => {
   const [memoText, setMemoText] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [imgFile, setImgFile] = useState<File | null>(null);
 
+  const maxMemoLength = 1000;
+
   useEffect(() => {
     const fetchMemo = async () => {
       setLoading(true);
@@ -34,7 +36,6 @@ const Memo = ({ bookId, userId, onClose }: MemoProps) => {
         );
         if (res.ok) {
           const data: { memo: MemoData | null } = await res.json();
-          console.log("Fetched memo data:", data.memo?.text);
           setMemoText(data.memo?.text || "");
         } else if (res.status === 404) {
           setMemoText("");
@@ -68,7 +69,7 @@ const Memo = ({ bookId, userId, onClose }: MemoProps) => {
       formData.append("bookId", bookId);
       formData.append("text", memoText);
       if (imgFile) {
-        formData.append("image", imgFile);
+        formData.append("imgFile", imgFile);
       }
 
       const res = await fetch("http://localhost:8080/api/memo", {
@@ -86,12 +87,12 @@ const Memo = ({ bookId, userId, onClose }: MemoProps) => {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-items-center bg-black/10"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/10"
       role="dialog"
       aria-modal="true"
     >
       <div className="mx-auto w-80 rounded bg-white p-6 shadow-lg">
-        <h4 className="test-lg mb-2 font-bold">Memo</h4>
+        <h4 className="text-lg mb-2 font-bold">Memo</h4>
         {loading ? (
           <p>Loading...</p>
         ) : (
@@ -103,7 +104,11 @@ const Memo = ({ bookId, userId, onClose }: MemoProps) => {
               onChange={(e) => setMemoText(e.target.value)}
               placeholder="Let's Input memo!"
               required
+              maxLength={maxMemoLength}
             />
+            <p className="text-sm text-gray-500">
+              {memoText.length}/{maxMemoLength}
+            </p>
             <input
               type="file"
               accept="image/*"
@@ -131,6 +136,6 @@ const Memo = ({ bookId, userId, onClose }: MemoProps) => {
       </div>
     </div>
   );
-};
+});
 
 export default Memo;