**홈 화면**

**회원 기능**
- 회원 등록
- 회원 조회

**상품 기능**
- 상품 등록
- 상품 수정
- 상품 조회

**주문 기능**
- 상품 주문
- 주문 내역 조회
- 주문 취소

상품 등록
상품 목록
상품 수정
변경 감지와 병합
상품 주문

1. 홈 화면과 레이아웃

홈 컨트롤러 등록

package jpabook.jpashop.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home(){
        log.info("home controller");
        return "home";
    }
}

스프링 부트 타임리프 기본 설정

spring:
 thymeleaf:
 prefix: classpath:/templates/
 suffix: .html
스프링 부트 타임리프 viewName 매핑

-> resources:templates/ +{ViewName}+ .html

-> resources:templates/home.html

반환한 문자( home )과 스프링부트 설정 prefix , suffix 정보를 사용해서 렌더링할 뷰( html )를 찾는다

참고: https://docs.spring.io/spring-boot/docs/2.1.7.RELEASE/reference/html/commonapplication-properties.html

타임리프 템플릿 등록

home.html

<!DOCTYPE HTML>
<html xmlns:th="<http://www.thymeleaf.org>">
<head th:replace="fragments/header :: header">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div class="jumbotron">
        <h1>HELLO SHOP</h1>
        <p class="lead">회원 기능</p>
        <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
        </p>
        <p class="lead">상품 기능</p>
        <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
        </p>
        <p class="lead">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
            <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

fragments/header.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head th:fragment="header">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="/css/jumbotron-narrow.css" rel="stylesheet">
    <title>Hello, world!</title>
</head>

fragments/bodyHeader.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<div class="header" th:fragment="bodyHeader">
    <ul class="nav nav-pills pull-right">
        <li><a href="/">Home</a></li>
    </ul>
    <a href="/"><h3 class="text-muted">HELLO SHOP</h3></a>
</div>

fragments/footer.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<div class="footer" th:fragment="footer">
    <p>&copy; Hello Shop V2</p>
</div>