서형진 - 디자인 컴포넌트 세트

[H-Genie]

프로젝트 이름

react-easy-design

개요

평소 실무에서 사용하는 디자인 컴포넌트들이 기능이 부족하거나 스타일이 마음에 들지 않아 불가피하게 여러 라이브러리를 설치하거나 직접 만들어 쓰는데 이참에 한번에 모아봤으면 합니다. 최소한의 설정으로 해당 기능을 사용할 수 있게 하는것이 목표입니다

• alert message
• input (이메일, 전화번호, 생년월일 등 자주사용하는 포맷 유효성 검사기능 포함 및 onChange value 관리)
• scroll to
• loader
• modal
• dropdown
• dark mode

저장소 주소

https://github.com/H-Genie/react-easy-design

npm 주소

https://www.npmjs.com/package/react-easy-design

체크리스트

• 개인 저장소 생성
• README.md 파일 작성 (다음 항목 포함)
  • 프로젝트 개요
  • 설치 방법 / 사용 방법
    • 가능하다면 동영상이나 animated gif 첨부
  • 라이선스 표기
• 기능 구현
  • Modal
  • Loader
  • Message
  • DarkMode
  • Dropdown
  • Scroll To
• 테스트 추가 (라인 커버리지 60% 이상)
• 사용 예제 프로젝트 추가 (examples 폴더 아래에 2개 이상)
• npm 퍼블리싱
• CI 설정
  • PR에 등록되었을 때 테스트 실행
  • main 프로젝트에 머지되었을 때 npm 퍼블리싱

[taggon]

• 이 패키지를 사용하는 사용자가 디자인 커스터마이징을 원한다면 어떻게 지원할 수 있을까요?
• 적어두신 모든 컴포넌트가 하나의 패키지를 이루는 걸까요, 아니면 각각 패키지인 걸까요?
• scroll to와 loader는 어떤 컴포넌트일까요?

[H-Genie]

@taggon

1. style props를 입력받아 그대로 inline스타일을 적용시키려고 합니다

2. 단일 패키지입니다. 물론 사용자 입장에서는 한가지를 사용하기 위해 큰 패키지를 받아야 하는 문제점이 있다는것은 알지만 이것을 제작하는 가장 큰 이유는 제가 사용하기 위해서입니다

로더는 API 호출 시작시점에서 응답이 올때까지 화면에 표시하는 인디케이터입니다
제가 CSS 애니메이션으로 만들어본 몇가지 로더가 있는데
단순히 로더만 나오는 것과 화면 전체를 투명 dim으로 덮어서 클릭을 하지 못하게 하고 가운데 로더를 나오게 하는 기능 두가지를 구현할 생각입니다

scroll to는 상단 navigation에 화면의 주요포인트가 있고 클릭하면 그 지점으로 이동하고
화면에 스크롤을 함에 따라 nav에 표시가 바뀌는 기능입니다
저희 회사에 자주 구현해달라고 하는 기능인데 매번 번거로워 이참에 통일된 툴을 만들어보고 싶습니다

[H-Genie]

@taggon

배포 형태에 문제가 있는것 같아서 조언구합니다
현재 npm에 배포는 되어있는 상태인데
https://www.npmjs.com/package/react-easy-design

yarn add react-easy-design을 한 후에 사용하려고 하면

import Loader from "react-easy-design/dist/types/components/Loader"

저런식으로 import가 되어버립니다
그리고 저걸 실제 렌더링하려고 하면

[ERROR] Missing "./dist/types/components/Loader" specifier in "react-easy-design" package [plugin vite:dep-scan]

src/App.tsx:1:19:
  1 │ import Loader from "react-easy-design/dist/types/components/Loader"
    ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This error came from the "onResolve" callback registered here:

node_modules/esbuild/lib/main.js:1150:20:
  1150 │       let promise = setup({

이런 에러가 뜹니다
어떤 부분이 문제인지 잘 모르겠습니다

1. 빌드를 할때 무언가 프로젝트 구조가 잘못된게 있을까요? 혹은 빌드 설정에 잘못된게 있을까요?
2. import Modal from "react-easy-design" 형식이 되었으면 좋겠습니다

• main 브랜치 말고 npm1 이라는 브랜치를 봐주세요