5.8 KiB
5.8 KiB
Gemini AI 실행 계획: SvelteKit 기반 Q&A 피드백 플랫폼 구축
1. 프로젝트 목표
SvelteKit 프레임워크와 Cloudflare Pages를 사용하여 OIDC 인증 기반의 Q&A 피드백 수집 웹 애플리케이션을 구축합니다. 정적 콘텐츠는 Cloudflare의 글로벌 CDN을 통해 제공하고, 인증 및 API 요청과 같은 동적 로직은 Cloudflare Workers에서 실행하여 성능과 보안을 최적화합니다.
2. 기술 스택 선정
- 프레임워크:
SvelteKit - 패키지 매니저:
pnpm- 빠르고 효율적인 의존성 관리를 위해 사용합니다. - 배포 대상:
Cloudflare Pages - 인증 (OIDC):
lucia-auth - UI/스타일링:
tailwindcss,shadcn-svelte,lucide-svelte - 폼 처리:
sveltekit-superforms,zod - SvelteKit 어댑터:
@sveltejs/adapter-cloudflare- Cloudflare Pages 및 Workers 배포에 최적화된 어댑터
3. 개발 단계별 실행 계획
1단계: 프로젝트 초기 설정 (Scaffolding)
- SvelteKit 프로젝트 생성:
frontend디렉토리에 SvelteKit 프로젝트를 설정합니다. @sveltejs/adapter-cloudflare설치 및 설정: Cloudflare 배포를 위해svelte.config.js에 해당 어댑터를 적용합니다.- 필수 패키지 설치:
pnpm install을 사용하여lucia,sveltekit-superforms등 필요한 라이브러리를 설치합니다. shadcn-svelte초기화:pnpm dlx shadcn-svelte@latest init을 실행하여 UI 컴포넌트 라이브러리를 설정합니다.- 디렉토리 구조 설정:
src/routes,src/lib,src/components등 기본 구조를 확정합니다.
2단계: OIDC 인증 및 API 연동 구현 (Cloudflare Workers 활용)
- 환경 변수 설정: OIDC 및 API 관련 시크릿 정보를
Cloudflare Pages의 환경 변수로 설정합니다.
OIDC_CLIENT_ID,OIDC_CLIENT_SECRET,OIDC_ISSUER_URLAPI_BASE_URL,API_KEY,DEFAULT_PROJECT_ID
- 서버 함수(Worker) 구현: SvelteKit의 서버
라우트(
*.server.ts)를 사용하여 Cloudflare Worker에서 실행될 로직을 작성합니다./login,/login/callback,/logout라우트를 구현하여 OIDC 인증 흐름을 처리합니다. 이 로직은 서버리스 함수에서 안전하게 실행됩니다.- API 호출을 위한 프록시 엔드포인트를 생성합니다. 예를 들어,
프론트엔드가
/api/feedbacks를 호출하면, 서버 함수가 이를 받아x-api-key헤더를 추가하여 실제 백엔드 API로 요청을 전달합니다.
- Lucia Auth 설정:
lucia를 SvelteKit의 서버 환경과 연동하여 세션을 관리합니다.
3단계: 피드백 기능 구현
- 피드백 조회/검색: 프론트엔드 페이지에서 우리가 만든 API 프록시 엔드포인트를 호출하여 안전하게 데이터를 가져와 표시합니다.
- 피드백 작성:
sveltekit-superforms를 사용하여 폼을 구현하고,form action을 통해 API 프록시 엔드포인트로 데이터를 전송하여 피드백을 생성합니다.
4단계: 배포
- 빌드:
pnpm run build를 실행하여 Cloudflare Pages가 요구하는 형식의 정적 파일과 Worker 스크립트를 생성합니다. - 배포: 생성된
build디렉토리를 Cloudflare Pages에 연결하여 배포합니다.
5. 진행 상황 요약 (2025-07-25)
- 프로젝트 구조 및 설정 완료:
frontend디렉토리에 SvelteKit 프로젝트의 기본 파일 구조와 설정을 완료했습니다.pnpm을 패키지 매니저로 채택하고 모든 의존성 설치를 완료했습니다.- Cloudflare Pages 배포를 위해
@sveltejs/adapter-cloudflare를 설정했습니다.
- UI 라이브러리 초기화 완료:
shadcn-svelte를 초기화하고 관련 설정(Tailwind CSS,app.css등)을 업데이트하여 UI 컴포넌트를 사용할 준비를 마쳤습니다.
- 리팩토링 및 검증 완료:
- 프로젝트 디렉토리명을
qna-feedback-frontend에서frontend로 일괄 변경했습니다. .gitignore파일을 확인하고,pnpm run build를 통해 프로젝트가 성공적으로 빌드되는 것을 확인했습니다.- 사용자가 로컬 미리보기 서버를 통해 페이지의 정상 동작을 확인했습니다.
- 프로젝트 디렉토리명을
- Lucia-auth v3 마이그레이션 및 빌드 오류 해결:
lucia/middleware모듈 로드 실패 에러를 해결하고,luciav3 API에 맞춰src/lib/server/auth.ts코드를 수정했습니다.@lucia-auth/adapter-sqlite의 import 구문 오류를 바로잡았습니다.routes/login/+page.server.ts파일의import구문 오류를 수정하여 빌드에 성공하도록 했습니다.
6. 다음 단계
- OIDC 흐름 검증을 위한 SQLite 의존성 분리:
- 목표: 실제 백엔드 시스템과 분리하여 프론트엔드의 OIDC 인증 흐름을 독립적으로 검증합니다.
- 계획:
- SQLite 의존성 제거:
pnpm을 사용하여better-sqlite3와@lucia-auth/adapter-sqlite패키지를 프로젝트에서 완전히 제거합니다. - 인증 로직 수정:
src/lib/server/auth.ts파일에서 데이터베이스 관련 코드를 모두 제거합니다. OIDC 흐름 테스트를 위해 Lucia가 데이터베이스 없이 임시적으로 동작하도록 코드를 수정합니다. (이는 최종 프로덕션 코드가 아니며, 순수 OIDC 연동 테스트 목적입니다.) - 콜백 핸들러 수정:
src/routes/login/callback/+page.server.ts에서 OIDC 제공자로부터 받은 사용자 정보를 데이터베이스에 저장하는 대신, 임시 세션만 생성하여 OIDC 인증 흐름이 올바르게 동작하는지 확인합니다.
- SQLite 의존성 제거: