[Park] 자판기 미션 1주차 - 수요일 PR #2

healtheloper · 2022-05-11T07:08:41Z

안녕하세요 달리!
이번 미션 첫 PR 보냅니다.

데모

Context API 를 활용해서 react-router-dom 의 Link 를 통해 이동하여도 상태가 유지되게 하였습니다.
Route 가 변경(이동) 할 때, 상태를 유지하기 위해서(?) Context 를 활용했는데, Context API 를 사용하면 앱 전체가 리렌더링 되어서 렌더링 효율 측면에서 좋지 못하다는 이야기를 들은 적이 있습니다.
- 다른 Route 에서도 쓰여지는 State 라면 useNavigation + useHistory 혹은 Link 를 path 만 보낸 것이 아닌 객체를 보내는 방법 등을 활용해서 넘기는 방식이 더 좋은걸까요?

<Link
  to={{
    pathname: '/vendingMachine',
    state: {
      inputMoney,
      logs,
    },
  }}
>
  <Button>자판기</Button>
</Link>

* Chore: CRA으로 프로젝트 생성 - 불필요한 파일 및 코드 삭제 Related to: #1 * Chore: 절대경로 설정 - jsconfig.json 파일 추가 Related to: #1 * Chore: 필요한 패키지 설치 - react-router-dom, styled-components, styled-reset 설치 Related to: #1 * Chore: prettier 설정 적용 Close: #1

* 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 라이브러리 설치

amorfati0310

안녕하세요 리뷰를 맡게 된 달리입니다.
금방 많이 작성하셨네요 👍

UX적으로 layout이나 사용성도 개선해보시면 좋을 것 같아요

다른 Route 에서도 쓰여지는 State 라면 useNavigation + useHistory 혹은 Link 를 path 만 보낸 것이 아닌 객체를 보내는 방법 등을 활용해서 넘기는 방식이 더 좋은걸까요?
react-router-dom에서 api로 state넘기는 부분이 유용한 경우 잘 활용해주면 좋을 것 같네요 👍

amorfati0310 · 2022-05-11T16:45:51Z

public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">


한글 앱이면 lang ko로 변경해주면 좋을 것 같네요

Suggested change

<html lang="en">

<html lang="ko">

application에 맞는 타이틀로 수정해보시면 좋을 것 같네요

amorfati0310 · 2022-05-11T16:48:41Z

README.md

@@ -1,2 +1 @@
 # fe-vm


#31 (comment)
ReadMe도 관리해보시면 좋을 것 같네요

amorfati0310 · 2022-05-11T16:54:04Z

package.json

+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {


rule이나 패키지가 많아지면 eslint 파일을 따로 관리하는 것도 고려해보세요

amorfati0310 · 2022-05-11T16:57:16Z

src/components/Layout.jsx

+      <nav>
+        <NavItems>
+          <NavItem>
+            <Link to='/vendingMachine'>


현재 페이지에 맞는 링크면 active되도록 설정해보시면 좋을 것 같네요

amorfati0310 · 2022-05-11T16:58:09Z

src/components/Layout.jsx

+  width: 100vw;
+  height: 10rem;
+  padding: 10px;
+  background-color: ${COLORS.WHITE};


colors 변수로 관리하는 것 좋네요 👍
몇가지 ui 라이브러리들을 참고해서 color pallete, theme등을 구성해보시면 좋을 것 같습니다.

amorfati0310 · 2022-05-11T16:59:45Z

src/components/Layout.jsx

+`;
+
+const NavItem = styled.li`
+  margin: 0px 5px;


여백은 상위 ul에서 gap을 10px 주는 방식도 고려해보세요

amorfati0310 · 2022-05-11T17:01:35Z

src/components/Layout.jsx

+  width: 50%;
+`;
+
+const Button = styled.button`


여유가 되시면 자판기 앱에서 쓰이는 공용버튼으로 여러군데 쓰일 수 있는 컴포넌트를 설계해서 재사용해보시면 좋을 거 같습니다.

amorfati0310 · 2022-05-11T17:03:30Z

src/components/VendingMachine/VMInputBox.jsx

+  };
+
+  return (
+    <InputBoxWrapper>


해당 field는 form으로 구성하는게 어떨까요?
onSubmit으로 입력받으면 enter 이벤트도 쉽게 받을 수 있어서 사용성 및 개발 경험에 용이할 것 같네요

사용자가 잘못입력하는 경우에 edge처리도 해주면 좋을 것 같네요
ex) 숫자를 입력 안 한 경우

amorfati0310 · 2022-05-11T17:06:00Z

src/components/VendingMachine/VMInputMoney.jsx

+          updateInputMoney={updateInputMoney}
+        />
+      ) : (
+        <TextBox onClick={handleClickTextBox}>{inputMoney} 원</TextBox>


원을 표시할 때 1000원단위로 , 표시도 해주면 좋을 것 같습니다.

amorfati0310 · 2022-05-11T17:24:40Z

src/components/Wallet/MoneyBox.jsx

+  background-color: ${({ isActive }) =>
+    isActive ? COLORS.MAIN_BG : COLORS.WHITE};
+  ${({ isActive }) => {
+    if (isActive) {


isActive && ... 로도 적용해도 되겠네요.

* Build: 환경 설정 closed issue #1 * Design: reset css 추가 - styled-component 추가 - styled-reset 추가 issue #2 * Build: 절대 경로로 수정 closed issue #4 * feat: 라우터 생성 closed issue #5 * Design: reset css 추가 - Global styles 사용 issue #2 * Feat, Design: GNB 생성 및 라우터 적용 closed issue #5 issue #2 * Test: product mock 데이터 생성 issue #3 * Design: 자판기 영역 전체틀 style 생성 issue #2 * Build: eslint package 내에서 설정으로 변경 * Feat: GNB 클릭 시 활성화 기능 추가

* 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를 제거

- Install prop-types - Set styles according to props

- Install addon controls - Set args controls

* 🚚 data 폴더로 초기값 이동 * 🚚 라우터와 링크 위치 수정

issue #2

- 제품 전체 opacity 처리 issue #2

issue #2

Fix: 수정중에 미처 변경 못한 코드 수정

Related to: #2

* preview에서 global style과 default theme 적용 Related to: #2

Related to: #2

* polished 라이브러리 설치 - lighten, darken Related to: #2

* thinButton - active, disabled, soldout * smallButton - point * mediumButton - point, disabled, large * largeButton - rounded Related to: #2

Related to: #2

*Related to: #2

* 로고의 텍스트 부분을 h1 태그로 고유한 Atom 으로 구현 * 테스트 코드 작성 Related to: #2

Related to: #2

- iconName toggle check * Related to: #2

* default style 에 xxLarge font size 추가 * 공통되는 Border 와 Flex Style common 으로 분리 Related to: #2

Related to: #2

* Related to: #2

Related to: #2

* Related to: #2

Related to: #2

Related to: #2, #3

* type 스토리 테스트 코드 작성 Related to: #2

* 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 적용

* 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 분리

healtheloper added 18 commits May 11, 2022 15:55

Initialize project using Create React App

3f14587

init: CRA init

b8b8950

feat: react router dom

ec17b4f

env: 절대경로 설정

0ee7aeb

feat: add global style

224a4c9

style: header style

499adbe

data: mocks data add

a31327f

style: 자판기 css 작업 완료

2e25405

style: wallet style

23f673c

refactor: VendingMachine components

ff63ddc

feat: input box update

4ea9826

feat: 잔돈 반환, input box 통해 돈 투입

5ccb8c5

feat: log provider use context

56c2ee8

rename: vending machine components move

4700992

feat: wallet update use context

36f1ed5

refactor: insert log logic use log context

66760fd

refactor: logs 사용 logic context 로 변경

3b869b9

env: netlify ignore

3e738d2

healtheloper requested a review from amorfati0310 May 11, 2022 07:08

healtheloper assigned amorfati0310 May 11, 2022

amorfati0310 approved these changes May 11, 2022

View reviewed changes

healtheloper merged commit 41acf4e into codesquad-members-2022:park May 12, 2022

ink-0 pushed a commit that referenced this pull request May 14, 2022

feat: Add styled button (#2)

7d1c2b8

- Install prop-types - Set styles according to props

ink-0 pushed a commit that referenced this pull request May 14, 2022

feat: Add button story (#2)

ea1b545

- Install addon controls - Set args controls

ink-0 pushed a commit that referenced this pull request May 14, 2022

[Day-2] 상수 파일 분리 (#2)

05198ed

* 🚚 data 폴더로 초기값 이동 * 🚚 라우터와 링크 위치 수정

amorfati0310 pushed a commit that referenced this pull request May 15, 2022

Design: 자판기 스타일 완성

2890136

issue #2

amorfati0310 pushed a commit that referenced this pull request May 15, 2022

Feat: 재고 없는 제품 disabled 처리 스타일 수정

5d751af

- 제품 전체 opacity 처리 issue #2

amorfati0310 pushed a commit that referenced this pull request May 15, 2022

Design: 자판기 스타일 개선

c1dd6d3

issue #2

hayoung123 pushed a commit that referenced this pull request May 15, 2022

Merge pull request #2 from soralee2821/dev

b27538f

Fix: 수정중에 미처 변경 못한 코드 수정

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Global Style과 Theme 구현

7c1592a

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Build: Storybook 설치 및 초기 설정

96c4b4c

* preview에서 global style과 default theme 적용 Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Button Atom 컴포넌트 구현

1ea37e4

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Design: Button Atom Component 타입 별 디자인 구현

d844416

* polished 라이브러리 설치 - lighten, darken Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Test: Button Atom 컴포넌트 스토리북 테스트 코드 작성

e952003

* thinButton - active, disabled, soldout * smallButton - point * mediumButton - point, disabled, large * largeButton - rounded Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: LogoImage Atom Component 구현

5efcb40

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Remove: global, default 스타일 파일 assets/style 로 이동

a4dd906

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Refactor: Button 컴포넌트에서 styled 컴포넌트 분리

466d65e

*Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: LogoTitle Atom 컴포넌트 구현

384200d

* 로고의 텍스트 부분을 h1 태그로 고유한 Atom 으로 구현 * 테스트 코드 작성 Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Icon Atom Component 구현

a0f5060

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Test: Icon Atom Component 스토리 테스트 코드 작성

605f84a

- iconName toggle check * Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Design: 스타일 공통 요소 추가 및 분리

d8fdd8f

* default style 에 xxLarge font size 추가 * 공통되는 Border 와 Flex Style common 으로 분리 Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Input Atom Component 구현

93f660b

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Test: Input Story Test Code 작성

1c6f70e

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Label Atom Component 구현

be07066

* Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Test: Label Atom Story Test Code 작성

f1583e8

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: ListItem Atom Component 구현

894c069

* Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Test: ListItem Story Test Code 작성

025f971

Related to: #2

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Design: Emoji Label Style 추가

6739370

Related to: #2, #3

snowjang24 pushed a commit that referenced this pull request May 16, 2022

Feat: Logo Molecules Component 구현

b3de17d

* type 스토리 테스트 코드 작성 Related to: #2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Park] 자판기 미션 1주차 - 수요일 PR #2

[Park] 자판기 미션 1주차 - 수요일 PR #2

healtheloper commented May 11, 2022 •

edited

Loading

amorfati0310 left a comment

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

amorfati0310 May 11, 2022

[Park] 자판기 미션 1주차 - 수요일 PR #2

[Park] 자판기 미션 1주차 - 수요일 PR #2

Conversation

healtheloper commented May 11, 2022 • edited Loading

데모

amorfati0310 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

healtheloper commented May 11, 2022 •

edited

Loading