rusty-replay 0.0.4

package/apps/web/components/ui/assignee-dropdown.tsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from '@workspace/ui/components/dropdown-menu';
+import { ChevronDown, Search, Plus, UserCircle } from 'lucide-react';
+import { Badge } from '@workspace/ui/components/badge';
+import { toast } from '@workspace/ui/components/sonner';
+import { useMutationEventAssignee } from '@/api/event/use-mutation-event-assignee';
+import { ProjectMemberResponse } from '@/api/project/types';
+import { Input } from '@workspace/ui/components/input';
+import { getAvatarColor, getInitials } from '@/utils/avatar';
+
+type Checked = DropdownMenuCheckboxItemProps['checked'];
+
+interface Props {
+  projectId: number | undefined;
+  eventId: number;
+  userList: ProjectMemberResponse[] | undefined;
+  currentAssigneeId: number | null;
+}
+
+export function AssigneeDropdown({
+  projectId,
+  eventId,
+  userList,
+  currentAssigneeId,
+}: Props) {
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  const { mutateAsync: mutateAssign, isPending: isMutatingAssign } =
+    useMutationEventAssignee({
+      projectId: projectId!,
+      eventId,
+    });
+
+  const selectedUser = userList?.find(
+    (user) => user.userId === currentAssigneeId
+  );
+
+  const filteredUsers = userList?.filter(
+    (user) =>
+      user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      user.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleAssigneeChange = async (userId: number) => {
+    try {
+      const isCurrentlySelected = currentAssigneeId === userId;
+      const newAssigneeId = isCurrentlySelected ? null : userId;
+
+      await mutateAssign(
+        { assignedTo: newAssigneeId, eventIds: [eventId] },
+        {
+          onSuccess: () => {
+            toast.success(
+              isCurrentlySelected
+                ? '담당자가 해제되었습니다!'
+                : '담당자가 지정되었습니다!'
+            );
+          },
+          onError: (error) => {
+            console.error('Error updating assignee:', error);
+            toast.error('담당자 변경에 실패했습니다.');
+          },
+        }
+      );
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Badge
+          variant="secondary"
+          className="flex items-center gap-1 cursor-pointer"
+        >
+          {selectedUser ? (
+            <>
+              <div
+                className={`w-5 h-5 rounded-full flex items-center justify-center text-xs text-white ${getAvatarColor(selectedUser.username)}`}
+              >
+                {getInitials(selectedUser.username)}
+              </div>
+              {selectedUser.username}
+            </>
+          ) : (
+            <>
+              <UserCircle className="h-4 w-4" />
+              담당자
+            </>
+          )}
+          <ChevronDown className="h-3 w-3 ml-1" />
+        </Badge>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-72">
+        <DropdownMenuLabel className="font-bold text-lg">
+          담당자
+        </DropdownMenuLabel>
+
+        <div className="px-2 py-2">
+          <div className="relative">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="사용자 또는 팀 검색..."
+              className="pl-8"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-xs text-muted-foreground uppercase">
+          멤버
+        </DropdownMenuLabel>
+
+        {filteredUsers?.map((user) => (
+          <DropdownMenuCheckboxItem
+            key={user.userId}
+            checked={currentAssigneeId === user.userId}
+            onCheckedChange={() => handleAssigneeChange(user.userId)}
+            className="flex items-center gap-2 py-2"
+            disabled={isMutatingAssign}
+          >
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm ${getAvatarColor(user.username)}`}
+            >
+              {getInitials(user.username)}
+            </div>
+            <div className="flex flex-col">
+              <span className="font-medium">{user.username}</span>
+              <span className="text-xs text-muted-foreground">
+                {user.email}
+              </span>
+            </div>
+          </DropdownMenuCheckboxItem>
+        ))}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-xs text-muted-foreground uppercase">
+          팀
+        </DropdownMenuLabel>
+
+        <DropdownMenuCheckboxItem
+          checked={false}
+          onCheckedChange={() => {}}
+          className="flex items-center gap-2 py-2"
+          disabled={true}
+        >
+          <div className="w-8 h-8 rounded-full flex items-center justify-center bg-pink-500 text-white text-sm">
+            R
+          </div>
+          <span className="font-medium">#reable</span>
+        </DropdownMenuCheckboxItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem className="flex items-center gap-2 py-2">
+          <Plus className="h-4 w-4" />
+          <span>멤버 초대</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/apps/web/components/ui/event-status-dropdown.tsx

@@ -0,0 +1,104 @@
+'use client';
+import { useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
+import { CheckCircle, XCircle, ChevronDown } from 'lucide-react';
+import { Badge } from '@workspace/ui/components/badge';
+import { EventStatusType } from '@/api/event/types';
+import { useMutationEventStatus } from '@/api/event/use-mutation-event-status';
+import { toast } from '@workspace/ui/components/sonner';
+
+type Checked = DropdownMenuCheckboxItemProps['checked'];
+
+interface Props {
+  status: EventStatusType | null;
+  projectId: number | undefined;
+  eventId: number;
+}
+
+const StatusIcon = ({ status }: { status: EventStatusType | null }) => {
+  switch (status) {
+    case 'RESOLVED':
+      return <CheckCircle className="h-4 w-4" />;
+    case 'UNRESOLVED':
+      return <XCircle className="h-4 w-4" />;
+    default:
+      return null;
+  }
+};
+
+export function EventStatusDropdown({ status, projectId, eventId }: Props) {
+  const [statusResolved, setStatusResolved] = useState<Checked>(
+    status === 'RESOLVED'
+  );
+  const [statusUnresolved, setStatusUnresolved] = useState<Checked>(
+    status === 'UNRESOLVED'
+  );
+
+  const { mutateAsync: mutateStatus, isPending: isMutatingStatus } =
+    useMutationEventStatus({ projectId: projectId! });
+
+  const handleStatusChange = async (status: EventStatusType) => {
+    await mutateStatus(
+      { status, eventIds: [eventId] },
+      {
+        onSuccess: () => {
+          setStatusResolved(status === 'RESOLVED');
+          setStatusUnresolved(status === 'UNRESOLVED');
+          toast.success('Status updated successfully!');
+        },
+        onError: (error) => {
+          console.error('Error updating status:', error);
+          toast.error('Failed to update status.');
+        },
+      }
+    );
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Badge
+          variant="secondary"
+          className="flex items-center gap-1 cursor-pointer"
+        >
+          <StatusIcon status={status} />
+          {status === 'RESOLVED' && 'Resolved'}
+          {status === 'UNRESOLVED' && 'Unresolved'}
+          <ChevronDown />
+        </Badge>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Set Status</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={statusResolved}
+          onCheckedChange={() => handleStatusChange('RESOLVED')}
+          className="flex items-center gap-2"
+        >
+          <Badge variant={'secondary'}>
+            <CheckCircle className="h-4 w-4" />
+            Resolved
+          </Badge>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={statusUnresolved}
+          onCheckedChange={() => handleStatusChange('UNRESOLVED')}
+          className="flex items-center gap-2"
+        >
+          <Badge variant={'secondary'}>
+            <XCircle className="h-4 w-4" />
+            Unresolved
+          </Badge>
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/apps/web/components/ui/priority-dropdown.tsx

@@ -0,0 +1,123 @@
+'use client';
+import { useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
+import {
+  SignalHigh,
+  SignalMedium,
+  SignalLow,
+  ArrowDown,
+  ChevronDown,
+} from 'lucide-react';
+import { Badge } from '@workspace/ui/components/badge';
+import { EventPriorityType } from '@/api/event/types';
+import { useMutationEventPriority } from '@/api/event/use-mutation-event-priority';
+import { toast } from '@workspace/ui/components/sonner';
+
+type Checked = DropdownMenuCheckboxItemProps['checked'];
+
+interface Props {
+  priority: EventPriorityType | null;
+  projectId: number | undefined;
+  eventId: number;
+}
+
+const PriorityIcon = ({ priority }: { priority: EventPriorityType | null }) => {
+  switch (priority) {
+    case 'HIGH':
+      return <SignalHigh className="h-4 w-4" />;
+    case 'MED':
+      return <SignalMedium className="h-4 w-4" />;
+    case 'LOW':
+      return <SignalLow className="h-4 w-4" />;
+    default:
+      return null;
+  }
+};
+
+export function PriorityDropdown({ priority, projectId, eventId }: Props) {
+  const [priorityHigh, setPriorityHigh] = useState<Checked>(
+    priority === 'HIGH'
+  );
+  const [priorityMed, setPriorityMed] = useState<Checked>(priority === 'MED');
+  const [priorityLow, setPriorityLow] = useState<Checked>(priority === 'LOW');
+
+  const { mutateAsync: mutatePriority, isPending: isMutatingPriority } =
+    useMutationEventPriority({ projectId: projectId! });
+
+  const handlePriorityChange = async (priority: EventPriorityType) => {
+    await mutatePriority(
+      { priority, eventIds: [eventId] },
+      {
+        onSuccess: () => {
+          setPriorityHigh(priority === 'HIGH');
+          setPriorityMed(priority === 'MED');
+          setPriorityLow(priority === 'LOW');
+          toast.success('Priority updated successfully!');
+        },
+        onError: (error) => {
+          console.error('Error updating priority:', error);
+          toast.error('Failed to update priority.');
+        },
+      }
+    );
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Badge
+          variant="secondary"
+          className="flex items-center gap-1 cursor-pointer"
+        >
+          <PriorityIcon priority={priority} />
+          {priority === 'HIGH' && 'High'}
+          {priority === 'MED' && 'Med'}
+          {priority === 'LOW' && 'Low'}
+          <ChevronDown />
+        </Badge>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Set Priority</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={priorityHigh}
+          onCheckedChange={() => handlePriorityChange('HIGH')}
+          className="flex items-center gap-2"
+        >
+          <Badge variant={'secondary'}>
+            <SignalHigh className="h-4 w-4" />
+            High
+          </Badge>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={priorityMed}
+          onCheckedChange={() => handlePriorityChange('MED')}
+          className="flex items-center gap-2"
+        >
+          <Badge variant={'secondary'}>
+            <SignalMedium className="h-4 w-4" />
+            Med
+          </Badge>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={priorityLow}
+          onCheckedChange={() => handlePriorityChange('LOW')}
+          className="flex items-center gap-2"
+        >
+          <Badge variant={'secondary'}>
+            <SignalLow className="h-4 w-4" />
+            Low
+          </Badge>
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/apps/web/components/widget/app-sidebar.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Activity,
+  AlertCircle,
+  BarChart3,
+  Bell,
+  Bug,
+  Clock,
+  Code,
+  Command,
+  Cpu,
+  Gauge,
+  LineChart,
+  List,
+  Settings2,
+  Shield,
+  Users2,
+  Zap,
+} from 'lucide-react';
+
+import { TeamSwitcher } from '@workspace/ui/components/team-switcher';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from '@workspace/ui/components/sidebar';
+import { NavProjects } from './nav-projects';
+import { NavMain } from './nav-main';
+import { useQueryProfile } from '@/api/auth/use-query-profile';
+import { NavUser } from './nav-user';
+
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  teams: [
+    {
+      name: 'Frontend Team',
+      logo: Code,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Backend Team',
+      logo: Command,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'DevOps Team',
+      logo: Cpu,
+      plan: 'Free',
+    },
+  ],
+  projects: [
+    {
+      name: 'Projects',
+      url: '/project',
+      icon: Activity,
+    },
+    {
+      name: 'Issues',
+      url: '#',
+      icon: Shield,
+    },
+  ],
+  navMain: [
+    {
+      title: '대시보드',
+      url: '#',
+      icon: Gauge,
+      isActive: true,
+      items: [
+        {
+          title: '실시간 모니터링',
+          url: '#',
+        },
+        {
+          title: '서비스 상태',
+          url: '#',
+        },
+        {
+          title: '성능 지표',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: '이슈 트래킹',
+      url: '#',
+      icon: Bug,
+      items: [
+        {
+          title: '모든 이슈',
+          url: '#',
+        },
+        {
+          title: '해결되지 않은 이슈',
+          url: '#',
+        },
+        {
+          title: '중요 이슈',
+          url: '#',
+        },
+        {
+          title: '나에게 할당된 이슈',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: '성능',
+      url: '#',
+      icon: Zap,
+      items: [
+        {
+          title: '트랜잭션',
+          url: '#',
+        },
+        {
+          title: '웹 성능',
+          url: '#',
+        },
+        {
+          title: 'API 성능',
+          url: '#',
+        },
+        {
+          title: '백엔드 성능',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: '분석',
+      url: '#',
+      icon: LineChart,
+      items: [
+        {
+          title: '트래픽 분석',
+          url: '#',
+        },
+        {
+          title: '에러 발생률',
+          url: '#',
+        },
+        {
+          title: '사용자 세션',
+          url: '#',
+        },
+        {
+          title: '커스텀 리포트',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: '알림',
+      url: '#',
+      icon: Bell,
+      items: [
+        {
+          title: '알림 설정',
+          url: '#',
+        },
+        {
+          title: '알림 이력',
+          url: '#',
+        },
+        {
+          title: '알림 룰',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: '설정',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: '프로젝트 설정',
+          url: '#',
+        },
+        {
+          title: '팀 관리',
+          url: '#',
+        },
+        {
+          title: 'SDK 설정',
+          url: '#',
+        },
+        {
+          title: '통합 설정',
+          url: '#',
+        },
+      ],
+    },
+  ],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { data: profile, isPending: isPendingProfile } = useQueryProfile();
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavProjects projects={data.projects} />
+
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser profile={profile} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/apps/web/components/widget/nav-main.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { ChevronRight, type LucideIcon } from 'lucide-react';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@workspace/ui/components/collapsible';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@workspace/ui/components/sidebar';
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}