🎮 CS Game

'CS Game'은 개발자 취업 준비생과 CS 학습자들이 지루한 암기식 학습이 아닌 게이미케이션을 넣어 CS 지식을 보다 재미있게 습득할 수 있도록 만든 게임형 학습 플랫폼입니다.

Team

오유빈 풀스택

추보문 풀스택

🎯 주요 기능

• RPG 기반 CS 퀴즈: 다양한 테마의 맵을 탐험하며 몬스터와 조우하고 CS 퀴즈 세션을 진행합니다.
• AI 오답 피드백: GPT 기반 AI 학습 코치가 최근 오답 내역을 분석하여 개인 맞춤형 피드백을 제공합니다.
• 문제집 관리: 카테고리별 문제집을 생성하고 관리하며, 다른 사용자가 만든 문제집으로 플레이할 수 있습니다.
• 캐릭터 및 세션 로그: 플레이어의 성장 상태와 상세한 퀴즈 풀이 이력을 데이터베이스에 기록하여 분석에 활용합니다.

🛠️ 기술 스택

Frontend

• Framework: Vue 3 (Vite)
• State Management: Pinia (with persisted state support)
• Styling: Tailwind CSS
• Network: Axios

Backend

• Framework: Django REST Framework (DRF)
• Authentication: dj-rest-auth, django-allauth
• Database: Django ORM (Default: SQLite/MariaDB 준비)
• AI Integration: OpenAI GPT (gpt-4o/gpt-5)

� 프로젝트 실행 방법

Backend (Django)

1. quiz_back 디렉토리로 이동합니다.
2. 가상환경 생성 및 활성화: python -m venv venv, source venv/bin/activate (Windows: .\venv\Scripts\activate)
3. 의존성 설치: pip install -r requirements.txt
4. 서버 실행: python manage.py runserver

Frontend (Vue)

1. quiz_front 디렉토리로 이동합니다.
2. 의존성 설치: npm install
3. 개발 서버 실행: npm run dev

📂 프로젝트 구조

csGame/
├── quiz_back/           # Django Backend
│   ├── ai/              # AI 피드백 서비스 모듈
│   ├── game/            # 게임 세션 및 로직 관리
│   ├── questions/       # 퀴즈 문제 및 카테고리 관리
│   └── accounts/        # 사용자 인증 및 프로필
├── quiz_front/          # Vue Frontend
│   ├── src/
│   │   ├── assets/      # 캐릭터, 맵, UI 이미지 에셋
│   │   ├── components/  # 퀴즈 패널, 네비게이션 등 UI 컴포넌트
│   │   ├── stores/      # Pinia 상태 관리
│   │   └── views/       # 페이지별 뷰 레이아웃
└── README.md            # 프로젝트 메인 문서

📝 개발 노트

ERD

API 명세서

v1.0.0

• Vue 3 기반 인터랙티브 퀴즈 UI 구현
• Django REST API를 활용한 게임 세션 관리 시스템 구축
• OpenAI 연동을 통한 지능형 오답 피드백 기능 완성
• 다양한 CS 카테고리별 문제 데이터셋(fixtures) 구축