퍼블릭 에셋 - Twenty Documentation

앱 루트의 public/ 폴더에는 정적 파일이 있습니다 — 이미지, 아이콘, 폰트 또는 런타임에 필요한 기타 에셋. 이 파일들은 빌드에 자동 포함되고, 개발 모드에서 동기화되며, 서버로 업로드됩니다. public/에 있는 파일은 다음과 같은 특성을 가집니다:

공개적으로 접근 가능 — 서버로 동기화되면 에셋은 공개 URL로 제공됩니다. 접근하려면 인증이 필요하지 않습니다.
프런트 컴포넌트에서 사용 가능 — React 컴포넌트 내부에서 이미지, 아이콘 또는 미디어를 표시하기 위해 에셋 URL을 사용하세요.
로직 함수에서 사용 가능 — 이메일, API 응답 또는 서버 측 로직에서 에셋 URL을 참조하세요.
마켓플레이스 메타데이터에 사용 — defineApplication()의 logoUrl 및 screenshots 필드는 이 폴더의 파일을 참조합니다(예: public/logo.png). 앱이 게시되면 이러한 항목이 마켓플레이스에 표시됩니다.
개발 모드에서 자동 동기화 — public/에 파일을 추가, 업데이트 또는 삭제하면 자동으로 서버와 동기화됩니다. 재시작이 필요 없습니다.
빌드에 포함 — yarn twenty dev:build는 모든 퍼블릭 에셋을 배포 출력물에 번들합니다.

`getPublicAssetUrl`로 퍼블릭 에셋에 접근하기

twenty-sdk의 getPublicAssetUrl 헬퍼를 사용해 public/ 디렉터리의 파일 전체 URL을 가져오세요. 이는 로직 함수와 프런트 컴포넌트 모두에서 동작합니다. 로직 함수에서:

src/logic-functions/send-invoice.ts

import { defineLogicFunction } from 'twenty-sdk/define';
import { getPublicAssetUrl } from 'twenty-sdk/utils';

const handler = async (): Promise<any> => {
  const logoUrl = getPublicAssetUrl('logo.png');
  const invoiceUrl = getPublicAssetUrl('templates/invoice.png');

  // Fetch the file content (no auth required — public endpoint)
  const response = await fetch(invoiceUrl);
  const buffer = await response.arrayBuffer();

  return { logoUrl, size: buffer.byteLength };
};

export default defineLogicFunction({
  universalIdentifier: 'a1b2c3d4-...',
  name: 'send-invoice',
  description: 'Sends an invoice with the app logo',
  timeoutSeconds: 10,
  handler,
});

프런트 컴포넌트에서:

src/front-components/company-card.tsx

import { defineFrontComponent } from 'twenty-sdk/define';
import { getPublicAssetUrl } from 'twenty-sdk/utils';

const CompanyCard = () => {
  const logoUrl = getPublicAssetUrl('logo.png');

  return <img src={logoUrl} alt="App logo" />;
};

export default defineFrontComponent({
  universalIdentifier: '...',
  name: 'company-card',
  component: CompanyCard,
});

path 인수는 앱의 public/ 폴더를 기준으로 합니다. getPublicAssetUrl('logo.png')과 getPublicAssetUrl('public/logo.png')는 동일한 URL로 해석됩니다 — public/ 접두사가 있으면 자동으로 제거됩니다.

​getPublicAssetUrl로 퍼블릭 에셋에 접근하기

`getPublicAssetUrl`로 퍼블릭 에셋에 접근하기