refine로 해커톤을 관리하는 데모 앱을 만들 것입니다. 우리는 새로운 해커톤, 해커톤을 위한 새로운 프로젝트 항목 및 해커톤 기준을 만들 수 있습니다.



supabase을 백엔드 서비스로 사용하겠습니다. Refresh는 supabase용 내장 데이터 공급자와 함께 제공되므로 crud 페이지를 매우 쉽게 생성할 수 있습니다.

테이블 생성

우리 앱은 supabase에 이러한 테이블을 갖게 됩니다.

기준

해커톤

해커토너

프로젝트

프로젝트 점수

이는 앱에 다음과 같이 반영됩니다.

export type HackathonerType = {
  id: string;
  name: string;
};

export type HackathonType = {
  id: string;
  start: string;
  end: string;
  name: string;
};

export type ProjectType = {
  id: string;
  name: string;
  description: string;
  url: string;
  hackathon_id: string;
  hackathoner_id: string;
};

export type CriteriaType = {
  id: string;
  name: string;
  hackathon_id: string;
};

export type ProjectScoreType = {
  project_id: string;
  criteria_id: string;
  score: string;
};

CRUD 페이지 생성

crud 페이지를 만드는 것은 다음과 같이 쉽습니다.

목록 페이지:

import {
  List,
  Table,
  useTable,
  Space,
  ShowButton,
  EditButton,
  TextField,
} from "@pankod/refine";

import dayjs from "dayjs";

import { HackathonType } from "interfaces";

export const HackathonsList: React.FC = () => {
  const { tableProps } = useTable<HackathonType>();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column
          dataIndex="start"
          title="Starts"
          render={(value) => (
            <TextField value={dayjs(value).format("DD/MMMM dddd")} />
          )}
        />
        <Table.Column
          dataIndex="end"
          title="Ends"
          render={(value) => (
            <TextField value={dayjs(value).format("DD/MMMM dddd")} />
          )}
        />
        <Table.Column
          title="Actions"
          dataIndex="actions"
          render={(_text, record: HackathonType): React.ReactNode => {
            return (
              <Space>
                <ShowButton size="small" recordItemId={record.id} hideText />
                <EditButton size="small" recordItemId={record.id} hideText />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

페이지 만들기:

import { Create, Form, Input, useForm, DatePicker } from "@pankod/refine";

import { HackathonType } from "interfaces";

export const HackathonsCreate: React.FC = () => {
  const { formProps, saveButtonProps } = useForm<HackathonType>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="Name" name="start">
          <DatePicker />
        </Form.Item>
        <Form.Item label="Name" name="end">
          <DatePicker />
        </Form.Item>
      </Form>
    </Create>
  );
};

그런 다음 이 페이지를 hackathon 리소스에 대한 해당 crud 구성 요소로 사용합니다.

import { Refine, Resource } from "@pankod/refine";

import "@pankod/refine/dist/styles.min.css";
import { dataProvider } from "@pankod/refine-supabase";
import { supabaseClient } from "utility";
import {
  HackathonsList,
  HackathonsCreate,
  HackathonsEdit,
  HackathonsShow,
} from "./pages/hackathons";

function App() {
  return (
    <Refine
      dataProvider={dataProvider(supabaseClient)}
    >
      <Resource
        name="hackathons"
        list={HackathonsList}
        create={HackathonsCreate}
        edit={HackathonsEdit}
        show={HackathonsShow}
      />
    </Refine>
  );
}

export default App;

Refresh는 Ant 설계 구성 요소에 대한 내장 후크와 함께 제공됩니다. documentation에서 후크 및 수파베이스에 대한 자세한 사용법을 찾을 수 있습니다.

투표 페이지 생성

대시보드 옵션을 사용하여 투표 페이지를 배치합니다. 다양한 리소스의 데이터가 필요합니다. 구체화는 이러한 리소스에서 데이터를 가져오기 위해 반응 쿼리를 기반으로 하는 강력한 후크와 함께 제공됩니다.

예를 들어 현재 활성화된 해커톤을 가져오려면 useList 후크를 사용할 수 있습니다.

export const DashboardPage: React.FC = () => {
  const currentHackathons = useList<HackathonType>({
    resource: "hackathons",
    config: {
      filters: [
        {
          field: "start",
          operator: "lte",
          value: now,
        },
        {
          field: "end",
          operator: "gte",
          value: now,
        },
      ],
    },
  });
}

유사한 방식으로 다른 리소스에서 데이터를 가져올 수 있습니다. 코드샌드박스here 및 repo here을 찾을 수 있습니다.

결론

이 프로젝트 자체는 해커톤의 산물입니다. 인증과 같은 많은 기능이 부족하지만 개선을 통해 작동하는 앱을 신속하게 빌드하는 것이 얼마나 쉬운지 보여줍니다.