@h-lab-b-side/widget

React 서비스에 삽입해서 사용할 수 있는 부서 리마인더 위젯입니다. 리마인더 생성, 목록 조회, 완료 처리, 삭제 UI를 제공하고 Dept Reminder API를 통해 알림 스케줄을 관리합니다.

Before You Start

서비스팀은 Dept Reminder 운영자로부터 아래 값을 전달받아야 합니다.

| Value | Example | Description | | --- | --- | --- | | apiBaseUrl | https://xxx.execute-api.ap-northeast-2.amazonaws.com/prod | Dept Reminder API endpoint | | apiKey | SERVICE_API_KEY | 서비스별로 발급된 API key | | serviceId | service-a | 서비스 식별자 | | employeeId | 20240001 | 현재 로그인한 사용자/임직원 식별자 |

Installation

npm install @h-lab-b-side/widget

Peer dependency로 React 18이 필요합니다.

npm install react react-dom

Quick Start

import { ReminderWidget } from '@h-lab-b-side/widget';
import '@h-lab-b-side/widget/style.css';

export function MyPage() {
  return (
    <ReminderWidget
      apiBaseUrl="https://example.execute-api.ap-northeast-2.amazonaws.com/prod"
      apiKey="SERVICE_API_KEY"
      employeeId="employee-id"
      serviceId="service-id"
    />
  );
}

CRA Example

.env 파일에 서비스별 값을 넣습니다.

REACT_APP_DEPT_REMINDER_API_BASE_URL=https://xxx.execute-api.ap-northeast-2.amazonaws.com/prod
REACT_APP_DEPT_REMINDER_API_KEY=SERVICE_API_KEY
REACT_APP_DEPT_REMINDER_SERVICE_ID=service-a

컴포넌트에서는 로그인 사용자 식별자만 연결합니다.

import { ReminderWidget } from '@h-lab-b-side/widget';
import '@h-lab-b-side/widget/style.css';

export function ReminderPanel({ employeeId }: { employeeId: string }) {
  return (
    <ReminderWidget
      apiBaseUrl={process.env.REACT_APP_DEPT_REMINDER_API_BASE_URL!}
      apiKey={process.env.REACT_APP_DEPT_REMINDER_API_KEY!}
      serviceId={process.env.REACT_APP_DEPT_REMINDER_SERVICE_ID!}
      employeeId={employeeId}
    />
  );
}

Vite Example

.env 파일에 서비스별 값을 넣습니다.

VITE_DEPT_REMINDER_API_BASE_URL=https://xxx.execute-api.ap-northeast-2.amazonaws.com/prod
VITE_DEPT_REMINDER_API_KEY=SERVICE_API_KEY
VITE_DEPT_REMINDER_SERVICE_ID=service-a

컴포넌트에서는 로그인 사용자 식별자만 연결합니다.

import { ReminderWidget } from '@h-lab-b-side/widget';
import '@h-lab-b-side/widget/style.css';

export function ReminderPanel({ employeeId }: { employeeId: string }) {
  return (
    <ReminderWidget
      apiBaseUrl={import.meta.env.VITE_DEPT_REMINDER_API_BASE_URL}
      apiKey={import.meta.env.VITE_DEPT_REMINDER_API_KEY}
      serviceId={import.meta.env.VITE_DEPT_REMINDER_SERVICE_ID}
      employeeId={employeeId}
    />
  );
}

Next.js Example

클라이언트 컴포넌트에서 사용합니다.

'use client';

import { ReminderWidget } from '@h-lab-b-side/widget';
import '@h-lab-b-side/widget/style.css';

export function ReminderPanel({ employeeId }: { employeeId: string }) {
  return (
    <ReminderWidget
      apiBaseUrl={process.env.NEXT_PUBLIC_DEPT_REMINDER_API_BASE_URL!}
      apiKey={process.env.NEXT_PUBLIC_DEPT_REMINDER_API_KEY!}
      serviceId={process.env.NEXT_PUBLIC_DEPT_REMINDER_SERVICE_ID!}
      employeeId={employeeId}
    />
  );
}

Props

| Prop | Type | Required | Description | | --- | --- | --- | --- | | apiBaseUrl | string | Yes | Dept Reminder API base URL. Example: https://xxx.execute-api.ap-northeast-2.amazonaws.com/prod | | apiKey | string | Yes | Service API key issued by the Dept Reminder operator. Sent as x-api-key. | | employeeId | string | Yes | Employee or user identifier used to load that user's reminders. | | serviceId | string | Yes | Service identifier used when creating reminders. The backend still resolves the authoritative service from the API key. | | mode | 'default' \| 'embedded' | No | Use embedded when hosting inside another card/layout container. | | appearance | ReminderWidgetAppearance | No | UI customization: title, checkbox shape/size, list font size, FAB colors/border, and widget root z-index. | | className | string | No | Class applied to widget root wrapper. | | style | React.CSSProperties | No | Inline style applied to widget root wrapper. |

Embedded Host Example

import { ReminderWidget } from "@h-lab-b-side/widget";
import "@h-lab-b-side/widget/style.css";
import { Box } from "@mui/material";

export function ReminderWG({ employeeId }: { employeeId: string }) {
  return (
    <Box
      sx={{
        width: 320,
        borderRadius: "16px",
        background: "#fff",
        p: "24px",
        minHeight: 0,
        overflow: "hidden",
      }}
    >
      <ReminderWidget
        mode="embedded"
        appearance={{
          title: "✅ 리마인더",
          accentColor: "#0ea5a8",
          accentContrastColor: "#ffffff",
          checkboxBorderRadius: 8,
          checkboxSize: 20,
          checkboxCheckedBgColor: "#111827",
          checkboxCheckedBorderColor: "#111827",
          listFontSize: 16,
          formAccentColor: "#0ea5a8",
          fabBackgroundColor: "#ffffff",
          fabBorderColor: "#0ea5a8",
          fabBorderWidth: 3,
          fabIconColor: "#0ea5a8",
          zIndex: 0,
        }}
        apiBaseUrl={process.env.REACT_APP_DEPT_REMINDER_API_BASE_URL!}
        apiKey={process.env.REACT_APP_DEPT_REMINDER_API_KEY!}
        serviceId={process.env.REACT_APP_DEPT_REMINDER_SERVICE_ID!}
        employeeId={employeeId}
      />
    </Box>
  );
}

Exports

import { ReminderWidget } from '@h-lab-b-side/widget';
import type {
  ReminderWidgetProps,
  ReminderItem,
  CreateReminderInput,
  UpdateReminderInput,
} from '@h-lab-b-side/widget';

The stylesheet is exported separately.

import '@h-lab-b-side/widget/style.css';

Notes for Service Teams

• Keep the issued apiKey out of public documentation and committed source examples.
• Use the API endpoint and key provided by the Dept Reminder operator for your environment.
• The API key identifies the service on the backend, so each service should use its own issued key.
• Frontend environment variables are still visible in the browser bundle. Treat the API key as a service integration key, not as a user secret.
• Do not reuse another service's API key. If a new service needs the widget, request a new key from the Dept Reminder operator.

Local Demo

The package includes a small Vite demo under test/.

Create a local env file from the example.

cp test/.env.example test/.env

Then fill in the values and run:

npm run dev --workspace @h-lab-b-side/widget

The demo asks for an employee ID and renders the widget with the configured API values.