Ch03. 메시지, 국제화 - 웹 애플리케이션에 메시지 적용하기

messages.properties에 화면에 보여줄 메시지 적기

label.item=상품
label.item.id=상품 ID
label.item.itemName=상품명
label.item.price=가격
label.item.quantity=수량
page.items=상품 목록
page.item=상품 상세
page.addItem=상품 등록
page.updateItem=상품 수정
button.save=저장
button.cancel=취소

HTML 수정하기

addForm.html

<div class="py-5 text-center">
    <h2 th:text="#{page.addItem}">상품 등록 폼</h2>
</div>

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
        <input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
    </div>
    <div>
        <label for="price" th:text="#{label.item.price}">가격</label>
        <input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
    </div>
    <div>
        <label for="quantity" th:text="#{label.item.quantity}">수량</label>
        <input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
    </div>

    <hr class="my-4">

    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" type="submit" th:text="#{button.save}">상품 등록</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/message/items}'|"
                    th:text="#{button.cancel}"
                    type="button">취소</button>
        </div>
    </div>
</form>

editForm.html

<div class="py-5 text-center">
    <h2 th:text="#{page.updateItem}">상품 수정 폼</h2>
</div>

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="id" th:text="#{label.item.id}">상품 ID</label>
        <input type="text" id="id" th:field="*{id}" class="form-control" readonly>
    </div>
    <div>
        <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
        <input type="text" id="itemName" th:field="*{itemName}" class="form-control">
    </div>
    <div>
        <label for="price" th:text="#{label.item.price}">가격</label>
        <input type="text" id="price" th:field="*{price}" class="form-control">
    </div>
    <div>
        <label for="quantity" th:text="#{label.item.quantity}">수량</label>
        <input type="text" id="quantity" th:field="*{quantity}" class="form-control">
    </div>

    <hr class="my-4">

    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" type="submit" th:text="#{button.save}">저장</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='item.html'"
                    th:onclick="|location.href='@{/message/items/{itemId}(itemId=${item.id})}'|"
                    th:text="#{button.cancel}"
                    type="button">취소</button>
        </div>
    </div>

</form>

item.html

<div class="py-5 text-center">
    <h2 th:text="#{page.item}">상품 상세</h2>
</div>

<!-- 추가 -->
<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>

<div>
    <label for="itemId" th:text="#{label.item.id}">상품 ID</label>
    <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly>
</div>
<div>
    <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
    <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}" readonly>
</div>
<div>
    <label for="price" th:text="#{label.item.price}">가격</label>
    <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}" readonly>
</div>
<div>
    <label for="quantity" th:text="#{label.item.quantity}">수량</label>
    <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}" readonly>
</div>

<hr class="my-4">

<div class="row">
    <div class="col">
        <button class="w-100 btn btn-primary btn-lg"
                onclick="location.href='editForm.html'"
                th:onclick="|location.href='@{/message/items/{itemId}/edit(itemId=${item.id})}'|"
                th:text="#{page.updateItem}"
                type="button">상품 수정</button>
    </div>
    <div class="col">
        <button class="w-100 btn btn-secondary btn-lg"
                onclick="location.href='items.html'"
                th:onclick="|location.href='@{/message/items}'|"
                th:text="#{page.items}"
                type="button">목록으로</button>
    </div>
</div>

items.html

<div class="py-5 text-center">
    <h2 th:text="#{page.items}">상품 목록</h2>
</div>

<div class="row">
    <div class="col">
        <button class="btn btn-primary float-end"
                onclick="location.href='addForm.html'"
                th:onclick="|location.href='@{/message/items/add}'|"
                th:text="#{page.addItem}"
                type="button">상품 등록</button>
    </div>
</div>

<hr class="my-4">
<div>
    <table class="table">
        <thead>
        <tr>
            <th th:text="#{label.item.id}">ID</th>
            <th th:text="#{label.item.itemName}">상품명</th>
            <th th:text="#{label.item.price}">가격</th>
            <th th:text="#{label.item.quantity}">수량</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${items}">
            <td><a href="item.html" th:href="@{/message/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
            <td><a href="item.html" th:href="@{|/message/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
            <td th:text="${item.price}">10000</td>
            <td th:text="${item.quantity}">10</td>
        </tr>
        </tbody>
    </table>
</div>

• 타임리프의 메시지 표현식 #{...}를 사용하면 스프링의 메시지를 편리하게 조회할 수 있다.
• 참고
  • 파라미터는 다음과 같이 사용할 수 있다.
  • hello.name=안녕 {0}