refactor: 백과 프론트 도메인을 맞추기 위한 수정

- 프론트의 amount => quantity, glass => quantity unit
woowacourse-teams · Feb 24, 2021 · a541df5 · a541df5
1 parent 832923c
commit a541df5
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 54 deletions.
diff --git a/front/src/component/userCocktail/GlassItem.js b/front/src/component/userCocktail/GlassItem.js
diff --git a/front/src/component/userCocktail/Ingredient.js b/front/src/component/userCocktail/Ingredient.js
@@ -23,8 +23,8 @@ const Ingredient = ({ setStage }) => {
         { ingredientId: selected.id, ingredientName: selected.name },
       ],
     });
-    history.push("/my-cocktail/glass");
-    setStage("glass");
+    history.push("/my-cocktail/quantity-unit");
+    setStage("quantity-unit");
   };
 
   const ingredients = () => {

diff --git a/front/src/component/userCocktail/Amount.js → front/src/component/userCocktail/Quantity.js b/front/src/component/userCocktail/Amount.js → front/src/component/userCocktail/Quantity.js
@@ -3,9 +3,8 @@ import { useHistory } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { userCocktailState } from "../../recoil";
 import div from "infinite-react-carousel";
-import GlassItem from "./GlassItem";
 
-const Amount = ({ setStage }) => {
+const Quantity = ({ setStage }) => {
   const history = useHistory();
   const [userCocktail, setUserCocktail] = useRecoilState(userCocktailState);
   const [selected, setSelected] = useState({ id: 0, name: "기본값" });
@@ -23,10 +22,10 @@ const Amount = ({ setStage }) => {
         {
           ingredientId: lastRecipe.ingredientId,
           ingredientName: lastRecipe.ingredientName,
-          glassId: lastRecipe.id,
-          glassName: lastRecipe.glassName,
-          amountId: selected.id,
-          amountName: selected.name,
+          quantityUnitId: lastRecipe.quantityUnitId,
+          quantityUnitName: lastRecipe.quantityUnitName,
+          quantityId: selected.id,
+          quantityName: selected.name,
         },
       ],
     });
@@ -54,7 +53,7 @@ const Amount = ({ setStage }) => {
 
   return (
     <div>
-      <div>amount 화면입니다.</div>
+      <div>quantity 화면입니다.</div>
       <div>
         <div>{selected.name}</div>
         <button>X</button>
@@ -69,18 +68,18 @@ const Amount = ({ setStage }) => {
         {"잔 종류: " +
           userCocktail.userRecipeItemRequests[
             userCocktail.userRecipeItemRequests.length - 1
-          ].glassName}
+          ].quantityUnitName}
       </div>
       <div>
         {/*Slider로 수정*/}
         {units &&
           units.map((it, index) => (
             <div
-              className="amount-unit-container"
+              className="quantity-unit-container"
               onClick={onSelect}
-              key={"amount" + index}
+              key={"quantity" + index}
             >
-              <div className="amount-unit" data-id={it.id}>
+              <div className="quantity-unit" data-id={it.id}>
                 {it.name}
               </div>
             </div>
@@ -93,4 +92,4 @@ const Amount = ({ setStage }) => {
   );
 };
 
-export default Amount;
+export default Quantity;
diff --git a/front/src/component/userCocktail/Glass.js → ...rc/component/userCocktail/QuantityUnit.js b/front/src/component/userCocktail/Glass.js → ...rc/component/userCocktail/QuantityUnit.js
@@ -3,9 +3,9 @@ import { useHistory } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import div from "infinite-react-carousel";
 import { userCocktailState } from "../../recoil";
-import GlassItem from "./GlassItem";
+import QuantityUnitItem from "./QuantityUnitItem";
 
-const Glass = ({ setStage }) => {
+const QuantityUnit = ({ setStage }) => {
   const history = useHistory();
   const [userCocktail, setUserCocktail] = useRecoilState(userCocktailState);
   const [selected, setSelected] = useState({ id: 0, name: "기본값" });
@@ -23,16 +23,16 @@ const Glass = ({ setStage }) => {
         {
           ingredientId: lastRecipe.ingredientId,
           ingredientName: lastRecipe.ingredientName,
-          glassId: selected.id,
-          glassName: selected.name,
+          quantityUnitId: selected.id,
+          quantityUnitName: selected.name,
         },
       ],
     });
-    history.push("/my-cocktail/amount");
-    setStage("amount");
+    history.push("/my-cocktail/quantity");
+    setStage("quantity");
   };
 
-  const glasses =
+  const quantityUnits =
     // api로 받아오든 내부에 있는 값을 가져오든 해야한다.
     // 값도 바뀌어야 한다. 백에서 원하는 SOJU BEER PAPER SHOT PIECE를 가지고 이미지 링크와 한글 이름이 필요하다.
     [
@@ -45,13 +45,13 @@ const Glass = ({ setStage }) => {
 
   const onSelect = (e) => {
     const selectedId = e.target.dataset.id;
-    const found = glasses.find((it) => it.id === parseInt(selectedId));
+    const found = quantityUnits.find((it) => it.id === parseInt(selectedId));
     setSelected(found);
   };
 
   return (
-    <div className="glass-container">
-      <div>glass 화면입니다.</div>
+    <div className="quantity-unit-container">
+      <div>quantity unit 화면입니다.</div>
       <div>
         <div>{selected.name}</div>
         <button>X</button>
@@ -64,9 +64,9 @@ const Glass = ({ setStage }) => {
       </div>
       <div>
         {/*Slider로 수정*/}
-        {glasses &&
-          glasses.map((it) => (
-            <GlassItem glass={it} key={it.id} onSelect={onSelect} />
+        {quantityUnits &&
+          quantityUnits.map((it) => (
+            <QuantityUnitItem unitItem={it} key={it.id} onSelect={onSelect} />
           ))}
       </div>
       <button className="next-button" type="submit" onClick={onNext}>
@@ -76,4 +76,4 @@ const Glass = ({ setStage }) => {
   );
 };
 
-export default Glass;
+export default QuantityUnit;
diff --git a/front/src/component/userCocktail/QuantityUnitItem.js b/front/src/component/userCocktail/QuantityUnitItem.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const QuantityUnitItem = ({ unitItem, onSelect }) => {
+  return (
+    <div className="quantity-unit-item-container" onClick={onSelect}>
+      <div className="quantity-unit-item" data-id={unitItem.id}>
+        {unitItem.name}
+      </div>
+    </div>
+  );
+};
+
+export default QuantityUnitItem;
diff --git a/front/src/component/userCocktail/Recipe.js b/front/src/component/userCocktail/Recipe.js
@@ -46,7 +46,7 @@ const Recipe = ({ setStage }) => {
 
   const recipe = userCocktail.userRecipeItemRequests.map((it, index) => (
     <div key={"recipe" + index}>
-      {it.ingredientName} {it.glassName} {it.amountName}
+      {it.ingredientName} {it.quantityUnitName} {it.quantityName}
       <button onClick={removeRecipe} data-id={index}>
         X
       </button>

diff --git a/front/src/component/userCocktail/UserCocktail.js b/front/src/component/userCocktail/UserCocktail.js
@@ -1,14 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import StepProgressBar from "./StepProgressBar";
 import "react-step-progress-bar/styles.css";
 import "../../css/userCocktail/userCocktail.css";
 import Question from "./Question";
 import Name from "./Name";
 import Ingredient from "./Ingredient";
-import Glass from "./Glass";
-import Amount from "./Amount";
+import Quantity from "./Quantity";
 import Recipe from "./Recipe";
-import List from "./UserCocktailItems";
+import QuantityUnit from "./QuantityUnit";
 import UserCocktailItems from "./UserCocktailItems";
 
 const UserCocktail = () => {
@@ -23,10 +22,10 @@ const UserCocktail = () => {
         return <Name setStage={setStage} />;
       case "ingredients":
         return <Ingredient setStage={setStage} />;
-      case "glass":
-        return <Glass setStage={setStage} />;
-      case "amount":
-        return <Amount setStage={setStage} />;
+      case "quantity-unit":
+        return <QuantityUnit setStage={setStage} />;
+      case "quantity":
+        return <Quantity setStage={setStage} />;
       case "recipe":
         return <Recipe setStage={setStage} />;
     }
@@ -40,9 +39,9 @@ const UserCocktail = () => {
         return 0;
       case "ingredients":
         return 25;
-      case "glass":
+      case "quantity-unit":
         return 50;
-      case "amount":
+      case "quantity":
         return 75;
       case "recipe":
         return 100;

diff --git a/front/src/constants/index.js b/front/src/constants/index.js
@@ -39,8 +39,10 @@ export const USER_COCKTAIL_PROTOTYPE = {
     // {
     //   ingredientId: "",
     //   ingredientName: "",
-    //   quantityUnit: "",
-    //   quantity: "",
+    //   quantityUnitId: "",
+    //   quantityUnitName: "",
+    //   quantityId: "",
+    //   quantityName: "",
     // },
   ],
   description: "",