[DOTORI] 2주차 두번째 PR (codesquad-members-2022#109)

* chore: 프로젝트 초기 셋팅 (#2)

* feat:VendingMachine, Wallet 라우팅 (#5)

* Wallet Component - Markup (#6)

* update: money data

* design: Coin Component

* design: Balance Component

* design: Wallet Component

* VendingMachine Component - Markup (#9)

* update: product data

* design: VendProduct Component

* design: VendController Component

* design: HistoryBox Component

* design: VendingMachine Component

* design: ChangeOutlet Component

* design: InsertCoin Component

* refactor: VendController Component의 하위컴포넌트 분리

* chore: update yarn.lock

* Common Components 분리(1) (#10)

* feat: Button Component 구현

* feat: InsertCoin, BrandLabel, Unit에 Button Component 적용

* chore: polished 라이브러리 설치

* refactor: Nav를 NavLink 적용하여 리팩토링

* chore: gh-pages 라이브러리 설치

* Display Mode(dark/light) (#13)

* [DOTORI] 1주차 첫번째 PR (#25)

* chore: 프로젝트 초기 셋팅 (#2)

* feat:VendingMachine, Wallet 라우팅 (#5)

* Wallet Component - Markup (#6)

* update: money data

* design: Coin Component

* design: Balance Component

* design: Wallet Component

* VendingMachine Component - Markup (#9)

* update: product data

* design: VendProduct Component

* design: VendController Component

* design: HistoryBox Component

* design: VendingMachine Component

* design: ChangeOutlet Component

* design: InsertCoin Component

* refactor: VendController Component의 하위컴포넌트 분리

* chore: update yarn.lock

* Common Components 분리(1) (#10)

* feat: Button Component 구현

* feat: InsertCoin, BrandLabel, Unit에 Button Component 적용

* chore: polished 라이브러리 설치

* refactor: Nav를 NavLink 적용하여 리팩토링

* chore: gh-pages 라이브러리 설치

* feat: useDisplay 커스텀 훅 생성

* feat: AppLayout, ToggleDisplay Component 구현

* feat: DisplayProvider 구현

displayMode를 전역 상태로 관리한다.

* design: title font 변경, change outlet title 대문자로 변경

* PR1 Refactoring (#16)

* refactor: components 디렉토리 구조 변경

* feat: common components - Nav 구현

* refactor: 라우터 모듈 분리

* refactor: 사용하지 않는 styled-components 제거, div->span, strong 태그 변경

* refactor: CoinContainer, VendProductContainer Component 분리

* Wallet Component - 동전 투입 기능 (#17)

* feat: 금액 버튼 클릭시 해당 금액 개수 감소 렌더링

useCoin 커스텀 훅 사용

* feat: 금액 버튼 클릭시 잔고 금액 감소 렌더링

useBalance 커스텀 훅 사용

* feat: CoinProvider 생성

outlet 상위 컴포넌트에 생성하여 라우팅에 따른 상태 초기화 방지

* feat: InsertCoinProvider 구현

지갑에서 선택한 금액을 자판기에 투입된 금액으로 렌더링

* rename: components 디렉토리 구조 수정

* remove: merge로 생성된 중복 파일 제거

* rename: 컴포넌트 디렉토리명 대문자로 변경

* refactor: balance state 제거, useBalance삭제

coin state로 연산할 수 있는 balance state를 제거

* PR2 Refactoring (#21)

* refactor: setCoin 로직 변경

배열의 카피본에서 같은 값을 갖는 인덱스 요소의 객체를 변경 -> map 사용

* refactor: grid repeat 함수 적용

* refactor: Coin Component useMemo 적용, setProvider 분리

Coin Component 클릭시 금액의 변동사항이 있는 컴포넌트만 리렌더링 된다.

* feat: 지갑에서 금액을 투입하면 알림 문구가 뜬다. (#23)

useReducer 적용

* 자판기 - 금액 투입, 상품 선택기능  (#25)

* feat: 지갑에서 금액을 투입하면 알림 문구가 뜬다.

useReducer 적용

* feat: 자판기에 투입된 금액 자동보정 기능 구현

* design: historyBox list margin, 자판기 margin-top

* feat: 자판기에서 금액을 투입하면 알림 문구가 뜬다.

* refactor: 투입 금액 보정 함수 수정

재귀함수로 리팩토링

* feat: 자판기 투입 최소, 최대 금액 설정

0원이면 early return, 잔고보다 큰 금액이면 잔고를 return

* feat: 최대금액 입력시 지갑 잔고 관리

잔고와 동전의 개수는 0으로 초기화된다.

* feat: history provider 분리로 렌더링 최적화

* feat: SelectButton 구현

inputCoin과 stocked에 따라 선택 가능한 상품에 초록불을 렌더한다.

* feat: 선택 가능한 상품을 누를 때 상품명, 잔돈 알림 문구 구현

* feat: 돈을 투입하고 5초간 입력이 없으면 잔돈 자동반환

* feat: 투입금액이 추가 발생하면 타이머 초기화

디바운싱을 이용하여 타이머를 초기화한다.

* rename: setTimer -> setDebounce

* 자판기 - 상품 선택 기능(2) (#26)

* feat: 지갑에서 금액을 투입하면 알림 문구가 뜬다.

useReducer 적용

* feat: 자판기에 투입된 금액 자동보정 기능 구현

* design: historyBox list margin, 자판기 margin-top

* feat: 자판기에서 금액을 투입하면 알림 문구가 뜬다.

* refactor: 투입 금액 보정 함수 수정

재귀함수로 리팩토링

* feat: 자판기 투입 최소, 최대 금액 설정

0원이면 early return, 잔고보다 큰 금액이면 잔고를 return

* feat: 최대금액 입력시 지갑 잔고 관리

잔고와 동전의 개수는 0으로 초기화된다.

* feat: history provider 분리로 렌더링 최적화

* feat: SelectButton 구현

inputCoin과 stocked에 따라 선택 가능한 상품에 초록불을 렌더한다.

* feat: 선택 가능한 상품을 누를 때 상품명, 잔돈 알림 문구 구현

* feat: 돈을 투입하고 5초간 입력이 없으면 잔돈 자동반환

* feat: 투입금액이 추가 발생하면 타이머 초기화

디바운싱을 이용하여 타이머를 초기화한다.

* rename: setTimer -> setDebounce

* remove: vendProductOutlet Component 삭제

* refactor: 투입 금액 보정 로직 변경

잔고가 있는 돈의 배열을 재귀로 돌면서 투입금액에 가까이 누적시킨다.

* feat: 지갑과 자판기에서 금액을 투입하면 선택 시간 3초 초기화

provider에서 useEffect를 사용하여 wallet, vm 컴포넌트에서 insertCoin의 sideEffect를 감지

* refactor: 화살표 함수 컨벤션 통일

* refactor: 중복 코드를 하나의 객체로 변경

* refactor: styled component 분리

src/components/AppLayout/AppLayout.jsx

@@ -1,14 +1,4 @@
-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};
-`;
+import { ToggleWrapper } from "./AppLayout.styled";
 
 function AppLayout({ display, children }) {
   return <ToggleWrapper display={display}>{children}</ToggleWrapper>;

src/components/AppLayout/AppLayout.styled.js

@@ -0,0 +1,13 @@
+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};
+`;
+
+export { ToggleWrapper };

src/components/Balance/Balance.jsx

@@ -1,17 +1,6 @@
 import { useContext } from "react";
-import styled from "styled-components";
 import { CoinContext } from "context";
-
-const StyledBalance = styled.div`
-  width: 100%;
-  background-color: #c0eda6;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 70px;
-  border: none;
-  margin-top: 10px;
-`;
+import { StyledBalance } from "./Balance.styled";
 
 function Balance() {
   const coin = useContext(CoinContext);

src/components/Balance/Balance.styled.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const StyledBalance = styled.div`
+  width: 100%;
+  background-color: #c0eda6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 70px;
+  border: none;
+  margin-top: 10px;
+`;
+
+export { StyledBalance };

src/components/Coin/Coin.jsx

@@ -1,16 +1,16 @@
 import { useContext, memo } from "react";
-import { SetInsertCoinContext, SetCoinContext, HistoryContext } from "context";
+import { SetInsertCoinContext, SelectCoinContext, AddHistoryContext } from "context";
 import { Button } from "components";
 
 function Coin({ unit, count }) {
-  const selectCoin = useContext(SetCoinContext);
+  const selectCoin = useContext(SelectCoinContext);
   const setInsertCoin = useContext(SetInsertCoinContext);
-  const { addHistory } = useContext(HistoryContext);
+  const addHistory = useContext(AddHistoryContext);
 
   const handleCoinClick = () => {
     if (!count) return;
     selectCoin(unit);
-    setInsertCoin((prevCoin) => prevCoin + unit);
+    setInsertCoin((prevInsertCoin) => prevInsertCoin + unit);
     addHistory("INSERT_COIN", {
       coin: unit,
     });
@@ -26,10 +26,7 @@ function Coin({ unit, count }) {
   );
 }
 
-const areEqual = (prevProps, nextProps) => {
-  return prevProps.count === nextProps.count;
-};
-
+const areEqual = (prevProps, nextProps) => prevProps.count === nextProps.count;
 const MemoizedCoin = memo(Coin, areEqual);
 
 export { MemoizedCoin };

src/components/Coin/CoinContainer.jsx

@@ -1,27 +1,7 @@
 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;
-    }
-  }
-`;
+import { StyledCoinContainer } from "./CoinContainer.styled";
 
 function CoinContainer() {
   const coin = useContext(CoinContext);

src/components/Coin/CoinContainer.styled.js

@@ -0,0 +1,23 @@
+import styled from "styled-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;
+    }
+  }
+`;
+
+export { StyledCoinContainer };

src/components/MainNav/MainNav.jsx

@@ -1,34 +1,5 @@
-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;
-  }
-`;
+import { StyledNav, Li } from "./MainNav.styled";
 
 function MainNav() {
   const activeStyle = ({ isActive }) => ({ backgroundColor: isActive ? "#512d6d" : "#9772fb" });

src/components/MainNav/MainNav.styled.js

@@ -0,0 +1,32 @@
+import styled from "styled-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;
+  }
+`;
+
+export { StyledNav, Li };

src/components/ToggleDisplay/ToggleDisplay.jsx

@@ -1,16 +1,6 @@
-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;
-  }
-`;
+import { StyledDisplay } from "./ToggleDisplay.styled";
 
 function ToggleDisplay() {
   const { displayMode, toggleDisplay } = useDisplay();

src/components/ToggleDisplay/ToggleDisplay.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const StyledDisplay = styled.div`
+  position: absolute;
+  top: 30px;
+  right: 100px;
+
+  button {
+    box-shadow: 0px 0px 7px;
+  }
+`;
+
+export { StyledDisplay };

src/components/index.jsx

@@ -9,6 +9,7 @@ export * from "./coin/Coin";
 export * from "./Balance/Balance";
 export * from "./vend-product/VendProductContainer";
 export * from "./vend-product/VendProduct";
+export * from "./vend-product/SelectButton";
 export * from "./vend-controller/VendController";
 export * from "./vend-controller/InsertCoin";
 export * from "./vend-controller/ChangeOutlet";

src/components/vend-controller/ChangeOutlet.jsx

@@ -1,8 +1,13 @@
 import { Button } from "components";
+import { SetInsertCoinContext } from "context";
+import { useContext } from "react";
 
 function ChangeOutlet() {
+  const setInsertCoin = useContext(SetInsertCoinContext);
+  const handleChangeButtonClick = () => setInsertCoin(0);
+
   return (
-    <Button color="black" size="large">
+    <Button color="black" size="large" onClick={handleChangeButtonClick}>
       CHANGE
     </Button>
   );

src/components/vend-controller/HistoryBox.jsx

@@ -1,20 +1,14 @@
 import { HistoryContext } from "context";
 import { useContext } from "react";
-import styled from "styled-components";
-
-const StyledHistoryBox = styled.ul`
-  height: 300px;
-  background-color: #f2f2f2;
-  overflow-y: scroll;
-  margin-top: 10px;
-`;
+import { StyledHistoryBox } from "./VendController.styled";
 
 function History({ comment }) {
   return comment;
 }
 
 function HistoryBox() {
-  const { histories } = useContext(HistoryContext);
+  const histories = useContext(HistoryContext);
+
   return (
     <StyledHistoryBox>
       {histories.history.map(({ id, comment }) => (

src/components/vend-controller/InsertCoin.jsx

@@ -1,32 +1,37 @@
 import { useContext } from "react";
-import { InsertCoinContext } from "context";
-import styled from "styled-components";
+import { AddHistoryContext, CorrectCoinContext, InsertCoinContext, SetInsertCoinContext } from "context";
+import { StyledInsertCoin, TotalInsertCoin } from "./VendController.styled";
 
-const StyledInsertCoin = styled.input`
-  width: 100%;
-  height: 70px;
-  background-color: #f2f2f2;
-  border: none;
+const TotalInsertCoin = styled.p`
+  color: #f2f2f2;
+  border: 2px solid;
   border-radius: 10px;
-  margin: 0px 10px 10px 0px;
-  text-align: center;
-  font-size: 1.5em;
-
-  &:focus {
-    outline: none;
-  }
+  padding: 20px;
 `;
 
 function InsertCoin() {
+  const correctCoin = useContext(CorrectCoinContext);
   const insertCoin = useContext(InsertCoinContext);
+  const addHistory = useContext(AddHistoryContext);
+  const setInsertCoin = useContext(SetInsertCoinContext);
+
+  const handleInsertCoinBlur = ({ target }) => {
+    const inputCoin = Number(target.value);
+    target.value = "";
+
+    if (!inputCoin) return;
+    const correctedCoin = correctCoin(inputCoin);
+    setInsertCoin((prevInsertCoin) => prevInsertCoin + correctedCoin);
+    addHistory("INSERT_COIN", {
+      coin: correctedCoin,
+    });
+  };
 
   return (
-    <StyledInsertCoin
-      defaultValue={insertCoin}
-      type="number"
-      min="0"
-      placeholder="INSERT COIN"
-    ></StyledInsertCoin>
+    <>
+      <StyledInsertCoin type="number" min="0" placeholder="INSERT COIN" onBlur={handleInsertCoinBlur} />
+      <TotalInsertCoin>{insertCoin}</TotalInsertCoin>
+    </>
   );
 }
 

src/components/vend-controller/VendController.jsx

@@ -1,21 +1,5 @@
-import styled from "styled-components";
 import { InsertCoin, ChangeOutlet, HistoryBox } from "components";
-
-const StyledVendController = styled.div`
-  width: 300px;
-  margin-left: 10px;
-
-  div {
-    display: grid;
-    place-items: center;
-    margin: 0px 0px 10px 10px;
-    font-size: 1.5em;
-  }
-
-  div + div {
-    margin-top: 20px;
-  }
-`;
+import { StyledVendController } from "./VendController.styled";
 
 function VendController() {
   return (