musma/react-libraries

React 기반 Button, TextInput, Select 등 UI Element Component 라이브러리입니다.

Private -> Public 가시성 변경(2023-06-12)

배포 방법

1. 코드를 수정합니다.
2. pnpm changeset
3. 배포할 패키지를 선택합니다.
4. major, minor, patch 버전을 고릅니다.
5. summary에 CHANGELOG.md에 나올 내용을 적습니다.
6. git push or pull request
7. pull requests에 자동으로 생성된 pr을 merge한다

SEMVER가 무엇이냐?

References

• https://maurodaprotis.hashnode.dev/how-to-add-changesets-workflow-to-a-simple-package-repo-on-github
• https://wiki.lucashan.space/programming/setting-monorepo-for-github-npm-registry-2/
• https://wallacearchivemain.gatsbyjs.io/blog/auto-release-flow/

Github Packages Private 배포 시

.npmrc에 아래 내용을 넣습니다.
.npmrc 파일의 경로는 프로젝트 또는 루트 폴더(cd ~) 둘 중 하나에 넣으면 됩니다.

@musma:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=토큰을넣어주세요
//registry.npmjs.org/:_authToken=토큰을넣어주세요

react-libraries's Issues

DatePicker 검색 후 새로고침 버그

useSearchForm으로 검색 후에 새로고침을 하거나, 페이지네이션 사용 중 페이지가 멈춥니다.

error 명

x.toFormat in not a function

RadioGroup 컴포넌트에 disabled Props 추가

Skeleton 컴포넌트 추가

• List
• Table
• Image
• Shape(Rectangle, Circle)
• Card
• 애니메이션, 스타일 보정

DatePicker 수정 (변경되는 값을 DateTime 객체로 변환)

DatePicker에서 onChange로 변경되는 값이 문자열이기 때문에, 커스터마이징을 할 수 없습니다.

이에, DateTime 객체로 변환하고자 합니다.

changesets 적용

https://github.com/changesets/changesets

버전업시 커밋 메세지로 변경내용 기록 자동화하기

Toast Popup 개발

진행 상황

• ToastPopup 컴포넌트, ToastContainer 컴포넌트, ToastPopupManager 를 두고 컴포넌트 핸들링
• transition 효과가 어쩔땐 되고 어쩔땐 안되는 버그가 생김... 원인이 뭘까 & componentUnMount에는 동작하지 않음
• componentDidMount와 UnMount Transition은 react-transition-group 을 많이 쓴다고 함 (공식 React 에서 추천함)
• react-transition-group을 적용해서 버그는 해결했지만, UnMount는 똑같이 안되는 중
• 3.5초 후 삭제 로직 위치를 변경하고 react-transition-group을 적용해서 transition 효과는 잘 됨. 근데 첫 렌더링에서만 따닥거리는 버그 발생........
• ToastContainer에서 props로 받는 newToastPopup 부분을 함수 형태로 바꿔야 할 듯 => 도전 중
• react-simple-snackbar 참고해서 ContextAPI로 하는건 어떨까 => feat/46-popup-context 브랜치에 저장해둠

---

현재 이슈

• 첫 렌더링에서만 transition 때 따닥(?) 나오는 버그 있음. 근데 매번 그러는건 아님... whyrano... whyrano...
• react-transition-group 사용한 컴포넌트가 DOM에서 없어지지않고 남아있음
• react-transition-group을 사용해도 UnMount 이벤트가 발생하지 않음. 토스트팝업 내부가 아니라 컨테이너에서 flag를 넘겨주는 방식으로 변경해야 될 것 같음
• 다른 컴포넌트와의 이벤트 겹침 현상 해결 (ex. BackDrop)

---

ContextAPI 사용 방법 (브랜치 : feat/46-popup-context)

1. 최상단 컴포넌트(main.tsx)에 ToastContextProvider 를 두어야 함
   1-1. ToastContainer에 원하는 props는 모두 Provider로 전달
   

2. 토스트 팝업을 사용할 컴포넌트에서 useToastContext 에 있는 addToast 불러오기
   2-1. addToast 외에 다른 메서드는 내부 코드 참고
   

3. ToastPopup instance로 만들 객체 데이터 생성
   3-1. title만 필수이고 나머지는 옵션
   

4. 토스트 팝업을 불러오는 버튼의 onClick에 콜백으로 addToast(팝업 객체) 실행
   

useFormSearch, getFileSize 수정

실시

• useFormSearch
  • replace props가 추가됩니다.
• getFileSize
  • fileSize가 0으로 들어올 때, 처리가 추가됩니다.
• dateUtil 사용할 때, 어려워서 주석을 좀 추가했습니다

pagination 버그 수정

fix

• 마지막 페이지로 이동했을 시, 1 페이지로 강제 고정 되는 문제를 수정

chore

• pagination

dark mode 대응

사용자가 다크모드를 사용할 경우를 대비하자.

useFormSearch 버그 수정

2022-12-28.4.33.04.mov

버그 예시

• Select와 useFormSearch hook 사용 중
• 2페이지 이동 후 select filter 조건을 바꾸는 경우, pageble의 currentPage가 2로 고정이 되어있다보니 실제로는 데이터가 있어도 데이터를 못불러오는 현상 발생
• queryParams에서 page 값을 1로 바꿔주면 제대로 나옴
• totalPage 값도 0에 고정되어있으며 직접적으로 바꿔줄 수 있는 방법이 없음

버그 원인

• useQueryParams hook과 연결되는 부분에서 문제가 있지 않을까 예상됨
• usePagination에서 setTotalPage도 가져오면 어떨까 싶음

Table 수정

실시

• Table Row BackgroundColor 수정, white
• 페이지 크기 작아졌을 때 헤더와 바디 간격이 안맞음

className 우선순위 관련 참고자료

<div className="text-black-dark text-blue-500">test</div>

이렇게 하면 뒤에 있는 text-blue-500이 적용되어 파란색 글씨가 나올 것 같지만 그렇지 않다.
className속성에 부여한 class 순서가 아닌, 실제로 만들어지는 styleSheet에 정의되는 순서에 따라 스타일이 입혀진다

https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

배포 자동화

�react-component, icons, utils 패키지 배포 자동화 구상

NPM 퍼블릭 배포

TODO

NPM 퍼블릭 배포합니다

DatePicker, DateRangePicker 분리 작업

실제 사용함에 여럿 버그가 있어, DatePicker와 RangePicker를 분리하였습니다.

아래는 샘플 코드 입니다.

import { Fragment } from 'react'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'

import { useTheme } from '@emotion/react'
import { yupResolver } from '@hookform/resolvers/yup'
import { DateTime } from 'luxon'
import { mixed, object, SchemaOf } from 'yup'

import { Card, DateRangePicker, Grid, SearchForm } from './components'

interface RegisterInput {
  dateRange?: (DateTime | null)[] // 게시기간
}

const schema: SchemaOf<RegisterInput> = object().shape({
  dateRange: mixed().required(),
})

const Component = () => {
  const theme = useTheme()
  const { control, handleSubmit } = useForm<RegisterInput>({
    defaultValues: {
      dateRange: [DateTime.now(), DateTime.now()],
    },
    resolver: yupResolver(schema),
  })

  const onSubmit: SubmitHandler<RegisterInput> = (data) => {
    const date = data.dateRange
    console.log(date)
  }

  return (
    <Fragment>
      <Card css={{ padding: 120 }}>
        <SearchForm onSubmit={handleSubmit(onSubmit)}>
          <Grid
            itemWidth={200}
            cols={3}
            css={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              columnGap: theme.spacing.sm,
            }}
          >
            <Controller
              name="dateRange"
              control={control}
              render={({ field }) => {
                return <DateRangePicker label="기본 타입" {...field} />
              }}
            />
          </Grid>
        </SearchForm>
      </Card>
    </Fragment>
  )
}

export default Component

Select 개발

실시

• Select 개발

ESLint import sorting 제대로 동작하지 않음

실시

• import 플러그인 수정

TimePicker 개발

실시

• 위의 디자인과 같은 TimePicker를 개발한다.

Textinput 정규식 버그

최초 렌더링 또는 새로고침하면 정규식 적용 안됨

• 최초 렌더링 또는 새로고침한 상태

• 

• 이전에 작성한 내용 지우고 다시 입력하면 정규식 적용됨

• 

• 적용 코드

• 

Emotion.js 재구성

https://www.smashingmagazine.com/2020/09/component-library-react-emotion/

https://tech.devsisters.com/posts/react-extend-theme/

https://brunch.co.kr/@kmongdev/17

UI 컴포넌트 개발

디자인시스템 Figma 에 있는 UI 컴포넌트 개발

SWTEAM-303

린트 제대로 작동하지 않음

개요

@storybook/builder-vite 의존성 추가 후 린트 제대로 작동하지 않는 문제 발생

실시

@storybook/builder-vite -> sveltedoc-parser -> dependencies -> eslint

storybookjs/builder-vite#438

Select option(dropbox) 위치 추가

상황

• 아래와 같은 경우 드롭박스가 가려지고 세로 스크롤 발생
  • 

수정

• position props를 추가해 사방으로 보일 수 있게끔 처리
• top
  • 
• bottom (기본 값)
  • 
• right
  • 
• left
  • 

regExp 수정

이메일 뒷자리에 숫자, 영문자, Dot, 외에는 입력되지 않게 하도록 하기 위하여,

util 에서 regExp 수정 및, TextInput을 수정해야합니다

DatePicker 수정

• DatePicker 위치 변경할 수 있도록 수정

TextInput 수정

개요

1. 숫자 타입이면 받을 수 있는 타입을 숫자로 한정,
2. 이메일 타입이면 받을 수 있는 타입을 영문, 숫자, @, . 로 한정
3. 숫자 + 소수 타입이면 받을 수 있는 타입을 숫자와 소수로 한정
   할 수 있도록 개발

실시

• 숫자 타입
• 이메일 타입
• 숫자 + 소수 타입

Storybook에서 절대경로 사용 설정

1. 라이브러리 설치
   yarn add --dev @storybook/builder-vite

2. vite.config.ts 수정

...
import { resolve } from "path"

export default defineConfig({
 ...
  resolve: {
    alias: [{ find: "src", replacement: resolve("src") }],
  },
})

3. .storybook/main.js 수정

const path = require("path")
const { loadConfigFromFile, mergeConfig } = require("vite")

module.exports = {
  ...
  core: {
    builder: "@storybook/builder-vite",
  },
  ...
  async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(
      path.resolve(__dirname, "../vite.config.ts")
    )
    return mergeConfig(config, {
      ...userConfig,
      // manually specify plugins to avoid conflict
      plugins: [],
    })
  },
}

참고

1. storybookjs/builder-vite#85 (comment)
2. https://github.com/storybookjs/builder-vite

Pagination 수정

현상

2022-12-27.3.06.34.mov

상세

다음 페이지를 클릭했을 때, 바로 이전 페이지를 기억하고 있습니다

eslint-config-react comment

설정 파일에 주석을 달고자 합니다

DateRangePicker 재구성

개요

현재 DateRangePicker 컴포넌트는 react-datepicker 라이브러리를 조금 변경하여 사용하고 있습니다.

자체적으로 만들어서 빌드 용량을 줄어야겠습니다.

useFormSearch 기능 수정

개요

특정 프로젝트에서 검색 필드를 초기화 함과 동시에 재검색 하는 것이 아니라
검색 필드만 초기화해달라는 요청으로
useFormSearch의 기능을 수정하게 되었습니다

실시

useFormSearch에 불린타입 props가 추가되어,
default로는 검색 필드를 초기화 함과 동시에 재검색하고,
false값을 주면, 검색 필드만 초기화 합니다

DatePicker에 minDate, maxDate 기능 추가

개요

날짜를 선택할 수 있는 DatePicker 컴포넌트에서, 선택 가능한 날짜에 제한을 두는 기능이 필요하다

세부내용

기본적으로 일주일치의 데이터를 보여주는 화면에서, 시작일자와 종료일자를 최대 일주일치만(또는 한달) 선택 가능하도록 제한을 두고싶다는 고객의 요청이 있었다. 예를들어 최대 기간을 일주일로 설정한다면, 시작일자를 3월6일로 선택했을 때 종료일자는 3월6일부터 12일까지만 선택이 가능해야한다.

생각해볼 문제

만약 종료일자를 먼저 선택한다면 시작일자를 그에따라 바꿔줘야 할까? 예를들어, 시작일자는 3월1일, 종료일자는 3월7일로 기본값이 설정되어 있는데, 종료일자로 3월30일을 선택한다면 시작일자도 그에따라 일주일전인 24일로 자동으로 바뀌어야 하는가?

시작일자를 먼저 선택해야 종료일자를 선택할 수 있게 한다면 해결되는 문제다. 어떤게 좋을까...

Select 컴포넌트 이슈

이미 선택된 option에 hover할 경우 아래 사진과 같이 스타일이 변경됩니다.
수정 부탁드립니다...!

YearPicker 개발

실시

• YearPicker 개발

css Prop 전달했을 시 제대로 적용되지 않는 문제

@musma/react-component 사용하는 곳에서 컴포넌트에 css Prop으로 스타일 전달 시 CSS 우선순위에 밀려 적용이 안되는 현상 발생

스택오버플로우에 올려놔봤음..

https://stackoverflow.com/questions/74052923/emotion-js-ui-component-library-css-prop-pass-problem

Button 컴포넌트에 icon prop 적용

Pretendard 폰트 적용

실시

• Pretendard 폰트 적용

TextInput 수정

목표

Input Mask와 흡사한 기능 구현

메인 브랜치 master -> main

실시

• @jinchuu1391 메인 브랜치를 master -> main 변경 부탁드립니다.

DateRangePicker 기능 수정

실시

시작일, 종료일을 모두 선택했을 때만 onChange 함수를 실행하도록 수정합니다.

시작일만 선택 후 Calendar 창을 닫는다면 디폴트로 설정된 날로 돌아갑니다.

@Dave352

fix: 빌드에러

Storybook pnpm 미지원 및 추후 배포 방안

개요

Storybook이 pnpm을 완벽하게 지원하지 않음.

    "@storybook/channel-postmessage": "^6.5.9",
    "@storybook/channel-websocket": "^6.5.9",
    "@storybook/client-api": "^6.5.9",
    "@storybook/preview-web": "^6.5.9",
    "@storybook/addon-measure": "^6.5.9",
    "@storybook/addon-outline": "^6.5.9",
    "@storybook/addons": "^6.5.9",
    "@storybook/addon-backgrounds": "^6.5.9",
    "@storybook/addon-docs": "^6.5.9",

Storybook 빌드중에 에러가 발생하여 위의 의존성을 추가하였음.

---

실시

• Storybook이 버전 업데이트를 통해 pnpm을 지원하면 위의 의존성을 제거합니다.

추후 배포 방안

Chromatic에 배포할 때마다 Permalink가 달라지므로 디자이너 및 개발자가 아닌 다른 사람이 보기에 힘들 것으로 예상
Chromatic에 커스텀 도메인(예: react-component.musma.net 같이 접속하려면)을 연결하려면 유료 플랜 결제해야함
Storybook을 사용하지 말고 Next.js + MDX를 사용하여 Material-UI 같이 정적으로 페이지를 만들어 보여주는 것이 나을 수도 있겠다는 생각이 있음.

주석 미비한 부분 정리 및 추가, 리팩토링

개요

react-component를 분석해보면서, 주석이 미비한 부분을 작성하거나
리팩토링을 하고, 이에대한 검증을 합니다

실시

• 주석
• 리팩토링

Amplify 배포

실시

react-libraries-document 패키지를 Amplify에 배포한다.

배포 주소는 react-libraries.musma.net 로 하면 어떨까 싶습니다.

[react-component] 피드백 및 보완사항

미개발 컴포넌트 목록

• Breadcrumb
• Select
• Toast
• Image Upload
• Map

Tooltip

• 다크모드 처리

Heading, Paragraph, Caption, SubTitle

• 컴포넌트를 하나로 합치기
• Caption 컴포넌트 .mdx 파일에서 작동하지 않음

Modal

• 어두운 배경이 헤더를 가리지 못함. z-index 수정

ETC

• 컴포넌트 사이즈를 3개 정도로 통일하는게 어떨지?

DatePicker 개발

실시

• DatePicker 개발

Storybook svgr 적용

개요

Storybook에 SVG 이미지를 ReactComponent로 사용하는 방법이 잘 되질 않는다

방법을 찾아본다.

반응형 처리

윈도우 사이즈가 일정 크기 이하로 작아질 경우

• 헤더에 햄버거 메뉴 생성
• 사이드 메뉴 사라지기
• 햄버거 메뉴 클릭시 메뉴 드롭다운 나타나기

useFormSearch InitPageable props 추가

대동 프로젝트에서.. rows per page를 특정 개수로 맞춰달라는 기획이 있어서
변경할 수 있는 Props가 필요합니다.

@musma/eslint-config-react 매뉴얼 작성

개요

FE 파트에서 사용할 eslint-config를 따로 개발하였습니다.

Musma Developers에 @musma/eslint-config-react 설치 방법 및 매뉴얼, 린트 규칙 등을 설명하는 페이지를 만들어야 합니다.