[DOTORI] 2주차 첫번째 PR

src/components/Balance/Balance.jsx

@@ -14,7 +14,7 @@ const StyledBalance = styled.div`
 `;
 
 function Balance() {
-  const { coin } = useContext(CoinContext);
+  const coin = useContext(CoinContext);
   const balance = coin.reduce((acc, cur) => acc + cur.unit * cur.count, 0);
 
   return <StyledBalance>{balance + "원"}</StyledBalance>;

src/components/Coin/Coin.jsx

@@ -1,28 +1,35 @@
 import { useContext, memo } from "react";
-import { InsertCoinContext, CoinContext } from "context";
+import { SetInsertCoinContext, SetCoinContext, HistoryContext } from "context";
 import { Button } from "components";
 
 function Coin({ unit, count }) {
-  const { selectCoin } = useContext(CoinContext);
-  const { insertCoin, setInsertCoin } = useContext(InsertCoinContext);
+  const selectCoin = useContext(SetCoinContext);
+  const setInsertCoin = useContext(SetInsertCoinContext);
+  const { addHistory } = useContext(HistoryContext);
 
-  const clickCoin = () => {
+  const handleCoinClick = () => {
     if (!count) return;
-    selectCoin(unit, count);
-    setInsertCoin(insertCoin + unit);
+    selectCoin(unit);
+    setInsertCoin((prevCoin) => prevCoin + unit);
+    addHistory("INSERT_COIN", {
+      coin: unit,
+    });
   };
 
   return (
     <>
-      <Button color="yellow" size="medium" onClick={clickCoin}>
+      <Button color="yellow" size="medium" onClick={handleCoinClick}>
         <strong>{unit}</strong>
       </Button>
       <span>{count}</span>
     </>
   );
 }
 
-const areEqual = (prevProps, nextProps) => prevProps.count === nextProps.count;
+const areEqual = (prevProps, nextProps) => {
+  return prevProps.count === nextProps.count;
+};
+
 const MemoizedCoin = memo(Coin, areEqual);
 
 export { MemoizedCoin };

src/components/Coin/CoinContainer.jsx

@@ -24,7 +24,7 @@ const StyledCoinContainer = styled.ul`
 `;
 
 function CoinContainer() {
-  const { coin } = useContext(CoinContext);
+  const coin = useContext(CoinContext);
 
   return (
     <StyledCoinContainer>

src/components/vend-controller/HistoryBox.jsx

@@ -1,3 +1,5 @@
+import { HistoryContext } from "context";
+import { useContext } from "react";
 import styled from "styled-components";
 
 const StyledHistoryBox = styled.ul`
@@ -7,14 +9,18 @@ const StyledHistoryBox = styled.ul`
   margin-top: 10px;
 `;
 
-const History = styled.li``;
+function History({ comment }) {
+  return comment;
+}
 
 function HistoryBox() {
-  const history = [{ id: 1, type: "input", content: "500" }];
+  const { histories } = useContext(HistoryContext);
   return (
     <StyledHistoryBox>
-      {history.map(({ id, type, content }) => (
-        <History key={id}>{content + type}</History>
+      {histories.history.map(({ id, comment }) => (
+        <li key={id}>
+          <History comment={comment} />
+        </li>
       ))}
     </StyledHistoryBox>
   );

src/components/vend-controller/InsertCoin.jsx

@@ -18,7 +18,8 @@ const StyledInsertCoin = styled.input`
 `;
 
 function InsertCoin() {
-  const { insertCoin } = useContext(InsertCoinContext);
+  const insertCoin = useContext(InsertCoinContext);
+
   return (
     <StyledInsertCoin
       defaultValue={insertCoin}

src/components/vend-product/VendProductContainer.jsx

@@ -4,7 +4,7 @@ import { VendProduct } from "./VendProduct";
 
 const StyledVendProductContainer = styled.ul`
   display: grid;
-  grid-template-columns: 25% 25% 25% 25%;
+  grid-template-columns: repeat(4, 1fr);
 
   li {
     background-color: #f2f2f2;

src/context/CoinProvider.jsx

@@ -3,10 +3,16 @@ import { useCoin } from "hooks";
 import { money } from "data";
 
 const CoinContext = createContext();
+const SetCoinContext = createContext();
 
 function CoinProvider({ children }) {
   const { coin, selectCoin } = useCoin(money);
-  return <CoinContext.Provider value={{ coin, selectCoin }}>{children}</CoinContext.Provider>;
+
+  return (
+    <CoinContext.Provider value={coin}>
+      <SetCoinContext.Provider value={selectCoin}>{children}</SetCoinContext.Provider>
+    </CoinContext.Provider>
+  );
 }
 
-export { CoinContext, CoinProvider };
+export { CoinContext, SetCoinContext, CoinProvider };

src/context/HistoryProvider.jsx

@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+
+const { createContext, useReducer } = require("react");
+
+function historyReducer(histories, { type, history }) {
+  switch (type) {
+    case "INSERT_COIN":
+      histories.history = histories.history.concat({
+        ...history,
+        id: histories.history.length + 1,
+        comment: `${history.coin}원이 투입되었습니다.`,
+      });
+      return histories;
+    case "CHANGE_COIN":
+      histories.history = histories.concat({
+        ...history,
+        commet: `${history.change}이 반환되었습니다.`,
+      });
+      return histories;
+    case "PURCHASE_PRODUCT":
+      histories.history = histories.concat({ ...history, commet: `${history.product}를 구매했습니다.` });
+      return histories;
+    default:
+      return;
+  }
+}
+
+const initialHistory = {
+  history: [],
+};
+
+const HistoryContext = createContext();
+
+function HistoryProvider({ children }) {
+  const [histories, dispatch] = useReducer(historyReducer, initialHistory);
+
+  const addHistory = useCallback((type, history) => {
+    dispatch({
+      type,
+      history,
+    });
+  }, []);
+
+  return <HistoryContext.Provider value={{ histories, addHistory }}>{children}</HistoryContext.Provider>;
+}
+
+export { HistoryContext, HistoryProvider };

src/context/InsertCoinProvider.jsx

@@ -1,12 +1,16 @@
 import React, { useState, createContext } from "react";
 
 const InsertCoinContext = createContext();
+const SetInsertCoinContext = createContext();
 
 function InsertCoinProvider({ children }) {
   const [insertCoin, setInsertCoin] = useState(0);
+
   return (
-    <InsertCoinContext.Provider value={{ insertCoin, setInsertCoin }}>{children}</InsertCoinContext.Provider>
+    <InsertCoinContext.Provider value={insertCoin}>
+      <SetInsertCoinContext.Provider value={setInsertCoin}>{children}</SetInsertCoinContext.Provider>
+    </InsertCoinContext.Provider>
   );
 }
 
-export { InsertCoinContext, InsertCoinProvider };
+export { InsertCoinContext, SetInsertCoinContext, InsertCoinProvider };

src/context/index.jsx

@@ -1,3 +1,4 @@
 export * from "./DisplayProvider";
 export * from "./InsertCoinProvider";
 export * from "./CoinProvider";
+export * from "./HistoryProvider";

src/data/index.js

@@ -1,2 +1,2 @@
-export * from "./money";
-export * from "./product";
+export * from "./money.js";
+export * from "./product.js";

src/hooks/useCoin.jsx

@@ -3,15 +3,16 @@ import { useState, useCallback } from "react";
 function useCoin(init) {
   const [coin, setCoin] = useState(init);
 
-  const selectCoin = useCallback(
-    (unit, count) => {
-      const copyArray = [...coin];
-      const findIndex = coin.findIndex((e) => e.unit === unit);
-      copyArray[findIndex] = { ...copyArray[findIndex], count: count - 1 };
-      setCoin(copyArray);
-    },
-    [coin]
-  );
+  const selectCoin = useCallback((unit) => {
+    setCoin((prevCoin) =>
+      prevCoin.map((current) => {
+        if (current.unit === unit) {
+          return { ...current, count: current.count - 1 };
+        }
+        return current;
+      })
+    );
+  }, []);
 
   return { coin, selectCoin };
 }

src/index.js

@@ -3,8 +3,4 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<App />);

src/pages/Home.jsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Outlet } from "react-router-dom";
-import { DisplayContext, CoinProvider, InsertCoinProvider } from "context";
+import { DisplayContext, CoinProvider, InsertCoinProvider, HistoryProvider } from "context";
 import { AppLayout, MainNav, ToggleDisplay } from "components";
 import { theme } from "styles";
 
@@ -12,11 +12,13 @@ function Home() {
     <AppLayout display={displayObject}>
       <ToggleDisplay />
       <MainNav />
-      <InsertCoinProvider>
-        <CoinProvider>
-          <Outlet />
-        </CoinProvider>
-      </InsertCoinProvider>
+      <HistoryProvider>
+        <InsertCoinProvider>
+          <CoinProvider>
+            <Outlet />
+          </CoinProvider>
+        </InsertCoinProvider>
+      </HistoryProvider>
     </AppLayout>
   );
 }