학습 목표 : 레시피 만들기
-이전 스텝에서 학습한 내용을 이용해 데이터를 처리할 수 있다.
-클라이언트의 요청에 따라 데이터를 처리할 수 있다.
-여러 경우에 따른 데이터 처리 방법을 미리 설정할 수 있다.
<실습 5> 음료 만들기 #1
레시피가 정해졌으니 이제 어떤 음료가 들어와도 자동으로 처리해주도록 만들어야 한다.
// 주문서의 형식 : 주문할 음료의 이름과 옵션으로 구성되어 있다.
// 메뉴에 따라 기본적으로 들어가는 재료가 정해지고, 옵션으로 선택한 재료를 추가하는 방식으로 작업한다.
👇
let 주문서 = {
메뉴 : "딸기주스",
얼음 : 0,
당도 : 50,
수량 : 2,
사이즈 : "Tall"
} // GIF 파일을 참고하여 믹서기에 올바른 재료를 담아라.
👇
import checkRecipe from "./checkRecipe";
// 주문받은 메뉴를 확인하고 믹서기에 재료를 담아주세요!
//
// TIP 주문 들어온 음료가 맞는지 조건을 확인해주세요
// TIP mixer 배열에 push 명령어를 통해 재료를 담을 수 있습니다.
function makeJuice(order) {
let mixer = [];
if (order.menu === "토마토주스") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍅");
mixer.push("물");
mixer.push("설탕");
// 아래 코드는 주문 내역과 믹서기 속 재료가 일치한지 확인합니다.
let result = checkRecipe(order, mixer);
if (result === true) {
return { 토마토주스: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "당근주스") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🥕");
mixer.push("물");
mixer.push("설탕")
let result = checkRecipe(order, mixer);
if (result === true) {
return { 당근주스: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "딸기주스") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍓");
mixer.push("물");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 딸기주스: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "바나나주스") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍌");
mixer.push("물");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 바나나주스: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "키위주스") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🥝");
mixer.push("물");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 키위주스: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "딸기스무디") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍓");
mixer.push("우유");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 딸기스무디: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "바나나스무디") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍌");
mixer.push("우유");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 바나나스무디: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "키위스무디") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🥝");
mixer.push("우유");
mixer.push("설탕");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 키위스무디: mixer };
} else {
return { 실패: mixer };
} //-----------------------------------------
} else if (order.menu === "멋쟁이토마토") {
// 🍀 여기에 코드를 작성해주세요!
mixer.push("🍅");
mixer.push("멋짐");
let result = checkRecipe(order, mixer);
if (result === true) {
return { 멋쟁이토마토: mixer };
} else {
return { 실패: mixer };
}
}
}
export default makeJuice;
<결과물 5>
<실습 6> 음료 만들기 #2
메뉴를 제외하고 얼음 추가, 설탕 추가, 음료 사이즈와 같은 3개의 옵션을 처리하도록 한다.
다른 주문을 원할 경우, [main.js]에서 orders(우항) 뒤의 숫자를 바꾼다.
// 주문 내역: 멋쟁이 토마토, Tall 1잔
👇
import { useEffect, useState } from "react";
import makeJuice from "./App";
import recipes from "./recipes";
import "./styles.css";
import orders from "./orders.js";
export default function App() {
const [isClicked, setIsClicked] = useState(false);
const [image, setImage] = useState("fail.png");
const [quantity, setQuantity] = useState(1);
const [size, setSize] = useState("Tall"); 👈
const {
order1,
order2,
order3,
order4,
order5,
order6,
order7,
order8
} = orders;
// 다른 주문을 처리하려면 우항에 order뒤의 숫자를 변경해주세요!
👉 let order = order5;
let result = makeJuice(order);
let juice = Object.keys(result)[0];
let blender = juice === "실패" ? result["실패"] : result[order.menu];
const clickHandler = () => {
setIsClicked(!isClicked);
};
useEffect(() => {
let str = juice.slice(0, 2);
let result = "fail.png";
result =
str === "멋쟁"
? "CoolTomato.png"
: str === "딸기"
? "strawberry.png"
: str === "바나"
? "banana.png"
: str === "키위"
? "kiwi.png"
: str === "당근"
? "carrot.png"
: str === "토마"
? "tomato.png"
: "fail.png";
setImage(result);
if (!!order.quantity) {
setQuantity(order.quantity);
} else setQuantity(1);
if (!!order.size) {
setSize(order.size);
} else setSize("Tall");
});
function quantityHandler(quantity) {
const result = [];
for (let i = 1; i <= quantity; i++) {
result.push(
<img
className="ThirdQuantity"
onClick={clickHandler}
alt="true"
src={image}
/>
);
}
return result;
}
return (
<div className="App">
<div className="container">
<h2>{`<주문이 들어왔어! ${order.menu}를 만들자!>`}</h2>
<h3>{`주문 내역 : ${order.menu}(${
recipes[order.menu]
}) ${size} ${quantity}잔${
!!order.ice ? `, 얼음 ${order.ice}개 추가` : ""
}${!!order.sugar ? `, 설탕 ${order.sugar} 개 추가` : ""}`}</h3>
{/* 아래 이동부분 */}
<div className="upper contain">
{/* 상단 두개 */}
<div className="area">
<div className="name fruit">
<img src="name.png" alt="이름표지판" />
<div>과일</div>
</div>
{blender.filter((el) => el === recipes[order.menu][0]).length >
0 ? (
<div className="worker fruit">
<div className="tag">{recipes[order.menu][0]}</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : null}
</div>
<div className="area">
<div className="name water">
<img src="name.png" alt="이름표지판" />
<div> 물</div>
</div>
{blender.filter((el) => el === "물").length > 0 ? (
<div className="worker water">
<div className="tag">물</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : blender.filter((el) => el === "멋짐").length > 0 ? (
<div className="worker water">
<div className="tag">멋짐</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : null}
</div>
</div>
<div className="mixer center">
{/* 믹서기 */}
<img src="blender.png" alt="mixer" onClick={clickHandler} />
</div>
{isClicked ? (
<>
<div className="complete">
{image === "CoolTomato.png" ? (
<img
className="coolComplete"
src="CoolComplete.png"
alt="cool complete"
/>
) : (
<img
className="nomalComplete"
src="Complete.png"
alt="complete"
/>
)}
</div>
<div
className={`result ${image === "CoolTomato.png" ? "cool" : ""}`}
>
{quantityHandler(quantity)}
</div>
</>
) : null}
<div className="under contain">
{/* 하단 세개 */}
<div className="area">
<div className="name ice">
<img src="name.png" alt="이름표지판" />
<div>얼음</div>
</div>
{blender.filter((el) => el === "얼음").length > 0 ? (
<div className="worker ice">
<div className="tag">얼음</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : null}
</div>
<div className="area">
<div className="name milk">
<img src="name.png" alt="이름표지판" />
<div>우유</div>
</div>
{blender.filter((el) => el === "우유").length > 0 ? (
<div className="worker milk">
<div className="tag">우유</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : null}
</div>
<div className="area">
<div className="name sugar">
<img src="name.png" alt="이름표지판" />
<div>설탕</div>
</div>
{blender.filter((el) => el === "설탕").length > 0 ? (
<div className="worker sugar">
<div className="tag">설탕</div>
<img src="Worker.png" alt="worker cat" />
</div>
) : null}
</div>
</div>
<div className="script">
행운이 :
{juice === "실패"
? isClicked
? "이게 아닌데... 이건 전달할 순 없어.."
: "레시피를 확인해줘!"
: blender.length === 0
? "주문내용을 참고해서 재료를 담아줘!"
: isClicked
? "잘했어! 완성이야! 손님에게 전달하자!"
: "다 넣은 것 같아! 믹서기를 눌러줘!"}
</div>
</div>
</div>
);
}<결과물 6>
developerpyk