🛒 상품 추가기능 2 & Navbar 만들기

EthAnalog·2025년 8월 20일

Controller Java Spring boot Thymeleaf modelattribute navbar

Spring Boot

목록 보기

12/16

✅ 어떤 기능을 만드는 것인가?

/write 폼에서 title, price 입력 → /add로 POST
서버에서 검증 후 DB 저장 (ItemRepository.save)
상단 Navbar를 모든 페이지에 공통 포함

👉 왜 이걸 배워야 하지?

실무의 90%는 폼 입력 → 검증 → 저장 흐름
DTO/엔티티 바인딩(@ModelAttribute)과 공통 UI 재사용은 유지보수 핵심
CRUD, 로그인, 주문 등 기능 확장에 직결되는 패턴

📚 개념 정리

키워드	설명
`@ModelAttribute`	요청 파라미터를 자바 객체에 자동 바인딩
`@PostMapping`	POST 요청 처리 메서드 매핑
`ItemRepository.save()`	JPA로 행 추가/수정
`th:fragment`	재사용할 HTML 블록 정의
`th:replace`	정의된 fragment를 치환해 포함
`templates` vs `static`	템플릿(동적)은 templates에서 `return "뷰명"` / 정적은 static에서 URL 직접 접근

⚙️ 구현 흐름 및 코드

1) 엔티티 & 리포지토리

📄 src/main/java/com/apple/shop/item/Item.java

package com.apple.shop.item;

import jakarta.persistence.*;

@Entity
public class Item {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;
    private Integer price;

    // getter/setter
    public Long getId() { return id; }
    public String getTitle() { return title; }
    public Integer getPrice() { return price; }
    public void setTitle(String title) { this.title = title; }
    public void setPrice(Integer price) { this.price = price; }
}

@Entity : JPA가 테이블과 매핑
@Id @GeneratedValue : 기본키 자동생성
title, price는 컬럼으로 매핑됨(기본 전략)

📄 src/main/java/com/apple/shop/item/ItemRepository.java

package com.apple.shop.item;

import org.springframework.data.jpa.repository.JpaRepository;

public interface ItemRepository extends JpaRepository<Item, Long> {
}

JpaRepository만 상속해도 save, findAll 등 기본 CRUD 제공

2) 컨트롤러: 수동 바인딩 → 자동 바인딩(@ModelAttribute)

📄 src/main/java/com/apple/shop/BasicController.java

package com.apple.shop;

import com.apple.shop.item.Item;
import com.apple.shop.item.ItemRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class BasicController {

    @Autowired
    private ItemRepository itemRepository;

    // 작성 폼
    @GetMapping("/write")
    public String write() {
        return "write"; // templates/write.html
    }

    // (A) 수동 바인딩 예시
    @PostMapping("/add-manual")
    public String addManual(@RequestParam String title,
                            @RequestParam Integer price) {
        if (title == null || title.isBlank() || price == null || price < 0) {
            return "redirect:/write";
        }
        Item item = new Item();
        item.setTitle(title);
        item.setPrice(price);
        itemRepository.save(item);
        return "redirect:/list";
    }

    // (B) @ModelAttribute 자동 바인딩
    @PostMapping("/add")
    public String add(@ModelAttribute Item item) {
        if (item.getTitle() == null || item.getTitle().isBlank()
                || item.getPrice() == null || item.getPrice() < 0) {
            return "redirect:/write";
        }
        itemRepository.save(item);
        return "redirect:/list";
    }

    // 목록 페이지(샘플)
    @GetMapping("/list")
    public String list() {
        return "list"; // templates/list.html
    }
}

return "write": templates/ 기준으로 write.html 렌더
(A) @RequestParam으로 직접 값 꺼내서 Item 채우기
(B) @ModelAttribute Item item으로 자동 바인딩 (폼 name ←→ 필드명 매칭)

📄 src/main/resources/templates/nav.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Nav</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
  <style>
    .nav { display: flex; padding: 10px; align-items: center; font-family: 'Montserrat', sans-serif; }
    .nav a { margin-right: 10px; text-decoration: none; font-weight: 400; letter-spacing: -0.5px; }
    .nav .logo { font-weight: 800; }
    input, button { padding: 8px 13px; margin-top: 5px; border: 1px solid grey; border-radius: 4px; vertical-align: middle; }
    button { background: black; color: white; border: none; }
    input { display: block; }
  </style>
</head>
<body>
<div class="nav" th:fragment="navbar">
  <a class="logo" th:href="@{/}">SpringMall</a>
  <a th:href="@{/list}">List</a>
  <a th:href="@{/write}">Write</a>
</div>
</body>
</html>

th:fragment="navbar": 재사용 블록 정의
글꼴/CSS 포함 → 각 페이지에 치환되어 사용

📄 src/main/resources/templates/write.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>상품 등록</title>
</head>
<body>
  <div th:replace="~{nav.html :: navbar}"></div>

  <h3>상품 등록</h3>
  <form th:action="@{/add}" method="post">
    <input name="title" placeholder="상품명">
    <input name="price" placeholder="가격" type="number" min="0">
    <button type="submit">등록</button>
  </form>
</body>
</html>

th:replace="~{nav.html :: navbar}": div 전체를 Navbar로 치환
th:action="@{/add}": 컨텍스트 경로 고려한 안전한 URL 바인딩

참고

th:insert는 안에 삽입, th:replace는 치환(보통 replace 사용)

fragment는 여러 파일에서 반복 사용 OK

nav.html :: navbar('데이터1')처럼 인자 전달도 가능(필요 시 검색)

📌 사용된 개념 요약

문법/메서드	설명
`@ModelAttribute`	파라미터 → 객체 자동 매핑
`@PostMapping("/add")`	폼 POST 처리
`Repository.save()`	JPA 저장(Insert/Update)
`th:fragment`	공통 UI 블록 정의
`th:replace`	다른 템플릿에서 fragment 치환
`templates/*.html`	`return "뷰명"`으로 렌더링 대상

💡 이런 곳에 활용할 수 있어요

상품/게시글/주문 등록 폼
헤더/푸터/사이드바 공통 레이아웃
다국어/브랜딩 변경 시 한 곳 수정 → 전 페이지 반영

✍️ 개인 정리 및 회고

@ModelAttribute로 보일러플레이트 제거 → 가독성↑
Navbar를 fragment로 빼니 복붙 지옥 탈출, 변경 비용↓

🔑 오늘 배운 핵심 3줄 요약

@ModelAttribute로 폼 데이터를 객체로 자동 바인딩
itemRepository.save(item)로 DB 저장 후 리다이렉트
th:fragment + th:replace로 Navbar 재사용

EthAnalog

이전 포스트

🛒 상품 추가기능 1 (Map 자료형)

다음 포스트