Groupware/Project/Web/wwwroot/react/TestApp.jsx

// TestApp.jsx - React Test Component for GroupWare
const { useState, useEffect } = React;

function TestApp() {
    const [status, setStatus] = useState('loading');
    const [counter, setCounter] = useState(0);
    const [serverTime, setServerTime] = useState('');
    const [apiTest, setApiTest] = useState({ status: 'pending', message: '' });

    // 컴포넌트가 마운트될 때 실행
    useEffect(() => {
        // React가 정상적으로 로드되었음을 표시
        setTimeout(() => {
            setStatus('success');
            setServerTime(new Date().toLocaleString('ko-KR'));
        }, 1000);

        // API 테스트
        testAPI();
    }, []);

    // GroupWare API 테스트 함수
    const testAPI = async () => {
        try {
            // Home 컨트롤러 테스트
            const response = await fetch('/Home');
            if (response.ok) {
                setApiTest({ status: 'success', message: 'API 연결 성공' });
            } else {
                setApiTest({ status: 'warning', message: `API 응답: ${response.status}` });
            }
        } catch (error) {
            setApiTest({ status: 'error', message: `API 오류: ${error.message}` });
        }
    };

    const buttonStyle = {
        padding: '10px 20px',
        margin: '5px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
        fontSize: '14px'
    };

    return (
        <div>
            <div className={`status ${status === 'success' ? 'success' : 'loading'}`}>
                {status === 'success' ? (
                    <div>
                        <h3>✅ React 컴포넌트가 성공적으로 로드되었습니다!</h3>
                        <p><strong>현재 시간:</strong> {serverTime}</p>
                        <p><strong>파일 위치:</strong> /react/TestApp.jsx</p>
                    </div>
                ) : (
                    <h3>React 컴포넌트를 로딩 중입니다...</h3>
                )}
            </div>

            {status === 'success' && (
                <div>
                    <div className="status">
                        <h3>📊 상태 관리 테스트</h3>
                        <p><strong>카운터:</strong> {counter}</p>
                        <button 
                            onClick={() => setCounter(counter + 1)}
                            style={{
                                ...buttonStyle,
                                backgroundColor: '#007bff',
                                color: 'white'
                            }}
                        >
                            증가 (+1)
                        </button>
                        <button 
                            onClick={() => setCounter(counter - 1)}
                            style={{
                                ...buttonStyle,
                                backgroundColor: '#dc3545',
                                color: 'white'
                            }}
                        >
                            감소 (-1)
                        </button>
                        <button 
                            onClick={() => setCounter(0)}
                            style={{
                                ...buttonStyle,
                                backgroundColor: '#6c757d',
                                color: 'white'
                            }}
                        >
                            리셋
                        </button>
                    </div>

                    <div className={`status ${
                        apiTest.status === 'success' ? 'success' : 
                        apiTest.status === 'error' ? 'error' : 'loading'
                    }`}>
                        <h3>🌐 GroupWare API 연결 테스트</h3>
                        <p><strong>상태:</strong> {apiTest.message}</p>
                        <p><strong>테스트 엔드포인트:</strong> /Home</p>
                        <button 
                            onClick={testAPI}
                            style={{
                                ...buttonStyle,
                                backgroundColor: '#28a745',
                                color: 'white'
                            }}
                        >
                            API 다시 테스트
                        </button>
                    </div>

                    <div className="status">
                        <h3>📋 React + OWIN 통합 테스트 체크리스트</h3>
                        <ul style={{ textAlign: 'left' }}>
                            <li>✅ OWIN 정적 파일 서빙</li>
                            <li>✅ React 라이브러리 로딩 (CDN)</li>
                            <li>✅ JSX 파일 분리 및 로딩</li>
                            <li>✅ JSX 컴파일 (Babel)</li>
                            <li>✅ React Hooks (useState, useEffect)</li>
                            <li>✅ 이벤트 핸들링</li>
                            <li>✅ API 호출 (fetch)</li>
                            <li>✅ 반응형 UI 업데이트</li>
                            <li>✅ 컴포넌트 모듈화</li>
                        </ul>
                    </div>

                    <div className="status success">
                        <h3>🎉 통합 테스트 결과</h3>
                        <p>GroupWare + OWIN + React 환경이 성공적으로 구성되었습니다!</p>
                        <p><strong>다음 단계:</strong></p>
                        <ul style={{ textAlign: 'left' }}>
                            <li>React Router 추가 (SPA 라우팅)</li>
                            <li>상태 관리 라이브러리 추가 (Redux/Zustand)</li>
                            <li>UI 컴포넌트 라이브러리 추가 (Material-UI/Ant Design)</li>
                            <li>번들링 도구 설정 (Webpack/Vite)</li>
                            <li>TypeScript 지원 추가</li>
                        </ul>
                    </div>
                </div>
            )}
        </div>
    );
}