25 Create cording rules

.cursor/rules/coding_rules.md

@@ -0,0 +1,72 @@
+# コーディングルール
+
+## 共通ルール
+
+- ボーイスカウトルールに従う：コードを見つけたときよりも綺麗にする
+- YAGNI(You Aren't Gonna Need It)の原則に従う：必要になるまで機能を実装しない
+- DRY(Don't Repeat Yourself)の原則に従う：再利用可能なロジックを関数に抽出し、コードの重複を避ける
+- KISS(Keep It Simple Stupid)の原則に従う：シンプルで分かりやすいコードを書く
+- 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](https://github.com/DavidAnson/markdownlint-cli2)に準拠していること

.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

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;