rusty-replay 0.0.4

package/apps/web/components/login-form.tsx

@@ -0,0 +1,124 @@
+import { cn } from '@workspace/ui/lib/utils';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@workspace/ui/components/card';
+import { Input } from '@workspace/ui/components/input';
+import { Label } from '@workspace/ui/components/label';
+import { useSignIn } from '@/api/auth/use-sign-in';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/constants/routes';
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  const router = useRouter();
+
+  const [loginForm, setLoginForm] = useState({
+    email: '',
+    password: '',
+  });
+
+  const { mutateAsync: signIn, isPending: isLoading } = useSignIn();
+  const handleSignIn = async () => {
+    await signIn(
+      {
+        email: loginForm.email,
+        password: loginForm.password,
+      },
+      {
+        onSuccess: (data) => {
+          console.log('Login successful', data);
+          router.push(routes.home());
+        },
+        onError: (error) => {
+          console.error('Login failed', error);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSignIn();
+            }}
+          >
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                  onChange={(e) => {
+                    setLoginForm({
+                      ...loginForm,
+                      email: e.target.value,
+                    });
+                  }}
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a
+                    href="#"
+                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  required
+                  onChange={(e) => {
+                    setLoginForm({
+                      ...loginForm,
+                      password: e.target.value,
+                    });
+                  }}
+                />
+              </div>
+              <Button
+                type="submit"
+                className="w-full"
+                // onClick={handleSignIn}
+                disabled={isLoading}
+              >
+                Login
+              </Button>
+              <Button variant="outline" className="w-full">
+                Login with Google
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm">
+              Don&apos;t have an account?{' '}
+              <a href="#" className="underline underline-offset-4">
+                Sign up
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/apps/web/components/project/create-project.tsx

@@ -0,0 +1,130 @@
+import { useBooleanState } from '@/hooks/use-boolean-state';
+import { Button } from '@workspace/ui/components/button';
+import { Input } from '@workspace/ui/components/input';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { Label } from '@workspace/ui/components/label';
+import { toast } from '@workspace/ui/components/sonner';
+import { Plus } from 'lucide-react';
+import React, { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CreateProjectSchema,
+  CreateProjectSchemaType,
+} from '@/utils/schema/project.schema';
+import { useCreateProject } from '@/api/project/use-create-project';
+import { ConfirmationModal } from '@workspace/ui/components/dialogs/confirmation-modal';
+
+export function CreateProject() {
+  const createState = useBooleanState();
+  const { mutateAsync: createProject, isPending: isCreating } =
+    useCreateProject();
+
+  const form = useForm<CreateProjectSchemaType>({
+    resolver: zodResolver(CreateProjectSchema),
+    defaultValues: {
+      name: undefined,
+      description: undefined,
+    },
+  });
+
+  useEffect(() => {
+    if (createState.isOpen) {
+      form.clearErrors();
+    }
+  }, [createState.isOpen]);
+
+  console.log('form.formState', form.formState.errors);
+
+  const handleCreateProject = async (data: CreateProjectSchemaType) => {
+    await createProject(data, {
+      onSuccess: () => {
+        toast.success('프로젝트가 생성되었습니다!');
+        createState.close();
+        form.reset();
+      },
+      onError: (error) => {
+        toast.error('프로젝트 생성에 실패했습니다.');
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          createState.open();
+        }}
+        size={'sm'}
+        className="flex items-center gap-2"
+        type="button"
+      >
+        <Plus size={16} />새 프로젝트
+      </Button>
+
+      <ConfirmationModal
+        visible={createState.isOpen}
+        title="새 프로젝트 생성"
+        confirmLabel="저장하기"
+        cancelLabel="취소"
+        onConfirm={form.handleSubmit(handleCreateProject)}
+        onCancel={createState.close}
+        loading={isCreating}
+        size="md"
+        className="sm:max-w-[425px]"
+      >
+        <div>
+          <p className="text-sm text-gray-500 mb-4">
+            새 프로젝트 정보를 입력하세요. 완료되면 저장 버튼을 클릭하세요.
+          </p>
+          <div className="grid gap-4 py-2">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                프로젝트명
+              </Label>
+              <div className="col-span-3">
+                <Controller
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => {
+                    return (
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="프로젝트 이름을 입력하세요"
+                        autoFocus
+                        aria-invalid={!!form.formState.errors.name}
+                        error={form.formState.errors.name?.message}
+                      />
+                    );
+                  }}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="description" className="text-right">
+                설명
+              </Label>
+              <div className="col-span-3">
+                <Controller
+                  name="description"
+                  control={form.control}
+                  render={({ field }) => {
+                    return (
+                      <Textarea
+                        id={field.name}
+                        {...field}
+                        value={field.value ?? undefined}
+                        placeholder="프로젝트 설명을 입력하세요"
+                      />
+                    );
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </ConfirmationModal>
+    </>
+  );
+}

package/apps/web/components/project/hooks/use-get-event-params.ts

@@ -0,0 +1,9 @@
+import { useParams } from 'next/navigation';
+
+export function useGetEventParams() {
+  const { issue_id: eventId } = useParams<{
+    issue_id: string;
+  }>();
+
+  return { eventId: eventId ? parseInt(eventId) : undefined };
+}

package/apps/web/components/project/hooks/use-get-project-params.ts

@@ -0,0 +1,10 @@
+import { useParams } from 'next/navigation';
+import React from 'react';
+
+export function useGetProjectParams() {
+  const { project_id: projectId } = useParams<{
+    project_id: string;
+  }>();
+
+  return { projectId: projectId ? parseInt(projectId) : undefined };
+}

package/apps/web/components/project/project-detail.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useGetProjectParams } from './hooks/use-get-project-params';
+import { useQueryProjectList } from '@/api/project/use-query-project-list';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@workspace/ui/components/card';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@workspace/ui/components/tabs';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Skeleton } from '@workspace/ui/components/skeleton';
+import { Separator } from '@workspace/ui/components/separator';
+import {
+  ArrowLeft,
+  Calendar,
+  Edit,
+  Trash2,
+  RefreshCw,
+  KeyRound,
+  Shield,
+} from 'lucide-react';
+import { Project } from '@/api/project/types';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ko';
+import ProjectList from './project-list';
+import { useRouter } from 'next/navigation';
+import { formatDateFromNow } from '@/utils/date';
+import { routes } from '@/constants/routes';
+
+dayjs.locale('ko');
+
+export default function ProjectDetail() {
+  const router = useRouter();
+  const { projectId } = useGetProjectParams();
+  const { data: projectList, isLoading } = useQueryProjectList();
+  const [currentProject, setCurrentProject] = React.useState<Project | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (projectList && projectId) {
+      const project = projectList.find((p) => p.id === Number(projectId));
+      setCurrentProject(project || null);
+    }
+  }, [projectList, projectId]);
+
+  if (!projectId) {
+    return <ProjectList />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            router.push(routes.project.list());
+          }}
+        >
+          <ArrowLeft size={16} className="mr-2" />
+          프로젝트 목록
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            router.push(routes.event.list(projectId));
+          }}
+        >
+          <Shield size={16} className="mr-2" />
+          모든 이슈
+        </Button>
+
+        {!isLoading && !currentProject && (
+          <Badge variant="destructive">존재하지 않는 프로젝트입니다</Badge>
+        )}
+      </div>
+
+      {isLoading ? (
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-8 w-1/3" />
+            <Skeleton className="h-4 w-1/4" />
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+            </div>
+          </CardContent>
+        </Card>
+      ) : currentProject ? (
+        <Tabs defaultValue="overview" className="w-full">
+          <TabsList className="mb-4">
+            <TabsTrigger value="overview">개요</TabsTrigger>
+            <TabsTrigger value="settings">설정</TabsTrigger>
+            <TabsTrigger value="api">API</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview">
+            <Card>
+              <CardHeader className="flex flex-row items-start justify-between">
+                <div>
+                  <CardTitle className="text-2xl font-bold">
+                    {currentProject.name}
+                  </CardTitle>
+                  <CardDescription>
+                    프로젝트 ID: {currentProject.id}
+                  </CardDescription>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex items-center gap-1"
+                  >
+                    <Edit size={14} />
+                    편집
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="flex items-center gap-1"
+                  >
+                    <Trash2 size={14} />
+                    삭제
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">설명</h3>
+                  <p className="text-muted-foreground">
+                    {currentProject.description || '설명이 없습니다.'}
+                  </p>
+                </div>
+
+                <Separator />
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <h3 className="text-sm font-medium mb-1 text-muted-foreground">
+                      API 키
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <KeyRound size={16} />
+                      <Badge variant="outline" className="font-mono">
+                        {currentProject.apiKey}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-medium mb-1 text-muted-foreground">
+                      생성일
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <Calendar size={16} />
+                      {formatDateFromNow(currentProject.createdAt)}
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-medium mb-1 text-muted-foreground">
+                      마지막 수정일
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <Calendar size={16} />
+                      {formatDateFromNow(currentProject.updatedAt)}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-end">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex items-center gap-2"
+                  onClick={() => {
+                    router.refresh();
+                  }}
+                >
+                  <RefreshCw size={14} />
+                  새로고침
+                </Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="settings">
+            <Card>
+              <CardHeader>
+                <CardTitle>프로젝트 설정</CardTitle>
+                <CardDescription>프로젝트 설정을 관리합니다</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p>프로젝트 설정 컨텐츠가 여기에 표시됩니다.</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="api">
+            <Card>
+              <CardHeader>
+                <CardTitle>API 설정</CardTitle>
+                <CardDescription>
+                  API 키 및 관련 설정을 관리합니다
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p>API 설정 컨텐츠가 여기에 표시됩니다.</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      ) : (
+        <Card>
+          <CardContent className="p-6 text-center">
+            <p className="text-lg font-medium">프로젝트를 찾을 수 없습니다</p>
+            <p className="text-muted-foreground mt-2">
+              요청하신 ID: {projectId}에 해당하는 프로젝트가 존재하지 않습니다.
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/apps/web/components/project/project-list.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import React from 'react';
+import { useQueryProjectList } from '@/api/project/use-query-project-list';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@workspace/ui/components/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@workspace/ui/components/table';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Skeleton } from '@workspace/ui/components/skeleton';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ko';
+import { RefreshCw, ArrowRight, Calendar, Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { formatDateFromNow } from '@/utils/date';
+import { CreateProject } from './create-project';
+import { routes } from '@/constants/routes';
+
+dayjs.extend(relativeTime);
+dayjs.locale('ko');
+
+export default function ProjectList() {
+  const router = useRouter();
+  const { data: projectList, isLoading, refetch } = useQueryProjectList();
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <div>
+          <CardTitle className="text-2xl font-bold">프로젝트 목록</CardTitle>
+          <CardDescription>
+            전체 {projectList?.length || 0}개의 프로젝트가 있습니다
+          </CardDescription>
+        </div>
+
+        <CreateProject />
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-16">ID</TableHead>
+                <TableHead>프로젝트명</TableHead>
+                {/* <TableHead>API 키</TableHead> */}
+                <TableHead>설명</TableHead>
+                <TableHead>생성일</TableHead>
+                <TableHead>수정일</TableHead>
+                <TableHead className="text-right">작업</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {projectList?.map((project) => (
+                <TableRow key={project.id}>
+                  <TableCell className="font-medium">{project.id}</TableCell>
+                  <TableCell className="font-medium">{project.name}</TableCell>
+                  {/* <TableCell>
+                    <Badge variant="outline" className="font-mono">
+                      {project.apiKey}
+                    </Badge>
+                  </TableCell> */}
+                  <TableCell className="max-w-xs truncate">
+                    {project.description || '설명 없음'}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <Calendar size={14} />
+                      {formatDateFromNow(project.createdAt)}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <Calendar size={14} />
+                      {formatDateFromNow(project.updatedAt)}
+                    </div>
+                  </TableCell>
+                  <TableCell className="flex justify-end">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex items-center gap-1"
+                      onClick={() => {
+                        router.push(routes.project.detail(project.id));
+                      }}
+                    >
+                      상세보기
+                      <ArrowRight size={14} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {(!projectList || projectList.length === 0) && (
+                <TableRow>
+                  <TableCell colSpan={7} className="h-24 text-center">
+                    프로젝트가 없습니다. 새 프로젝트를 생성해보세요.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+      <CardFooter className="flex justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+          onClick={() => refetch()}
+        >
+          <RefreshCw size={14} />
+          새로고침
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/apps/web/components/providers.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import QueryClientProvider from '@/providers/query-client-provider';
+import TelemetryProvider from '@/providers/telemetry-provider';
+import FlagProvider from '@/providers/flag-provider';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      enableColorScheme
+    >
+      <TelemetryProvider>
+        {/* <FlagProvider> */}
+        <QueryClientProvider>{children}</QueryClientProvider>
+        {/* </FlagProvider> */}
+      </TelemetryProvider>
+    </NextThemesProvider>
+  );
+}