feat: add useQueryString | Image Automation

[XionWCFM]

PR

useQueryString

안드로이드 뒤로가기 동작 대응을 위해 인터랙티브한 UI의 open 상태를 queryString으로 관리해야하는 문제를 원활히 관리하기 위해 설계하였습니다.

사용예시

const Hi = () => {
  const [query, setQuery] = useQueryString<{ a: boolean }>({ a: true }, { dependencies: ["a"] });
  const handleClick = () => {
    setQuery({ a: false });
  };
  const isOpen = query.a;
};

const Hello = () => {
  const [isOpen, onOpenChange, toggle] = useBooleanQueryString("key", false);
  const handleToggle = () => {
    toggle();
  };
  const handleChange = () => {
    onOpenChange(true);
  };
};

type UseQueryStringProps = Record<string, string | number | boolean>;

export const useQueryString = <T extends UseQueryStringProps>(
  initialValue: T,
  options?: { dependencies?: Array<keyof T> },
)

인터페이스는 다음과 같습니다.

dependencies 필드는 쿼리스트링의 렌더링 최적화가 필요할때 사용하시면 됩니닷

  const [query, setQuery] = useQueryString<{ a: boolean }>({ a: true }, { dependencies: ["a"] });

이렇게 넣은 경우 다른 쿼리스트링이 있는 경우에도 a 쿼리스트링이 바뀔때에만 리렌더링

이미지 관리 자동화

저희 개발 과정에서의 병목을 줄이기위해 따로 정적 asset용 cdn을 두는 대신 그냥 로컬로 어셋들을 관리하고 있는데

요것도 매번 png를 webp로 바꿔주고 이름 지어서 넣어주고 그거에 맞게 constants 객체 만들어주는게 시간이 좀 들더라구용..

그래서 저희 요구사항만 간단하게 반영할 수 있는 스크립트를 하나 짰습니다.

대신 시간을 많이 들여 짠게 아니라서 사용할때 약간의 주의사항을 지켜주셔야해요..

규칙

1. 자동으로 생성되길 원하는 image의 경우 public/images/폴더이름/이미지파일

위 디렉토리 구조를 지켜서 넣어주셔야해요

2. 이미지는 png, webp, jpg, jpeg 만 허용해요

3. 최종 결과물 코드에 구분자를 넣고 싶다면 파일명을 이런형태로 지어주세요 group_edit.webp 혹은 hello-edit.webp

_, - 와 같은 약속된 특수문자 기호를 기준으로 구분자를 만듭니다

제공되는 기능

1. png, jpg, jpeg 파일의 경우 자동으로 webp 변환을 수행하며 기존 원본 png, jpg, jpeg 파일은 자동으로 삭제해줘요
2. 만약 이미지가 추가되었다면 개발 서버를 다시 켜거나 새로운 터미널에서 다음 명령어를 입력하세요

npm run generate:image

이상이며 현재 저희가 쓰고있던 이미지들은 이 PR에서 모두 마이그레이션하였습니다.

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	98.01%	296 / 302
🔵	Statements	98.01%	296 / 302
🔵	Functions	72.72%	8 / 11
🔵	Branches	100%	40 / 40

File Coverage

No changed files found.

Generated in workflow #102 for commit ea3321c by the Vitest Coverage Report Action

[Youjiiin]

우와,, 감사합니다 고생하셨어용,,😲