앞으로 개인 프로젝트를 진행할 모노레포를 구성하고 다양한 위젯으로 나만의 대시보드를 구성할 수 있는 깃허브 대시보드 앱을 개발하고 있습니다.
팀 구성
개인 프로젝트
기술 스택
프론트엔드: Turborepo, Next.js, TypeScript, Relay, GraphQL, Zustand, Vitest, Storybook, Lodash
백엔드: Github API
배포: Vercel
export default function SideBarWidgetItem({
description,
height,
width,
name,
component,
}: SideBarWidgetItemProps) {
const { onMouseDown, ...rest } = useDrag();
return (
<ToolTipWrapper description={description}>
<Card
className="w-full cursor-pointer hover:bg-muted transition-all duration-300 min-w-28 max-w-40 rounded-lg aspect-square"
data-testid={`sidebar-widget-card-${name}`}
{...rest}
onMouseDown={(e) => {
onMouseDown(e, { width, height }, component);
}}
>
....
export default function useDrag() {
const { setOffset, resetDragState, setWidgetSize } = useDragStore();
const {
gridItemHeight,
gridItemWidth,
reset: resetPanelState,
} = usePanelStore();
// eslint-disable-next-line react-hooks/exhaustive-deps -- throttledSetOffset is a function
const throttledSetOffset = useCallback(_.throttle(setOffset, 100), []);
const onMouseDown = (
e: React.MouseEvent<HTMLDivElement>,
size: { width: number; height: number },
component: React.FC,
) => {
e.preventDefault();
const dragWidgetContainer = getDragWidgetContainer({
gridItemWidth,
gridItemHeight,
widgetSize: size,
});
const widgetRoot = createRoot(dragWidgetContainer);
const targetComponent = createElement(component);
const dragLayerElement = getDragLayerElement();
widgetRoot.render(targetComponent);
dragLayerElement.appendChild(dragWidgetContainer);
addStyleForDragContainer({
offsetX: e.clientX,
offsetY: e.clientY,
containerWidget: dragWidgetContainer,
});
addMouseMoveEvent({
widgetContainer: dragWidgetContainer,
setOffset: throttledSetOffset,
});
addMouseUpEvent({
widgetContainer: dragWidgetContainer,
resetDragState,
resetPanelState,
size,
});
setOffset(e.clientX, e.clientY);
setWidgetSize(size.width, size.height);
};
return {
onMouseDown,
};
}
throwOnError
옵션을 true
로 설정해 에러 바운더리로 에러를 관리할 수 있도록 했습니다. 에러를 부모로 전달하고 적절한 위치에서 에러 바운더리를 통해 에러를 처리하는 방법을 알게 되었습니다. 관련 블로그 게시글Tags