✨ Add a landing page

knip.json

@@ -1,4 +1,4 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
-  "ignoreDependencies": ["tw-animate-css"]
+  "ignoreDependencies": ["tw-animate-css", "shadcn"]
 }

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.11.0",
@@ -37,6 +38,7 @@
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "knip": "^5.59.1",
+    "shadcn": "^3.6.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"

src/components/EventCardView.tsx

@@ -0,0 +1,101 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from '@/components/ui/item';
+import type { Events } from '@/types/schema';
+import { getShortenedDate } from '@/utils/date';
+import { ChevronRightIcon, Plus } from 'lucide-react';
+import { Link } from 'react-router';
+import { Button } from './ui/button';
+
+type Event = Events & { guests: number; registration_start: string | null };
+
+function getDateLabel(
+  startDateString: string | null,
+  endDateString: string | null
+) {
+  if (!endDateString) {
+    return '상시 모집 중';
+  }
+
+  const now = new Date();
+  const endDate = new Date(endDateString!);
+
+  if (startDateString && now < new Date(startDateString)) {
+    return `${getShortenedDate(startDateString)}부터 모집`;
+  }
+
+  if (now <= endDate) {
+    return `${getShortenedDate(endDateString)}까지 모집`;
+  }
+
+  return '모집 마감';
+}
+
+export default function EventCardView({ events }: { events: Event[] }) {
+  if (events.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex w-full max-w-md flex-col gap-8 items-center">
+          <div className="flex flex-col gap-4 text-center">
+            <h1 className="text-2xl font-bold">개설한 일정이 없네요!</h1>
+            <h2 className="text-base font-base">
+              사람들과 새로운 일정을 잡아 볼까요?
+            </h2>
+          </div>
+          <Link to="/new-event">
+            <Button className="text-lg font-bold px-20 py-5">
+              새로운 일정 만들기
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ItemGroup className="gap-4">
+      <Item variant="default" asChild role="listitem">
+        <Link to="/new-event">
+          <ItemMedia variant="icon">
+            <Plus />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>
+              <h2 className="text-lg font-semibold line-clamp-1">
+                새로운 일정 만들기
+              </h2>
+            </ItemTitle>
+          </ItemContent>
+        </Link>
+      </Item>
+      {events.map((event) => (
+        <Item key={event.id} variant="outline" asChild role="listitem">
+          <Link to={`/event/${event.id}`}>
+            <ItemContent>
+              <ItemTitle>
+                <h2 className="text-lg font-semibold line-clamp-1">
+                  {event.title}
+                </h2>
+              </ItemTitle>
+              <ItemDescription>
+                {getDateLabel(
+                  event.registration_start,
+                  event.registration_deadline
+                )}
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <ChevronRightIcon className="size-4" />
+            </ItemActions>
+          </Link>
+        </Item>
+      ))}
+    </ItemGroup>
+  );
+}

src/components/ui/item.tsx

@@ -0,0 +1,192 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+// function ItemSeparator({
+//   className,
+//   ...props
+// }: React.ComponentProps<typeof Separator>) {
+//   return (
+//     <Separator
+//       data-slot="item-separator"
+//       orientation="horizontal"
+//       className={cn('my-0', className)}
+//       {...props}
+//     />
+//   );
+// }
+
+const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4 ',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div';
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+// function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+//   return (
+//     <div
+//       data-slot="item-header"
+//       className={cn(
+//         'flex basis-full items-center justify-between gap-2',
+//         className
+//       )}
+//       {...props}
+//     />
+//   );
+// }
+
+// function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+//   return (
+//     <div
+//       data-slot="item-footer"
+//       className={cn(
+//         'flex basis-full items-center justify-between gap-2',
+//         className
+//       )}
+//       {...props}
+//     />
+//   );
+// }
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  // ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  // ItemHeader,
+  // ItemFooter,
+};

src/routes/Guests.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
 
 // shadcn UI 컴포넌트