Create Component | Skills Pool

Create Component | Skills Pool

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@pinpoint-fe/ui/src/lib/utils';

const componentVariants = cva('base-classes', {
  variants: { variant: { default: '...', outline: '...' }, size: { default: '...', sm: '...' } },
  defaultVariants: { variant: 'default', size: 'default' },
});

export interface ComponentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof componentVariants> {}

const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, variant, size, ...props }, ref) => (
    <div ref={ref} className={cn(componentVariants({ variant, size, className }))} {...props} />
  ),
);
Component.displayName = 'Component';
export { Component, componentVariants };

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useTranslation } from 'react-i18next';
import { useAtomValue } from 'jotai';
import { cn } from '@pinpoint-fe/ui/src/lib/utils';
import { someSearchParamAtom } from '@pinpoint-fe/ui/src/atoms';
import { useGetMyData } from '@pinpoint-fe/ui/src/hooks/api';

export interface MyComponentProps {
  className?: string;
}

const MyComponentContent = ({ className }: MyComponentProps) => {
  const { t } = useTranslation();
  const searchParam = useAtomValue(someSearchParamAtom);
  const { data } = useGetMyData({ param: searchParam });

  if (!data) return null;

  return <div className={cn('...', className)}>{/* 렌더링 */}</div>;
};

export const MyComponent = ({ className }: MyComponentProps) => (
  <ErrorBoundary fallback={<div>Error</div>}>
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponentContent className={className} />
    </Suspense>
  </ErrorBoundary>
);