diff --git a/src/features/user/home/workspace/ui/WorkingStoreCard.tsx b/src/features/user/home/workspace/ui/WorkingStoreCard.tsx index 78fddde9..6f33ab49 100644 --- a/src/features/user/home/workspace/ui/WorkingStoreCard.tsx +++ b/src/features/user/home/workspace/ui/WorkingStoreCard.tsx @@ -2,13 +2,29 @@ import { useWorkingStoreCardViewModel } from '@/features/user/home/workspace/hoo import type { WorkingStoreItem } from '@/features/user/home/workspace/types/workingStore' interface WorkingStoreCardProps { store: WorkingStoreItem + onClick?: () => void } -export function WorkingStoreCard({ store }: WorkingStoreCardProps) { +export function WorkingStoreCard({ store, onClick }: WorkingStoreCardProps) { const { dueText, nextWorkDate } = useWorkingStoreCardViewModel(store) return ( -
+
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + onClick() + } + } + : undefined + } + >
{store.thumbnailUrl ? ( void onJoinWorkspaceClick?: () => void } - export function WorkingStoresList({ title = '근무중인 가게', - sortLabelLeft = '이름 순', - sortLabelRight = '근무 예정 순', - selectedSort = 'right', stores, onMoreClick, onJoinWorkspaceClick, }: WorkingStoresListProps) { + const navigate = useNavigate() const { visibleStores } = useWorkingStoresListViewModel(stores) return (

{title}

-
-

- {sortLabelLeft} -

-

|

-

- {sortLabelRight} -

-
{visibleStores.map((store, index) => (
- + + navigate(`/user/workspace/${store.workspaceId}`, { + state: { businessName: store.businessName }, + }) + } + /> {index < visibleStores.length - 1 ? (
) : null} @@ -61,7 +46,7 @@ export function WorkingStoresList({
- + {stores.length >= 4 && } {onJoinWorkspaceClick ? (
@@ -194,7 +193,16 @@ export function WorkspaceDetailPage() { variant="worker" nextWorkDate={formatNextShift(worker.nextShiftDateTime)} imageUrl={worker.profileImageUrl} - onOptions={() => {}} + menuItems={[ + { + icon: , + label: '대타 요청', + onClick: () => + navigate(ROUTES.USER.SUBSTITUTE_REQUEST, { + state: { workspaceId: id }, + }), + }, + ]} /> ))}
diff --git a/src/shared/ui/home/WorkerListItem.tsx b/src/shared/ui/home/WorkerListItem.tsx index 4161176d..b16b8808 100644 --- a/src/shared/ui/home/WorkerListItem.tsx +++ b/src/shared/ui/home/WorkerListItem.tsx @@ -1,5 +1,7 @@ +import { useState } from 'react' import { colors } from '@/shared/lib/tokens' import { Avatar } from '@/shared/ui/common/Avatar' +import { ActionMenu, type ActionMenuItem } from '@/shared/ui/common/ActionMenu' export type WorkerVariant = 'manager' | 'worker' @@ -9,7 +11,7 @@ export interface WorkerListItemProps { variant?: WorkerVariant nextWorkDate?: string imageUrl?: string | null - onOptions?: () => void + menuItems?: ActionMenuItem[] } export interface WorkerListItemData extends WorkerListItemProps { @@ -39,8 +41,9 @@ export function WorkerListItem({ variant = 'worker', nextWorkDate, imageUrl, - onOptions, + menuItems, }: WorkerListItemProps) { + const [isMenuOpen, setIsMenuOpen] = useState(false) const badgeBg = variant === 'manager' ? 'bg-main-700' : 'bg-main-300' return ( @@ -73,14 +76,24 @@ export function WorkerListItem({
- + {menuItems && menuItems.length > 0 && ( +
+ + setIsMenuOpen(false)} + className="right-0 top-full mt-2" + /> +
+ )}
) }