[9차] Supabase DB·로그인·관리자 화면 기반 구축

작업 전 상태

Project와 Log는 전부 .mdx 파일로만 관리했고, DB·로그인·관리자 화면은 없었습니다.

글이 늘어나고 직접 작성해야 할 일이 많아지면서, 매번 코드 에디터로 MDX 파일을 만드는 대신 브라우저에서 로그인해서 글을 쓰고 발행할 수 있는 구조가 필요해졌습니다.

요청한 내용

파일 기반 관리를 당장 없애지 않고, 그 위에 Supabase(DB + 로그인)와 관리자 화면을 단계적으로 얹기로 했습니다. 기존 디자인과 공개 URL은 건드리지 않는 것을 원칙으로 삼았습니다.

변경한 내용

추가

• Supabase 프로젝트에 categories/projects/logs 테이블 생성, Row Level Security(RLS)로 "발행된 글만 방문자에게 공개" 규칙 적용
• Google OAuth 로그인, 이메일·비밀번호 로그인 화면
• 로그인한 사람 중 사이트 소유자 한 명만 관리자로 인정하는 판별 로직
• /admin에 학습 기록(Log) 목록·작성·수정·삭제·공개상태(임시저장/비공개/공개) 관리 화면
• 로그인 상태일 때만 보이는 관리자 화면 진입 링크

수정

• Next.js를 16.3.1 → 16.3.4로 업그레이드 (보안 패치)
• DB 스키마 변경 이력을 supabase/migrations/에 파일로 남기도록 작업 방식 변경

삭제

• 없음 (기존 MDX 파일과 공개 페이지는 그대로 유지)

왜 이렇게 변경했나

관리자 권한은 이메일이나 로그인한 사람이 스스로 바꿀 수 있는 값이 아니라, 고정된 계정 식별자로만 판별하도록 설계했습니다. 그렇지 않으면 이론적으로 로그인한 사람이 스스로 "나는 관리자"라고 값을 조작할 여지가 생기기 때문입니다.

로그인은 "이 사람이 누구인지" 확인하는 것이고, 관리자 권한은 "이 사람에게 무엇을 허락할지"를 별도로 확인하는 것입니다. 이 둘을 같은 값으로 섞으면 안 됩니다.

Admin 진입 링크는 로그인 여부만 브라우저에서 확인하도록 만들었습니다. 서버에서 로그인 여부를 확인하면 원래 정적으로 빠르게 열리던 Home 같은 페이지까지 매번 새로 렌더링해야 해서, 방문자 전체의 로딩이 느려질 수 있기 때문입니다.

초보자가 알아둘 점

• RLS(Row Level Security): 같은 테이블이라도 "누가 요청했는가"에 따라 보이는 행이 달라지도록 데이터베이스 자체가 걸어두는 규칙입니다. 방문자는 공개된 글만 보이고, 관리자는 임시저장 글까지 보입니다.
• DB 마이그레이션 파일: 데이터베이스 구조가 바뀔 때마다 그 변경 내용을 저장소에 파일로 남기는 방식입니다. 코드 변경을 Git으로 추적하듯, 데이터베이스 구조 변경도 같은 방식으로 기록해두면 나중에 무엇이 언제 왜 바뀌었는지 되짚어볼 수 있습니다.

확인한 내용

자동 검사

• npm run lint
• npm run type-check
• npm run format:check
• npm run build

직접 확인

• 로그인하지 않은 상태에서 관리자 화면 접근 시 로그인 화면으로 이동하는지 확인
• 관리자 계정으로 로그인해 학습 기록을 실제로 작성·발행해봄
• 로그인하지 않은 브라우저로 접속했을 때 관리자 진입 링크가 보이지 않는지 확인
• 홈·About 같은 기존 공개 페이지가 여전히 정적으로 빌드되는지 확인

관련 파일

• src/lib/supabase/
• src/app/login/page.tsx
• src/app/admin/
• src/proxy.ts
• supabase/migrations/

남아 있는 점

프로젝트(Project) 글의 관리자 화면, 리치 텍스트 에디터, 이미지 업로드, 기존 MDX 16개를 DB로 옮기는 작업은 아직 진행 전입니다. 그동안 공개 사이트는 지금처럼 계속 MDX 파일을 그대로 보여줍니다.

다음에 할 일

프로젝트 글 관리 화면을 학습 기록과 같은 방식으로 만들고, 이어서 리치 텍스트 에디터와 카테고리·이미지 관리를 진행합니다.