@smatch-corp/admin-front-property

@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 스타일시트 추가

DatePicker와 같은 타사 컴포넌트 스타일을 사용하려면 해당 패키지의 CSS 파일을 직접 import 해야 합니다:

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

주의: Node.js 패키지에서는 전역 CSS를 직접 가져올 수 없으므로, 사용자가 직접 CSS를 import 해야 합니다.

컴포넌트 사용 예시

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