@smatch-corp/admin-front-property

매물 관리 관련 컴포넌트 라이브러리

설치 방법

# npm 사용 시
npm install @smatch-corp/admin-front-property

# pnpm 사용 시
pnpm add @smatch-corp/admin-front-property

# yarn 사용 시
yarn add @smatch-corp/admin-front-property

사용 방법

이 라이브러리는 매물 컬렉션 관리를 위한 React 컴포넌트를 제공합니다.

CSS 스타일시트 추가

날짜 선택 기능을 위한 Flatpickr 스타일을 사용하는 방법은 다음과 같습니다:

방법 1: CSS 파일 직접 임포트

// 전역 CSS 파일에서 import (Next.js의 global.css 또는 _app.tsx에서)
import 'flatpickr/dist/flatpickr.css';

방법 2: 인라인 스타일 사용 (CSS 임포트 없이 사용)

import { useFlatpickrStyles } from '@smatch-corp/admin-front-property';

function MyComponent() {
  // 스타일 주입 훅 사용
  const { injectStyles } = useFlatpickrStyles();
  
  // 컴포넌트 마운트 시 스타일 주입
  React.useEffect(() => {
    injectStyles();
  }, [injectStyles]);
  
  return (
    // 컴포넌트 내용
  );
}

방법 3: Provider 컴포넌트 사용 (앱 전체에 적용)

import { FlatpickrProvider } from '@smatch-corp/admin-front-property';
import { QueryClient } from '@tanstack/react-query';

// 선택적: 사용자 정의 QueryClient 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 2,
    },
  },
});

// Next.js의 _app.tsx 또는 앱의 최상위 컴포넌트
function MyApp({ Component, pageProps }) {
  return (
    <FlatpickrProvider queryClient={queryClient}> {/* queryClient는 선택사항 */}
      <Component {...pageProps} />
    </FlatpickrProvider>
  );
}

export default MyApp;

방법 4: 통합 Provider 사용 (AllInOneProvider)

import { AllInOneProvider } from '@smatch-corp/admin-front-property';
import { QueryClient } from '@tanstack/react-query';

// 선택적: 사용자 정의 QueryClient 설정
const queryClient = new QueryClient();

// Next.js의 _app.tsx
function MyApp({ Component, pageProps }) {
  return (
    <AllInOneProvider 
      queryClient={queryClient} // 선택사항: 사용자 정의 QueryClient
      baseUrl="https://api.example.com" // 선택사항: API 기본 URL
    >
      <Component {...pageProps} />
    </AllInOneProvider>
  );
}

export default MyApp;

주의:

• Node.js 패키지에서는 전역 CSS를 직접 가져올 수 없으므로, 위 방법 중 하나를 사용해야 합니다.
• FlatpickrProvider와 AllInOneProvider는 내부적으로 QueryClientProvider를 포함하고 있어 @tanstack/react-query 설정도 함께 제공합니다. 별도로 QueryClientProvider를 추가할 필요가 없습니다.
• AllInOneProvider는 flatpickr 스타일과 API 설정을 모두 제공하는 통합 Provider입니다.

컴포넌트 사용 예시

import React from 'react';
import { 
  PropertyCollectionList, 
  PropertyCollectionCreate, 
  PropertyCollectionEdit,
  useApi
} from '@smatch-corp/admin-front-property';

// 컬렉션 목록 컴포넌트
export default function CollectionsPage() {
  return (
    <div>
      <h1>매물 컬렉션 목록</h1>
      <PropertyCollectionList 
        onViewDetail={(collection) => {
          // 상세 페이지로 이동
          console.log('컬렉션 상세 보기:', collection);
        }}
        onEdit={(collection) => {
          // 수정 페이지로 이동
          console.log('컬렉션 수정하기:', collection);
        }}
      />
    </div>
  );
}

API 직접 사용하기

컴포넌트를 사용하지 않고 API를 직접 호출할 수도 있습니다:

import { useApi } from '@smatch-corp/admin-front-property';

function MyComponent() {
  const { propertyCollectionRepository } = useApi();
  
  const fetchCollections = async () => {
    try {
      const result = await propertyCollectionRepository.findAllPage({
        page: 0,
        size: 10,
        request: {
          // 필요한 요청 파라미터
        }
      });
      console.log('컬렉션 목록:', result.content);
      return result;
    } catch (error) {
      console.error('컬렉션 조회 중 오류 발생:', error);
      throw error;
    }
  };
  
  // ...
}

컴포넌트 목록

PropertyCollectionList

매물 컬렉션 목록을 표시하는 컴포넌트입니다.

<PropertyCollectionList 
  onViewDetail={(collection) => {}}
  onEdit={(collection) => {}}
  onDelete={(collection) => {}}
  onCreateClick={() => {}}
  onCreateSuccess={() => {}}
  showCreateFormInline={true}
/>

PropertyCollectionCreate

매물 컬렉션을 생성하는 폼 컴포넌트입니다.

<PropertyCollectionCreate 
  onSuccess={() => {}}
/>

PropertyCollectionEdit

매물 컬렉션을 수정하는 폼 컴포넌트입니다.

<PropertyCollectionEdit 
  id="컬렉션ID"
  onSuccess={() => {}}
  onCancel={() => {}}
/>

라이센스

MIT