문해력UP — 사회초년생을 위한 비즈니스 문해력 플랫폼
진단 → 레벨별 독해 훈련 → 필사 미션 → 커뮤니티 피드
기능
- 문해력 진단 테스트 (7문항, 로그인 불필요)
- 레벨별(1-5) 독해 콘텐츠 + 한자 어원 hover 힌트
- 오늘의 필사 미션 (타이핑 제출)
- 7일 연속 스트릭 + 배지 시스템
- 구독자 전용 커뮤니티 피드
- AI 기반 매일 자동 콘텐츠 생성
기술 스택
- Frontend: Next.js 14 (App Router) + Tailwind CSS
- Backend/DB: Supabase (PostgreSQL + Auth)
- 배포: Vercel
- AI: OpenAI API (선택)
로컬 실행
-
의존성 설치:
npm install
-
Supabase 프로젝트 생성 후 환경 변수 설정:
cp .env.local.example .env.local
# .env.local에 Supabase URL, Anon Key, Service Role Key 입력
-
Supabase에 스키마 적용:
# Supabase Dashboard → SQL Editor에서 실행:
# supabase/migrations/00001_initial_schema.sql
# supabase/seed.sql
-
개발 서버 시작:
npm run dev
-
http://localhost:3000 접속
데모 모드
Supabase 환경 변수 없이도 대부분의 UI가 데모 데이터로 동작합니다.
프로젝트 구조
src/
app/
page.tsx # 랜딩 페이지
layout.tsx # 글로벌 레이아웃
diagnosis/page.tsx # 진단 테스트
contents/page.tsx # 레벨별 콘텐츠
contents/[id]/page.tsx # 콘텐츠 상세
missions/page.tsx # 오늘의 필사 미션
dashboard/page.tsx # 대시보드
community/page.tsx # 커뮤니티 피드
(auth)/login/page.tsx # 로그인
(auth)/signup/page.tsx # 회원가입
components/
Navbar.tsx
VocabularyHint.tsx
StreakCalendar.tsx
BadgeGrid.tsx
SubscriptionGate.tsx
lib/
diagnosis.ts
supabase/client.ts
supabase/server.ts
types/database.ts
supabase/
migrations/00001_initial_schema.sql
seed.sql