✨ Feat: 발주량 뷰 구현 및 기능 구현 (#14)

Tasty-Inventory · Jun 17, 2024 · ffe1b8e · ffe1b8e
1 parent 506c269
commit ffe1b8e
Showing 2 changed files with 141 additions and 34 deletions.
diff --git a/src/pages/inventory/InventoryList.jsx b/src/pages/inventory/InventoryList.jsx
@@ -3,7 +3,7 @@ import * as M from '../../styles/Menu';
 import * as I from '../../styles/Inventory';
 
 export default function InventoryList() {
-  // 상태 정의
+  // 목업 데이터
   const [sampleData, setSampleData] = useState([
     {
       date: '2024-03-14',
@@ -14,42 +14,87 @@ export default function InventoryList() {
     },
   ]);
 
+  const [recordData, setRecordData] = useState([
+    {
+      inventoryId: 2,
+      inventoryName: '양파',
+      inventoryUnit: 'G',
+      currentVolume: 30,
+      updateDate: '2024.03.02',
+      orderVolume: 23,
+    },
+  ]);
+
   const [selectedOption, setSelectedOption] = useState('sold');
-  const [editMode, setEditMode] = useState(false);
-  const [editCount, setEditCount] = useState({});
+  const [soldEditMode, setSoldEditMode] = useState(false);
+  const [orderEditMode, setOrderEditMode] = useState(false);
+  const [soldEditCount, setSoldEditCount] = useState({});
+  const [orderCurrentCount, setOrderCurrentCount] = useState({});
+  const [orderCount, setOrderCount] = useState({});
 
   const handleOptionChange = e => {
     setSelectedOption(e.target.value);
   };
 
-  const handleEditClick = () => {
-    setEditMode(true);
+  const handleSoldEditClick = () => {
+    setSoldEditMode(true);
     const initialEditCount = {};
     sampleData[0].soldMenuList.forEach(menu => {
       initialEditCount[menu.menuId] = menu.soldCount;
     });
-    setEditCount(initialEditCount);
+    setSoldEditCount(initialEditCount);
   };
 
-  const handleSaveClick = () => {
-    // 예: axios.post('/api/updateSoldCount', { updatedCounts: editCount });
+  const handleOrderEditClick = () => {
+    setOrderEditMode(true);
+    const initialEditCurrentCount = {};
+    const initialEditOrderCount = {};
+    recordData.forEach(inventory => {
+      initialEditCurrentCount[inventory.inventoryId] = inventory.currentVolume;
+      initialEditOrderCount[inventory.inventoryId] = inventory.orderVolume;
+    });
+    setOrderCurrentCount(initialEditCurrentCount);
+    setOrderCount(initialEditOrderCount);
+  };
 
+  const handleSoldSaveClick = () => {
     // 목업 데이터를 업데이트
     const updatedData = sampleData.map(data => ({
       ...data,
       soldMenuList: data.soldMenuList.map(menu => ({
         ...menu,
-        soldCount: editCount[menu.menuId],
+        soldCount: soldEditCount[menu.menuId],
       })),
     }));
 
     // 상태 업데이트
     setSampleData(updatedData);
-    setEditMode(false);
+    setSoldEditMode(false);
+  };
+
+  const handleOrderSaveClick = () => {
+    // 목업 데이터를 업데이트
+    const updatedData = recordData.map(data => ({
+      ...data,
+      currentVolume: orderCurrentCount[data.inventoryId],
+      orderVolume: orderCount[data.inventoryId],
+    }));
+
+    // 상태 업데이트
+    setRecordData(updatedData);
+    setOrderEditMode(false);
+  };
+
+  const handleSoldInputChange = (menuId, value) => {
+    setSoldEditCount({ ...soldEditCount, [menuId]: value });
+  };
+
+  const handleCurrentOrderInputChange = (inventoryId, value) => {
+    setOrderCurrentCount({ ...orderCurrentCount, [inventoryId]: value });
   };
 
-  const handleInputChange = (menuId, value) => {
-    setEditCount({ ...editCount, [menuId]: value });
+  const handleOrderInputChange = (inventoryId, value) => {
+    setOrderCount({ ...orderCount, [inventoryId]: value });
   };
 
   return (
@@ -71,28 +116,17 @@ export default function InventoryList() {
                 />
                 <M.MenuName htmlFor="sold">오늘의 메뉴 판매량</M.MenuName>
               </li>
-              {/* <li>
+              <li>
                 <M.SelectRadio
                   type="radio"
                   name="menubar"
                   id="order"
                   value="order"
-                  // checked={selectedOption === 'inventory'}
-                  // onChange={handleOptionChange}
+                  checked={selectedOption === 'order'}
+                  onChange={handleOptionChange}
                 />
-                <M.MenuName htmlFor="order">재고 조회</M.MenuName>
+                <M.MenuName htmlFor="order">발주량</M.MenuName>
               </li>
-              <li>
-                <M.SelectRadio
-                  type="radio"
-                  name="menubar"
-                  id="graph"
-                  value="graph"
-                  // checked={selectedOption === 'inventory'}
-                  // onChange={handleOptionChange}
-                />
-                <M.MenuName htmlFor="graph">재고 조회</M.MenuName>
-              </li> */}
             </M.FlexLayout>
             {/* 새 메뉴 버튼, 새 재고 버튼 */}
           </M.MenuLayout>
@@ -105,12 +139,12 @@ export default function InventoryList() {
             <I.InventoryLayout>
               <I.HeadlineWrap>
                 <I.Headline2>Today 판매량</I.Headline2>
-                {editMode ? (
-                  <I.SaveBtn type="button" onClick={handleSaveClick}>
+                {soldEditMode ? (
+                  <I.SaveBtn type="button" onClick={handleSoldSaveClick}>
                     저장
                   </I.SaveBtn>
                 ) : (
-                  <I.SaveBtn type="button" onClick={handleEditClick}>
+                  <I.SaveBtn type="button" onClick={handleSoldEditClick}>
                     수정
                   </I.SaveBtn>
                 )}
@@ -130,12 +164,12 @@ export default function InventoryList() {
                       <I.TableCell>{menu.menuId}</I.TableCell>
                       <I.TableCell>{menu.menuName}</I.TableCell>
                       <I.TableCell>
-                        {editMode ? (
+                        {soldEditMode ? (
                           <I.TableInput
                             type="number"
-                            value={editCount[menu.menuId]}
+                            value={soldEditCount[menu.menuId]}
                             onChange={e =>
-                              handleInputChange(menu.menuId, e.target.value)
+                              handleSoldInputChange(menu.menuId, e.target.value)
                             }
                           />
                         ) : (
@@ -148,6 +182,78 @@ export default function InventoryList() {
               </table>
             </I.InventoryLayout>
           )}
+
+          {selectedOption === 'order' && (
+            <I.InventoryLayout $width="100%">
+              <I.HeadlineWrap $justify="center">
+                <I.Headline2>발주량과 재고</I.Headline2>
+                {orderEditMode ? (
+                  <I.SaveBtn type="button" onClick={handleOrderSaveClick}>
+                    저장
+                  </I.SaveBtn>
+                ) : (
+                  <I.SaveBtn type="button" onClick={handleOrderEditClick}>
+                    수정
+                  </I.SaveBtn>
+                )}
+              </I.HeadlineWrap>
+
+              <table>
+                <I.TableHead>
+                  <tr>
+                    <I.TableCell $font="16px">No.</I.TableCell>
+                    <I.TableCell $font="16px">재고명</I.TableCell>
+                    <I.TableCell $font="16px">단위</I.TableCell>
+                    <I.TableCell $font="16px">현재고</I.TableCell>
+                    <I.TableCell $font="16px">최근 업데이트 일자</I.TableCell>
+                    <I.TableCell $font="16px">금일 발주량</I.TableCell>
+                  </tr>
+                </I.TableHead>
+                <tbody>
+                  {recordData.map((data, index) => (
+                    <I.TableRow key={data.inventoryId} isEven={index % 2 === 0}>
+                      <I.TableCell>{data.inventoryId}</I.TableCell>
+                      <I.TableCell>{data.inventoryName}</I.TableCell>
+                      <I.TableCell>{data.inventoryUnit}</I.TableCell>
+                      <I.TableCell>
+                        {orderEditMode ? (
+                          <I.TableInput
+                            type="number"
+                            value={orderCurrentCount[data.inventoryId]}
+                            onChange={e =>
+                              handleCurrentOrderInputChange(
+                                data.inventoryId,
+                                e.target.value,
+                              )
+                            }
+                          />
+                        ) : (
+                          data.currentVolume
+                        )}
+                      </I.TableCell>
+                      <I.TableCell>{data.updateDate}</I.TableCell>
+                      <I.TableCell>
+                        {orderEditMode ? (
+                          <I.TableInput
+                            type="number"
+                            value={orderCount[data.inventoryId]}
+                            onChange={e =>
+                              handleOrderInputChange(
+                                data.inventoryId,
+                                e.target.value,
+                              )
+                            }
+                          />
+                        ) : (
+                          data.orderVolume
+                        )}
+                      </I.TableCell>
+                    </I.TableRow>
+                  ))}
+                </tbody>
+              </table>
+            </I.InventoryLayout>
+          )}
         </I.InventoryBodyWrap>
       </M.MenuBodyContainer>
     </div>

diff --git a/src/styles/Inventory.js b/src/styles/Inventory.js
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 
 export const InventoryLayout = styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
+  width: ${props => props.$width || ''};
 `;
 
 export const InventoryBodyWrap = styled.div`
@@ -20,6 +20,7 @@ export const HeadlineWrap = styled.div`
   display: flex;
   align-items: center;
   margin-left: 200px;
+  justify-content: ${props => props.$justify || ''};
 `;
 
 export const Headline2 = styled.h2`