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.

Sign up for GitHub

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

Jump to bottom

[Design System] Checkbox Component를 디자인 시스템에 추가한다. #92

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open

[Design System] Checkbox Component를 디자인 시스템에 추가한다. #92

wants to merge 30 commits into from

Conversation

IRONAGE-Park
Copy link
Collaborator

@IRONAGE-Park IRONAGE-Park commented Sep 20, 2022 •
edited
Loading

개요 🔍

작업 내용 📝

  • 체크박스를 총 4가지 컴포넌트(Outline, Fill, Radio, Nested)로 생성하였습니다.
  • svg-jest 모듈이 jest28 버전 이후로 지원하지 않아 트랜스폼 파일을 작성하였습니다.

기타 사항 🙋‍♂️

  • OutlineCheckbox에서 여러 줄 표현을 위해 현재 텍스트를 세로 중앙 정렬 하지 않고 상단으로부터 마진을 주는 방식을 선택했는데 괜찮은지 모르겠습니다.
  • RadioButton이 실제 HTML의 라디오처럼 동작하게 해야할 지 모르겠습니다.
  • Font가 적용되지 않아 적용하는 코드를 여기에 추가했습니다 ㅠ

IRONAGE-Park and others added 17 commits July 31, 2022 00:24
# feat: 단일 선택 체크박스, 다중 선택 체크박스 파일 생성
3656c3f
@IRONAGE-Park
# docs: storybook을 작성하는 중입니다.
e60c66f
@IRONAGE-Park
# feat: Checkbox와 MultipleCheckbox를 작성하고, storybook과 test를 구성…
a8e9111 
…하였습니다. 작성 도중 필요 없는 모듈인 `@emotion/babel-plugin`, `@babel/core`, `babel-loader`를 삭제하고, 테스트에서 `svg`를 로드하기 위해 `svg-jest` 모듈을 불러왔습니다.
@IRONAGE-Park
Merge remote-tracking branch 'origin/master' into component/checkbox
63e910e 
# Conflicts:
#	src/App.tsx
@IRONAGE-Park
# feat: Checkbox와 MultipleCheckbox에 새로운 Check SVG와 스타일을 적용하였습니다.
a474355
@IRONAGE-Park
# review: Reflect Review
ae3f3df
@IRONAGE-Park
# review: Reflect Review -> interface update
9d8943f
@IRONAGE-Park
# review: Reflect Review -> 불필요한 label 렌더링 제거 및 공통 스타일 조합
5ae4ed3
# fix: Reflect Review
2fe81e2 
- `disabled` 상태와 `locked` 상태 통합하였습니다.
- 단일 선택 `Checkbox`에서 `text` `Props`를 반드시 입력해야 하도록 강제하였습니다.
- `Toggle`과 `Checkbox`의 `Props`를 통일하였습니다.
@IRONAGE-Park
Merge branch 'master' into component/checkbox
82fa363 
# Conflicts:
#	package.json
#	src/assets/svg/Check.svg
#	src/assets/svg/Lock.svg
#	src/assets/svg/index.ts
#	yarn.lock
@IRONAGE-Park
# ADD: Checkbox Single Component [complete]
d8c85e8 
- Set Subtract Icon
- Combine to Toggle / Checkbox Props
@IRONAGE-Park
# FIX: change Subtract Icon, Toggle import path
5638122
@IRONAGE-Park
# ADD: first implements SubCheckbox List
0d85351
@IRONAGE-Park
# UPDATE: SubCheckboxList, delete not used export interface
95a35aa
# UPDATE: delete svg-jest, configuration snapshot test,
7df9a16
@IRONAGE-Park
# ADD: test code, storybook update
a63234f
@IRONAGE-Park
# UPDATE: NestedCheckbox snapshot test
6cb6720
@IRONAGE-Park IRONAGE-Park added Developer 개발자 이슈 Process 작업 단위(디자인 + 개발) labels Sep 20, 2022
@IRONAGE-Park IRONAGE-Park added this to the Atom Component milestone Sep 20, 2022
@IRONAGE-Park IRONAGE-Park self-assigned this Sep 20, 2022
@netlify
Copy link

netlify bot commented Sep 20, 2022 •
edited
Loading

✅ Deploy Preview for ids-storybook ready!

Name Link
🔨 Latest commit 64e82be
🔍 Latest deploy log https://app.netlify.com/sites/ids-storybook/deploys/6382d776fa436a00089899a4
😎 Deploy Preview https://deploy-preview-92--ids-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@IRONAGE-Park IRONAGE-Park changed the title 체크박스 컴포넌트를 디자인 시스템에 추가한다. [Design System] Checkbox Component를 디자인 시스템에 추가한다. Sep 20, 2022
@IRONAGE-Park
Copy link
Collaborator Author

IRONAGE-Park commented Sep 25, 2022 •
edited
Loading

NestedCheckbox 구현을 내부로 넘긴다.

  • 부모 요소 체크의 텍스트가 2줄 이상일 때, 하위 요소 체크에 마우스 올리면 하위 요소 호버/활성화 이펙트가 글씨를 가리는 이슈.
  • 하위 요소 2중첩 이상을 고려하지 않는다.

@rlawdgus
Copy link
Contributor

rlawdgus commented Oct 1, 2022

svgJestTransformer

@IRONAGE-Park IRONAGE-Park mentioned this pull request Oct 2, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ckdwns9121 ckdwns9121 Awaiting requested review from ckdwns9121

@rlawdgus rlawdgus Awaiting requested review from rlawdgus

@khGyun khGyun Awaiting requested review from khGyun

@parkhyunpaper parkhyunpaper Awaiting requested review from parkhyunpaper

At least 2 approving reviews are required to merge this pull request.

Assignees

@IRONAGE-Park IRONAGE-Park

Labels
Developer 개발자 이슈 Process 작업 단위(디자인 + 개발)
Projects
None yet
Milestone
Atom Component
Development

Successfully merging this pull request may close these issues.

[Process] Component - 체크박스 작업 진행
2 participants
@IRONAGE-Park @rlawdgus