sooyoung archive 제작기

sooyoung-archive/
├── src/
│   ├── app/              # Next.js App Router
│   │   ├── page.tsx      # 홈 (글 목록)
│   │   ├── post/[slug]/  # 글 상세
│   │   ├── write/        # 글 작성/수정
│   │   └── login/        # 로그인 페이지
│   ├── components/       # 재사용 컴포넌트
│   ├── lib/              # 유틸리티 함수
│   └── types/            # TypeScript 타입
└── data/
    └── posts.json        # 초기 데이터 (로컬)

// src/lib/markdown.ts
const IMAGE_URL_LINE =
  /^\s*(https?:\/\/\S+|\/\S+)\.(?:png|jpe?g|gif|webp|svg)(?:\?\S*)?\s*$/i;

export function normalizeMarkdownImages(markdown: string) {
  if (!markdown.trim()) return markdown;

  return markdown
    .split("\n")
    .map((line) => {
      const trimmed = line.trim();
      if (!trimmed) return line;
      if (!IMAGE_URL_LINE.test(trimmed)) return line;
      return `![](${trimmed})`;
    })
    .join("\n");
}

function slugify(text: string): string {
  return text
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "-")
    .replace(/[^0-9a-z가-힣-]+/g, "");
}

function normalizeSlug(value: string): string {
  try {
    return decodeURIComponent(value).normalize("NFC").toLowerCase();
  } catch {
    return value.normalize("NFC").toLowerCase();
  }
}

// src/app/post/[slug]/post-actions.tsx
export function PostActions({ slug }: PostActionsProps) {
  const router = useRouter();
  const [deleting, setDeleting] = useState(false);

  async function handleDelete() {
    if (!confirm("정말 삭제할까요? 이 작업은 되돌릴 수 없습니다.")) return;
    // 삭제 로직...
  }

  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="outline" asChild>
        <Link href={`/write/${slug}`}>수정</Link>
      </Button>
      <Button variant="destructive" onClick={handleDelete}>
        삭제
      </Button>
    </div>
  );
}

// 모든 페이지에서 동일한 컨테이너 클래스 사용
<main className="mx-auto w-full max-w-7xl px-4 py-8">

/* src/app/globals.css */
:root {
  --primary: #009ec2; /* Deep Ocean Blue */
  --accent: #c9f2ff; /* Light Cyan */
  --background: #f8fafc; /* Slate White */
  --foreground: #0c0c0c; /* Rich Black */
}

.dark {
  --background: #0c0c0c;
  --foreground: #f8fafc;
  /* ... */
}

<Link href="/" className="flex items-center gap-2">
  <span className="inline-flex h-6 w-6 items-center justify-center text-primary">
    {/* 물결 SVG 아이콘 */}
  </span>
  <span className="text-base font-semibold">
    sooyoung<span className="text-primary">archive</span>
  </span>
</Link>

// src/auth.ts
export const authOptions: NextAuthOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.AUTH_GITHUB_ID ?? "",
      clientSecret: process.env.AUTH_GITHUB_SECRET ?? "",
    }),
  ],
  session: { strategy: "jwt" },
  callbacks: {
    async jwt({ token, profile }) {
      if (profile && "login" in profile) {
        token.login = String(profile.login);
      }
      return token;
    },
    async session({ session, token }) {
      // 관리자 여부를 세션에 추가
      (session as { isAdmin?: boolean }).isAdmin = isAdminSession(session);
      return session;
    },
  },
};

// src/lib/auth.ts
const ADMIN_EMAIL = process.env.ADMIN_EMAIL?.toLowerCase();
const ADMIN_GITHUB = process.env.ADMIN_GITHUB?.toLowerCase();

export function isAdminSession(session: Session | null) {
  if (!session?.user) return false;

  const email = session.user.email?.toLowerCase();
  const login = session.user.login?.toLowerCase();

  if (ADMIN_EMAIL && email && email === ADMIN_EMAIL) return true;
  if (ADMIN_GITHUB && login && login === ADMIN_GITHUB) return true;

  return false;
}

// src/lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

-- supabase-schema.sql
CREATE TABLE IF NOT EXISTS posts (
  id TEXT PRIMARY KEY,
  title TEXT NOT NULL,
  slug TEXT NOT NULL UNIQUE,
  excerpt TEXT,
  thumbnail TEXT,
  body TEXT NOT NULL,
  "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  "updatedAt" TIMESTAMPTZ
);

CREATE INDEX IF NOT EXISTS idx_posts_slug ON posts(slug);
CREATE INDEX IF NOT EXISTS idx_posts_created_at ON posts("createdAt" DESC);

// src/app/api/upload/route.ts
const { data, error } = await supabase.storage
  .from("uploads")
  .upload(filename, buffer, {
    contentType: file.type,
    upsert: false,
  });

const {
  data: { publicUrl },
} = supabase.storage.from("uploads").getPublicUrl(filename);

# GitHub OAuth
AUTH_GITHUB_ID=your_github_client_id
AUTH_GITHUB_SECRET=your_github_client_secret

# 관리자 계정
ADMIN_EMAIL=your_email@example.com
ADMIN_GITHUB=your_github_username

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key