feat:매장 운영 업무 스케줄 위젯 추가(#28)

src/features/dashboard/edit-layout/model/useDashboardLayout.ts

@@ -2,7 +2,7 @@
 // 화면에 배치된 위젯 = layout. 추가는 카탈로그 항목(LayoutItem)을 넣고, 삭제는 layout에서 뺀다.
 // 초기 레이아웃은 서버(RSC)에서 조회해 initialLayout으로 주입받는다(마운트 후 재조회 없음).
 // 저장(쓰기)만 서버액션으로 위임한다. 영속화 키는 (workspaceId, pageType). editMode는 저장하지 않는다.
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Layout, LayoutItem } from 'react-grid-layout';
 
 import { saveDashboardLayout, type DashboardLayoutState } from '@/entities/dashboard-layout';
@@ -26,43 +26,41 @@ export function useDashboardLayout({
 }: UseDashboardLayoutParams) {
   const [layout, setLayout] = useState<Layout>(initialLayout.layout);
   const [editMode, setEditMode] = useState(false);
+  const didMountRef = useRef(false);
 
   // TODO: DB 연동 — 변경 저장 (드래그 중 잦은 호출은 debounce 예정)
-  const commit = useCallback(
-    (next: Layout) => {
-      void saveDashboardLayout(workspaceId, pageType, { layout: next });
-    },
-    [workspaceId, pageType],
-  );
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+
+    void saveDashboardLayout(workspaceId, pageType, { layout });
+  }, [layout, workspaceId, pageType]);
 
   const handleLayoutChange = useCallback(
     (next: Layout) => {
       const positions = next.map(toPosition);
       setLayout(positions);
-      commit(positions);
     },
-    [commit],
+    [],
   );
 
   const addWidget = useCallback(
     (item: LayoutItem) =>
       setLayout((prev) => {
         if (prev.some((entry) => entry.i === item.i)) return prev;
-        const next = [...prev, toPosition(item)];
-        commit(next);
-        return next;
+        return [...prev, toPosition(item)];
       }),
-    [commit],
+    [],
   );
 
   const removeWidget = useCallback(
     (id: string) =>
       setLayout((prev) => {
-        const next = prev.filter((entry) => entry.i !== id);
-        commit(next);
-        return next;
+        return prev.filter((entry) => entry.i !== id);
       }),
-    [commit],
+    [],
   );
 
   const toggleEdit = useCallback(() => setEditMode((prev) => !prev), []);

src/shared/dashboard/model/widget.types.ts

@@ -5,11 +5,15 @@ import type { LayoutItem } from 'react-grid-layout';
 
 import type { WidgetSize } from '../lib/widget-size';
 
+export interface WidgetRenderContext {
+  workspaceId: string;
+}
+
 export interface WidgetDefinition {
   /** 위젯을 추가할 때의 기본 배치 + 위젯 id(layout.i) */
   layout: LayoutItem;
   /** 위젯 추가 목록·라벨 표시명 */
   title: string;
   /** 현재 타일 크기(sm/md/lg)를 받아 밀도가 다른 변형을 렌더 */
-  render: (size: WidgetSize) => ReactNode;
+  render: (size: WidgetSize, context: WidgetRenderContext) => ReactNode;
 }

src/views/dashboard/config/template-widgets.ts

@@ -19,7 +19,7 @@ export const TEMPLATE_WIDGETS: Record<WorkspacePurpose, WidgetId[]> = {
   ],
   // TODO: 매장운영 템플릿에 들어가는 위젯 생성, 추가, 수정
   // 매장운영 — 일정/업무/캘린더/회의록 (개발 지표 제외)
-  'store-operation': ['calendar', 'recent-notices', 'recent-resources'],
+  'store-operation': ['work-schedule', 'calendar', 'recent-notices', 'recent-resources'],
   // TODO: 팀플 템플릿에 들어가는 위젯 생성, 추가, 수정
   // 팀 프로젝트 — 진척·협업
   'team-project': ['my-tasks', 'recent-notes', 'calendar', 'recent-notices', 'recent-resources'],

src/views/dashboard/config/widget-catalog.tsx

@@ -12,6 +12,7 @@ import { TodaySchedule } from '@/widgets/side-project/dashboard-today-schedule';
 import { Velocity } from '@/widgets/side-project/dashboard-velocity';
 import { RecentNotices } from '@/widgets/store-operation/dashboard-recent-notices';
 import { RecentResources } from '@/widgets/store-operation/dashboard-recent-resources';
+import { WorkScheduleSummary } from '@/widgets/store-operation/dashboard-work-schedule';
 
 // layout의 x/y는 "추가될 때의 기본 위치"이며, 그리드가 충돌 시 자동 정렬한다.
 // key는 layout.i(위젯 id)와 일치해야 한다.
@@ -50,7 +51,14 @@ export const WIDGET_CATALOG = {
   'recent-resources': {
     layout: { i: 'recent-resources', x: 0, y: 10, w: 6, h: 5, minW: 2, minH: 3 },
     title: '최근 자료',
-    render: (size) => <RecentResources size={size} />,
+    render: (size, { workspaceId }) => <RecentResources workspaceId={workspaceId} size={size} />,
+  },
+  'work-schedule': {
+    layout: { i: 'work-schedule', x: 6, y: 10, w: 6, h: 5, minW: 3, minH: 3 },
+    title: '업무 스케줄',
+    render: (size, { workspaceId }) => (
+      <WorkScheduleSummary workspaceId={workspaceId} size={size} />
+    ),
   },
   'today-schedule': {
     layout: { i: 'today-schedule', x: 0, y: 10, w: 6, h: 4, minW: 2, minH: 3 },

src/views/dashboard/ui/DashboardGrid.tsx

@@ -26,6 +26,8 @@ const renderResizeHandle = (axis: ResizeHandleAxis, ref: Ref<HTMLElement>) => (
 );
 
 interface DashboardGridProps {
+  /** 위젯 데이터 조회 스코프 */
+  workspaceId: string;
   /** 위젯 카탈로그 (id → 렌더러) */
   widgets: WidgetDefinition[];
   layout: Layout;
@@ -35,6 +37,7 @@ interface DashboardGridProps {
 }
 
 export default function DashboardGrid({
+  workspaceId,
   widgets,
   layout,
   editMode,
@@ -104,7 +107,7 @@ export default function DashboardGrid({
                       </button>
                     </>
                   )}
-                  {widget.render(size)}
+                  {widget.render(size, { workspaceId })}
                 </div>
               );
             })}

src/views/dashboard/ui/DashboardView.tsx

@@ -57,6 +57,7 @@ export default function DashboardView({
     <>
       {editMode && <EditModeBanner />}
       <DashboardGrid
+        workspaceId={workspaceId}
         widgets={CATALOG_WIDGETS}
         layout={layout}
         editMode={editMode}

src/views/store-operation/work-schedule/ui/WorkScheduleView.tsx

@@ -2,17 +2,18 @@
 
 // 워크스페이스의 목업 매장 근무 일정 화면을 구성합니다.
 import { createInitialWorkSchedule, mockWorkScheduleConfig } from '@/entities/work-schedule';
-import { mockWorkspaceMembers } from '@/entities/workspace-member';
+import { getMockWorkspaceMembersByWorkspaceId } from '@/entities/workspace-member';
 import { WorkScheduleBoard } from '@/features/manage-work-schedule';
 
 interface WorkScheduleViewProps {
   workspaceId: string;
 }
 
 export function WorkScheduleView({ workspaceId }: WorkScheduleViewProps) {
+  const members = getMockWorkspaceMembersByWorkspaceId(workspaceId);
   const initialSchedule = createInitialWorkSchedule({
     workspaceId,
-    members: mockWorkspaceMembers,
+    members,
     config: mockWorkScheduleConfig,
   });
 
@@ -24,7 +25,7 @@ export function WorkScheduleView({ workspaceId }: WorkScheduleViewProps) {
       </div>
 
       <WorkScheduleBoard
-        members={mockWorkspaceMembers}
+        members={members}
         config={mockWorkScheduleConfig}
         initialSchedule={initialSchedule}
       />

src/widgets/store-operation/dashboard-recent-resources/ui/RecentResources.tsx

@@ -9,9 +9,6 @@ import type { WidgetSize } from '@/shared/dashboard/lib/widget-size';
 import { WidgetCard, WidgetCardAction, WidgetCardHeader } from '@/shared/dashboard/ui/widget-card';
 import { cn } from '@/shared/lib/utils';
 
-// 작성일(내림차순) 정렬 — "최근" 자료를 위로. 원본 배열을 변형하지 않도록 복사 후 정렬한다.
-const sortedResources = [...mockResources].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
-
 const header = (
   <WidgetCardHeader title="최근 자료" action={<WidgetCardAction>자료실</WidgetCardAction>} />
 );
@@ -41,7 +38,28 @@ function ResourceIcon({ resource, className }: { resource: ResourceItem; classNa
   );
 }
 
-export default function RecentResources({ size = 'md' }: { size?: WidgetSize }) {
+interface RecentResourcesProps {
+  workspaceId: string;
+  size?: WidgetSize;
+}
+
+export default function RecentResources({ workspaceId, size = 'md' }: RecentResourcesProps) {
+  // 작성일(내림차순) 정렬 — "최근" 자료를 위로. 원본 배열을 변형하지 않도록 복사 후 정렬한다.
+  const sortedResources = mockResources
+    .filter((resource) => resource.workspaceId === workspaceId)
+    .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+
+  if (sortedResources.length === 0) {
+    return (
+      <WidgetCard>
+        {header}
+        <div className="text-brand-muted flex min-h-0 flex-1 items-center justify-center text-center text-sm">
+          등록된 자료가 없습니다.
+        </div>
+      </WidgetCard>
+    );
+  }
+
   if (size === 'sm') {
     const latest = sortedResources[0];
     return (

src/widgets/store-operation/dashboard-work-schedule/index.ts

@@ -0,0 +1,2 @@
+// dashboard-work-schedule 위젯의 Public API
+export { default as WorkScheduleSummary } from './ui/WorkScheduleSummary';