[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

@@ -22,21 +22,21 @@ export function useManagerHomeViewModel() {
     fetchNextPage: fetchMoreWorkers,
     hasNextPage: hasMoreWorkers,
     isFetchingNextPage: isFetchingMoreWorkers,
-  } = useWorkspaceWorkersViewModel(activeWorkspaceId)
+  } = useWorkspaceWorkersViewModel(activeWorkspaceId, undefined, 3)
 
   const {
     postings: ongoingPostings,
     totalCount: postingsTotalCount,
     fetchNextPage: fetchMorePostings,
     hasNextPage: hasMorePostings,
-  } = useManagedPostingsViewModel(activeWorkspaceId, { status: 'OPEN' })
+  } = useManagedPostingsViewModel(activeWorkspaceId, { status: 'OPEN' }, 3)
 
   const {
     requests: substituteRequests,
     totalCount: substituteTotalCount,
     fetchNextPage: fetchMoreSubstitutes,
     hasNextPage: hasMoreSubstitutes,
-  } = useSubstituteRequestsViewModel(activeWorkspaceId)
+  } = useSubstituteRequestsViewModel(activeWorkspaceId, undefined, 3)
 
   const {
     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,24 @@ 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
-          )
-        : '',
-    }))
+    const seen = new Set<number>()
+    return data.data
+      .filter(worker => {
+        if (seen.has(worker.workerId)) return false
+        seen.add(worker.workerId)
+        return true
+      })
+      .map(worker => ({
+        id: worker.workerId,
+        name: worker.workerName,
+        profileImageUrl: worker.profileImageUrl,
+        workTime: worker.shifts[0]
+          ? formatIsoTimeRangeLabel(
+              worker.shifts[0].startDateTime,
+              worker.shifts[0].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) => {

src/pages/manager/home/index.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useRef } from 'react'
 import { format } from 'date-fns'
 import { ko } from 'date-fns/locale'
 import { Navbar } from '@/shared/ui/common/Navbar'
-import { useLocation, useNavigate } from 'react-router-dom'
-import type { ManagerHomeLocationState } from '@/features/manager/home/types/managerHomeLocationState'
+import { useNavigate } from 'react-router-dom'
 import {
   TodayWorkerList,
   StoreWorkerListItem,
@@ -19,20 +17,12 @@ import managerHomeBannerImage from '@/assets/manager-home-banner.jpg'
 import managerHomeBannerPlusIcon from '@/assets/icons/home/manager-home-banner-plus.svg'
 import managerWorkspaceModalPlusIcon from '@/assets/icons/home/manager-workspace-modal-plus.svg'
 import managerScheduleEditIcon from '@/assets/icons/home/edit.svg'
-import { shouldShowInfiniteListLoadMore } from '@/shared/lib/listLoadMoreVisibility'
 import { ROUTES, managerWorkerSchedulePath } from '@/shared/constants/routes'
 
 const STORE_WORKERS_SECTION_ID = 'manager-store-workers'
-const SCHEDULE_SAVE_SUCCESS_MESSAGE = '스케줄이 성공적으로 저장되었습니다.'
 
 export function ManagerHomePage() {
   const navigate = useNavigate()
-  const location = useLocation()
-  const scheduleSaveScrollHandled = useRef(false)
-
-  const navigationState = location.state as ManagerHomeLocationState | null
-  const showScheduleSaveSuccess =
-    navigationState?.workerScheduleSaveSuccess === true
   const {
     todayWorkers,
     storeWorkers,
@@ -57,30 +47,10 @@ export function ManagerHomePage() {
     selectWorkspace,
   } = useManagerHomeViewModel()
 
-  useEffect(() => {
-    if (!showScheduleSaveSuccess || scheduleSaveScrollHandled.current) return
-
-    scheduleSaveScrollHandled.current = true
-    requestAnimationFrame(() => {
-      document
-        .getElementById(STORE_WORKERS_SECTION_ID)
-        ?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    })
-  }, [showScheduleSaveSuccess])
-
   return (
     <div className="flex min-h-[100dvh] flex-col box-border bg-bg-light">
       <Navbar />
 
-      {showScheduleSaveSuccess ? (
-        <p
-          className="mx-4 mt-3 rounded-2xl bg-main-100 px-4 py-3 typography-body02-regular text-text-100"
-          role="status"
-        >
-          {SCHEDULE_SAVE_SUCCESS_MESSAGE}
-        </p>
-      ) : null}
-
       <div className="relative h-[200px] w-full overflow-hidden">
         <img
           src={managerHomeBannerImage}
@@ -245,27 +215,31 @@ export function ManagerHomePage() {
         </div>
 
         <div className="bg-white mx-4 py-8  rounded-[16px] shadow-sm overflow-hidden flex flex-col">
-          <div className="px-4 gap-6 flex flex-col">
-            {storeWorkers.map(worker => (
-              <StoreWorkerListItem
-                key={worker.id}
-                name={worker.name}
-                role={worker.role}
-                nextWorkDate={worker.nextWorkDate}
-                profileImageUrl={worker.profileImageUrl}
-                onOptions={() => {}}
-              />
-            ))}
-            {shouldShowInfiniteListLoadMore(
-              hasMoreWorkers,
-              storeWorkersTotalCount
-            ) && (
-              <MoreButton
-                onClick={() => fetchMoreWorkers()}
-                disabled={isFetchingMoreWorkers}
-              />
-            )}
-          </div>
+          {storeWorkers.length === 0 ? (
+            <p className="px-4 py-8 text-center typography-body02-regular text-text-50">
+              근무자가 없습니다
+            </p>
+          ) : (
+            <div className="px-4 gap-6 flex flex-col">
+              {storeWorkers.map(worker => (
+                <StoreWorkerListItem
+                  key={worker.id}
+                  name={worker.name}
+                  role={worker.role}
+                  nextWorkDate={worker.nextWorkDate}
+                  profileImageUrl={worker.profileImageUrl}
+                  onOptions={() => {}}
+                />
+              ))}
+              {storeWorkers.length < storeWorkersTotalCount &&
+                hasMoreWorkers && (
+                  <MoreButton
+                    onClick={() => fetchMoreWorkers()}
+                    disabled={isFetchingMoreWorkers}
+                  />
+                )}
+            </div>
+          )}
         </div>
       </div>
       <div className="pt-6 pb-8">
@@ -277,10 +251,7 @@ export function ManagerHomePage() {
           <OngoingPostingCard
             postings={ongoingPostings}
             onViewMore={
-              shouldShowInfiniteListLoadMore(
-                hasMorePostings,
-                postingsTotalCount
-              )
+              ongoingPostings.length < postingsTotalCount && hasMorePostings
                 ? () => fetchMorePostings()
                 : undefined
             }
@@ -297,10 +268,8 @@ export function ManagerHomePage() {
           <SubstituteApprovalCard
             requests={substituteRequests}
             onViewMore={
-              shouldShowInfiniteListLoadMore(
-                hasMoreSubstitutes,
-                substituteTotalCount
-              )
+              substituteRequests.length < substituteTotalCount &&
+              hasMoreSubstitutes
                 ? () => fetchMoreSubstitutes()
                 : undefined
             }