// 아래는 위의 Implicit Submission을 이해하지 못하고, 
// input에 onKeyPress 이벤트에 코딩을 한 경우로, 
// 불필요한 코드가 사용되었다. 
<form>
	<input onKeyPress={(event) => {
  		if (event.key === 'Enter') {
    		return handleClick();
 		 } else {
    		return false;
  		}
	}}/>
	<button onClick={handleClick}>
</form>

// 1. 암시적으로 맵핑
<form>
	<label> username : 
		<input type="text" />
	</label>
</form>


// 2. html 속성 이용하기 
// 리액트는 htmlFor, 일반 html은 for를 사용하여 맵핑시켜준다. 
<form>
	<label htmlFor="username">username :</label>
	<input id="username">
	<button type="submit">제출하기<button>
</form>

// 3. aria-labelledby
<form>
	<label id="username-label">username :</label>
	<input aria-labelledby="username-label">
	<button type="submit">제출하기<button>
</form>

// 4. aria-label
<form>
	<label>username :</label>
	<input aria-label="username" />
	<button type="submit">제출하기<button>
</form>

// 5. title attribute
<form>
	<label>username :</label>
	<input title="username" />
	<button type="submit">제출하기<button>
</form>

// Modal 컴포넌트
const Modal = ({ children }) => {
	const modalRoot = document.getElementById('modal-root');
	return modalRoot 
		&& ReactDOM.createPortal(children, modalRoot);
}

// ErrorDialouge 모달
const ErrorDialogue = ({ handleOK, handleClose, message }) => {
	const closeRef = useRef(null);
	useEffect(()=>{
		// 모달이 뜨는 순간 취소 버튼에 포커스를 준다.  	
		if(closeRef.current) {
			closeRef.current.focus();
		}
	},[])

	return 
		<Modal>
			<div 
				role="dialog" 
				aria-labelledby="dialogTitle" 
				aria-describedby="dialogDescription"
			>
  				<h2 id="dialog1Title">
					Error Dialogue
				</h2>
  				<p id="dialog1Desc">
					{message}
				</p>
				<button onClick={handleOK}>OK</button>
  				<button 
					ref={closeRef} 
					onClick={handleClose}
				>Close</button>
			</div>
		</Modal>);
}

// 폼 컴포넌트 
const Form = () =>{ 

	const inputRef = useRef(null);
	
	const [input, onChangeInput, 
		errorMessage, setErrorMessage] = useInput('');
	const [isModalOpen, setIsModalOpen] = useState(false);

	const handleSubmit = useCallback((e)=>{ 
		e.preventDefault();
		if(validate.validateInput(input)) {
		// ... submit logic
		}else {
			handleInputError();
			setIsModalOpen(true);
		}
	}, [input]);

	const handleInputError = () => {
		setErrorMessage('message');
	} 

	const handleOK = () =>{ 
		// 생략...
	}

	// 만약 모달에서 닫기 버튼을 눌러서, 
	// 해당 메서드가 호출되면 에러가 난 input으로 다시 포커스를 올려준다.   
	const handleClose = () =>{  
		if(inputRef.current) {
			inputRef.current.focus();
		}
	}

	return (
		<section onSubmit={handleSubmit}>
		<form>
			<input 
				id="username"
				ref={inputRef} 
				value={input} 	
				onChange={onChangeInput} />
			<button type="submit">제출하기</div>
		</form>
		{errorMessage && 
			<ErrorDialogue 
				message={errorMessage} 
				inputRef={inputRef}
			/>}
		</section>
	)
}

import * as React from 'react'; 
import validate from 'utils/validate';
const Form:React.FC = () => {


const errorRef = useRef(null);

const [input, onChangeInput, errorMessage, setErrorMessage] = useInput('');
const handleSubmit = useCallback((e)=>{ 
	e.preventDefault();
	if(validate.validateInput(input)) {
		// ... submit logic
	}else {
		handleInputError();
	}
},[input]);

const handleInputError = () => {
	setErrorMessage('username should be ...');
	if(errorRef.current) {
		errorRef.current.focus();
	}
} 
return (
	<>
		// Error area
		<section ref={errorRef} tabindex="-1" aria-labelledby="error-message">
			<h2 id="error-message">form data errors</h2>
			<ul>
				<li>
					<a href="#username">{errorMessage}</a>
				</li>
			</ul>
		</section>
		<form onSubmit={handleSubmit}>
			<input id="username" value={input} onChange={onChangeInput} />
			<button type="submit">제출하기</div>
		</form>
	</>)
} 

const Form = () => {

const [input, setInput] = useState('');
const [inputError, setInputError] = useState(null);
const onChangeInput = useCallback((e)=>{ 
	const value = e.target.value;
	onSetInput(value);
	cosnt [isValid, errorMessage] = useValidate(value);
	if(!isValid){
		setInputError(errorMessage);
	}
},[input])

return (
	<form> 
		<label for="email">Email</label>
		<input
	   		id="email"
			value={input}
			onChange={onChangeInput}
	   		aria-describedby="email-error"
		/>
		{inputError && 
			(<p id="email-error">
				{`Email address ${input} is invalid`}
			</p>)}
	</form>
)