tst-claude-code-samples/.taskmaster/specs/2_frontend_form.md

Phase 1, Task 2: Frontend Inquiry Form Pseudocode

이 문서는 AIROUM 랜딩 페이지의 프론트엔드 '문의하기' 폼의 구조와 동작을 정의합니다.

• 기술 스택: HTML, CSS, Vanilla JavaScript

---

1. HTML 구조 (templates/index.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. 메인 실행 로직

• 페이지 로드 완료 시, 이벤트 리스너를 설정합니다.

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. 폼 제출 핸들러

• '제출하기' 버튼 클릭 시 실행될 로직입니다.

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로 데이터를 전송합니다.

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)

// 실시간 이메일 유효성 검사 함수
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' 타입으로 호출 시 에러 메시지가 올바른 스타일로 표시되는지 확인