추가적인 공통 컴포넌트 작업

토스트 팝업

전 팀 프로젝트에서 만들었던 토스트 팝업을 가져와서 사용하기로 했습니다. react-hot-toast를 참고해서 만들었습니다.

토스트는 Toast.ts, Toaster.tsx, ToastStore.ts로 이루어져 있으며, Zustand를 활용하여 전역으로 상태를 관리하였습니다.

• Toast
  ToastStore을 이용해서 토스트를 추가, 수정, 삭제하는 함수를 제공합니다.
  1. success, error, warning, info, loading 함수 :
     • 각각 성공, 에러, 경고, 정보, 로딩 상태의 토스트 메시지를 표시합니다.
     • 메시지와 타입("success", "error", 등), 지속 시간(duration)을 인수로 받습니다.
  2. updateToast 함수 :
     • 기존에 표시 중인 토스트를 수정합니다.
     • id를 통해 특정 토스트를 식별하고, 메시지와 타입, 지속 시간을 변경합니다.
  3. remove 함수 :
     • 특정 토스트 메시지를 제거합니다.
     • id를 이용해 특정 토스트를 선택적으로 삭제합니다.
  4. promise 함수 :
     • 비동기 작업(Promise)의 상태를 사용자에게 알리기 위해 사용됩니다.
     • promise가 실행 중일 때 loading 메시지를 먼저 띄우고, 작업이 완료되면 success 메시지를, 실패하면 error 메시지를 표시합니다.
• Toaster
  전역에 설정되어 사용자에게 토스트 알림을 표시하는 컴포넌트입니다. 주로 상태 관리 라이브러리인 Zustand를 사용해 토스트 상태를 가져오고, 사용자에게 실시간으로 정보를 전달하는 역할을 합니다.
• ToastStore
  상태 관리 라이브러리인 Zustand를 사용하여 토스트 알림 시스템을 구현한 것입니다. useToastStore라는 상태 저장소를 만들어 여러 종류의 토스트 메시지를 추가, 수정, 삭제할 수 있도록 합니다.

Form

react-hook-form을 사용하여 Form 컴포넌트를 만들었습니다.
Form은 컴파운트 컴포넌트 패턴을 사용해서 만들었습니다.

이 코드에서는 Form, Input, Textarea, Error, Submit 컴포넌트들이 있으며, 이들을 하나의 컴포넌트로 결합하여 폼을 구성합니다.

각 컴포넌트의 역할을 간단히 설명하겠습니다.

1. Form 컴포넌트 :
   • Form은 기본적인 폼 컨테이너 역할을 합니다.
   • FormProvider를 통해 React Hook Form의 상태를 하위 컴포넌트에서 사용할 수 있도록 전파합니다.
   • onSubmit 핸들러로 폼 제출 시 실행될 함수를 받으며, handleSubmit을 통해 폼 데이터를 관리합니다.
2. Error 컴포넌트 :
   • name을 인수로 받아 해당 필드의 에러 상태를 검사합니다.
   • 에러가 발생하면 적절한 스타일로 에러 메시지를 화면에 표시합니다.
3. Input 컴포넌트 :
   • 텍스트 입력 필드를 생성하는 컴포넌트입니다.
   • type이 "password"인 경우, 아이콘을 클릭하여 비밀번호를 표시하거나 숨길 수 있습니다.
   • 입력 필드는 register 함수를 사용해 React Hook Form에 등록됩니다. 이를 통해 입력 값을 관리하고 유효성 검사를 수행합니다.
4. Textarea 컴포넌트 :
   • 여러 줄의 텍스트 입력을 받을 수 있는 텍스트 영역을 생성하는 컴포넌트입니다.
   • 마찬가지로 register 함수를 사용해 입력 값을 관리합니다.
5. Submit 컴포넌트
   • 버튼은 폼의 유효성에 따라 활성화 또는 비활성화됩니다.
   • 유효하지 않은 경우 버튼은 비활성화되어 사용자에게 시각적으로 폼이 제출될 준비가 안 되었음을 알립니다.
   • 텍스트 내용은 text 프로퍼티로 받아서 기본값은 "입력"으로 설정됩니다.
6. 컴포넌트 조합 :
   • 각 필드를 Form 컴포넌트의 속성으로 추가하여 사용할 수 있도록 설정했습니다.
   • Form.Error, Form.Input, Form.Textarea, Form.Submit 형태로 쉽게 접근할 수 있습니다.

Tanstack Query (React Query)

서버 상태를 관리하기 위해서 리액트 쿼리를 사용했습니다.
공식 홈페이지를 참고하여 QueryProvider를 설정하였습니다.

리액트 쿼리를 이용하여 서버에게서 받은 데이터를 캐싱하여 관리하여 반복적인 요청을 줄이고 클라이언트의 요청에 따라서 최신 상태를 유지합니다.

svg 이미지 관리

svg 이미지를 .tsx 파일로 변환하여 src/icons/ 폴더에서 관리를 합니다.

// src/types/IconType.ts
interface IconType {
  width?: number | string;
  height?: number | string;
  color?: string;
}

// src/icons/Favorite.tsx
export function FavoriteEmpty({ width = 24, height = 24, color = "#fff" }: IconType) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -960 960 960" width={width} fill={color}>
      <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" />
    </svg>
  );
}

// used
<FavoriteEmpty width={18} height={18} color="var(--text-primary)" />

이렇게 SVG를 .tsx 파일로 관리하는 이유는 다음과 같습니다

• 재사용성 향상: SVG를 컴포넌트로 만들어 관리하면 여러 곳에서 쉽게 재사용할 수 있습니다. 다양한 속성을 전달하여 필요한 크기나 색상을 손쉽게 변경할 수 있습니다.
• 타입 안정성: TypeScript의 장점을 활용해 SVG 컴포넌트에 타입을 부여함으로써, 잘못된 속성 전달을 방지하고 코드의 안정성을 높일 수 있습니다.