在庫管理API（仮）の実装

frontend/src/App.tsx

@@ -10,7 +10,6 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import TaskListPage from './pages/TaskListPage';
 import StockPage from './pages/StockPage';
-import StockList from './pages/StockList';
 import './App.css';
 
 /**
@@ -95,16 +94,6 @@ const App: React.FC = () => {
                 }
               />
 
-              {/* 在庫リストへのルートを追加 */}
-              <Route
-                path="stock"
-                element={
-                  <PrivateRoute>
-                    <StockList />
-                  </PrivateRoute>
-                }
-              />
-
             </Route>
             <Route path="/" element={<Layout />}>
               {/* ルートパスへのアクセスはタスク一覧にリダイレクト */}

frontend/src/pages/StockList.tsx

@@ -1,75 +0,0 @@
-/**
- * テストページコンポーネント
- * 白紙の状態で表示されるテスト用のページ
- */
-import React from 'react';
-import {
-    Container,
-    Typography,
-    Button
-} from '@mui/material';
-
-const StockPage: React.FC = () => {
-    return (
-        <Container>
-            <Typography variant="h4" component="h1" gutterBottom>
-                在庫一覧
-            </Typography>
-
-            {/* タスク編集ボタン */}
-            <Button color="success"
-                type="submit"
-                variant="contained"
-                sx={{ mt: 3, mb: 2, left: '80%' }}
-            >
-                編集
-            </Button>
-
-            {/* タスク削除ボタン */}
-            <Button color="error"
-                type="submit"
-                variant="contained"
-                sx={{ mt: 3, mb: 2, left: '82%' }}
-            >
-                削除
-            </Button>
-
-            <Typography variant="h4" component="h1" gutterBottom>
-                乳製品
-            </Typography>
-            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
-            </div>
-
-            <Typography variant="h4" component="h1" gutterBottom>
-                肉・魚
-            </Typography>
-            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
-            </div>
-
-            <Typography variant="h4" component="h1" gutterBottom>
-                野菜
-            </Typography>
-            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
-            </div>
-
-            <Typography variant="h4" component="h1" gutterBottom>
-                調味料
-            </Typography>
-            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
-            </div>
-
-            <Typography variant="h4" component="h1" gutterBottom>
-                その他
-            </Typography>
-            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
-            </div>
-        </Container>
-    );
-};
-
-export default StockPage;

frontend/src/pages/StockPage.tsx

@@ -2,14 +2,107 @@
  * テストページコンポーネント
  * 白紙の状態で表示されるテスト用のページ
  */
-import React from 'react';
-import { Box } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { stockApi } from '../services/api';
+import { Stock } from '../types/types';
+import {
+    Container,
+    Typography,
+    Button,
+    List,
+    ListItem,
+} from '@mui/material';
+import { TASK_ERRORS } from '../constants/errorMessages';
+
 
 const StockPage: React.FC = () => {
+
+    const [stocks, setStocks] = useState<Stock[]>([]);
+
+    // コンポーネントマウント時にタスク一覧を取得
+    useEffect(() => {
+        fetchStocks();
+    }, []);
+
+    /**
+     * APIからタスク一覧を取得する関数
+     * 取得したタスクをstate(tasks)に設定
+     */
+    const fetchStocks = async () => {
+    try {
+        const stocks = await stockApi.getStocks();
+        setStocks(stocks.stock_array);
+    } catch (error) {
+        console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
+    }
+    };
+
     return (
-    <Box>
-      {/* 白紙のページ - 何も表示しない */}
-    </Box>
+        <Container>
+            <Typography variant="h4" component="h1" gutterBottom>
+                在庫一覧
+            </Typography>
+
+            {/* タスク編集ボタン */}
+            <Button color="success"
+                type="submit"
+                variant="contained"
+                sx={{ mt: 3, mb: 2, left: '80%' }}
+            >
+                編集
+            </Button>
+
+            {/* タスク削除ボタン */}
+            <Button color="error"
+                type="submit"
+                variant="contained"
+                sx={{ mt: 3, mb: 2, left: '82%' }}
+            >
+                削除
+            </Button>
+
+            <List>
+                {stocks.map((stock) => (
+                    <ListItem key={stock.stock_id}>{stock.stuff_name}</ListItem>
+                ))}
+            </List>
+
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                乳製品
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                肉・魚
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                野菜
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                調味料
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                その他
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+        </Container>
     );
 };
 

frontend/src/services/api.ts

@@ -3,7 +3,7 @@
  * バックエンドAPIとの通信を担当するモジュール
  * 認証、タスク管理などの機能を提供
  */
-import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy } from '../types/types';
+import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy, Stock } from '../types/types';
 import { AUTH_ERRORS, TASK_ERRORS } from '../constants/errorMessages';
 
 // APIのベースURL - 環境変数から取得するか、デフォルト値を使用
@@ -89,8 +89,8 @@ export const authApi = {
  */
 export const toBuyApi = {
   /**
-   * 全タスクを取得
-   * @returns タスク一覧
+   * 全買うものリストを取得
+   * @returns 買うものリスト一覧
    */
   getToBuys: async (): Promise<{ "tobuy_array": ToBuy[] }> => {
     // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, {
@@ -172,6 +172,54 @@ export const toBuyApi = {
 }
 
 
+export const stockApi = {
+  /**
+   * 全在庫リストを取得
+   * @returns 買在庫リスト一覧
+   */
+  getStocks: async (): Promise<{ "stock_array": Stock[] }> => {
+    // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, {
+    //   headers: getHeaders(), // 認証トークンを含むヘッダー
+    // });
+
+    // if (!response.ok) {
+    //   throw new Error(TASK_ERRORS.FETCH_FAILED);
+    // }
+
+    // return response.json();
+
+    return {
+      "stock_array": [
+        {
+          "stock_id": 1,
+          "stuff_id": 10,
+          "stuff_name": "豚肉",
+          "amount": 100,
+          "price": 200,
+          "buy_date": "2025-05-18T09:00:00.000Z",
+          "last_update": "2025-05-18T09:00:00.000Z",
+          "exp_date": "2025-05-19T10:15:00.000Z",
+          "category": "肉"
+        },
+        {
+          "stock_id": 2,
+          "stuff_id": 1,
+          "stuff_name": "トマト",
+          "amount": 10,
+          "price": 200,
+          "buy_date": "2025-05-18T09:00:00.000Z",
+          "last_update": "2025-05-18T09:00:00.000Z",
+          "exp_date": "2025-05-19T10:15:00.000Z",
+          "category": "野菜"
+        }
+      ]
+    }
+
+
+  },
+}
+
+
 /**
  * (サンプル，実際には不要)
  * タスク管理関連のAPI機能を提供するオブジェクト

frontend/src/types/types.ts

@@ -24,6 +24,22 @@ export interface ToBuy {
   shop?: string,
 }
 
+/**
+ * タスク情報を表す型定義
+ * タスクの基本情報と状態を管理
+ */
+export interface Stock {
+  stock_id: number,
+  stuff_id: number,
+  stuff_name: string,
+  amount: number,
+  price: number,
+  buy_date: string,
+  last_update: string,
+  exp_date: string,
+  category: string,
+}
+
 /**
  * ユーザー情報を表す型定義
  * ユーザーの基本情報を管理