レイアウト微調整、ボタンを押してタスクカードを追加する機能

s-yoshiii · May 6, 2022 · 6375203 · 6375203
1 parent 074a796
commit 6375203
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git a/src/components/task/TaskCard.tsx b/src/components/task/TaskCard.tsx
@@ -11,7 +11,7 @@ const TaskCard: FC = () => {
     { id: string; draggableId: string; text: string }[]
   >([]);
   return (
-    <Card variant="outlined" sx={{ width: { xs: "100%", md: 250 } }}>
+    <Card variant="outlined" sx={{ width: { xs: "100%", md: 300 } }}>
       <CardContent>
         <TaskCardTitle />
         <TaskCardDeleteButton />

diff --git a/src/components/task/TaskCardsArea.tsx b/src/components/task/TaskCardsArea.tsx
@@ -1,17 +1,36 @@
 import { Grid } from "@mui/material";
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import AddTaskCardButton from "./button/AddTaskCardButton";
 import TaskCard from "./TaskCard";
 
 const TaskCardsArea: FC = () => {
+  const [taskCardsList, setTaskCardList] = useState<
+    { id: string; draggableId: string }[]
+  >([{ id: "0", draggableId: "item-0" }]);
   return (
     <>
-      <Grid container spacing={5} px={5}>
-        <Grid item sx={{ width: { xs: "100%", sm: 275 } }}>
-          <TaskCard />
-        </Grid>
+      <Grid
+        container
+        spacing={5}
+        px={5}
+        justifyContent={{ xs: "center", sm: "flex-start" }}
+      >
+        {taskCardsList.map(
+          (taskCardList: { id: string; draggableId: string }) => (
+            <Grid
+              item
+              sx={{ width: { xs: "100%", sm: 325 } }}
+              key={taskCardList.id}
+            >
+              <TaskCard />
+            </Grid>
+          )
+        )}
         <Grid item>
-          <AddTaskCardButton />
+          <AddTaskCardButton
+            taskCardsList={taskCardsList}
+            setTaskCardList={setTaskCardList}
+          />
         </Grid>
       </Grid>
     </>

diff --git a/src/components/task/button/AddTaskCardButton.tsx b/src/components/task/button/AddTaskCardButton.tsx
@@ -1,12 +1,30 @@
 import { AddCircle } from "@mui/icons-material";
 import { Box, IconButton } from "@mui/material";
-import React, { FC } from "react";
-
-const AddTaskCardButton: FC = () => {
+import React, { Dispatch, FC, SetStateAction } from "react";
+import { v4 as uuidv4 } from "uuid";
+type Props = {
+  taskCardsList: { id: string; draggableId: string }[];
+  setTaskCardList: Dispatch<
+    SetStateAction<{ id: string; draggableId: string }[]>
+  >;
+};
+const AddTaskCardButton: FC<Props> = (props) => {
+  const { taskCardsList, setTaskCardList } = props;
+  const addTaskCard = () => {
+    const taskCardId = uuidv4();
+    //タスクカードを追加する
+    setTaskCardList([
+      ...taskCardsList,
+      {
+        id: taskCardId,
+        draggableId: `item${taskCardId}`,
+      },
+    ]);
+  };
   return (
-    <Box pt={10}>
-      <IconButton aria-label="add" sx={{ p: 0 }}>
-        <AddCircle color="primary" fontSize="large" />
+    <Box sx={{ pt: { md: 5 } }}>
+      <IconButton aria-label="add" onClick={addTaskCard}>
+        <AddCircle color="primary" sx={{ fontSize: 56 }} />
       </IconButton>
     </Box>
   );