전체 흐름 요약

[요청]   /user/terms.do
   ↓
[TermsController]
   ↓ (service.findTerms)
[TermsService]
   ↓ (dao.selectTerms)
[TermsDAO] → DB 조회
   ↑
[TermsDTO 생성]
   ↑
[req.setAttribute(dto)]
   ↑
[terms.jsp 출력]

정리

[1] terms.jsp — 이용약관 view

사용자가 회원가입 전에 이용약관 및 개인정보 처리방침에 동의하도록 안내하고, 두 체크박스 모두 동의해야 다음 페이지(register.do)로 이동할 수 있게 만드는 화면이다.

/WEB-INF/view/user/terms.jsp

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>팜스토리 이용약관</title>
    <link rel="stylesheet" href="/farmStory/css/layout.css"/>
    <link rel="stylesheet" href="/farmStory/css/user/terms.css"/>
</head>

<%@ include file="../layout/_header.jsp" %>

<script>
    document.addEventListener('DOMContentLoaded', function(){
        const btnNext = document.getElementsByClassName('btnNext')[0];
        const check1 = document.getElementsByTagName('input')[0];
        const check2 = document.getElementsByTagName('input')[1];

        btnNext.onclick = function(e){
            if(check1.checked && check2.checked){
                return true;
            } else {
                alert('동의체크를 해야 합니다.');
                return false;
            }
        }
    });
</script>

<main id="user">
    <section class="terms">
        <h2 class="tit">사이트 이용약관</h2>
        <table border="1">
            <tr>
                <td>
                    <textarea name="terms">${dto.terms}</textarea>
                    <label><input type="checkbox" class="terms">&nbsp;동의합니다.</label>
                </td>
            </tr>
        </table>

        <h2 class="tit">개인정보 취급방침</h2>
        <table border="1">
            <tr>
                <td>
                    <textarea name="privacy">${dto.privacy}</textarea>
                    <label><input type="checkbox" class="privacy">&nbsp;동의합니다.</label>
                </td>
            </tr>
        </table>

        <div>
            <a href="/farmStory/user/login.do" class="btn btnCancel">취소</a>
            <a href="/farmStory/user/register.do" class="btn btnNext">다음</a>
        </div>
    </section>
</main>

<%@ include file="../layout/_footer.jsp" %>

<script>
	document.addEventListener('DOMContentLoaded', function(){

		const btnNext = document.getElementsByClassName('btnNext')[0];
		const check1 = document.getElementsByTagName('input')[0];
		const check2 = document.getElementsByTagName('input')[1];

		btnNext.onclick = function(e){
			if(check1.checked && check2.checked){
				return true;
			}else{
				alert('동의체크를 해야 합니다.');
				return false;
			}
		}
	});
</script>

        <div>
            <a href="/farmStory/user/login.do" class="btn btnCancel">취소</a>
            <a href="/farmStory/user/register.do" class="btn btnNext">다음</a>
        </div>

• DOM 로딩 이후 실행되는 클라이언트 유효성 검사
• btnNext(다음 버튼)를 클릭하면 체크박스 2개가 체크되어 있는지 검사함.

<main id="user">
    <section class="terms">
        <h2 class="tit">사이트 이용약관</h2>
        <table border="1">
            <tr>
                <td>
                    <textarea name="terms">${dto.terms}</textarea>
                    <label><input type="checkbox" class="terms">&nbsp;동의합니다.</label>
                </td>
            </tr>
        </table>

• textarea에 서버에서 가져온 dto.terms 텍스트 출력.
• readonly 속성이 없음 → 수정 가능. 사용자 수정 방지하려면 readonly 추가 필요.
• label과 input 묶음으로 체크박스 처리