react/design-system-decision-record/

[utterances-bot]

Design System Decision Record | SOSOLOG

이 글은 FEConf2022 디자인 시스템, 형태를 넘어서 발표에서 다루지 않은 linear라는 Design System에 대한 고민과 결정에 대한 글입니다. Table of Contents Principle Problem from Principle Interface Compound Component Headless 예시 1. Trigger 예시 2. 다양한 기능 컴포넌트 디자인 시스템의 낯섦 예산 예시 1. Slot 예시 2. state 예시 3. PortalContainer…

https://so-so.dev/react/design-system-decision-record/

[stardustrain]

너무 좋은 글 감사합니다! 트레이드오프 지점은 뭐가 되었든 항상 고민이었는데, 또다른 인사이트를 얻고 갑니다 :)

[sungik-choi]

feconf에서 굉장히 흥미롭게 들은 발표였습니다! 사내 디자인 시스템을 유지보수중인데 많은 도움이 되었어요. 좋은 글 감사합니다.

[ds-package]

좋은 글 감사합니다!

[i0boy]

좋은 글 감사합니다~ 그런데 틀린선택 막아주기의 MyTimePickerWithNewOption 함수에서 어떻게 interval을 추론하나요? 예제 코드만으로는 감이 잘 안잡히네용

[with-key]

좋은 글 감사합니다. 디자인 시스템 구축을 위한 radix와 stitches 도입에 큰 도움이 되었습니다. 혹시 scope context에 대한 문제에 jotai를 활용하신 사례가 있으신가요? 포스팅을 보았는데, 실제로 내부적으로 사용하고 계신건지 궁금했습니다.

[SoYoung210]

@i0boy

MyTimePickerWithNewOption컴포넌트는 디자인 시스템 사용처, 즉 외부라는 뜻으로 붙인 이름이었습니다. 사용처에서는 옵션을 만들어서 사용하니, 직접 값을 알 수 있습니다.

// 디자인 시스템을 소비하는 쪽

function MyTimePickerWithNewOption() {
  // makeTimeInterval은 예시 함수이고, date-fns의 interval같은 함수라고 생각하시면됩니다.
  const options = makeTimeInterval()
}

이렇게 외부에서 선언되는 옵션을 내부에서 알아내는 것은 본문에 적힌것처럼 Collection 컨텍스트를 사용합니다.

[SoYoung210]

@with-key

글 읽어주셔서 감사합니다! scoped context는 예상되는 문제에 대한 좋은 해결책이라고 생각돼서 따로 정리했었는데 아직 실제로 사용하고 있지는 않습니다.

[with-key]

@SoYoung210 그렇군요.! 답변 주셔서 감사합니다.