デザインの調整

frontend/src/pages/AddRecipe.tsx

@@ -71,6 +71,16 @@ const AddRecipe: React.FC = () => {
 
   const handleSaveRecipe = async () => {
 
+    if (!recipeName) {
+      alert('レシピ名が入力されていません！')
+      return false;
+    }
+
+    if (!items.length) {
+      alert('材料が追加されていません！')
+      return false;
+    }
+
     if (!recipeId) {
       //  新規追加
       const response = await recipeApi.addRecipe({
@@ -94,11 +104,13 @@ const AddRecipe: React.FC = () => {
   const handleSubmit = async () => {
     const recipeId = await handleSaveRecipe();
     // alert('レシピが保存されました！');
+    if (!recipeId) return;
     navigate('/recipeList');
   }
 
   const handleSubmitAndAddToBuy = async () => {
     const recipeId = await handleSaveRecipe();
+    if (!recipeId) return false;
     await toBuyApi.addByRecipe(recipeId);
     // alert('レシピが保存されて買うものリストに追加されました！');
     navigate('/tasks');
@@ -188,7 +200,7 @@ const AddRecipe: React.FC = () => {
           </Fab>
         </div>
 
-        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%" }}>
+        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%", whiteSpace: 'nowrap' }}>
           <Button variant='contained' color="primary" onClick={handleSubmit} sx={{ marginRight: "1rem" }}>
             <SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
             レシピを保存