Merge pull request #24 from kpuce2022CD/Feature-frontMarkup

프론트 마크업 머지
kpuce2022CD · Mar 2, 2022 · d755e43 · d755e43
2 parents 49b5ffc + e67d2c1
commit d755e43
Show file tree

Hide file tree

Showing 12 changed files with 17,283 additions and 2,946 deletions.
diff --git a/frontend/components/MenuFormCard.tsx b/frontend/components/MenuFormCard.tsx
@@ -3,14 +3,20 @@ import { useRecoilState } from "recoil";
 import { menuInputCardState } from "../recoil/states";
 
 const MenuFormCard = () => {
-  const [menuValues, setMenuValues] = useState<{
+  interface IMenuValue {
     menu: string;
     price: string;
     menuInfo: string;
-  }>({
+    allergy: string;
+    category: string;
+  }
+
+  const [menuValues, setMenuValues] = useState<IMenuValue>({
     menu: "",
     price: "",
     menuInfo: "",
+    allergy: "",
+    category: "",
   });
 
   const [menuCardValues, setMenuCardValues] =
@@ -27,7 +33,13 @@ const MenuFormCard = () => {
   const handleSubmit = (event: React.FormEvent) => {
     event.preventDefault();
     setMenuCardValues([...menuCardValues, menuValues]);
-    console.log(menuCardValues);
+    setMenuValues({
+      menu: "",
+      price: "",
+      menuInfo: "",
+      allergy: "",
+      category: "",
+    });
   };
 
   return (
@@ -51,6 +63,18 @@ const MenuFormCard = () => {
           value={menuValues.menuInfo}
           onChange={handleChange}
         />
+        <input
+          name="allergy"
+          placeholder="알러지 정보"
+          value={menuValues.allergy}
+          onChange={handleChange}
+        />
+        <input
+          name="category"
+          placeholder="카테고리"
+          value={menuValues.category}
+          onChange={handleChange}
+        />
         <button className="bg-gray-200" type="submit">
           저장
         </button>

diff --git a/frontend/components/MenuList.tsx b/frontend/components/MenuList.tsx
@@ -1,29 +1,36 @@
 import React from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { menuInputCardState } from "../recoil/states";
 
 const MenuList = () => {
-  interface menuPageType {
-    menuList: [
-      {
-        menu: string;
-        price: number;
-        menuInfo: string;
-      }
-    ];
-  }
+  const [menuList, setMenuList] = useRecoilState(menuInputCardState);
 
-  const menuList = useRecoilValue(menuInputCardState);
+  const handleDelete = (index: number) => {
+    console.log(`${index}`);
+    setMenuList([
+      ...menuList.filter((menu) => menuList.indexOf(menu) !== index),
+    ]);
+  };
 
   const MenuCardList = () => {
     return (
       <ul>
         {menuList.map((item, index) => (
-          <div className="bg-purple-200 m-2" key={index}>
-            {item.menu && <span className="bg-gray-200">삭제하기 x</span>}
-            <li key={index}>{item.menu}</li>
-            <li key={index}>{item.price}</li>
-            <li key={index}>{item.menuInfo}</li>
+          <div key={index} className="bg-purple-200 m-2">
+            {/* TODO: */}
+            {item.menu && (
+              <button
+                className="bg-gray-200"
+                onClick={() => handleDelete(index)}
+              >
+                삭제하기
+              </button>
+            )}
+            <li>{item.menu}</li>
+            <li>{item.price}</li>
+            <li>{item.menuInfo}</li>
+            <li>{item.allergy}</li>
+            <li>{item.category}</li>
           </div>
         ))}
       </ul>