From e36161cc277e27ca9e7b4aaaa114e49291588b9b Mon Sep 17 00:00:00 2001
From: Irori235 <Irori235@gmail.com>
Date: Thu, 1 Jun 2023 17:45:26 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E3=82=AB=E3=83=86=E3=82=B4?=
 =?UTF-8?q?=E3=83=AA=E3=81=AE=E4=B8=8B=E3=81=AB=E7=B7=8F=E5=92=8C=E3=82=92?=
 =?UTF-8?q?=E5=87=BA=E3=81=99=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BudgetTable.tsx                | 91 +++++++++++--------
 .../foundation/Dropdown/Dropdown.tsx          |  4 +-
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/BudgetTable.tsx b/src/components/BudgetTable.tsx
index bf432c3..38b0971 100644
--- 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
index 96114fd..030975e 100644
--- 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 }) => (