@naeil/ui 0.1.0 → 0.3.0

package/src/app/[locale]/login/page.tsx

@@ -1,85 +0,0 @@
-import { getTranslations } from "next-intl/server";
-import { redirect } from "@/i18n/routing";
-import { createClient } from "@/lib/supabase/server";
-import { OAuthButtons } from "./oauth-buttons";
-
-export default async function LoginPage({
-  params,
-  searchParams,
-}: {
-  params: Promise<{ locale: string }>;
-  searchParams: Promise<{ next?: string }>;
-}) {
-  const { locale } = await params;
-  const { next } = await searchParams;
-
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  if (user) {
-    redirect({ href: next || "/", locale });
-  }
-
-  const t = await getTranslations("auth");
-
-  return (
-    <div className="flex min-h-svh items-center justify-center px-4">
-      <div className="w-full max-w-sm space-y-8">
-        {/* Branding */}
-        <div className="text-center">
-          <div className="mb-4 flex justify-center">
-            <Logo size={40} />
-          </div>
-          <h1 className="text-foreground text-2xl font-semibold tracking-tight">
-            {t("login")}
-          </h1>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {t("loginDescription")}
-          </p>
-        </div>
-
-        {/* OAuth buttons */}
-        <OAuthButtons next={next} />
-      </div>
-    </div>
-  );
-}
-
-function Logo({ size = 40 }: { size?: number }) {
-  const id = "login-logo";
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-label="naeil"
-    >
-      <path
-        d="M6 4 L6 16 L20 16"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="square"
-        strokeLinejoin="miter"
-      />
-      <circle
-        cx="15"
-        cy="16"
-        r="3.5"
-        fill={`url(#${id}-grad)`}
-        mask={`url(#${id})`}
-      />
-      <defs>
-        <linearGradient id={`${id}-grad`} x1="15" y1="12.5" x2="15" y2="16">
-          <stop stopColor="#eab308" />
-          <stop offset="1" stopColor="#dc2626" />
-        </linearGradient>
-        <mask id={id}>
-          <rect x="0" y="0" width="24" height="16" fill="white" />
-        </mask>
-      </defs>
-    </svg>
-  );
-}

package/src/app/auth/callback/route.ts

@@ -1,78 +0,0 @@
-import { NextResponse } from "next/server";
-import { createServerClient } from "@supabase/ssr";
-import { cookies, headers } from "next/headers";
-
-function getCookieDomain(headerStore: Headers): string | undefined {
-  const host = headerStore.get("host") || "";
-  return host.endsWith(".naeil.dev") || host === "naeil.dev"
-    ? ".naeil.dev"
-    : undefined;
-}
-
-function isAllowedRedirect(url: string): boolean {
-  if (url.startsWith("/")) return true;
-  try {
-    const parsed = new URL(url);
-    return (
-      parsed.hostname === "naeil.dev" ||
-      parsed.hostname.endsWith(".naeil.dev")
-    );
-  } catch {
-    return false;
-  }
-}
-
-export async function GET(request: Request) {
-  const { searchParams, origin } = new URL(request.url);
-  const code = searchParams.get("code");
-
-  if (code) {
-    const cookieStore = await cookies();
-    const headerStore = await headers();
-    const domain = getCookieDomain(headerStore);
-
-    const supabase = createServerClient(
-      process.env.NEXT_PUBLIC_SUPABASE_URL!,
-      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-      {
-        cookies: {
-          getAll() {
-            return cookieStore.getAll();
-          },
-          setAll(cookiesToSet) {
-            try {
-              cookiesToSet.forEach(({ name, value, options }) =>
-                cookieStore.set(name, value, { ...options, domain }),
-              );
-            } catch {
-              // Ignore — cookies can only be set in Server Actions or Route Handlers
-            }
-          },
-        },
-      },
-    );
-
-    const { error } = await supabase.auth.exchangeCodeForSession(code);
-    
-    const redirectCookie = cookieStore.get("auth_redirect_to");
-    
-    if (!error) {
-      // decodeURIComponent required: Next.js cookies.set() URL-encodes values,
-      // but cookies.get() returns them raw (still encoded)
-      const next = decodeURIComponent(redirectCookie?.value || "/");
-
-      // Clear the redirect cookie
-      cookieStore.set("auth_redirect_to", "", { path: "/", maxAge: 0, domain });
-
-      // Redirect to original page
-      if (isAllowedRedirect(next)) {
-        const redirectUrl = next.startsWith("http") ? next : `${origin}${next}`;
-        return NextResponse.redirect(redirectUrl);
-      }
-      return NextResponse.redirect(origin);
-    }
-  }
-
-  // Auth error — redirect to login
-  return NextResponse.redirect(`${origin}/login`);
-}

package/src/app/globals.css

@@ -1,32 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "../../dist/theme.css";
-
-@custom-variant dark (&:is(.dark *));
-
-/* Register float animation as Tailwind utility */
-@theme inline {
-  --animate-float: float 4s ease-in-out infinite;
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground font-sans;
-  }
-}
-
-/* Float keyframes */
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-12px); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-float {
-    animation: none;
-  }
-}

package/src/app/layout.tsx

@@ -1,22 +0,0 @@
-import { JetBrains_Mono } from "next/font/google";
-import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
-import "./globals.css";
-
-const jetbrainsMono = JetBrains_Mono({
-  variable: "--font-jetbrains-mono",
-  subsets: ["latin"],
-});
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html suppressHydrationWarning>
-      <body className={`${jetbrainsMono.variable} antialiased`}>
-        {children}
-      </body>
-    </html>
-  );
-}

package/src/app/sitemap.ts

@@ -1,26 +0,0 @@
-import type { MetadataRoute } from "next";
-import { locales } from "@/i18n/config";
-
-const APP_URL = process.env.NEXT_PUBLIC_APP_URL || "https://naeil.dev";
-const staticPages = ["", "/projects", "/design", "/cc", "/pkm"];
-
-export default function sitemap(): MetadataRoute.Sitemap {
-  const entries: MetadataRoute.Sitemap = [];
-
-  for (const locale of locales) {
-    for (const page of staticPages) {
-      const languages: Record<string, string> = {};
-      for (const alt of locales) {
-        languages[alt] = `${APP_URL}/${alt}${page}`;
-      }
-      languages["x-default"] = `${APP_URL}/en${page}`;
-
-      entries.push({
-        url: `${APP_URL}/${locale}${page}`,
-        lastModified: new Date(),
-        alternates: { languages },
-      });
-    }
-  }
-  return entries;
-}

package/src/components/accent-picker.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-
-const ACCENT_PRESETS = [
-  { name: "블루 (기본)", hue: 259, chroma: 0.214 },
-  { name: "퍼플", hue: 303, chroma: 0.22 },
-  { name: "그린", hue: 162, chroma: 0.17 },
-  { name: "오렌지", hue: 55, chroma: 0.22 },
-  { name: "레드", hue: 25, chroma: 0.24 },
-] as const;
-
-function generateAccentScale(hue: number, chroma: number) {
-  // Generate a 50-950 OKLCH scale for the given hue/chroma
-  const steps = [
-    { name: "50", l: 0.97, c: chroma * 0.065 },
-    { name: "100", l: 0.932, c: chroma * 0.15 },
-    { name: "200", l: 0.882, c: chroma * 0.275 },
-    { name: "300", l: 0.809, c: chroma * 0.49 },
-    { name: "400", l: 0.707, c: chroma * 0.77 },
-    { name: "500", l: 0.623, c: chroma },
-    { name: "600", l: 0.546, c: chroma * 1.14 },
-    { name: "700", l: 0.488, c: chroma * 1.13 },
-    { name: "800", l: 0.424, c: chroma * 0.93 },
-    { name: "900", l: 0.379, c: chroma * 0.68 },
-    { name: "950", l: 0.282, c: chroma * 0.42 },
-  ];
-  return steps.map((s) => ({
-    name: s.name,
-    value: `oklch(${s.l} ${Number(s.c.toFixed(3))} ${hue})`,
-  }));
-}
-
-export function AccentPicker() {
-  const [active, setActive] = useState(0);
-
-  function applyAccent(index: number) {
-    setActive(index);
-    const preset = ACCENT_PRESETS[index];
-    const scale = generateAccentScale(preset.hue, preset.chroma);
-    const root = document.documentElement;
-    for (const step of scale) {
-      root.style.setProperty(`--accent-${step.name}`, step.value);
-    }
-  }
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {ACCENT_PRESETS.map((preset, i) => (
-        <Button
-          key={preset.name}
-          variant={active === i ? "default" : "outline"}
-          size="sm"
-          onClick={() => applyAccent(i)}
-        >
-          {preset.name}
-        </Button>
-      ))}
-    </div>
-  );
-}

package/src/components/auth-slot.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import { useLocale, useTranslations } from "next-intl";
-import { Link, usePathname } from "@/i18n/routing";
-import Image from "next/image";
-import { Avatar, AvatarImage, AvatarFallback } from "./ui/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuItem,
-} from "./ui/dropdown-menu";
-import { logout } from "@/app/[locale]/login/actions";
-
-const ANIMALS = [
-  "/images/coral.png",
-  "/images/fish.png",
-  "/images/jellyfish.png",
-  "/images/turtle.png",
-  "/images/whale.png",
-  "/images/diver.png",
-];
-
-function hashUserId(id: string): number {
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    hash = ((hash << 5) - hash + id.charCodeAt(i)) | 0;
-  }
-  return Math.abs(hash) % ANIMALS.length;
-}
-
-interface AuthUser {
-  id: string;
-  name?: string;
-  email?: string;
-}
-
-export function AuthSlot({ user }: { user: AuthUser | null }) {
-  const t = useTranslations("auth");
-  const locale = useLocale();
-  const pathname = usePathname();
-
-  if (!user) {
-    return (
-      <Link
-        href={`/login?next=${encodeURIComponent(pathname)}`}
-        className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
-      >
-        {t("login")}
-      </Link>
-    );
-  }
-
-  const animalSrc = ANIMALS[hashUserId(user.id)];
-  const displayName = user.name || user.email?.split("@")[0] || "User";
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="cursor-pointer focus:outline-none">
-          <Avatar>
-            <AvatarImage src={animalSrc} alt={displayName} />
-            <AvatarFallback>
-              {displayName.charAt(0).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuLabel className="flex items-center gap-3 font-normal">
-          <Image
-            src={animalSrc}
-            alt=""
-            width={32}
-            height={32}
-            className="shrink-0 rounded-full"
-          />
-          <div className="flex min-w-0 flex-col">
-            <span className="truncate text-sm font-medium">{displayName}</span>
-            {user.email && (
-              <span className="text-muted-foreground truncate text-xs">
-                {user.email}
-              </span>
-            )}
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => logout(locale)}>
-          {t("logout")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/footer-wrapper.tsx

@@ -1,8 +0,0 @@
-"use client";
-
-import { Footer } from "./footer";
-import { Link } from "@/i18n/routing";
-
-export function FooterWrapper() {
-  return <Footer Link={Link} linksExternal={false} />;
-}

package/src/components/footer.tsx

@@ -1,193 +0,0 @@
-"use client";
-
-import { useTranslations } from "next-intl";
-
-interface FooterProps {
-  /** Link component from consumer */
-  Link?: React.ComponentType<{
-    href: string;
-    children: React.ReactNode;
-    className?: string;
-  }>;
-  /** Whether links go to naeil.dev (external) or are internal. Default: false */
-  linksExternal?: boolean;
-}
-
-export function Footer({ Link, linksExternal = false }: FooterProps) {
-  const t = useTranslations("footer");
-
-  // Render a navigation link — external <a> or internal Link
-  const NavLink = ({
-    href,
-    children,
-    className,
-  }: {
-    href: string;
-    children: React.ReactNode;
-    className?: string;
-  }) => {
-    if (linksExternal) {
-      return (
-        <a
-          href={`https://naeil.dev${href}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={className}
-        >
-          {children}
-        </a>
-      );
-    }
-    if (Link) {
-      return (
-        <Link href={href} className={className}>
-          {children}
-        </Link>
-      );
-    }
-    return (
-      <a href={href} className={className}>
-        {children}
-      </a>
-    );
-  };
-
-  return (
-    <footer className="border-border/40 border-t">
-      <div className="mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between">
-        {/* Left: Brand */}
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-3">
-            <Logo size={20} />
-            <span className="text-foreground text-sm font-semibold tracking-tight">
-              .naeil
-            </span>
-          </div>
-          <p className="text-muted-foreground max-w-[240px] text-sm leading-relaxed">
-            {t("tagline")}
-          </p>
-          <div className="flex items-center gap-3">
-            <a
-              href="https://github.com/naeil-dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="GitHub"
-            >
-              <GitHubIcon />
-            </a>
-            <a
-              href="https://x.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="X"
-            >
-              <XIcon />
-            </a>
-          </div>
-        </div>
-
-        {/* Right: Links */}
-        <div className="flex gap-10 sm:gap-16">
-          <div className="flex flex-col gap-3">
-            <span className="text-foreground text-xs font-medium uppercase tracking-wider">
-              {t("navigation")}
-            </span>
-            <NavLink
-              href="/projects"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {t("projects")}
-            </NavLink>
-            <NavLink
-              href="/blog"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {t("blog")}
-            </NavLink>
-          </div>
-          <div className="flex flex-col gap-3">
-            <span className="text-foreground text-xs font-medium uppercase tracking-wider">
-              {t("social")}
-            </span>
-            <a
-              href="https://github.com/naeil-dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              GitHub ↗
-            </a>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-/* ── Inline Logo (pure SVG) ── */
-function Logo({ size = 20 }: { size?: number }) {
-  const id = `naeil-footer-logo-${size}`;
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-label="naeil"
-    >
-      <path
-        d="M6 4 L6 16 L20 16"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="square"
-        strokeLinejoin="miter"
-      />
-      <circle
-        cx="15"
-        cy="16"
-        r="3.5"
-        fill={`url(#${id}-grad)`}
-        mask={`url(#${id})`}
-      />
-      <defs>
-        <linearGradient id={`${id}-grad`} x1="15" y1="12.5" x2="15" y2="16">
-          <stop stopColor="#eab308" />
-          <stop offset="1" stopColor="#dc2626" />
-        </linearGradient>
-        <mask id={id}>
-          <rect x="0" y="0" width="24" height="16" fill="white" />
-        </mask>
-      </defs>
-    </svg>
-  );
-}
-
-function GitHubIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-    </svg>
-  );
-}
-
-function XIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-    </svg>
-  );
-}