# AAT Demo 서비스 기획서

## 1. 서비스 개요

AAT Demo는 AI Auto Tester의 자동화 테스트 기능을 검증하기 위한 데모 웹 애플리케이션입니다.
회원가입, 로그인, 메인페이지 접근, 로그아웃의 기본적인 사용자 흐름을 제공합니다.

## 2. 페이지 구조

### 2.1 랜딩 페이지 (`/`)
- **목적**: 서비스 첫 화면, 미로그인 사용자 안내
- **구성 요소**:
  - "Welcome to AAT Demo" 제목
  - "Register" 버튼 → 회원가입 페이지 이동
  - "Login" 버튼 → 로그인 페이지 이동
- **네비게이션 바**: Home, Register, Login 링크

### 2.2 회원가입 페이지 (`/register`)
- **목적**: 새 사용자 계정 생성
- **입력 필드**:
  - Name: 사용자 이름 (텍스트)
  - Email: 이메일 주소 (이메일 형식)
  - Password: 비밀번호 (마스킹)
- **버튼**: "Register" (폼 제출)
- **검증 규칙**:
  - 모든 필드 필수 입력
  - 이미 등록된 이메일 중복 불가
- **성공 시**: "Registration successful! Please login." 메시지 + 로그인 페이지 이동
- **실패 시**: 에러 메시지 표시 (빨간 배경)

### 2.3 로그인 페이지 (`/login`)
- **목적**: 기존 사용자 인증
- **입력 필드**:
  - Email: 이메일 주소
  - Password: 비밀번호
- **버튼**: "Login" (폼 제출)
- **성공 시**: "Welcome back, {이름}!" 메시지 + 메인 페이지 이동
- **실패 시**: "Invalid email or password." 에러 메시지

### 2.4 메인 페이지 (`/main`)
- **목적**: 로그인 후 사용자 대시보드
- **접근 제한**: 로그인 필수 (미인증 시 로그인 페이지로 리다이렉트)
- **구성 요소**:
  - "Welcome, {이름}!" 인사 메시지
  - "Home" 버튼 → 랜딩 페이지 이동
  - "Logout" 버튼 → 로그아웃 처리
- **네비게이션 바**: Home, Main, Logout 링크

### 2.5 로그아웃 (`/logout`)
- **목적**: 사용자 세션 종료
- **동작**: 세션 삭제 → "You have been logged out." 메시지 + 랜딩 페이지 이동

## 3. UI/UX 설계

### 3.1 전체 레이아웃
- 상단 네비게이션 바 (다크 배경 #2c3e50)
- 중앙 콘텐츠 영역 (최대 600px, 카드 스타일)
- 하단 푸터

### 3.2 디자인 원칙
- **큰 버튼**: padding 14px 32px, font-size 16px (자동화 클릭 용이)
- **명확한 텍스트**: 각 요소에 고유 텍스트 라벨 (OCR 인식 최적화)
- **충분한 간격**: 요소 간 20px 이상 (마우스 타겟팅 정확도)
- **플래시 메시지**: 성공(녹색)/에러(빨간색) 배경으로 시각적 구분

### 3.3 색상 체계
- 주요(Primary): #3498db (파란색) — Login 버튼
- 성공(Success): #27ae60 (녹색) — Register 버튼
- 위험(Danger): #e74c3c (빨간색) — Logout 버튼
- 네비게이션: #2c3e50 (다크)

## 4. 기술 스택
- **백엔드**: Flask (Python)
- **프론트엔드**: HTML + CSS (Jinja2 템플릿)
- **세션 관리**: Flask session (서버사이드)
- **데이터 저장**: 인메모리 딕셔너리 (서버 재시작 시 초기화)

## 5. 테스트 시나리오

| ID | 시나리오 | 주요 검증 포인트 |
|---|---|---|
| SC-001 | 회원가입 | 폼 입력 → 성공 메시지 |
| SC-002 | 로그인 | 인증 → 메인 페이지 리다이렉트 |
| SC-003 | 메인 네비게이션 | 로그인 후 페이지 이동 |
| SC-004 | 로그아웃 | 세션 종료 → 랜딩 페이지 |
