diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7395453..82bce23 100644
--- a/frontend/src/App.tsx
+++ b/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 = () => {
}
/>
- {/* 在庫リストへのルートを追加 */}
-
-
-
- }
- />
-
}>
{/* ルートパスへのアクセスはタスク一覧にリダイレクト */}
diff --git a/frontend/src/pages/StockList.tsx b/frontend/src/pages/StockList.tsx
deleted file mode 100644
index b269649..0000000
--- a/frontend/src/pages/StockList.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * テストページコンポーネント
- * 白紙の状態で表示されるテスト用のページ
- */
-import React from 'react';
-import {
- Container,
- Typography,
- Button
-} from '@mui/material';
-
-const StockPage: React.FC = () => {
- return (
-
-
- 在庫一覧
-
-
- {/* タスク編集ボタン */}
-
-
- {/* タスク削除ボタン */}
-
-
-
- 乳製品
-
- {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-
-
-
-
- 肉・魚
-
- {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-
-
-
-
- 野菜
-
- {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-
-
-
-
- 調味料
-
- {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-
-
-
-
- その他
-
- {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
-
-
-
- );
-};
-
-export default StockPage;
\ No newline at end of file
diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 8de8bd9..2b51066 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -2,15 +2,108 @@
* テストページコンポーネント
* 白紙の状態で表示されるテスト用のページ
*/
-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 = () => {
- return (
-
- {/* 白紙のページ - 何も表示しない */}
-
- );
+
+ const [stocks, setStocks] = useState([]);
+
+ // コンポーネントマウント時にタスク一覧を取得
+ 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 (
+
+
+ 在庫一覧
+
+
+ {/* タスク編集ボタン */}
+
+
+ {/* タスク削除ボタン */}
+
+
+
+ {stocks.map((stock) => (
+ {stock.stuff_name}
+ ))}
+
+
+
+
+ 乳製品
+
+ {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+
+
+
+
+ 肉・魚
+
+ {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+
+
+
+
+ 野菜
+
+ {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+
+
+
+
+ 調味料
+
+ {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+
+
+
+
+ その他
+
+ {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+
+
+
+ );
};
export default StockPage;
\ No newline at end of file
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 4919343..d7b6753 100644
--- a/frontend/src/services/api.ts
+++ b/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機能を提供するオブジェクト
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 2304c92..898afd0 100644
--- a/frontend/src/types/types.ts
+++ b/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,
+}
+
/**
* ユーザー情報を表す型定義
* ユーザーの基本情報を管理