[J] 1주차 PR1 #23
Merged
[J] 1주차 PR1 #23
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
J, 어디서 이미 일이나 개발관련 업무를 하다가 오신거에요? 기획서라고 해야하나, Task 나눠놓은거 너무 잘하신 것 같아서요! |
|
센스있으면서도 약간 헷갈릴 것 같은 UX? ㅎㅎ |
namse
reviewed
May 11, 2022
|
|
||
| export default function Product({ products }) { | ||
| const item = products.map((product) => <Item product={product} />); | ||
| return item; |
There was a problem hiding this comment.
return value of map은 array라서 복수형 items를 쓰는 편이 더 이해하기 좋을듯?
| import { Color, FontSize, F_Center } from '../Assets/Common.style'; | ||
|
|
||
| export default function Header() { | ||
| const [active, setActive] = useState('vending-machine'); |
There was a problem hiding this comment.
여기 'vending-machine'이나 'wallet' 이거 좀 실수하기 좋아보이네요. 따로 const 값 만들어서 사용해봅시다.
|
기능 구현은 별로 없어서 리뷰할 코드 양은 별로 없는듯? ㅎㅎ 컴포넌트 내부 구현은 시작부터 안해도 좋지만, 컴포넌트 사이의 부모자식 관계 뿐만 아니라 서로가 뭘 주고받을지 정도는 먼저 디자인하고 들어가는 편도 좋을 것 같아요. 왜냐하면 나중에 원하는걸 제공해주지 못해서 구조를 깨뜨려야하는 경우가 생길 수 있기 때문이에요. |
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 분리
hayoung123
pushed a commit
that referenced
this pull request
May 22, 2022
* PR 리뷰 반영 및 Product 스타일 개선 (#23) * Refactor: StrictMode 활성화 및 reducer 수정 - 전위연산자를 -1로 수정 - 일부는 스프레드 연산자로 state를 복사하도록 수정 Related to: #22 * Refactor: OrderLog 컴포넌트 리턴문 개선 - if문을 리턴문 안으로 이동함 Related to: #22 * Style: Children이 없는 컴포넌트 수정 * Design: Product 컴포넌트 스타일 개선 - isAvailable이 false이면 하얀 동그라미가 되도록 수정 - prop에 대한 조건문 수정 * 반환 기능 추가 및 리렌더링 개선 (#24) * Fix: 반환 버튼과 관련된 컴포넌트를 파일로 분리 * Feat: 반환 버튼 클릭시 투입한 돈 반환하기 구현 Related to: #13 * Style: 중복된 case문 병합 * Refactor: input에 돈 투입하는 함수를 컴포넌트와 분리 * Feat: 로그 메세지가 길어지면 스크롤이 자동으로 내려가는 기능 추가 - logMessage 함수 분리 * Feat: 전역 타이머값을 위한 TimerContext 생성 - 타이머의 남은 시간을 나타내는 UI 추가 Related to: #13 * Refactor: MoneyContext 개선 및 일부 컴포넌트에 memo 적용 - dispatch와 관련된 함수를 hook으로 분리 - dispatch 함수 내부로 logContext의 dispatch 함수를 호출하도록 수정 * Refactor: LogContext 개선 - MoneyProvider 내부의 dispatch를 사용한 함수를 hook으로 분리 * Style: OrderContainer 관련 컴포넌트에 고정된 width값 추가 * Refactor: ProductContext 개선 및 memo 적용 * Fix: 스크롤 개선 - scrollIntoView를 scrollTop으로 개선
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
안녕하세요~ J 입니다 🙇🏻♀️
2주동안 리뷰 잘 부탁드립니다 🙂
진행상황
story, task 나누기
story, task 보기
디자인
자판기 디자인
지갑 디자인
UI 구현중
vm.mov
아직 기능구현은 들어가지 못했습니다. 😭.
UI 구현을 위해 상품 data를 임의로 넣어두었습니다. (이미지는 일단 더미이미지 입니다. 추후 변경)
이후에는 UI 구현한 컴포넌트를 다시 보며 기능 및 상태에 대해서 설계 하면서 다시 작업할 예정입니다..