feat: add React TypeScript login with validation

[Copilot]

Description

Implements a React-based login component using TypeScript with email/password fields, input validation, and fetch API integration.

Changes

• React + TypeScript setup: Added Vite-based React 18 project with TypeScript 5
• LoginPage component: Email/password form with validation (empty fields, email format regex)
• Error handling: Network errors and API response handling with typed message states
• UI: Simple inline-styled form with success/error message display

Implementation

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
type MessageType = 'success' | 'error' | '';

const LoginPage: React.FC = () => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [message, setMessage] = useState<string>('');
  const [messageType, setMessageType] = useState<MessageType>('');

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (!email || !password) {
      setMessage('이메일과 비밀번호를 모두 입력하세요.');
      setMessageType('error');
      return;
    }

    if (!EMAIL_REGEX.test(email)) {
      setMessage('올바른 이메일 형식이 아닙니다.');
      setMessageType('error');
      return;
    }

    try {
      const response = await fetch('https://example.com/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      if (response.ok) {
        setMessage('로그인 성공!');
        setMessageType('success');
      } else {
        setMessage('로그인 실패. 아이디와 비밀번호를 확인하세요.');
        setMessageType('error');
      }
    } catch (error) {
      setMessage('네트워크 오류가 발생했습니다.');
      setMessageType('error');
    }
  };
  // ... form rendering
};

Screenshots

Login form:

Empty field validation:

Network error handling:

Notes

• Uses fetch API only (no axios)
• Placeholder API: https://example.com/api/login
• CodeQL: 0 vulnerabilities
• Bundle: 144KB (47KB gzipped)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>React 기반 로그인 기능 추가</issue_title>
<issue_description>React를 사용해서 로그인 기능을 구현합니다.

요구 사항

• 백엔드는 임의의 REST API를 사용하는 것으로 가정합니다. 실제 API 주소는 https://example.com/api/login 등으로 placeholder를 사용합니다.
• 로그인 폼은 이메일(또는 사용자명)과 비밀번호 입력 필드를 포함합니다.
• 별도의 패키지(예: axios 등) 추가 없이 fetch API만 사용합니다.
• 로그인 요청 결과에 따라 성공/실패 메시지를 표시합니다.
• 입력값이 없거나 형식이 맞지 않을 경우 오류 메시지를 노출합니다.
• UI는 단순하게 구성합니다.

예시 코드

import React, { useState } from 'react';

function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !password) {
      setMessage('이메일과 비밀번호를 모두 입력하세요.');
      return;
    }
    try {
      const response = await fetch('https://example.com/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      if (response.ok) {
        setMessage('로그인 성공!');
        // 추가 작업 (예: 토큰 저장, 페이지 이동 등)
      } else {
        setMessage('로그인 실패. 아이디와 비밀번호를 확인하세요.');
      }
    } catch (error) {
      setMessage('네트워크 오류가 발생했습니다.');
    }
  };

  return (
    <div>
      <h2>로그인</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="이메일"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="비밀번호"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
        <button type="submit">로그인</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
}
export default LoginPage;

기타

• 로그인 성공 시 토큰 등의 처리는 필요에 따라 추가 구현합니다.
• 임의 패키지 설치는 하지 않고, 기존 환경만 활용합니다.</issue_description>

<agent_instructions>Typescript 사용해.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes React 기반 로그인 기능 추가 #1

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.