[DOTORI] 1주차 두번째 PR

src/App.js

@@ -1,23 +1,21 @@
-import styled, { ThemeProvider } from "styled-components";
-import { createGlobalStyle } from "styled-components";
-import reset from "styled-reset";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Home, VendingMachine, Wallet, NotFound } from "pages";
+import { ThemeProvider, createGlobalStyle } from "styled-components";
 import { theme } from "styles";
-
-const StyledApp = styled.div`
-  display: grid;
-  place-items: center;
-  align-content: center;
-  min-height: 100vh;
-`;
+import reset from "styled-reset";
+import { DisplayProvider } from "context";
+import { Routers } from "components";
 
 const GlobalStyles = createGlobalStyle`
 ${reset}
 * {
   box-sizing : border-box;
 }
 
+body{
+  width:100%;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
 div {
   border-radius: 10px;
 }
@@ -26,26 +24,16 @@ a:hover {
   cursor: pointer;
   font-size: 1.2em;
 }
-
 `;
 
 function App() {
   return (
-    <StyledApp>
-      <GlobalStyles />
+    <DisplayProvider>
       <ThemeProvider theme={theme}>
-        <BrowserRouter basename={process.env.PUBLIC_URL}>
-          <Routes>
-            <Route path="/" element={<Home />}>
-              <Route index element={<VendingMachine />} />
-              <Route path="/vendingmachine" element={<VendingMachine />} />
-              <Route path="/wallet/*" element={<Wallet />} />
-            </Route>
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
+        <GlobalStyles />
+        <Routers />
       </ThemeProvider>
-    </StyledApp>
+    </DisplayProvider>
   );
 }
 

src/components/AppLayout/AppLayout.jsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const ToggleWrapper = styled.div`
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: 100vh;
+  width: 100vw;
+  border-radius: 0px;
+  background-color: ${({ display }) => display.backgroundColor};
+`;
+
+function AppLayout({ display, children }) {
+  return <ToggleWrapper display={display}>{children}</ToggleWrapper>;
+}
+
+export { AppLayout };

src/components/Balance.jsx → src/components/Balance/Balance.jsx

@@ -1,4 +1,6 @@
+import { useContext } from "react";
 import styled from "styled-components";
+import { CoinContext } from "context";
 
 const StyledBalance = styled.div`
   width: 100%;
@@ -11,7 +13,10 @@ const StyledBalance = styled.div`
   margin-top: 10px;
 `;
 
-function Balance({ balance }) {
+function Balance() {
+  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

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

src/components/Coin/CoinContainer.jsx

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import styled from "styled-components";
+import { CoinContext } from "context";
+import { MemoizedCoin } from "components";
+
+const StyledCoinContainer = styled.ul`
+  li {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    grid-template-columns: 50% 50%;
+    margin: 10px;
+
+    span {
+      width: 100%;
+      background-color: #fff7bc;
+      display: grid;
+      place-items: center;
+      height: 50px;
+      color: #000;
+      border-radius: 10px;
+    }
+  }
+`;
+
+function CoinContainer() {
+  const { coin } = useContext(CoinContext);
+
+  return (
+    <StyledCoinContainer>
+      {coin.map(({ id, unit, count }) => (
+        <li key={id}>
+          <MemoizedCoin unit={unit} count={count} />
+        </li>
+      ))}
+    </StyledCoinContainer>
+  );
+}
+
+export { CoinContainer };

src/components/MainNav/MainNav.jsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { Nav } from "components";
+
+const StyledNav = styled.nav`
+  position: absolute;
+  top: 0;
+  padding-top: 20px;
+  margin-bottom: 10px;
+
+  ul {
+    display: flex;
+    margin-bottom: 20px;
+  }
+`;
+
+const Li = styled.li`
+  & + & {
+    margin-left: 1rem;
+  }
+
+  a {
+    display: grid;
+    place-items: center;
+    width: 200px;
+    height: 50px;
+    border-radius: 10px;
+    text-decoration: none;
+    color: #fff;
+    font-weight: 500;
+  }
+`;
+
+function MainNav() {
+  const activeStyle = ({ isActive }) => ({ backgroundColor: isActive ? "#512d6d" : "#9772fb" });
+
+  return (
+    <StyledNav>
+      <ul>
+        <Li>
+          <Nav link="/vendingmachine" activeStyle={activeStyle}>
+            자판기
+          </Nav>
+        </Li>
+        <Li>
+          <Nav to="/wallet" activeStyle={activeStyle}>
+            지갑
+          </Nav>
+        </Li>
+      </ul>
+    </StyledNav>
+  );
+}
+
+export { MainNav };

src/components/Routers/Routers.jsx

@@ -0,0 +1,19 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Home, VendingMachine, Wallet, NotFound } from "pages";
+
+function Routers() {
+  return (
+    <BrowserRouter basename={process.env.PUBLIC_URL}>
+      <Routes>
+        <Route path="/" element={<Home />}>
+          <Route index element={<VendingMachine />} />
+          <Route path="/vendingmachine" element={<VendingMachine />} />
+          <Route path="/wallet/*" element={<Wallet />} />
+        </Route>
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export { Routers };

src/components/ToggleDisplay/ToggleDisplay.jsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { Button } from "components";
+import { useDisplay } from "hooks";
+
+const StyledDisplay = styled.div`
+  position: absolute;
+  top: 30px;
+  right: 100px;
+
+  button {
+    box-shadow: 0px 0px 7px;
+  }
+`;
+
+function ToggleDisplay() {
+  const { displayMode, toggleDisplay } = useDisplay();
+  const color = displayMode === "light" ? "white" : "black";
+  const icon = displayMode === "light" ? "🌚" : "🌝";
+
+  return (
+    <StyledDisplay>
+      <Button color={color} size="small" onClick={toggleDisplay}>
+        {icon}
+      </Button>
+    </StyledDisplay>
+  );
+}
+
+export { ToggleDisplay };

src/components/common/Nav.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Nav({ children, link, activeStyle, ...rest }) {
+  return (
+    <NavLink to={link} style={activeStyle} {...rest}>
+      {children}
+    </NavLink>
+  );
+}
+
+export { Nav };

src/components/index.jsx

@@ -1,8 +1,15 @@
-export * from "./Coin";
-export * from "./Balance";
-export * from "./VendProduct";
-export * from "./VendController";
-export * from "./InsertCoin";
-export * from "./ChangeOutlet";
-export * from "./HistoryBox";
-export * from "./Button";
+export * from "./common/Button";
+export * from "./common/Nav";
+export * from "./Routers/Routers";
+export * from "./AppLayout/AppLayout";
+export * from "./MainNav/MainNav";
+export * from "./ToggleDisplay/ToggleDisplay";
+export * from "./coin/CoinContainer";
+export * from "./coin/Coin";
+export * from "./Balance/Balance";
+export * from "./vend-product/VendProductContainer";
+export * from "./vend-product/VendProduct";
+export * from "./vend-controller/VendController";
+export * from "./vend-controller/InsertCoin";
+export * from "./vend-controller/ChangeOutlet";
+export * from "./vend-controller/HistoryBox";