Skip to content

[feat] 사장님 메인 UX 개선#45

Open
limtjdghks wants to merge 7 commits into
devfrom
feat/ALT-238
Open

[feat] 사장님 메인 UX 개선#45
limtjdghks wants to merge 7 commits into
devfrom
feat/ALT-238

Conversation

@limtjdghks
Copy link
Copy Markdown
Member

@limtjdghks limtjdghks commented May 27, 2026

ID

  • ALT-238

변경 내용

  • 사장님 홈 화면 UI/UX 개선 및 버그 수정
  • 각 섹션 빈 상태(empty state) UI 추가
  • 더보기 버튼 노출 로직 개선
  • 상단 스케줄 저장 성공 메시지 제거
  • 리스트 key 중복 버그 수정

구현 사항

빈 상태 UI 추가

데이터가 없을 때 빈 화면 대신 안내 문구를 표시하도록 각 섹션에 empty state를 추가했습니다.

  • 오늘 근무자: "오늘 등록된 스케줄이 없어요" (최소 높이 min-h-[188px] 지정으로 레이아웃 안정화)
  • 매장 근무자: "근무자가 없습니다"
  • 진행 중인 공고: "진행 중인 공고가 없습니다"
  • 대타 승인 요청: "대타 승인 요청이 없습니다"

더보기 버튼 노출 로직 개선

  • shouldShowInfiniteListLoadMore(hasNextPage, totalCount) 방식을 제거하고, list.length < totalCount 직접 비교로 단순화했습니다. - 또한 onViewMore prop이 없을 때 더보기 버튼 자체가 렌더링되지 않도록 조건부 렌더링으로 수정했습니다.

상단 스케줄 저장 성공 메시지 제거

  • 스케줄 저장 후 홈으로 돌아올 때 상단에 표시되던 성공 배너를 제거했습니다. 관련 location.state 처리 로직, useRef, useEffect도 함께 정리했습니다.

리스트 key 중복 버그 수정 (fix)

  • installHook.js: Warning: Encountered two children with the same key, 15 경고 수정

  • API가 동일한 항목을 중복 반환하거나 cursor 페이지네이션이 겹치는 경우를 대비해, 각 ViewModel의 useMemo 내에서 ID 기준deduplication을 추가했습니다.

구현 시연 (필요 시)

2026-05-27.6.45.44.mov

Summary by CodeRabbit

릴리스 노트

Bug Fixes

  • 목록에서 중복된 항목 표시 문제 해결
  • "더보기" 버튼 표시 로직 개선

New Features

  • 근무자, 공고, 대타 승인 요청 목록이 비어있을 때 안내 메시지 표시
  • 페이지 로드 크기를 유연하게 조정할 수 있도록 개선

Review Change Stack

@limtjdghks limtjdghks requested review from dohy-eon and kim3360 May 27, 2026 09:46
@limtjdghks limtjdghks self-assigned this May 27, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
alter-client Ready Ready Preview, Comment May 27, 2026 9:54am

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 27, 2026

Warning

Review limit reached

@limtjdghks, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 51 minutes and 43 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: da0c5d0b-e043-4057-945a-3e0c3edd0ec4

📥 Commits

Reviewing files that changed from the base of the PR and between e0df8d6 and 1434c89.

📒 Files selected for processing (1)
  • src/pages/manager/home/index.tsx
📝 Walkthrough

Walkthrough

Manager 홈 페이지의 리스트 관리 아키텍처를 리팩토링합니다. 페이지 크기를 동적 파라미터로 변경하고, 모든 무한 쿼리 결과를 id 기준으로 중복 제거합니다. 스케줄 저장 성공 상태 전달 로직을 제거하고, UI의 "더보기" 표시 조건을 총 개수 비교로 단순화하며 빈 상태 렌더링을 추가합니다.

Changes

Manager Home Pagination & Empty State Refactoring

Layer / File(s) Summary
View Model Pagination Parameters & Deduplication
src/features/manager/home/hooks/useManagedPostingsViewModel.ts, src/features/manager/home/hooks/useSubstituteRequestsViewModel.ts, src/features/manager/home/hooks/useWorkspaceWorkersViewModel.ts, src/features/manager/home/hooks/useTodaySchedulesViewModel.ts
pageSize 파라미터를 추가하고 useInfiniteQuery의 queryKey와 fetchFn에 포함시킵니다. 세 개의 메인 훅에서 flattened 결과를 id 기준 Map으로 중복 제거하고, useTodaySchedulesViewModel은 workerId 기준 중복 제거를 추가합니다.
useManagerHomeViewModel Pagesize Wiring
src/features/manager/home/hooks/useManagerHomeViewModel.ts
의존하는 훅 호출(workers/postings/substitutes)에 세 번째 인자로 pageSize=3을 전달합니다.
Remove Schedule Save Success State Handling
src/features/manager/worker-schedule/hooks/useWorkerScheduleManageViewModel.ts, src/features/manager/home/types/managerHomeLocationState.ts, src/pages/manager/home/index.tsx
ManagerHomeLocationState 타입을 제거하고, navigate 호출에서 workerScheduleSaveSuccess state 전달을 제거하며, ManagerHomePage에서 location state 확인 및 스크롤/성공 메시지 로직을 제거합니다.
Empty State & Conditional Load More in UI Components
src/features/manager/home/ui/TodayWorkerList.tsx, src/pages/manager/home/index.tsx, src/shared/ui/manager/OngoingPostingCard.tsx, src/shared/ui/manager/SubstituteApprovalCard.tsx
리스트 길이 0일 때 빈 상태 메시지 렌더링을 추가합니다. "더보기" 버튼을 list.length < totalCount 조건으로 변경하고(shouldShowInfiniteListLoadMore 제거), onViewMore 콜백 존재 여부로 추가 조건부 표시를 합니다. TodayWorkerList는 min-h-[188px] 레이아웃 고정, ManagerHomePage는 storeWorkers 빈 상태 표시를 추가합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • alter-app/alter-client#13: useManagedPostingsViewModel과 useSubstituteRequestsViewModel의 pagination 파라미터 및 deduping 로직 변경과 직접 관련됨.
  • alter-app/alter-client#31: 매니저 홈 pagination/load-more 로직 및 useManagerHomeViewModel 데이터 흐름 변경과 겹침.
  • alter-app/alter-client#20: useTodaySchedulesViewModel의 worker 중복 제거 및 workTime 도출 로직 변경과 관련됨.

Suggested reviewers

  • kim3360
  • dohy-eon
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 PR의 주요 변경 사항(사장님 홈 화면 UX 개선)을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명이 템플릿의 모든 필수 섹션(ID, 변경 내용, 구현 사항)을 포함하고 있으며, 각 개선 사항에 대한 상세한 설명과 구현 시연 영상 링크를 제공하고 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/ALT-238

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/manager/home/index.tsx`:
- Around line 231-236: The MoreButton rendering condition should include the
pagination flags to avoid showing when no further pages exist: update the check
around the storeWorkers block to require both storeWorkers.length <
storeWorkersTotalCount AND hasMoreWorkers before rendering MoreButton (which
calls fetchMoreWorkers and uses isFetchingMoreWorkers); apply the same pattern
for the other occurrences (use hasMorePostings with the postings
length/totalCount check and hasMoreSubstitutes with the substitutes
length/totalCount check) so each MoreButton is gated by its corresponding
hasMore* flag.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 17f279d0-560b-41e6-b48c-63adbf1b1c28

📥 Commits

Reviewing files that changed from the base of the PR and between 498e5f6 and e0df8d6.

📒 Files selected for processing (11)
  • src/features/manager/home/hooks/useManagedPostingsViewModel.ts
  • src/features/manager/home/hooks/useManagerHomeViewModel.ts
  • src/features/manager/home/hooks/useSubstituteRequestsViewModel.ts
  • src/features/manager/home/hooks/useTodaySchedulesViewModel.ts
  • src/features/manager/home/hooks/useWorkspaceWorkersViewModel.ts
  • src/features/manager/home/types/managerHomeLocationState.ts
  • src/features/manager/home/ui/TodayWorkerList.tsx
  • src/features/manager/worker-schedule/hooks/useWorkerScheduleManageViewModel.ts
  • src/pages/manager/home/index.tsx
  • src/shared/ui/manager/OngoingPostingCard.tsx
  • src/shared/ui/manager/SubstituteApprovalCard.tsx
💤 Files with no reviewable changes (1)
  • src/features/manager/home/types/managerHomeLocationState.ts

Comment thread src/pages/manager/home/index.tsx Outdated
@dohy-eon
Copy link
Copy Markdown
Member

@coderabbitai 리뷰 또 해줘

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 28, 2026

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read key changed files
echo "=== useManagedPostingsViewModel ==="
cat src/features/manager/home/hooks/useManagedPostingsViewModel.ts

echo "=== useManagerHomeViewModel ==="
cat src/features/manager/home/hooks/useManagerHomeViewModel.ts

echo "=== useSubstituteRequestsViewModel ==="
cat src/features/manager/home/hooks/useSubstituteRequestsViewModel.ts

echo "=== useWorkspaceWorkersViewModel ==="
cat src/features/manager/home/hooks/useWorkspaceWorkersViewModel.ts

echo "=== useTodaySchedulesViewModel ==="
cat src/features/manager/home/hooks/useTodaySchedulesViewModel.ts

echo "=== ManagerHomePage ==="
cat src/pages/manager/home/index.tsx

echo "=== OngoingPostingCard ==="
cat src/shared/ui/manager/OngoingPostingCard.tsx

echo "=== SubstituteApprovalCard ==="
cat src/shared/ui/manager/SubstituteApprovalCard.tsx

echo "=== TodayWorkerList ==="
cat src/features/manager/home/ui/TodayWorkerList.tsx

echo "=== useWorkerScheduleManageViewModel ==="
cat src/features/manager/worker-schedule/hooks/useWorkerScheduleManageViewModel.ts

Length of output: 44092



@dohy-eon 리뷰 다시 해드릴게요. 핵심 이슈만 정리했습니다.


🔴 1. Query 캐시 키 분리 회귀 (cache miss 이중 요청)

pageSizequeryKey에 포함되면서 홈(pageSize=3)과 스케줄 관리 화면(pageSize=50 기본값)이 완전히 별개의 캐시를 사용합니다.

// useWorkerScheduleManageViewModel.ts
// pageSize 인자 없음 → 기본값 50 → queryKey에 pageSize:50 포함
const { workers } = useWorkspaceWorkersViewModel(workspaceId)

// useManagerHomeViewModel.ts
// queryKey에 pageSize:3 포함 → 완전 다른 캐시
useWorkspaceWorkersViewModel(activeWorkspaceId, undefined, 3)

두 화면 간 이동 시 같은 워커 목록을 중복 요청합니다. queryKey에서 pageSize를 제거하거나, 스케줄 관리 뷰모델에도 명시적으로 pageSize를 전달해야 합니다.


🔴 2. useTodaySchedulesViewModel — 다중 쉬프트 데이터 소실

// workerId 기준으로 첫 번째 항목만 keep
// 동일 근무자가 오늘 2개 쉬프트를 가질 경우 두 번째 쉬프트는 조용히 버려짐
workTime: worker.shifts[0]
  ? formatIsoTimeRangeLabel(worker.shifts[0].startDateTime, worker.shifts[0].endDateTime)
  : '',

data.data 배열에 같은 workerId가 여러 번 오는 이유가 복수 쉬프트 때문인지 API 중복 반환 때문인지 먼저 확인이 필요합니다. 쉬프트가 여러 개인 구조라면 workerId 기준 dedup 대신 shifts 배열을 직접 활용해야 합니다.


🟡 3. Map dedup — last-wins 시맨틱

세 개 뷰모델 모두 동일하게:

return [...new Map(all.map(p => [p.id, p])).values()]

Map나중 항목이 앞 항목을 덮어씁니다. 커서 페이지네이션에서 경계 겹침이 발생하면 page 1 항목이 page 2 항목으로 교체됩니다. 일반적으로 무해하지만 의도된 동작인지 주석으로 명시하면 좋습니다.


🟡 4. 죽은 코드 — STORE_WORKERS_SECTION_ID

// ManagerHomePage — scroll 로직은 제거됐지만 상수와 id 속성은 남아있음
const STORE_WORKERS_SECTION_ID = 'manager-store-workers'
// ...
<div id={STORE_WORKERS_SECTION_ID} className="scroll-mt-4 pt-6 pb-8">

scroll-mt-4도 scroll 네비게이션 없이는 의미가 없습니다. 제거하거나 향후 딥링크용으로 남길 예정이라면 주석을 달아두세요.


ℹ️ 참고 (버그 아님)

onOptions={() => {}}, onRequestClick={() => {}}, onPostingClick={() => {}} 빈 핸들러는 현재 UI에서 아무런 동작을 하지 않습니다. 이후 기능 추가 시 누락되지 않도록 TODO 주석이나 별도 이슈로 트래킹을 권장합니다.

Copy link
Copy Markdown
Member

@dohy-eon dohy-eon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

흠 .. 위에 코멘트 한번 확인하시고 2, 4번은 수정 부탁드리겟습니다! @limtjdghks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants