[feat] 사장님 메인 UX 개선

src/features/manager/home/hooks/useManagedPostingsViewModel.ts

@@ -4,11 +4,10 @@ import { fetchManagedPostings } from '@/features/manager/api/posting'
 import { adaptPostingDto } from '@/features/manager/home/types/posting'
 import { queryKeys } from '@/shared/lib/queryKeys'
 
-const PAGE_SIZE = 10
-
 export function useManagedPostingsViewModel(
   workspaceId: number | null,
-  params?: { status?: string }
+  params?: { status?: string },
+  pageSize = 10
 ) {
   const {
     data,
@@ -21,11 +20,11 @@ export function useManagedPostingsViewModel(
     queryKey: queryKeys.posting.list({
       workspaceId: workspaceId ?? undefined,
       status: params?.status,
-      pageSize: PAGE_SIZE,
+      pageSize,
     }),
     queryFn: ({ pageParam }) =>
       fetchManagedPostings({
-        pageSize: PAGE_SIZE,
+        pageSize,
         workspaceId: workspaceId ?? undefined,
         status: params?.status,
         cursor: pageParam as string | undefined,
@@ -35,13 +34,13 @@ export function useManagedPostingsViewModel(
     enabled: workspaceId !== null,
   })
 
-  const postings = useMemo(
-    () =>
+  const postings = useMemo(() => {
+    const all =
       data?.pages.flatMap(
         page => page.data?.data?.map(adaptPostingDto) ?? []
-      ) ?? [],
-    [data]
-  )
+      ) ?? []
+    return [...new Map(all.map(p => [p.id, p])).values()]
+  }, [data])
 
   const totalCount = data?.pages[0]?.data?.page?.totalCount ?? 0
 

src/features/manager/home/hooks/useManagerHomeViewModel.ts

@@ -17,27 +17,113 @@ export function useManagerHomeViewModel() {
   const { detail: workspaceDetail } = useWorkspaceDetailQuery(activeWorkspaceId)
 
   const {
-    workers: storeWorkers,
+    workers: allStoreWorkers,
     totalCount: storeWorkersTotalCount,
-    fetchNextPage: fetchMoreWorkers,
-    hasNextPage: hasMoreWorkers,
+    fetchNextPage: fetchNextWorkersPage,
+    hasNextPage: hasNextWorkersPage,
     isFetchingNextPage: isFetchingMoreWorkers,
   } = useWorkspaceWorkersViewModel(activeWorkspaceId)
 
   const {
-    postings: ongoingPostings,
+    postings: allOngoingPostings,
     totalCount: postingsTotalCount,
-    fetchNextPage: fetchMorePostings,
-    hasNextPage: hasMorePostings,
+    fetchNextPage: fetchNextPostingsPage,
+    hasNextPage: hasNextPostingsPage,
   } = useManagedPostingsViewModel(activeWorkspaceId, { status: 'OPEN' })
 
   const {
-    requests: substituteRequests,
+    requests: allSubstituteRequests,
     totalCount: substituteTotalCount,
-    fetchNextPage: fetchMoreSubstitutes,
-    hasNextPage: hasMoreSubstitutes,
+    fetchNextPage: fetchNextSubstitutesPage,
+    hasNextPage: hasNextSubstitutesPage,
   } = useSubstituteRequestsViewModel(activeWorkspaceId)
 
+  const [visibleCounts, setVisibleCounts] = useState({
+    forWorkspaceId: activeWorkspaceId,
+    workers: 3,
+    postings: 3,
+    substitutes: 3,
+  })
+
+  const isSameWorkspace = visibleCounts.forWorkspaceId === activeWorkspaceId
+  const visibleWorkersCount = isSameWorkspace ? visibleCounts.workers : 3
+  const visiblePostingsCount = isSameWorkspace ? visibleCounts.postings : 3
+  const visibleSubstitutesCount = isSameWorkspace
+    ? visibleCounts.substitutes
+    : 3
+
+  const storeWorkers = allStoreWorkers.slice(0, visibleWorkersCount)
+  const ongoingPostings = allOngoingPostings.slice(0, visiblePostingsCount)
+  const substituteRequests = allSubstituteRequests.slice(
+    0,
+    visibleSubstitutesCount
+  )
+
+  const hasMoreWorkers =
+    visibleWorkersCount < allStoreWorkers.length || hasNextWorkersPage
+  const hasMorePostings =
+    visiblePostingsCount < allOngoingPostings.length || hasNextPostingsPage
+  const hasMoreSubstitutes =
+    visibleSubstitutesCount < allSubstituteRequests.length ||
+    hasNextSubstitutesPage
+
+  const showMoreWorkers = () => {
+    const nextCount = visibleWorkersCount + 3
+    if (visibleWorkersCount < allStoreWorkers.length) {
+      setVisibleCounts(prev => ({
+        ...prev,
+        forWorkspaceId: activeWorkspaceId,
+        workers: nextCount,
+      }))
+    } else {
+      fetchNextWorkersPage().then(() =>
+        setVisibleCounts(prev => ({
+          ...prev,
+          forWorkspaceId: activeWorkspaceId,
+          workers: nextCount,
+        }))
+      )
+    }
+  }
+
+  const showMorePostings = () => {
+    const nextCount = visiblePostingsCount + 3
+    if (visiblePostingsCount < allOngoingPostings.length) {
+      setVisibleCounts(prev => ({
+        ...prev,
+        forWorkspaceId: activeWorkspaceId,
+        postings: nextCount,
+      }))
+    } else {
+      fetchNextPostingsPage().then(() =>
+        setVisibleCounts(prev => ({
+          ...prev,
+          forWorkspaceId: activeWorkspaceId,
+          postings: nextCount,
+        }))
+      )
+    }
+  }
+
+  const showMoreSubstitutes = () => {
+    const nextCount = visibleSubstitutesCount + 3
+    if (visibleSubstitutesCount < allSubstituteRequests.length) {
+      setVisibleCounts(prev => ({
+        ...prev,
+        forWorkspaceId: activeWorkspaceId,
+        substitutes: nextCount,
+      }))
+    } else {
+      fetchNextSubstitutesPage().then(() =>
+        setVisibleCounts(prev => ({
+          ...prev,
+          forWorkspaceId: activeWorkspaceId,
+          substitutes: nextCount,
+        }))
+      )
+    }
+  }
+
   const {
     baseDate: scheduleBaseDate,
     calendarData,
@@ -82,16 +168,16 @@ export function useManagerHomeViewModel() {
     todayWorkers,
     storeWorkers,
     storeWorkersTotalCount,
-    fetchMoreWorkers,
+    showMoreWorkers,
     hasMoreWorkers,
     isFetchingMoreWorkers,
     ongoingPostings,
     postingsTotalCount,
-    fetchMorePostings,
+    showMorePostings,
     hasMorePostings,
     substituteRequests,
     substituteTotalCount,
-    fetchMoreSubstitutes,
+    showMoreSubstitutes,
     hasMoreSubstitutes,
     schedule: {
       baseDate: scheduleBaseDate,

src/features/manager/home/hooks/useSubstituteRequestsViewModel.ts

@@ -4,11 +4,10 @@ import { fetchSubstituteRequests } from '@/features/manager/api/substitute'
 import { adaptSubstituteRequestDto } from '@/features/manager/home/types/substitute'
 import { queryKeys } from '@/shared/lib/queryKeys'
 
-const PAGE_SIZE = 10
-
 export function useSubstituteRequestsViewModel(
   workspaceId: number | null,
-  params?: { status?: string }
+  params?: { status?: string },
+  pageSize = 10
 ) {
   const {
     data,
@@ -21,11 +20,11 @@ export function useSubstituteRequestsViewModel(
     queryKey: queryKeys.substitute.list({
       workspaceId: workspaceId ?? undefined,
       status: params?.status,
-      pageSize: PAGE_SIZE,
+      pageSize,
     }),
     queryFn: ({ pageParam }) =>
       fetchSubstituteRequests({
-        pageSize: PAGE_SIZE,
+        pageSize,
         workspaceId: workspaceId ?? undefined,
         status: params?.status,
         cursor: pageParam as string | undefined,
@@ -35,13 +34,13 @@ export function useSubstituteRequestsViewModel(
     enabled: workspaceId !== null,
   })
 
-  const requests = useMemo(
-    () =>
+  const requests = useMemo(() => {
+    const all =
       data?.pages.flatMap(
         page => page?.data?.data?.map(adaptSubstituteRequestDto) ?? []
-      ) ?? [],
-    [data]
-  )
+      ) ?? []
+    return [...new Map(all.map(r => [r.id, r])).values()]
+  }, [data])
 
   const totalCount = data?.pages?.[0]?.data?.page?.totalCount ?? 0
 

src/features/manager/home/hooks/useTodaySchedulesViewModel.ts

@@ -14,17 +14,17 @@ export function useTodaySchedulesViewModel(workspaceId: number | null) {
 
   const todayWorkers = useMemo<TodayWorkerItem[]>(() => {
     if (!data) return []
-    return data.data.map(worker => ({
-      id: worker.workerId,
-      name: worker.workerName,
-      profileImageUrl: worker.profileImageUrl,
-      workTime: worker.shifts[0]
-        ? formatIsoTimeRangeLabel(
-            worker.shifts[0].startDateTime,
-            worker.shifts[0].endDateTime
-          )
-        : '',
-    }))
+    return data.data.flatMap(worker =>
+      worker.shifts.map(shift => ({
+        id: shift.shiftId,
+        name: worker.workerName,
+        profileImageUrl: worker.profileImageUrl,
+        workTime: formatIsoTimeRangeLabel(
+          shift.startDateTime,
+          shift.endDateTime
+        ),
+      }))
+    )
   }, [data])
 
   return {

src/features/manager/home/hooks/useWorkspaceWorkersViewModel.ts

@@ -4,11 +4,10 @@ import { fetchWorkspaceWorkers } from '@/features/manager/api/worker'
 import { adaptWorkerDto } from '@/features/manager/home/lib/worker'
 import { queryKeys } from '@/shared/lib/queryKeys'
 
-const PAGE_SIZE = 50
-
 export function useWorkspaceWorkersViewModel(
   workspaceId: number | null,
-  params?: { status?: string; name?: string }
+  params?: { status?: string; name?: string },
+  pageSize = 50
 ) {
   const {
     data,
@@ -21,12 +20,12 @@ export function useWorkspaceWorkersViewModel(
     queryKey: queryKeys.managerWorkspace.workers(workspaceId ?? 0, {
       status: params?.status,
       name: params?.name,
-      pageSize: PAGE_SIZE,
+      pageSize,
     }),
     queryFn: ({ pageParam }) =>
       fetchWorkspaceWorkers({
         workspaceId: workspaceId!,
-        pageSize: PAGE_SIZE,
+        pageSize,
         cursor: pageParam as string | undefined,
         status: params?.status,
         name: params?.name,
@@ -36,10 +35,11 @@ export function useWorkspaceWorkersViewModel(
     enabled: workspaceId !== null,
   })
 
-  const workers = useMemo(
-    () => data?.pages.flatMap(page => page.data.data.map(adaptWorkerDto)) ?? [],
-    [data]
-  )
+  const workers = useMemo(() => {
+    const all =
+      data?.pages.flatMap(page => page.data.data.map(adaptWorkerDto)) ?? []
+    return [...new Map(all.map(w => [w.id, w])).values()]
+  }, [data])
 
   const totalCount = data?.pages[0]?.data.page.totalCount ?? 0
 

src/features/manager/home/ui/TodayWorkerList.tsx

@@ -42,12 +42,20 @@ export function TodayWorkerList({
         오늘 근무자는 <span className="text-sub">{workers.length}</span>명이에요
       </h3>
 
-      <div className="mt-3 overflow-x-auto scrollbar-hide">
-        <div className="flex min-w-max gap-3">
-          {workers.map(worker => (
-            <TodayWorkerCard key={worker.id} worker={worker} />
-          ))}
-        </div>
+      <div className="mt-3 min-h-[188px] overflow-x-auto scrollbar-hide">
+        {workers.length === 0 ? (
+          <div className="flex h-[188px] items-center justify-center">
+            <p className="typography-body02-regular text-text-50">
+              오늘 등록된 스케줄이 없어요
+            </p>
+          </div>
+        ) : (
+          <div className="flex min-w-max gap-3">
+            {workers.map(worker => (
+              <TodayWorkerCard key={worker.id} worker={worker} />
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )

src/features/manager/worker-schedule/hooks/useWorkerScheduleManageViewModel.ts

@@ -19,7 +19,6 @@ import { invalidateManagerScheduleQueries } from '@/features/manager/worker-sche
 import { saveFixedWorkerSchedules } from '@/features/manager/worker-schedule/lib/saveFixedWorkerSchedules'
 import { saveGeneralWorkerSchedule } from '@/features/manager/worker-schedule/lib/saveGeneralWorkerSchedule'
 import { dateTimeToHourMinute } from '@/features/manager/worker-schedule/lib/scheduleDateTime'
-import type { ManagerHomeLocationState } from '@/features/manager/home/types/managerHomeLocationState'
 import { ROUTES, managerWorkerSchedulePath } from '@/shared/constants/routes'
 import { queryKeys } from '@/shared/lib/queryKeys'
 import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
@@ -417,12 +416,7 @@ export function useWorkerScheduleManageViewModel(args: {
       if (onSaveSuccess) {
         onSaveSuccess()
       } else {
-        navigate(ROUTES.MANAGER.HOME, {
-          replace: true,
-          state: {
-            workerScheduleSaveSuccess: true,
-          } satisfies ManagerHomeLocationState,
-        })
+        navigate(ROUTES.MANAGER.HOME, { replace: true })
       }
     },
     onError: async (error: unknown) => {