74 lines
5.8 KiB
Markdown
74 lines
5.8 KiB
Markdown
# 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)
|
|
1. **SvelteKit 프로젝트 생성**: `frontend` 디렉토리에 SvelteKit 프로젝트를 설정합니다.
|
|
2. **`@sveltejs/adapter-cloudflare` 설치 및 설정**: Cloudflare 배포를 위해 `svelte.config.js`에 해당 어댑터를 적용합니다.
|
|
3. **필수 패키지 설치**: `pnpm install`을 사용하여 `lucia`, `sveltekit-superforms` 등 필요한 라이브러리를 설치합니다.
|
|
4. **`shadcn-svelte` 초기화**: `pnpm dlx shadcn-svelte@latest init`을 실행하여 UI 컴포넌트 라이브러리를 설정합니다.
|
|
5. **디렉토리 구조 설정**: `src/routes`, `src/lib`, `src/components` 등 기본 구조를 확정합니다.
|
|
|
|
### 2단계: OIDC 인증 및 API 연동 구현 (Cloudflare Workers 활용)
|
|
1. **환경 변수 설정**: OIDC 및 API 관련 시크릿 정보를 Cloudflare Pages의 환경 변수로 설정합니다.
|
|
* `OIDC_CLIENT_ID`, `OIDC_CLIENT_SECRET`, `OIDC_ISSUER_URL`
|
|
* `API_BASE_URL`, `API_KEY`, `DEFAULT_PROJECT_ID`
|
|
2. **서버 함수(Worker) 구현**: SvelteKit의 서버 라우트(`*.server.ts`)를 사용하여 Cloudflare Worker에서 실행될 로직을 작성합니다.
|
|
* `/login`, `/login/callback`, `/logout` 라우트를 구현하여 OIDC 인증 흐름을 처리합니다. 이 로직은 서버리스 함수에서 안전하게 실행됩니다.
|
|
* API 호출을 위한 프록시 엔드포인트를 생성합니다. 예를 들어, 프론트엔드가 `/api/feedbacks`를 호출하면, 서버 함수가 이를 받아 `x-api-key` 헤더를 추가하여 실제 백엔드 API로 요청을 전달합니다.
|
|
3. **Lucia Auth 설정**: `lucia`를 SvelteKit의 서버 환경과 연동하여 세션을 관리합니다.
|
|
|
|
### 3단계: 피드백 기능 구현
|
|
1. **피드백 조회/검색**: 프론트엔드 페이지에서 우리가 만든 API 프록시 엔드포인트를 호출하여 안전하게 데이터를 가져와 표시합니다.
|
|
2. **피드백 작성**: `sveltekit-superforms`를 사용하여 폼을 구현하고, `form action`을 통해 API 프록시 엔드포인트로 데이터를 전송하여 피드백을 생성합니다.
|
|
|
|
### 4단계: 배포
|
|
1. **빌드**: `pnpm run build`를 실행하여 Cloudflare Pages가 요구하는 형식의 정적 파일과 Worker 스크립트를 생성합니다.
|
|
2. **배포**: 생성된 `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` 모듈 로드 실패 에러를 해결하고, `lucia` v3 API에 맞춰 `src/lib/server/auth.ts` 코드를 수정했습니다.
|
|
* `@lucia-auth/adapter-sqlite`의 import 구문 오류를 바로잡았습니다.
|
|
* `routes/login/+page.server.ts` 파일의 `import` 구문 오류를 수정하여 빌드에 성공하도록 했습니다.
|
|
|
|
---
|
|
|
|
## 6. 다음 단계
|
|
|
|
* **OIDC 흐름 검증을 위한 SQLite 의존성 분리**:
|
|
* **목표**: 실제 백엔드 시스템과 분리하여 프론트엔드의 OIDC 인증 흐름을 독립적으로 검증합니다.
|
|
* **계획**:
|
|
1. **SQLite 의존성 제거**: `pnpm`을 사용하여 `better-sqlite3`와 `@lucia-auth/adapter-sqlite` 패키지를 프로젝트에서 완전히 제거합니다.
|
|
2. **인증 로직 수정**: `src/lib/server/auth.ts` 파일에서 데이터베이스 관련 코드를 모두 제거합니다. OIDC 흐름 테스트를 위해 Lucia가 데이터베이스 없이 임시적으로 동작하도록 코드를 수정합니다. (이는 최종 프로덕션 코드가 아니며, 순수 OIDC 연동 테스트 목적입니다.)
|
|
3. **콜백 핸들러 수정**: `src/routes/login/callback/+page.server.ts`에서 OIDC 제공자로부터 받은 사용자 정보를 데이터베이스에 저장하는 대신, 임시 세션만 생성하여 OIDC 인증 흐름이 올바르게 동작하는지 확인합니다.
|
|
|