✨ カテゴリの下に総和を出すように

Irori235 · Jun 1, 2023 · e36161c · e36161c · vercel · Jun 1, 2023
1 parent aaaf07b
commit e36161c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 40 deletions.
diff --git a/src/components/BudgetTable.tsx b/src/components/BudgetTable.tsx
@@ -17,68 +17,83 @@ const BudgetTable: React.FC<BudgetTableProps> = ({
     return null;
   }
 
-  const totalCost = budget.categories
-    .flatMap((category) => category.items)
-    .reduce((sum, item) => sum + item.cost, 0);
+  const calculateSum = (items: Item[]) =>
+    items.reduce((sum, item) => sum + item.cost, 0);
 
+  const totalCost = calculateSum(
+    budget.categories.flatMap((category) => category.items)
+  );
   const diff = budget.monthBudget - totalCost;
-  const symbol = diff >= 0 ? "▲" : "▼";
-  const color = diff >= 0 ? "text-green-500" : "text-pink-500";
+
+  const getColor = (value: number) =>
+    value >= 0 ? "text-green-500" : "text-pink-500";
+  const getSymbol = (value: number) => (value >= 0 ? "▲" : "▼");
 
   return (
     <>
       <table className="min-w-full divide-y divide-gray-200 mt-4">
         <thead className="bg-gray-50">
           <tr>
-            <th className="w-1/12 px-6 py-3"> </th>
+            <th className="w-1/12 px-6 py-3" />
             <th className="w-3/12 px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              category
+              Category
             </th>
             <th className="w-4/12 px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              name
+              Name
             </th>
             <th className="w-4/12 px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-              cost
+              Cost
             </th>
           </tr>
         </thead>
         <tbody className="bg-white divide-y divide-gray-200">
-          {budget.categories.map((category) => (
-            <React.Fragment key={category.name}>
-              {category.items.map((item) => (
-                <tr key={item.name}>
-                  <td className="w-1/12 px-6 py-4 whitespace-nowrap">
-                    <Checkbox
-                      checked={selectedItems.includes(item)}
-                      onChange={(e) => handleSelectItem(item, e.target.checked)}
-                    />
-                  </td>
-                  {item.name === category.items[0].name ? (
-                    <td
-                      className="w-3/12 px-6 py-4 font-light text-center"
-                      rowSpan={category.items.length}
-                    >
-                      {category.name}
+          {budget.categories.map((category) => {
+            const categorySum = calculateSum(category.items);
+            return (
+              <React.Fragment key={category.name}>
+                {category.items.map((item, index) => (
+                  <tr key={item.name}>
+                    <td className="w-1/12 px-6 py-4 whitespace-nowrap">
+                      <Checkbox
+                        checked={selectedItems.includes(item)}
+                        onChange={(e) =>
+                          handleSelectItem(item, e.target.checked)
+                        }
+                      />
+                    </td>
+                    {index === 0 && (
+                      <td
+                        className={"w-3/12 px-6 py-4 font-light text-center "}
+                        rowSpan={category.items.length}
+                      >
+                        {category.name ? <p>{category.name}</p> : <p>-</p>}
+
+                        <p className="px-4 text-sm text-blue-500">
+                          {categorySum}
+                        </p>
+                      </td>
+                    )}
+                    <td className="w-4/12 px-6 py-4 font-light text-center">
+                      {item.name}
+                    </td>
+                    <td className="w-4/12 px-6 py-4 font-light text-center">
+                      {item.cost}
                     </td>
-                  ) : null}
-                  <td className="w-4/12 px-6 py-4 font-light text-center">
-                    {item.name}
-                  </td>
-                  <td className="w-4/12 px-6 py-4 font-light text-center">
-                    {item.cost}
-                  </td>
-                </tr>
-              ))}
-            </React.Fragment>
-          ))}
+                  </tr>
+                ))}
+              </React.Fragment>
+            );
+          })}
         </tbody>
         <tfoot className="bg-white">
           <tr>
             <td
               colSpan={4}
-              className={`w-4/12 px-6 py-3 font-light  uppercase tracking-wider ${color} text-right`}
+              className={`w-4/12 px-6 py-3 font-light uppercase tracking-wider ${getColor(
+                diff
+              )} text-right`}
             >
-              {symbol} {Math.abs(diff)}
+              {getSymbol(diff)} {Math.abs(diff)}
             </td>
           </tr>
         </tfoot>

diff --git a/src/components/foundation/Dropdown/Dropdown.tsx b/src/components/foundation/Dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ interface DropdownProps {
 
 const Dropdown: React.FC<DropdownProps> = ({ options }) => {
   return (
-    <div className="shadow-sm">
+    <div className="shadow-sm relative">
       <Menu>
         {({ open }) => (
           <>
@@ -28,7 +28,7 @@ const Dropdown: React.FC<DropdownProps> = ({ options }) => {
               </svg>
             </Menu.Button>
             {open && (
-              <Menu.Items className="absolute w-24 py-1 mt-1 overflow-auto text-base bg-white border border-gray-300 rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              <Menu.Items className="absolute right-0 w-24 py-1 mt-1 overflow-auto text-base bg-white border border-gray-300 rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                 {options.map((option, index) => (
                   <Menu.Item key={index}>
                     {({ active }) => (