Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[쥬] 1주차 수요일 PR #21

Closed
wants to merge 3 commits into from
Closed

Conversation

jwu-ice
Copy link
Collaborator

@jwu-ice jwu-ice commented May 11, 2022

No description provided.

jwu-ice added 3 commits May 9, 2022 11:54
* 🔧 jsconfig.json - src 경로 기준 상대경로

* 💄 tailwindcss 추가

* 💄 자판기 UI 구성
* 🚚 data 폴더로 초기값 이동

* 🚚 라우터와 링크 위치 수정
@jwu-ice jwu-ice added the review-FE New feature or request label May 11, 2022
@jwu-ice jwu-ice closed this May 12, 2022
hayoung123 pushed a commit that referenced this pull request May 18, 2022
* 1주차 금 PR 리뷰 반영 및 Router Link 리팩토링 (#17)

* Style: 컴포넌트 리스트에 맞는 변수명으로 변경
Related to: #16

* Fix: useEffect의 dependency 수정
Related to: #16

* Refactor: Link 컴포넌트를 NavLink 컴포넌트로 변경
- NavLink의 isActive를 이용해 스타일을 변경함

* LogContext 생성 및, 돈 투입시 log 메세지 출력 기능 구현 (#19)

* Feat: 자판기의 Log를 기록하는 LogContext 생성
- 돈 투입시 INSERT와 관련된 리듀서가 동작한다.
Related to: #18

* Feat: 돈 입력후 엔터시 투입하는 기능 추가

* Feat: Log가 출력되는 컴포넌트 분리 및 투입 메세지 출력
Related to: #14, #18

* Fix: MoneyContext의 input관련 state를 input 컴포넌트로 이동
- 입력할때마다 리렌더링이 발생해서 state를 input 컴포넌트로 이동함

* Style: 사용하지 않은 키워드 삭제

* 상품 투입 및 구매시 메세지를 보여주도록 구현 (#20)

* Feat: 상품 구입시 투입금액 감소 및 구입 메세지 구현
Related to: #12, #14, #18

* Fix: 지갑의 금액보다 큰 금액 입력시 총금액이 투입되는 메세지 추가

* Feat: 상품과 관련된 ProductsContext 추가
- 상품을 선택하면 상품의 수량이 하나씩 소진된다.
- 수량이 모두 소진되면 품절처리된다.

* Feat: 상품을 선택하면 2초 뒤에 배출되는 메세지 구현
Related to: #12, #14, #18

* Fix: 상품 클릭시 재고가 바로 감소되도록 수정

* Refactor: 금액 투입시 투입된 금액과 개수를 메세지로 출력하도록 수정
Related to: #14

* Chore: github pages 관련 세팅 추가 (#21)
kowoohyuk pushed a commit that referenced this pull request May 19, 2022
* 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 적용
kowoohyuk pushed a commit that referenced this pull request May 21, 2022
* 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 분리
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
review-FE New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant