Merge remote-tracking branch 'origin/feature-frontend-recipe-api' into feature_frontend_dishList_ui

4 months ago · 08899873e7
parent 164ae67ed7 2c59dc9484
commit 08899873e7
14 changed files with 381 additions and 153 deletions
--- a/backend/src/main/java/com/example/todoapp/controller/ToBuysController.java
+++ b/backend/src/main/java/com/example/todoapp/controller/ToBuysController.java
@ -92,7 +92,6 @@ public class ToBuysController {
    }


-
    /**
     * 指定されたユーザーIDに基づいてすべての「買うもの」リストを取得する
     *
@ -125,9 +124,6 @@ public class ToBuysController {
                })
                .collect(Collectors.toList());

-        // Map<String, Object> responseBody = new HashMap<>();
-        // responseBody.put("tobuy_array", responseList);
-
        return ResponseEntity.ok(responseList);
    }

@ -189,7 +185,8 @@ public class ToBuysController {
            Authentication authentication) {

        Long recipeId = payload.get("recipeId");
-        List<ToBuyResponseDTO> responseList = toBuysService.addByRecipeId(recipeId, authentication);
+        Long servings = payload.get("servings");
+        List<ToBuyResponseDTO> responseList = toBuysService.addByRecipeId(recipeId, servings,authentication);

        //shopのフィールドを削除
        List<Map<String, Object>> filteredList = responseList.stream()
--- a/backend/src/main/java/com/example/todoapp/service/StocksService.java
+++ b/backend/src/main/java/com/example/todoapp/service/StocksService.java
@ -1,6 +1,5 @@
 package com.example.todoapp.service;

-import com.example.todoapp.dto.StockDTO;
 import com.example.todoapp.dto.AddStocksDTO;
 import com.example.todoapp.dto.UpdateStockRequest;
 import com.example.todoapp.model.Stocks;
@ -57,9 +56,6 @@ public class StocksService {
        } else {
            // 材料情報を取得
            Optional<Stuffs> existstuffs = stuffsRepository.findById(stock.getStuffId());
-            if (existstuffs == null) {
-                throw new RuntimeException("材料がありません");
-            }
            stuffs = existstuffs.get();
        }

--- a/backend/src/main/java/com/example/todoapp/service/ToBuysService.java
+++ b/backend/src/main/java/com/example/todoapp/service/ToBuysService.java
@ -91,14 +91,22 @@ public class ToBuysService {
            stuff = optStuff.get();
        }

-        ToBuys toBuys = new ToBuys();
-        toBuys.setUser(user);
-        toBuys.setStuff(stuff);
-        toBuys.setAmount(toBuyDTO.getAmount());
-        toBuys.setStore(toBuyDTO.getShop());
+        Optional<ToBuys> existingToBuy = toBuysRepository.findByUserAndStuff(user, stuff);

-        // データベースに保存
-        return toBuysRepository.save(toBuys);
+        if (existingToBuy.isPresent()) {
+            // 存在する場合は数量を更新
+            ToBuys existing = existingToBuy.get();
+            existing.setAmount(existing.getAmount() + toBuyDTO.getAmount());
+            return toBuysRepository.save(existing);
+        } else {
+            // 新しい材料を作成
+            ToBuys toBuys = new ToBuys();
+            toBuys.setUser(user);
+            toBuys.setStuff(stuff);
+            toBuys.setAmount(toBuyDTO.getAmount());
+            toBuys.setStore(toBuyDTO.getShop());
+            return toBuysRepository.save(toBuys);
+        }

    }

@ -212,7 +220,7 @@ public class ToBuysService {
     * @param authentication 認証情報
     * @return 追加された「買うもの」のリスト
     */
-    public List<ToBuyResponseDTO> addByRecipeId(Long recipeId, Authentication authentication) {
+    public List<ToBuyResponseDTO> addByRecipeId(Long recipeId, Long servings,Authentication authentication) {
        // ユーザー情報を取得
        String username = authentication.getName();
        User user = userRepository.findByUsername(username)
@ -225,7 +233,9 @@ public class ToBuysService {

        for (RecipeStuffs rs : recipeStuffsList) {
            Stuffs stuff = rs.getStuff();
-            int requiredAmount = rs.getAmount();
+            
+            // 材料の数量をサービング数に基づいて計算
+            int requiredAmount = rs.getAmount() * (servings != null ? servings.intValue() : 1);

            Optional<ToBuys> existingToBuyOpt = toBuysRepository.findByUserAndStuff(user, stuff);

--- a/backend/src/main/resources/application-localfwd.yml
+++ b/backend/src/main/resources/application-localfwd.yml
@ -0,0 +1,20 @@
+spring:
+  datasource:
+    url: jdbc:postgresql://localhost:5432/${LOCAL_DB_NAME}
+    driver-class-name: org.postgresql.Driver
+    username: ${LOCAL_DB_USER}
+    password: ${LOCAL_DB_PASSWORD}
+  jpa:
+    database-platform: org.hibernate.dialect.PostgreSQLDialect
+    properties:
+      hibernate:
+        jdbc:
+          lob:
+            non_contextual_creation: true
+
+server:
+  address: 0.0.0.0
+  port: 8080
+
+cors:
+  allowed-origins: http://${WIN_IP}:3000
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@ -26,12 +26,14 @@ const formatDateLocal = (date: Date) => {
 const BuyDialog = ({
    openDialog,
    setOpenDialog,
+    stuffName,
    newStock,
    setNewStock,
    onSubmit,
 }: {
    openDialog: boolean,
    setOpenDialog: (open: boolean) => void,
+    stuffName: string,
    newStock: NewStock,
    setNewStock: (tobuy: NewStock) => void,
    onSubmit: () => void,
@ -40,11 +42,21 @@ const BuyDialog = ({
    return (


-        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '500px', maxHeight: '80vh' } }}
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
 >
            <DialogTitle>在庫登録</DialogTitle>
            <DialogContent>
                <Box sx={{ pt: 1 }}>
+                    {/* 材料名表示 */}
+                    <TextField
+                        margin="dense"
+                        label="材料名"
+                        fullWidth
+                        value={stuffName}
+                        disabled
+                        sx={{ marginBottom: 2 , marginTop: 2}}
+                    />
+
                    {/* 価格入力フィールド */}
                    <TextField
                        autoFocus
@ -58,6 +70,7 @@ const BuyDialog = ({
                                setNewStock({ ...newStock, price: value })
                            };
                        }}
+                        sx={{ marginBottom: 2 }}
                    />
                    {/* 購入日・消費期限を横並びに */}
                    <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@ -2,7 +2,7 @@
 * アプリケーションの共通レイアウトを提供するコンポーネント
 * ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義
 */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
  AppBar,
  Toolbar,
@ -16,7 +16,11 @@ import {
  ListItemIcon,
  ListItemButton,
  Divider,
-  IconButton
+  IconButton,
+  AlertColor,
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper
 } from '@mui/material';
 import {
  Menu as MenuIcon,
@ -24,13 +28,17 @@ import {
  Inventory as InventoryIcon, // テストページ用のアイコン
  Science as ScienceIcon, // 鈴木
  SoupKitchen as SoupKitchenIcon,
+  ShoppingCart as ShoppingCartIcon
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
+import { MessageContext } from './MessageContext';
+import MessageAlert from './MessageAlert';

 const Layout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [bottomNavi, setBottomNavi] = useState(1);

  /**
   * ログアウト処理を行うハンドラー関数
@ -41,39 +49,69 @@ const Layout: React.FC = () => {
    navigate('/login');
  };

-  /**
-   * 画面遷移処理を行うハンドラー関数
-   * 指定されたパスに遷移し、サイドメニューを閉じる
-   */
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
+  

-  // 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
-  const isSelected = (path: string): boolean => {
-    return location.pathname === path;
-  };
+ 

  // メニューを開閉するハンドラー
  const toggleDrawer = () => {
    setDrawerOpen(!drawerOpen);
  };

+  // メッセージ表示
+
+  // ページ遷移後もメッセージを維持
+  useEffect(() => {
+    const saved = sessionStorage.getItem('globalMessage');
+    if (saved) {
+      const { message, severity } = JSON.parse(saved);
+      showMessage(message, severity);
+    }
+  }, []);
+
+  const [msgOpen, setMsgOpen] = useState(false);
+  const [msgText, setMsgText] = useState('');
+  const [msgType, setMsgType] = useState<AlertColor>('info');
+
+  const showMessage = (msg: string, sev: AlertColor) => {
+    setMsgText(msg);
+    setMsgType(sev);
+    setMsgOpen(true);
+    sessionStorage.setItem('globalMessage', JSON.stringify({ message: msg, severity: sev }));
+  };
+
+  const showErrorMessage = (message: string) => showMessage(message, 'error');
+  const showWarningMessage = (message: string) => showMessage(message, 'warning');
+  const showInfoMessage = (message: string) => showMessage(message, 'info');
+  const showSuccessMessage = (message: string) => showMessage(message, 'success');
+
+  const handleMsgClose = () => {
+    setMsgOpen(false);
+    // setMsgText(''); // ここで空にすると，メッセージが消えるアニメーションが始まる時点で文字が消えてしまう
+    sessionStorage.removeItem('globalMessage');
+  };
+
+  const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
+    setBottomNavi(newValue);
+    switch(newValue) {
+      case 0:
+        navigate('stock');
+        break;
+      case 1:
+        navigate('tasks');
+        break;
+      case 2:
+        navigate('recipeList');
+        break;
+    }
+    // ここでルーティング処理などを行う
+  }
+
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
      <AppBar position="static" elevation={0}>
        <Toolbar>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            shopchop
          </Typography>
@ -83,57 +121,46 @@ const Layout: React.FC = () => {
        </Toolbar>
      </AppBar>

-      {/* サイドメニュー */}
-      <Drawer
-        anchor="left"
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-      >
-        <Box
-          sx={{ width: 250 }}
-          role="presentation"
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <BottomNavigation
+          showLabels
+          value={bottomNavi}
+          onChange={(event, newValue) => {
+            setBottomNavi(newValue);
+            switch(newValue) {
+              case 0:
+                navigate('stock');
+                break;
+              case 1:
+                navigate('tasks');
+                break;
+              case 2:
+                navigate('recipeList');
+                break;
+            }
+            // ここでルーティング処理などを行う
+          }}
        >
-          <List>
-            <ListItemButton
-              onClick={() => handleNavigate('/tasks')}
-              selected={isSelected('/tasks')}
-            >
-              <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="買うものリスト" />
-            </ListItemButton>
-            {/* テストページへのリンクを追加 */}
-
-             {/* 在庫リストへのリンクを追加 */} 
-            <ListItemButton 
-              onClick={() => handleNavigate('/addRecipe')} 
-              selected={isSelected('/addRecipe')}
-            >
-              <ListItemIcon><SoupKitchenIcon /></ListItemIcon>
-              <ListItemText primary="料理の追加" />
-            </ListItemButton>
-            <ListItemButton 
-              onClick={() => handleNavigate('/recipeList')} 
-              selected={isSelected('/recipeList')}
-            >
-              <ListItemIcon><ScienceIcon /></ListItemIcon>
-              <ListItemText primary="料理リスト" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/stock')}
-              selected={isSelected('/stock')}
-            >
-              <ListItemIcon><InventoryIcon /></ListItemIcon>
-              <ListItemText primary="在庫管理" />
-            </ListItemButton>
-            <Divider />
-          </List>
-        </Box>
-      </Drawer>
+          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+        </BottomNavigation>
+      </Paper>

      {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
      <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
        <Container>
-          <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+
+          <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
+            <MessageAlert
+              open={msgOpen}
+              message={msgText}
+              severity={msgType}
+              onClose={handleMsgClose}
+            />
+            <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+          </MessageContext.Provider>
+
        </Container>
      </Box>
    </Box>
--- a/frontend/src/components/MessageAlert.tsx
+++ b/frontend/src/components/MessageAlert.tsx
@ -0,0 +1,29 @@
+import React from 'react';
+import { Snackbar, Alert, AlertColor } from '@mui/material';
+
+interface MessageAlertProps {
+  open: boolean;
+  message: string;
+  severity: AlertColor; // 'error' | 'warning' | 'info' | 'success'
+  onClose: (event?: React.SyntheticEvent | Event, reason?: string) => void;
+  duration?: number;
+}
+
+const MessageAlert: React.FC<MessageAlertProps> = ({
+  open,
+  message,
+  severity,
+  onClose,
+  duration = 6000,
+}) => {
+  return (
+    <Snackbar open={open} autoHideDuration={duration} onClose={onClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} sx={{bottom: '120px'}}>
+      <Alert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MessageAlert;
--- a/frontend/src/components/MessageContext.tsx
+++ b/frontend/src/components/MessageContext.tsx
@ -0,0 +1,17 @@
+
+import React, { createContext, useContext } from 'react';
+
+export interface MessageContextType {
+  showErrorMessage: (message: string) => void;
+  showWarningMessage: (message: string) => void;
+  showSuccessMessage: (message: string) => void;
+  showInfoMessage: (message: string) => void;
+}
+
+export const MessageContext = createContext<MessageContextType | undefined>(undefined);
+
+export const useMessage = () => {
+  const context = useContext(MessageContext);
+  if (!context) throw new Error('useMessage must be used within MessageContext.Provider');
+  return context;
+};
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@ -26,7 +26,8 @@ import {
  Select,
  FormControl,
  InputLabel,
-  ListItemIcon
+  ListItemIcon,
+  AlertColor
 } from '@mui/material';
 import {
  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@ -37,6 +38,8 @@ import { StuffAndCategoryAndAmount } from '../types/types';
 import EditAmountDialog from '../components/EditAmountDialog';
 import { recipeApi, toBuyApi } from '../services/api';
 import { useNavigate, useParams } from 'react-router-dom';
+import MessageAlert from '../components/MessageAlert';
+import { useMessage } from '../components/MessageContext';

 const AddRecipe: React.FC = () => {
  const { recipeId: recipeIdStr } = useParams();
@ -44,6 +47,8 @@ const AddRecipe: React.FC = () => {

  const navigate = useNavigate();

+  //  編集時，既存情報を読み込んだかどうか
+  const [recipeLoaded, setRecipeLoaded] = useState(false);
  // 何人分かを格納する
  const [numOfPeaple, setNumOfPeaple] = useState<number>(1);
  const [openNumOfPeapleDialog, setOpenNumOfPeapleDialog] = useState(false);
@ -62,48 +67,59 @@ const AddRecipe: React.FC = () => {
  // 編集しているアイテム
  const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem);
  const [editingItemIdx, setEditingItemIdx] = useState(0);
+  //削除確認ダイアログの表示状態
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+  //  エラーメッセージ表示
+  const { showErrorMessage, showSuccessMessage } = useMessage();

  const loadRecipe = async () => {
-    if (recipeId && !recipeName) {
+    if (recipeId && !recipeLoaded) {
      const recipe = await recipeApi.getById(recipeId);
      console.log('loaded recipe=', recipe)
      setRecipeName(recipe.recipeName)
      setRecipeSummary(recipe.summary)
      setItems(recipe.stuffAndAmountArray)
+      setRecipeLoaded(true)
    }
  }

  const handleSaveRecipe = async () => {

    // if (!recipeName) {
-    //   alert('レシピ名が入力されていません！')
+    //   showErrorMessage('レシピ名が入力されていません！')
    //   console.log("yes1");
    //   return false;
    // }

    // if (!items.length) {
-    //   alert('材料が追加されていません！')
+    //   showErrorMessage('材料が追加されていません！')
    //   console.log("yes2");
    //   return false;
    // }

-    if (!recipeId) {
-      console.log("yes3");
+    try {
+      if (!recipeId) {
+        console.log("yes3");
      //  新規追加
-      const response = await recipeApi.addRecipe({
+        const response = await recipeApi.addRecipe({
+          recipeName,
+          summary: recipeSummary,
+          stuffAndAmountArray: items,
+        })
+        return response.recipeId;
+      }
+
+      const response = await recipeApi.updateRecipe({
+        recipeId,
        recipeName,
        summary: recipeSummary,
        stuffAndAmountArray: items,
      })
-      return response.recipeId;
+    } catch {
+      showErrorMessage('レシピの送信に失敗しました。同じ料理名が存在する可能性があります。');
+      return false;
    }
-
-    const response = await recipeApi.updateRecipe({
-      recipeId,
-      recipeName,
-      summary: recipeSummary,
-      stuffAndAmountArray: items,
-    })
    console.log("yes4");
    return recipeId;
  }
@ -126,8 +142,8 @@ const AddRecipe: React.FC = () => {

  const handleSubmit = async () => {
    const recipeId = await handleSaveRecipe();
-    // alert('レシピが保存されました！');
    if (!recipeId) return;
+    showSuccessMessage('レシピが保存されました！');
    navigate('/recipeList');
  }

@ -139,7 +155,7 @@ const AddRecipe: React.FC = () => {
    if (!recipeId) return false;
    console.log("ds");
    await toBuyApi.addByRecipe(recipeId);
-    // alert('レシピが保存されて買うものリストに追加されました！');
+    showSuccessMessage('レシピが保存されて買うものリストに追加されました！');
    navigate('/tasks');
  }

@ -161,7 +177,8 @@ const AddRecipe: React.FC = () => {
  }, []);

  return (
-    (recipeId && !recipeName)
+    <>
+    {(recipeId && !recipeLoaded)
      ? <p>読み込み中...</p>
      :
      <Box>
@ -218,7 +235,11 @@ const AddRecipe: React.FC = () => {
                    tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } },
                  }}>
                  <IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete"
-                    onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}>
+                    onClick={() => {
+                      setOpenDeleteDialog(true)
+                      setEditingItem(item)
+                      setEditingItemIdx(index)
+                    }}>
                    <DeleteIcon />
                  </IconButton>
                </Tooltip>
@ -240,7 +261,7 @@ const AddRecipe: React.FC = () => {
          </Fab>
        </div>

-        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%", whiteSpace: 'nowrap' }}>
+        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px", whiteSpace: 'nowrap' }}>
          <Button variant='contained' color="primary" onClick={handleSubmit} sx={{ marginRight: "1rem" }}>
            <SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
            レシピを保存
@ -259,6 +280,29 @@ const AddRecipe: React.FC = () => {
            setOpenAddDialog(false);
          }} />

+        {/* 削除ダイアログ */}
+        <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true}
+          fullWidth
+          maxWidth="sm"
+          sx={{ overflow: "hidden" }}
+        >
+          <DialogTitle>食材の削除</DialogTitle>
+          <DialogContent>
+            {editingItem && (
+              <>
+                <Typography variant="h4">{editingItem.stuffName}を削除します。</Typography>
+                <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                <Button onClick={() => setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                <Button variant="contained" color="error" onClick={() => {
+                  setItems([...items.slice(0, editingItemIdx), ...items.slice(editingItemIdx + 1)])
+                  setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
+                }}
+                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
+
        {/* 数量変更ダイアログ */}
        <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}
          editingItem={editingItem}
@ -307,6 +351,8 @@ const AddRecipe: React.FC = () => {
          </DialogActions>
        </Dialog>
      </Box>
+    }
+    </>
  );
 };

--- a/frontend/src/pages/DishList.tsx
+++ b/frontend/src/pages/DishList.tsx
@ -159,9 +159,10 @@ const DishList: React.FC = () => {
                        ))}
                    {/* </List> */}
                </div>
-                <div style={{width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "20px"}}>
-                    <Button variant='contained' sx={{width: "60%", height: "60px", 
-                        fontSize: "40px", left: "50%", transform: 'translateX(-50%)' }} 
+                <div style={{width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px"}}>
+                    <Button variant='contained' sx={{
+                        width: "60%", 
+                        fontSize: "24px", left: "50%", transform: 'translateX(-50%)' }} 
                        color="primary"
                        onClick={() => navigate('/add1')}
                        >
--- a/frontend/src/pages/RecipeList.tsx
+++ b/frontend/src/pages/RecipeList.tsx
@ -31,11 +31,14 @@ import {
  SoupKitchen as SoupKitchenIcon
 } from '@mui/icons-material';
 import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
+import { useMessage } from '../components/MessageContext';

 const RecipeList: React.FC = () => {
  const navigate = useNavigate();
  // 料理リストの料理名を格納する配列

+  const { showErrorMessage } = useMessage();
+
  // すべての料理リスト
  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();

@ -48,7 +51,7 @@ const RecipeList: React.FC = () => {
      const recipes = await recipeApi.getAllRecipes();
      setAllRecipes(recipes);
    } catch (error) {
-      alert("レシピの取得に失敗しました．");
+      showErrorMessage("レシピの取得に失敗しました。");
      // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
    }
  };
@ -93,10 +96,10 @@ const RecipeList: React.FC = () => {
          ))}
          {/* </List> */}
        </div>
-        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "20px" }}>
+        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px" }}>
          <Button variant='contained' sx={{
            width: "60%", height: "60px",
-            fontSize: "40px", left: "50%", transform: 'translateX(-50%)'
+            fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
          }}
            color="primary"
            onClick={() => navigate('/AddRecipe')}
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@ -29,6 +29,15 @@ import {
 import { STOCK_ERRORS } from '../constants/errorMessages';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
+import { useMessage } from '../components/MessageContext';
+
+// 日付をyyyy-MM-dd形式で返す関数
+const formatDateLocal = (date: Date) => {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};

 // 日付をyyyy-MM-dd形式で返す関数
 const formatDateLocal = (date: Date) => {
@ -72,6 +81,8 @@ const StockPage: React.FC = () => {
  // 在庫の編集状態
  const [editStock, setEditStock] = useState<Stock | null>(null);

+  const { showWarningMessage } = useMessage();
+
  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
    fetchStocks();
@ -146,7 +157,7 @@ const StockPage: React.FC = () => {
  };

  /**
-   * カテゴリー選択？？
+   * カテゴリー選択
   */
  const onChangeCategory = async (category: string) => {
    setNewStock({ ...newStock, category })
@ -196,7 +207,7 @@ const StockPage: React.FC = () => {
      setEditStock({ ...selectedRow });
      setIsEditOpen(true);
    } else {
-      alert("編集する食材を選択してください。");
+      showWarningMessage("編集する食材を選択してください。");
    }
  };
  // 変更を適用
@ -248,7 +259,7 @@ const StockPage: React.FC = () => {
    if (selectedRow) {
      setIsDeleteOpen(true);
    } else {
-      alert("削除する食材を選択してください。");
+      showWarningMessage("削除する食材を選択してください。");
    }
  };
  /** 削除ダイアログを閉じる */
@ -270,8 +281,6 @@ const StockPage: React.FC = () => {
              <TableRow>
                <TableCell>食材名</TableCell>
                <TableCell>数量</TableCell>
-                <TableCell>購入価格</TableCell>
-                <TableCell>購入日</TableCell>
                <TableCell>消費・賞味期限</TableCell>
              </TableRow>
            </TableHead>
@ -290,8 +299,6 @@ const StockPage: React.FC = () => {
                  >
                    <TableCell>{stock.stuffName}</TableCell>
                    <TableCell>{stock.amount}</TableCell>
-                    <TableCell>{stock.price}</TableCell>
-                    <TableCell>{formatDate(stock.buyDate)}</TableCell>
                    <TableCell
                      style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                    >
@ -330,6 +337,54 @@ const StockPage: React.FC = () => {
                  value={editStock.price}
                  onChange={handleChange}
                />
+                {/* 購入日・消費期限を横並びに */}
+                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                  {/* 購入日 */}
+                  <DatePicker
+                    selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          buyDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="購入日 (yyyy/MM/dd)"
+                        fullWidth
+                        name="buyDate"
+                      />
+                    }
+                    isClearable
+                  />
+                  {/* 消費・賞味期限 */}
+                  <DatePicker
+                    selected={editStock.expDate ? new Date(editStock.expDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          expDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="消費・賞味期限 (yyyy/MM/dd)"
+                        fullWidth
+                        name="expDate"
+                      />
+                    }
+                    isClearable
+                  />
+                </Box>
+                {/* 以前の書き方
                <TextField
                  label="購入日 (yyyy-MM-dd)"
                  fullWidth
@ -345,18 +400,15 @@ const StockPage: React.FC = () => {
                  name="expDate"
                  value={editStock.expDate}
                  onChange={handleChange}
-                />
-
-                <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
-                <Button
-                  variant="contained"
-                  color="success"
-                  onClick={handleApplyChanges}
-                  sx={{ mt: 3, mb: 2, left: "68%" }}
-                >
-                  変更を適用
-                </Button>
-
+                /> */}
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
+                    キャンセル
+                  </Button>
+                  <Button variant="contained" color="success" onClick={handleApplyChanges}>
+                    変更を適用
+                  </Button>
+                </Box>
              </>
            )}
          </DialogContent>
@ -375,13 +427,26 @@ const StockPage: React.FC = () => {
              <>
                <Typography variant="h4">【{selectedRow.stuffName}】を削除します。</Typography>
                <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                <Button onClick={() => { setIsDeleteOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                <Button variant="contained" color="error" onClick={() => {
-                  handleDeleteStock(selectedRow.stockId);
-                  setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
-                  setSelectedRow(null); // セルの選択を解除
-                }}
-                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => {
+                    setIsDeleteOpen(false);
+                    setSelectedRow(null);
+                  }}>
+                    キャンセル
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    onClick={() => {
+                      handleDeleteStock(selectedRow.stockId);
+                      setIsDeleteOpen(false);
+                      setSelectedRow(null);
+                    }}
+                  >
+                    削除
+                  </Button>
+                </Box>
              </>
            )}
          </DialogContent>
@ -398,6 +463,7 @@ const StockPage: React.FC = () => {
      </Typography>

      <Box sx={{ textAlign: 'right' }}>
+      {/* <Box sx={{ position: 'fixed', top: 16, right: 16, zIndex: 1000, display: 'flex', gap: 2 }}> */}
        {/* 在庫の食材追加ボタン */}
        <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
          追加
@ -554,8 +620,9 @@ const StockPage: React.FC = () => {
        </Dialog>

        {/* 在庫の食材編集ボタン（全テーブル共通） */}
-        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          編集
+        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
+          mt: 3, mb: 2, mr: 1 }}>
+          詳細・編集
        </Button>

        {/* 在庫の食材削除ボタン （全テーブル共通） */}
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@ -31,6 +31,7 @@ import AddStuffAmountDialog from '../components/AddStuffAmountDialog';
 import BuyDialog from '../components/BuyDialog';
 import { useNavigate } from 'react-router-dom';
 import DatePicker from 'react-datepicker';
+import { useMessage } from '../components/MessageContext';

 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留

@ -91,7 +92,7 @@ const TaskListPage: React.FC = () => {
    shop: undefined,
  });

-
+  const { showErrorMessage } = useMessage();

  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
@ -149,7 +150,7 @@ const TaskListPage: React.FC = () => {
  const handleAddNewToBuy = async () => {
    try {
      if (isNaN(newToBuy.amount)) {
-        console.log('数量が正しくありません．');
+        showErrorMessage('数量が正しくありません．');
        return;
      }

@ -171,7 +172,7 @@ const TaskListPage: React.FC = () => {
   const handleUpdateNewToBuy = async () => {
    try {
      if (isNaN(editingItem.amount)) {
-        console.log('数量が正しくありません．');
+        showErrorMessage('数量が正しくありません．');
        return;
      }

@ -195,7 +196,7 @@ const TaskListPage: React.FC = () => {
      console.log("newPrice:", newStock.price)
      console.log("parsedPrice: ", parsedPrice)
      if (isNaN(parsedPrice)) {
-        alert('入力が無効です')
+        showErrorMessage('価格が正しく入力されていません。')
        return
        //setNewStock({ ...newStock, price: parsedPrice });
      }
@ -251,6 +252,7 @@ const TaskListPage: React.FC = () => {
                  <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
                    onClick={() => {
                      setOpenInfoDialog(true)
+                      setEditingItem(tobuy)
                      setSelectedToBuyId(tobuy.tobuyId)
                      // handleDeleteTask(tobuy.tobuyId)
                    }}>
@ -294,28 +296,28 @@ const TaskListPage: React.FC = () => {
        </List>
      </div>
      {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
        <Typography variant="caption" color="textSecondary">
          材料のみ追加
        </Typography>
      </Box>
      <Fab
        color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
        onClick={() => setOpenAddToBuyDialog(true)}
      >
        <AddIcon />
      </Fab>

      {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
        <Typography variant="caption" color="textSecondary">
          料理から追加
        </Typography>
      </Box>
      <Fab
        color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
        onClick={() => {
          // setOpenAddToBuyDialog(true);
          navigate('/RecipeList');
@ -330,7 +332,7 @@ const TaskListPage: React.FC = () => {
      <AddStuffAmountDialog openDialog={openAddToBuyDialog} setOpenDialog={setOpenAddToBuyDialog} newItem={newToBuy} setNewItem={setNewToBuy} onSubmit={handleAddNewToBuy} />

      {/* 購入処理(在庫登録)のための数値入力ダイアログ */}
-      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
+      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} stuffName={editingItem.stuffName} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />

      {/* 数量変更ダイアログ */}
      <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@ -132,11 +132,11 @@ export const toBuyApi = {

  },

-  addByRecipe: async (recipeId: number): Promise<any> => {
+  addByRecipe: async (recipeId: number, servings: number): Promise<any> => {
    const response = await fetch(`${API_BASE_URL}/api/tobuy/addByRecipe`, {
      method: 'POST',
      headers: getHeaders(),
-      body: JSON.stringify({ recipeId }),
+      body: JSON.stringify({ recipeId, servings }),
    })
    if (!response.ok) {
      throw new Error(TOBUY_ERRORS.CREATE_FAILED);