generated from Paul.Kim/tpl-superclaude
refactor(framework): Replace SuperClaude with Claude Flow & SPARC
This commit marks a significant architectural overhaul, replacing the legacy SuperClaude and Taskmaster AI frameworks with the new Claude Flow orchestration system and the SPARC/Roo methodology.
The new framework emphasizes parallel, swarm-based execution and mandatory batch operations for improved efficiency and coordination.
Key Changes:
- **Framework Migration:** The entire `.claude` and `.cursor` directories, containing the old command, persona, and rule systems, have been removed. They are replaced by the new `.roomodes` configuration and a comprehensive `CLAUDE.md` guide for Claude Flow.
- **New Orchestration Engine:** Introduced Claude Flow as the primary MCP server. The updated `CLAUDE.md` defines new rules for swarm orchestration, mandatory concurrent execution, and a clear separation of concerns between coordination (MCP) and execution (Claude Code).
- **Project Initiation (AIROUM):** Added extensive planning, design, and specification documents for a new project: the "AIROUM" educational landing page. This includes:
- Mood boards and multiple HTML design iterations in `.superdesign` and `gallery`.
- Detailed planning documents, technical designs, and pseudocode specs in `.taskmaster`.
- **Configuration Updates:**
- `.mcp.json` now points to `claude-flow` and `ruv-swarm`.
- `.gitignore` is updated to support the new Claude Flow file structure.
This commit is contained in:
151
.taskmaster/specs/1_backend_api.md
Normal file
151
.taskmaster/specs/1_backend_api.md
Normal file
@ -0,0 +1,151 @@
|
||||
# Phase 1, Task 1: Backend API & Database Pseudocode
|
||||
|
||||
이 문서는 AIROUM 랜딩 페이지의 백엔드 API 및 데이터베이스 로직을 정의합니다.
|
||||
- **언어/프레임워크:** Python / Flask
|
||||
- **데이터베이스:** SQLite
|
||||
|
||||
---
|
||||
|
||||
## 1. 데이터베이스 모델 (`database.py` 또는 `models.py`)
|
||||
|
||||
### 1.1. Inquiry 모델 정의
|
||||
- `INQUIRIES` 테이블에 매핑될 데이터 구조를 정의합니다.
|
||||
|
||||
```pseudocode
|
||||
CLASS Inquiry:
|
||||
id: INTEGER (Primary Key, Auto-increment)
|
||||
name: STRING(50) (Not Null)
|
||||
email: STRING(100) (Not Null, Indexed)
|
||||
phone: STRING(20) (Nullable)
|
||||
message: TEXT (Not Null)
|
||||
created_at: DATETIME (Not Null, Default: current time)
|
||||
```
|
||||
|
||||
### 1.2. 데이터베이스 초기화 함수
|
||||
- 애플리케이션 시작 시 데이터베이스 파일과 테이블을 생성하는 로직입니다.
|
||||
|
||||
```pseudocode
|
||||
FUNCTION initialize_database():
|
||||
// 데이터베이스 연결 (파일이 없으면 생성됨)
|
||||
db_connection = connect_to("airoum.db")
|
||||
|
||||
// 'INQUIRIES' 테이블이 존재하는지 확인
|
||||
IF NOT table_exists("INQUIRIES", db_connection):
|
||||
// 테이블 생성 SQL 실행
|
||||
EXECUTE SQL `
|
||||
CREATE TABLE INQUIRIES (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name VARCHAR(50) NOT NULL,
|
||||
email VARCHAR(100) NOT NULL,
|
||||
phone VARCHAR(20),
|
||||
message TEXT NOT NULL,
|
||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
`
|
||||
// email 컬럼에 인덱스 생성
|
||||
EXECUTE SQL `CREATE INDEX idx_email ON INQUIRIES (email);`
|
||||
// TEST: 'INQUIRIES' 테이블이 명세서대로 정확히 생성되는지 확인
|
||||
// TEST: 'idx_email' 인덱스가 email 컬럼에 생성되는지 확인
|
||||
|
||||
CLOSE db_connection
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. API 로직 (`app.py`)
|
||||
|
||||
### 2.1. API 엔드포인트: 문의 등록
|
||||
- `POST /api/inquiry` 요청을 처리하는 메인 로직입니다.
|
||||
|
||||
```pseudocode
|
||||
// Flask 애플리케이션 및 라우트 설정
|
||||
ROUTE "/api/inquiry" with METHODS ["POST"]
|
||||
FUNCTION handle_inquiry_submission():
|
||||
// 1. 요청 데이터 가져오기
|
||||
request_data = get_json_from_request()
|
||||
// TEST: 요청의 Content-Type이 'application/json'이 아닐 경우 415 에러를 반환하는지 확인
|
||||
|
||||
IF request_data IS NULL:
|
||||
RETURN response_json({"status": "error", "message": "Invalid JSON format"}, status_code=400)
|
||||
// TEST: 요청 본문이 비어있거나 유효한 JSON이 아닐 경우 400 에러를 반환하는지 확인
|
||||
|
||||
// 2. 입력 데이터 추출 및 유효성 검사
|
||||
name = request_data.get("name")
|
||||
email = request_data.get("email")
|
||||
phone = request_data.get("phone") // 선택적 필드
|
||||
message = request_data.get("message")
|
||||
|
||||
errors = validate_inquiry(name, email, message)
|
||||
// TEST: 유효성 검사 함수가 올바르게 호출되는지 확인
|
||||
|
||||
// 3. 유효성 검사 결과에 따른 분기 처리
|
||||
IF errors IS NOT EMPTY:
|
||||
// 유효성 검사 실패 시
|
||||
error_response = {
|
||||
"status": "error",
|
||||
"message": "입력값을 확인해주세요.",
|
||||
"errors": errors
|
||||
}
|
||||
RETURN response_json(error_response, status_code=400)
|
||||
// TEST: 유효성 검사 실패 시, 400 상태 코드와 함께 정확한 오류 메시지를 반환하는지 확인
|
||||
ELSE:
|
||||
// 유효성 검사 성공 시
|
||||
TRY:
|
||||
// 4. 데이터베이스에 저장
|
||||
db_connection = connect_to("airoum.db")
|
||||
EXECUTE SQL `
|
||||
INSERT INTO INQUIRIES (name, email, phone, message)
|
||||
VALUES (?, ?, ?, ?);
|
||||
` WITH (name, email, phone, message)
|
||||
COMMIT transaction
|
||||
CLOSE db_connection
|
||||
// TEST: 유효한 데이터가 DB에 성공적으로 저장되는지 확인
|
||||
|
||||
// 5. 성공 응답 반환
|
||||
success_response = {
|
||||
"status": "success",
|
||||
"message": "문의가 성공적으로 접수되었습니다."
|
||||
}
|
||||
RETURN response_json(success_response, status_code=201)
|
||||
// TEST: 성공적으로 데이터 저장 후 201 상태 코드와 성공 메시지를 반환하는지 확인
|
||||
|
||||
CATCH DatabaseError as e:
|
||||
// 데이터베이스 오류 발생 시
|
||||
LOG_ERROR("Database error occurred: " + e)
|
||||
server_error_response = {
|
||||
"status": "error",
|
||||
"message": "서버 내부 오류가 발생했습니다."
|
||||
}
|
||||
RETURN response_json(server_error_response, status_code=500)
|
||||
// TEST: 데이터베이스 연결 또는 INSERT 실패 시 500 에러를 반환하는지 확인
|
||||
END TRY
|
||||
END IF
|
||||
```
|
||||
|
||||
### 2.2. 유효성 검사 헬퍼 함수
|
||||
- `handle_inquiry_submission`에서 사용할 입력값 검증 로직입니다.
|
||||
|
||||
```pseudocode
|
||||
FUNCTION validate_inquiry(name, email, message):
|
||||
errors = {}
|
||||
|
||||
// 이름 검사
|
||||
IF name IS NULL OR name IS EMPTY:
|
||||
errors["name"] = "이름은 필수 항목입니다."
|
||||
// TEST: 이름이 null이거나 비어있을 때 오류를 반환하는지 확인
|
||||
|
||||
// 이메일 검사
|
||||
IF email IS NULL OR email IS EMPTY:
|
||||
errors["email"] = "이메일은 필수 항목입니다."
|
||||
// TEST: 이메일이 null이거나 비어있을 때 오류를 반환하는지 확인
|
||||
ELSE IF is_valid_email_format(email) IS FALSE:
|
||||
errors["email"] = "올바른 이메일 형식이 아닙니다."
|
||||
// TEST: 이메일 형식이 유효하지 않을 때 오류를 반환하는지 확인 (e.g., 'test@test', 'test.com')
|
||||
|
||||
// 문의 내용 검사
|
||||
IF message IS NULL OR message IS EMPTY:
|
||||
errors["message"] = "문의 내용은 필수 항목입니다."
|
||||
// TEST: 문의 내용이 null이거나 비어있을 때 오류를 반환하는지 확인
|
||||
|
||||
RETURN errors
|
||||
```
|
||||
165
.taskmaster/specs/2_frontend_form.md
Normal file
165
.taskmaster/specs/2_frontend_form.md
Normal file
@ -0,0 +1,165 @@
|
||||
# Phase 1, Task 2: Frontend Inquiry Form Pseudocode
|
||||
|
||||
이 문서는 AIROUM 랜딩 페이지의 프론트엔드 '문의하기' 폼의 구조와 동작을 정의합니다.
|
||||
- **기술 스택:** HTML, CSS, Vanilla JavaScript
|
||||
|
||||
---
|
||||
|
||||
## 1. HTML 구조 (`templates/index.html`)
|
||||
|
||||
- '문의하기' 섹션에 포함될 폼의 기본 구조입니다.
|
||||
|
||||
```html
|
||||
<!-- Inquiry Form Section -->
|
||||
<section id="inquiry">
|
||||
<h2>문의 및 신청</h2>
|
||||
|
||||
<!-- Form Element -->
|
||||
<form id="inquiry-form">
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="name">이름</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<!-- Email Field -->
|
||||
<div class="form-group">
|
||||
<label for="email">이메일</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
<div id="email-error" class="error-message"></div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Field (Optional) -->
|
||||
<div class="form-group">
|
||||
<label for="phone">연락처 (선택)</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
</div>
|
||||
|
||||
<!-- Message Field -->
|
||||
<div class="form-group">
|
||||
<label for="message">문의 내용</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" id="submit-button">제출하기</button>
|
||||
</form>
|
||||
|
||||
<!-- Feedback Message Area -->
|
||||
<div id="form-feedback"></div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. JavaScript 로직 (`static/js/main.js`)
|
||||
|
||||
### 2.1. 메인 실행 로직
|
||||
- 페이지 로드 완료 시, 이벤트 리스너를 설정합니다.
|
||||
|
||||
```pseudocode
|
||||
DOCUMENT is ready:
|
||||
// 폼 요소 가져오기
|
||||
inquiry_form = get_element_by_id("inquiry-form")
|
||||
email_input = get_element_by_id("email")
|
||||
|
||||
// 폼 제출 이벤트 리스너 추가
|
||||
ADD_EVENT_LISTENER to inquiry_form for "submit" event, call handle_form_submit
|
||||
// TEST: 폼 제출 시 handle_form_submit 함수가 호출되는지 확인
|
||||
|
||||
// 이메일 필드 실시간 유효성 검사 리스너 추가
|
||||
ADD_EVENT_LISTENER to email_input for "input" event, call validate_email_realtime
|
||||
// TEST: 이메일 필드에 입력 시 validate_email_realtime 함수가 호출되는지 확인
|
||||
```
|
||||
|
||||
### 2.2. 폼 제출 핸들러
|
||||
- '제출하기' 버튼 클릭 시 실행될 로직입니다.
|
||||
|
||||
```pseudocode
|
||||
FUNCTION handle_form_submit(event):
|
||||
// 기본 폼 제출 동작 방지
|
||||
PREVENT_DEFAULT_ACTION for event
|
||||
|
||||
// 제출 버튼 비활성화 및 로딩 상태 표시
|
||||
submit_button = get_element_by_id("submit-button")
|
||||
SET_ATTRIBUTE of submit_button to "disabled", TRUE
|
||||
SET_INNER_HTML of submit_button to "전송 중..."
|
||||
// TEST: 제출 버튼 클릭 시 버튼이 비활성화되고 텍스트가 변경되는지 확인
|
||||
|
||||
// 폼 데이터 가져오기
|
||||
form_data = {
|
||||
name: get_value_from_element("name"),
|
||||
email: get_value_from_element("email"),
|
||||
phone: get_value_from_element("phone"),
|
||||
message: get_value_from_element("message")
|
||||
}
|
||||
|
||||
// API로 데이터 전송
|
||||
CALL send_inquiry_to_api(form_data)
|
||||
```
|
||||
|
||||
### 2.3. API 통신 함수
|
||||
- 백엔드 API로 데이터를 전송합니다.
|
||||
|
||||
```pseudocode
|
||||
ASYNC FUNCTION send_inquiry_to_api(data):
|
||||
TRY:
|
||||
// '/api/inquiry'로 POST 요청
|
||||
response = AWAIT fetch("/api/inquiry", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: convert_to_json(data)
|
||||
})
|
||||
|
||||
// 응답 데이터를 JSON으로 파싱
|
||||
result = AWAIT response.json()
|
||||
|
||||
IF response.status is 201: // 성공
|
||||
CALL show_feedback_message("문의가 성공적으로 접수되었습니다.", "success")
|
||||
RESET inquiry_form
|
||||
// TEST: API 응답이 성공(201)일 때, 성공 메시지를 표시하고 폼을 초기화하는지 확인
|
||||
ELSE: // 실패 (e.g., 400 Bad Request)
|
||||
error_message = result.message
|
||||
IF result.errors:
|
||||
// 필드별 에러 메시지 추가
|
||||
error_message += format_errors(result.errors)
|
||||
END IF
|
||||
CALL show_feedback_message(error_message, "error")
|
||||
// TEST: API 응답이 실패(400)일 때, 에러 메시지를 정확히 표시하는지 확인
|
||||
END IF
|
||||
|
||||
CATCH network_error:
|
||||
CALL show_feedback_message("네트워크 오류가 발생했습니다. 다시 시도해주세요.", "error")
|
||||
// TEST: 네트워크 오류 발생 시, 적절한 에러 메시지를 표시하는지 확인
|
||||
FINALLY:
|
||||
// 제출 버튼 다시 활성화
|
||||
submit_button = get_element_by_id("submit-button")
|
||||
SET_ATTRIBUTE of submit_button to "disabled", FALSE
|
||||
SET_INNER_HTML of submit_button to "제출하기"
|
||||
// TEST: API 통신 완료 후(성공/실패 무관) 제출 버튼이 다시 활성화되는지 확인
|
||||
END TRY
|
||||
```
|
||||
|
||||
### 2.4. 헬퍼 함수 (Helper Functions)
|
||||
|
||||
```pseudocode
|
||||
// 실시간 이메일 유효성 검사 함수
|
||||
FUNCTION validate_email_realtime(event):
|
||||
email = event.target.value
|
||||
email_error_element = get_element_by_id("email-error")
|
||||
|
||||
IF is_valid_email_format(email) OR email IS EMPTY:
|
||||
SET_INNER_HTML of email_error_element to ""
|
||||
ELSE:
|
||||
SET_INNER_HTML of email_error_element to "올바른 이메일 형식이 아닙니다."
|
||||
END IF
|
||||
// TEST: 유효하지 않은 이메일 입력 시 실시간으로 에러 메시지가 표시되는지 확인
|
||||
// TEST: 유효한 이메일 입력 시 에러 메시지가 사라지는지 확인
|
||||
|
||||
// 사용자 피드백 표시 함수
|
||||
FUNCTION show_feedback_message(message, type):
|
||||
feedback_element = get_element_by_id("form-feedback")
|
||||
SET_INNER_HTML of feedback_element to message
|
||||
SET_CLASS of feedback_element to type // 'success' 또는 'error' 클래스 추가
|
||||
// TEST: 'success' 타입으로 호출 시 성공 메시지가 올바른 스타일로 표시되는지 확인
|
||||
// TEST: 'error' 타입으로 호출 시 에러 메시지가 올바른 스타일로 표시되는지 확인
|
||||
Reference in New Issue
Block a user