• 상품 상세 화면에서 상품을 바로 주문하는 기능을 구현하였습니다.

📜OrderService

    /**
     * 단일 주문
     */
    public Long order(Long memberId, Long itemId, int count) {

        List<OrderItem> orderItemList = new ArrayList<>();
        Item findItem = itemRepository.findById(itemId).orElseGet(() -> null);
        Member findMember = memberRepository.findById(memberId).orElseGet(() -> null);
        int orderPrice = findItem.getPrice() * count;

        OrderItem orderItem = OrderItem.createOrderItem(count, orderPrice, findItem);
        orderItemList.add(orderItem);
        Order order = Order.createOrder(findMember, orderItemList);

        Order save = orderRepository.save(order);
        return save.getId();

    }

//OrderItem 클래스 
public static OrderItem createOrderItem(int count, int orderPrice, Item item) {
        item.minStock(count);
        return new OrderItem(count, orderPrice, item);
    }

    //Item 클래스 
      //주문시 상품 재고 감소
    public void minStock(int quantity) {
        int restQuantity = stockQuantity - quantity;
        if (restQuantity < 0) {
            throw new NotEnoughStockException("상품 재고가 부족합니다!!");
        }
        stockQuantity = restQuantity;
    }

    //Order 클래스
    public static Order createOrder(Member member, List<OrderItem> orderItems) {  //List<OrderItem> list??
        Order order = new Order(member);
        for (OrderItem orderItem : orderItems) {
            order.addOrderItem(orderItem);
        }
        return order;
    }

      //==연관 관계 메서드==//
    public void addOrderItem(OrderItem orderItem) {
        orderItems.add(orderItem);
        orderItem.changeOrder(this);
    }

• 파라미터로 넘어온 memberId, itemId, count를 이용해 주문 상품(OrderItem), 주문(order) 객체를 생성하고 OrderRepository에 저장하는 서비스 로직입니다.
• 주문시 상품 재고를 빼기 위해 OrderItem객체를 생성할 때 상품의 재고를 마이너스(minStock)하도록 하였습니다.
• 만약 상품 재고가 부족하면 NotEnoughStockException을 예외로 던져주도록 하였습니다.

📜OrderController

    /**
     * 단일 상품 바로 주문
     */
    @PostMapping("/order")
    public ResponseEntity<String> order(@ModelAttribute CartForm cartForm, HttpServletRequest request) {

        //CartController 에 작성해둔 세션 정보 조회하는 기능 공용으로 사용 
        Member member = CartController.getMember(request);

        if (member == null) {
            return new ResponseEntity<String>("로그인이 필요한 서비스입니다.", HttpStatus.UNAUTHORIZED);
        }

        try {
            orderService.order(member.getId(), cartForm.getItemId(), cartForm.getCount());
        } catch (NotEnoughStockException e) {
            return new ResponseEntity<String>(e.getMessage(), HttpStatus.BAD_REQUEST);
        }

        return ResponseEntity.ok("order Success");
    }

@Getter
@Setter
public class CartForm {

    private Long itemId;
    private int count;
}

• 세션 정보를 조회해서 세션에 사용자가 존재하지 않으면 UNAUTHORIZED(401) 에러
• 상품 재고가 부족하면 BAD_REQUEST(400) 에러로 처리하였습니다.

📜itemView.html

• 상품 상세 페이지
• GITHUB

  <!-- 단일 상품 바로 주문 -->
    function order() {
  
  

    var itemId = $("#id").val();
    var count = $("#count").val();
    var cartForm = {
        itemId : itemId,
        count : count
    };

    $.ajax({
        url: "/order",
        data: cartForm,
        type: 'POST',
        success: function(result) {
            alert("상품 주문이 완료되었습니다.");
            location.href = "/";
        },

        error: function (jqXHR, textStatus, errorThrown) {
            if (jqXHR.status === 401) {
                alert(jqXHR.responseText);
                location.href="/members"
            }
            else {
                alert(jqXHR.responseText);
            }
        }
    })
}

- ajax를 활용해 상품 아이디와 상품 주문 수량을 cartForm에 매핑하여 컨트롤러에 전달해주었습니다. 
- 401에러(UNAUTHORIZED)가 발생할 시 로그인 화면으로 이동하도록 하고 
- 그 밖에 에러(상품 재고 부족으로 인한 에러)를 따로 처리하였습니다. 

<br>

## 📜결과 및 실행 화면 

- 데이터베이스 
![](https://velog.velcdn.com/images/woomin_s/post/37514c34-31ef-4ffa-aa80-7c83ea147223/image.png)


![](https://velog.velcdn.com/images/woomin_s/post/add4cb6d-2ae2-4d43-9ab0-7d6a7b8a2999/image.gif)

• 프로젝션 대상이 하나인 경우 타입을 명확하게 지정 가능합니다.
• 그러나 프로젝션 대상이 둘 이상인 경우에는 타입을 DTO나 Tuple로 지정해야 합니다.
• DTO로 조회하는 법을 설명드립니다.

📝순수 JPA에서 DTO 조회

• 쇼핑몰 프로젝트 진행 중에 순수 JPA에서 DTO를 조회하는 방법을 사용하였습니다.
• [DTO 조회] (https://velog.io/@woomin_s/%EC%9E%A5%EB%B0%94%EA%B5%AC%EB%8B%88-%EC%A1%B0%ED%9A%8C#cartqueryrepository)

1. Setter - (프로퍼티) 접근으로 DTO 조회

     public void findDtoBySetter() {  //프로퍼티(setter) 접근
        List<MemberDto> result = queryFactory
                .select(Projections.bean(MemberDto.class,
                        member.username,
                        member.age))
                .from(member)
                .fetch();
    }

2. 필드 직접 접근

    public void findDtoByField() {  //필드 직접 접근
        List<MemberDto> result = queryFactory
                .select(Projections.fields(MemberDto.class,
                        member.username,
                        member.age))
                .from(member)
                .fetch();
    }

3. 생성자 접근

     @Test
    public void findDtoByConstructor() {  //생성자 사용
        List<MemberDto> result = queryFactory
                .select(Projections.constructor(MemberDto.class,
                        member.username,
                        member.age))
                .from(member)
                .fetch();
    }

4. @QueryProjection 이용 접근

    public void findDtoByQueryProjection() {
        List<MemberDto> result = queryFactory
                .select(new QMemberDto(member.username, member.age))
                .from(member)
                .fetch();
    }

@Data
@NoArgsConstructor
public class MemberDto {

    private String username;
    private int age;

    @QueryProjection
    public MemberDto(String username, int age) {
        this.username = username;
        this.age = age;
    }
}

📝3, 4번 방법 장, 단점

• 3번과 4번은 둘 다 생성자를 사용한 방법으로서 객체 생성 시점에 값들을 한 번에 할당하기 때문에, 객체의 불변성을 유지하는 장점이 있습니다.
• 생성자의 인자가 잘못된 경우에 3번 방법의 경우 최악의 오류인 Runtime 오류가 발생하게 됩니다.
• 반면 4번 방법의 경우 Compile 오류가 발생합니다. Compile 시점에 오류가 발생하는 것이 가장 안전한 방법입니다.
• 4번 방법이 제일인것 같지만 DTO(MemberDto)에 @QueryProjection 어노테이션을 사용함으로써 DTO가 QueryDSl에 대한 의존성을 가지게 된다는 단점이 있습니다.
• 실무에서 사용할 경우 회사에서 지향하는 스타일을 사용하는 것이 현명하다고 생각합니다.

• Spring Data Jpa를 배우고 공부하던 도중에 주의할 점이 있어 기록하려고 합니다.

📝Member

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@ToString(of = {"id", "username", "age"})  //team 은 출력 X!!! 연관 관계에 의한 무한 루프 발생
public class Member {

    @Id @GeneratedValue
    @Column(name = "member_id")
    private Long id;
    private String username;
    private int age;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "team_id")
    private Team team;


    public Member(String userName, int age) {
        this.username = userName;
        this.age = age;
    }

    public Member(String userName, int age, Team team) {
        this.username = userName;
        this.age = age;
        if (team != null) {
            changeTeam(team);
        }
    }

    //== 연관 관계 편의 메서드 ==//
    public void changeTeam(Team team) {
        this.team = team;
        team.getMemberList().add(this);
    }
}

📝벌크 수정 쿼리(MemberRepository)

     @Modifying
    @Query("update Member m set m.age = m.age + 1 where m.age >= :age")
    int bulkAgePlus(@Param("age") int age);

• bulkAgePlus Query : 파라미터로 받은 나이이거나 그 나이 이상이면 한 살을 더해주도록 하였습니다.

📝MemberRepositoryTest

     @Test
    public void bulkUpdate() {
        //given
        memberRepository.save(new Member("member1", 10));
        memberRepository.save(new Member("member2", 19));
        memberRepository.save(new Member("member3", 20));
        memberRepository.save(new Member("member4", 21));
        memberRepository.save(new Member("member5", 50));

        //when
        int resultCount = memberRepository.bulkAgePlus(20);   //벌크 연산 실행 직전 flush() 자동 호출

        Member findMember = memberRepository.findByUsername("member5").orElseGet(() -> null);
        System.out.println(findMember);

        //then
        assertThat(resultCount).isEqualTo(3);
    }

• 'member5'로 예를 들겠습니다.
• 처음에 member5의 age가 51로 예상했습니다.

1. memberRepositoy.save (em.persist)로 영속성 컨텍스트에 member5가 저장

   	영속성 컨텍스트	데이터베이스
   username	member5
   age	50

2. memberRepository.bulkAgePlus(20)(JPQL) 실행 전 flush() 자동 호출

   	영속성 컨텍스트	데이터베이스
   username	member5	member5
   age	50	50

3. memberRepository.bulkAgePlus(20) 실행 후

   	영속성 컨텍스트	데이터베이스
   username	member5	member5
   age	50	51

4. memberRepository.findByUsername("member5").orElseGet(() -> null);

   • 데이터 베이스에서 값을 가져오기 때문에 51로 예상하였습니다.
   • 하지만 결과는 50이었습니다.
   
   

WHY?

• em.find()나 지연로딩을 조회할 때는 영속성 컨텍스트(1차 캐시)에서 엔티티를 찾아옵니다.
• 반면 위의 bulkAgePlus나 findByUsername같은 JPQL은 항상 SQL로 번역되어서 데이터베이스를 통해 실행됩니다.
• 따라서 데이터베이스에서 username="member5"인 member 데이터를 조회합니다.
• 하지만 이때 1차 캐시에 이미 username="member5"가 있기 때문에 식별자 충돌이 일어나게 됩니다.
• JPA는 영속성 컨텍스트의 동일성을 보장하기 때문에 1차 캐시에 있는 값을 반환하게 됩니다.
• 그렇기 때문에 결과는 50이 나오게 됩니다.

해결방안

방법1.

     @Test
    public void bulkUpdate() {
        //given
        memberRepository.save(new Member("member1", 10));
        memberRepository.save(new Member("member2", 19));
        memberRepository.save(new Member("member3", 20));
        memberRepository.save(new Member("member4", 21));
        memberRepository.save(new Member("member5", 50));

        //when
        int resultCount = memberRepository.bulkAgePlus(20);   //벌크 연산 실행 직전 flush() 자동 호출
        em.clear();

        Member findMember = memberRepository.findByUsername("member5").orElseGet(() -> null);
        System.out.println(findMember);

        //then
        assertThat(resultCount).isEqualTo(3);
    }

방법2.

      @Modifying(clearAutomatically = true)
    @Query("update Member m set m.age = m.age + 1 where m.age >= :age")
    int bulkAgePlus(@Param("age") int age);

• EntityManager(em).clear를 통해 영속성 컨텍스트를 비워주는 작업을 진행합니다.
• 그렇게되면 데이터베이스의 결과값이 바로 반환되기 때문에 결과값은 51이 됩니다!
• Member(id=5, username=member5, age=51)

cartQueryDto

@Getter
@Setter
public class CartQueryDto {

    private Long cartItemId;
    private String itemName;  //상품명
    private int count;  //수량
    private int price; //상품 가격

    public CartQueryDto(Long cartItemId, String itemName, int count, int price) {
        this.cartItemId = cartItemId;
        this.itemName = itemName;
        this.count = count;
        this.price = price;
    }
}

• CartQueryDto 클래스는 장바구니 조회에 쓰일 DTO입니다.

CartQueryRepository

@Repository
@RequiredArgsConstructor
public class CartQueryRepository {

    private final EntityManager em;

     public List<CartQueryDto> findCartQueryDtos(Long cartId) {
        List<CartQueryDto> cartQueryDtoList = em.createQuery(
                        "select new com.toyproject.ecommerce.repository.query.CartQueryDto(ci.id, i.name, ci.count, i.price, im.storeName)" +
                                " from CartItem ci" +
                                " join ci.item i" +
                                " join i.itemImageList im" +
                                " where ci.cart.id = :cartId and" +
                                " im.firstImage='Y'", CartQueryDto.class)
                .setParameter("cartId", cartId)
                .getResultList();

        return cartQueryDtoList;
    }
}

• 각 사용자의 장바구니 목록을 조회하는 Repository입니다.
• DTO를 직접 조회하는 방식을 선택하였습니다.
• DTO를 직접 조회하는 방식은 말 그대로 엔티티를 조회하는 것이 아닌 DB를 조회해서 DTO의 필드에 값을 채워주는 방식입니다.
• 따라서 데이터를 선택적으로 조회 가능하다는 장점이 있습니다.
• DTO를 직접 조회하는 방식은 엔티티 조회가 아니기 때문에 영속성 컨텍스트에 데이터가 들어가지 않습니다!!
• 묵시적 조인 조심하기!!
• 상품 이미지를 출력하기 위해 itemImage 테이블에 firstImage 필드(대표 이미지 추가 여부)를 추가했습니다.

CartQueryRepository를 따로 만든 이유

• CartItemRepository에 쿼리를 작성하지 않고 CartQueryRepository를 따로 만들고 쿼리를 작성하였습니다.
• CartItemRepository는 cartItem 엔티티를 조회하는 용도(핵심 비지니스)로만 사용하고 엔티티가 아닌 특정 화면을 조회하는 쿼리(장바구니 조회하는 쿼리 등), API 쿼리는 CartQueryRepository로 따로 작성하였습니다.
• 관심사의 분리 -> 단일 책임 원칙(SRP, Single Reponsibility Principle)

CartService

     @Transactional(readOnly = true)
    public List<CartQueryDto> findCartItems(Long memberId) {
        Cart cart = cartRepository.findByMemberId(memberId).orElseThrow(EntityNotFoundException::new);  // () -> new EntityNotFoundException()
        List<CartQueryDto> cartQueryDtos = cartQueryRepository.findCartQueryDtos(cart.getId());
        return cartQueryDtos;
    }

• 회원의 장바구니 상품을 조회하는 서비스 로직입니다.

CartController

     @GetMapping("/cart")
    public String cartView(Model model, HttpServletRequest request) {

        Member member = getMember(request);

        List<CartQueryDto> cartItemListForm = cartService.findCartItems(member.getId());
        model.addAttribute("cartItemListForm", cartItemListForm);

        return "cart/cartView";
    }

    private Member getMember(HttpServletRequest request) {

        HttpSession session = request.getSession(false);

        //비로그인 사용자
        if (session == null || session.getAttribute(SessionConst.LOGIN_MEMBER) == null) {
            return null;
        }

        //세션에 저장되어있는 회원정보 가져오기
        Member member = (Member) session.getAttribute(SessionConst.LOGIN_MEMBER);
        return member;
    }

• 세션을 조회해서 현재 세션에 저장되어있는 회원을 찾아서 서비스를 호출합니다.
• 장바구니 페이지(cartView)로 이동!

📝장바구니 페이지 뷰

• GitHub
• 모델을 통해 전달된 장바구니에 담긴 상품정보를 화면에 출력해주는 작업을 진행하였습니다.
• 체크박스 속성을 설정해주고, Onchange을 이용하여 체크가 된 상품의 개수가 바뀌면 자동으로 계산되는 로직을 구현하였습니다.

참고

체크박스 값 변화 감지 https://www.codingfactory.net/13044 https://carina16.tistory.com/143

다중 체크 값 https://doinge-coding.tistory.com/entry/jquery-check-box-%EB%8B%A4%EC%A4%91-%EC%B2%B4%ED%81%AC%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%AC%ED%8A%B8-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-%EC%B2%B4%ED%81%AC%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

@Repository
@RequiredArgsConstructor
public class CartQueryRepository {

    private final EntityManager em;

    public List<CartQueryDto> findCartQueryDtos(Long cartId) {
        List<CartQueryDto> cartQueryDtoList = em.createQuery(
                        "select new com.toyproject.ecommerce.repository.query.CartQueryDto(ci.id, i.name, ci.count, i.price)" +
                                " from CartItem ci" +
                                " join ci.item i" +
                                " where ci.cart.id = :cartId", CartQueryDto.class)
                .setParameter("cartId", cartId)
                .getResultList();

        return cartQueryDtoList;
    }
}

실제 진행한 프로젝트 예제를 가지고 상태 필드, 묵시적 조인, 명시적 조인을 설명드립니다.

상태필드

• 경로 탐색의 끝으로 더 이상 탐색을 할 수 없습니다.
• 위의 예제에서는 ci.id, i.name, ci.count, i.price 가 모두 상태필드입니다.

명시적 조인

• 위의 예제와 같이 FROM절에서 명시적 조인(join ci.item i)을 통해 별칭을 얻고
• select 절에서 별칭을 통해 i.name, i.price를 탐색하고 있습니다.

묵시적 조인

    public List<CartQueryDto> findCartQueryDtos(Long cartId) {
        List<CartQueryDto> cartQueryDtoList = em.createQuery(
                        "select new com.toyproject.ecommerce.repository.query.CartQueryDto(ci.id, ci.item.name, ci.count, ci.item.price)" +
                                " from CartItem ci" +
                                " where ci.cart.id = :cartId", CartQueryDto.class)
                .setParameter("cartId", cartId)
                .getResultList();

• 위의 예제는 묵시적 조인이 발생하는 예입니다.
• ci.item.name, ci.item.price 에서 묵시적 내부 조인(inner) 조인이 발생합니다.
• 객체는 ci.item과 같이 접근이 가능하지만 데이터베이스의 경우에는 조인을 해야합니다.
• 그렇게 때문에 만일의 경우 의도하지 않은 JOIN이 발생하고 튜닝, 운영이 아주 힘들게 됩니다.

TIP

• 묵시적 내부 조인이 발생하지 않게 명시적 조인을 사용하기!!
• JPQL과 SQL를 비슷하게 짜기!!

📝1. @RequestParam

• @RequestParam은 요청 파라미터나 Form으로 넘어온 데이터를 조회하는데 사용됩니다.

  <!-- 장바구니 상품 삭제 -->
  <script>
    function deleteCartItem(itemId) {
  
        var cartItemForm = {
            cartItemId : itemId
        };
  
        $.ajax({
            url: "/cart",
            type: 'DELETE',
            data: cartItemForm,
  
            <!-- 성공시 -->
            success: function (result) {
                alert("선택하신 상품이 삭제되었습니다.");
                location.href="/cart"
            },
            <!-- 실패시 -->
            error: function (jqXHR) {
                alert(jqXHR.responseText);
                location.href = "/cart";
            }
        })
    }
  </script>

  
  

    //Controller
     @DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@RequestParam Long cartItemId) {

        log.info("itemId={}", cartItemId);

        if (cartService.findCartItem(cartItemId) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }

        cartService.deleteCartItem(cartItemId);
        return ResponseEntity.ok("success");
    }

• ajax는 'itemId'를 data에 매핑해서 controller로 보냅니다.
• Controller의 @RequestParam을 이용하여 ajax에서 넘어온 'itemId'를 받을 수 있습니다.
• ajax의 URL에 'itemId'를 파라미터로 추가해서 전송해도 되지만 특수문자가 들어올 경우를 대비해 data로 보내는 것이 맞다 생각합니다.

📝2. @ModelAttribute

• @ModelAttribute도 @RequestParam과 동일하게 요청 파라미터나 Form으로 넘어온 데이터를 조회하는데 사용됩니다.
• Ajax 부분은 1번 방법과 동일합니다.

    //Controller
     @DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@ModelAttribute cartItemForm form) {

        log.info("itemId={}", form.getCartItemId());

        if (cartService.findCartItem(form.getCartItemId()) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }

        cartService.deleteCartItem(form.getCartItemId());
        return ResponseEntity.ok("success");
    }

@Getter
@Setter
public class cartItemForm {

    private Long cartItemId;

}

• @ModelAttribute는 바로 객체로 받을 수 있습니다.

📝3. @RequestBody

• @RequestBody의 경우 위의 @RequestParam, @ModelAttribute와 같이 요청 파라미터를 조회하는 것과는 상관이 없습니다,

• @RequestBody는 메세지 바디를 직접 조회하는 기능입니다. 즉, Json 데이터를 조회할 수 있습니다.

   <!-- 장바구니 상품 삭제 -->
   <script>
    function deleteCartItem(itemId) {
  
        var cartItemForm = {
            cartItemId : itemId
        };
  
        $.ajax({
            url: "/cart",
            type: 'DELETE',
            data: JSON.stringify(cartItemForm),
            contentType: 'application/json',
  
            <!-- 성공시 -->
            success: function (result) {
                alert("선택하신 상품이 삭제되었습니다.");
                location.href="/cart"
            },
            <!-- 실패시 -->
            error: function (jqXHR) {
                alert(jqXHR.responseText);
                location.href = "/cart";
            }
        })
    }
  </script>

• data를 Json으로 변환하여 Controller로 보내줍니다.

    //Controller
    @DeleteMapping("/cart")
    public ResponseEntity<String> deleteCartItem(@RequestBody cartItemForm form) {
  
        log.info("itemId={}", form.getCartItemId());
  
        if (cartService.findCartItem(form.getCartItemId()) == null) {
            return new ResponseEntity<String>("다시 시도해주세요.", HttpStatus.NOT_FOUND);
        }
  
        cartService.deleteCartItem(form.getCartItemId());
        return ResponseEntity.ok("success");
    }

  

• JSON으로 넘어오는 데이터를 @RequestBody로 성공적으로 받았습니다.

• @RequestBody 요청 흐름 : Ajax -> JSON -> HTTP 메세지 컨버터 -> 객체(CartItemForm)

<!-- Product section-->
<section class="py-5">
    <div class="container px-4 px-lg-5 my-5" th:object="${item}">
        <div class="row gx-4 gx-lg-5 align-items-center" >
            <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" th:src="|/images/${item.getItemImageListDto().get(0).getStoreName()}|" alt="..." /></div>
            <div class="col-md-6">
                <h1 class="display-5 fw-bolder" th:text="${item.getName()}">Shop item template</h1>
                <input type="hidden" th:value="${item.itemId}" id="id" name="id">
                <div class="fs-5 mb-5">
                    <input type="hidden" th:value="${item.price}" id="price" name="price">
                    <span class="text-decoration-none" th:text="${item.getPrice()}"></span>원
                </div>
                <hr class="my-4">


                <div class="input-group fs-5 mb-5">
                    <div class="input-group-prepend">
                        <input type="hidden" th:value="${item.stockQuantity}" id="stockQuantity" name="stockQuantity">
                        <span class="input-group-text">주문 수량</span>
                    </div>
                    <input class="form-control text-center me-3" id="count" name="count" type="number" value="1" style=" max-width: 5rem" />
                </div>


                <div class="container bg-light">
                    <h6>총 상품 금액</h6>
                    <h4 name="totalPrice" id="totalPrice" class="font-weight-bold" ></h4>
                </div>
                <br>

                <div class="d-flex">
                    <form th:action="@{/logout}" class="d-flex" method="post">
                        <button class="btn btn-outline-dark"
                                type="submit">
                            바로 구매하기
                        </button>
                    </form>
                    &nbsp
                    <button class="btn btn-outline-dark flex-shrink-0" type="button" th:onclick="addCart()">
                        <i class="bi-cart-fill me-1"></i>
                        장바구니 담기
                    </button>
                </div>
            </div>
        </div>

    </div>
</section>


<script th:inline="javascript">

    <!-- 장바구니 담기 -->
    function addCart() {

        var count = $("#count").val();
        var itemId = $("#id").val();
        var cartForm = {
            itemId : itemId,
            count : count
        };

       $.ajax({
           url: "/cart",
           data: cartForm,
           type: 'POST',
           success: function(result) {
               alert("상품을 담았습니다.");
               location.href = "/";
           },

           error: function (jqXHR, textStatus, errorThrown) {
               alert(jqXHR.responseText);
               location.href="/members"
           }
       })
    }
</script>

• 장바구니 담기 버튼을 클릭하면 addCart 함수가 호출됩니다.
• addCart() : $("#count").val()를 사용하여 구매자가 선택한 수량을 변수에 저장하고, $("#id").val()로 상품 아이디를 변수에 저장한 후 cartForm에 매치하였습니다.
• 서버와의 통신은 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식인 Ajax를 이용하였습니다.

📝Controller

 //장바구니 담기
    @PostMapping("/cart")
    public ResponseEntity<String> addCart(@ModelAttribute CartForm cartForm, HttpServletRequest request) {

        Member member = getMember(request);
        //비로그인 회원은 장바구니를 가질 수 없다.
        if (member == null) {
            return new ResponseEntity<String>("로그인이 필요합니다.", HttpStatus.BAD_REQUEST);
        }

        cartService.addCart(member.getId(), cartForm.getItemId(), cartForm.getCount());
        return ResponseEntity.ok("success");
    }


        private Member getMember(HttpServletRequest request) {

        //세션 가져오기 
        HttpSession session = request.getSession(false);

        //비로그인 사용자
        if (session == null || session.getAttribute(SessionConst.LOGIN_MEMBER) == null) {
            return null;
        }

        //세션에 저장되어있는 회원정보 가져오기
        Member member = (Member) session.getAttribute(SessionConst.LOGIN_MEMBER);
        return member;
    }

• 비로그인 회원은 장바구니를 가질 수 없도록 구현하였습니다.
• 세션을 조회해서 회원 정보를 얻어와서 회원이 없으면 400 bad request로 응답하고, 회원 정보가 있으면 장바구니 담기 서비스를 호출합니다.

cartForm

@Getter
@Setter
public class CartForm {

    private Long itemId;
    private int count;
}

📝cartService

     /**
     * 장바구니 담기(추가)
     */
    public Long addCart(Long memberId, Long itemId, int count) {

        //엔티티 조회
        Member member = memberRepository.findById(memberId).get();
        Cart cart = cartRepository.findByMemberId(memberId).orElse(null);
        Item item = itemRepository.findById(itemId).get();

        //장바구니 없으면 생성
        if (cart == null) {
            log.info("장바구니 신규 생성");
            cart = Cart.createCart(member);
            cartRepository.save(cart);
        }

        //장바구니안에 장바구니 상품 조회
        CartItem cartItem = cartItemRepository.findByCartIdAndItemId(cart.getId(), item.getId()).orElse(null);



        //장바구니 상품이 없으면 생성
        if (cartItem == null) {
            cartItem = CartItem.createCartItem(count, cart, item);
            CartItem savedCartItem = cartItemRepository.save(cartItem);
            log.info("cartItemId={}", cartItem.getId());
            return savedCartItem.getId();
        }

        //장바구니 상품이 존재하면 수량 변경 (Dirty checking)
        cartItem.changeCount(count);
        return cartItem.getId();

    }

• 조회한 회원이 장바구니를 가지고 있지 않으면 새로 생성합니다.
• 장바구니 상품이 없으면 새로 생성하고 이미 존재한다면 수량만 변경해주도록 하였습니다.

📝결과화면

장바구니 담기 성공시

장바구니 담기 실패(비로그인 회원)

• 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나로 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식입니다.
• 비동기식 : 여러가지 일이 동시적으로 발생한다는 뜻, 서버와 통신하는 동안 다른 작업을 할 수 있습니다.
• Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에서만 표시 가능합니다.

📝장점

• Ajax를 사용해서 서버와 데이터를 주고 받게 되면 서버에 보낼 필요한 핵심 데이터만 전송하기 때문에 새로고침 등 화면 깜빡임이 없고, 서버에 부담이 덜해 속도문제를 해결할 수 있습니다.

📝Jquery를 이용한 Ajax

• XMLHttpRequest를 직접 사용 하기 때문에, Ajax의 기본 method를 이용해서 서버와 통신을 하면 상당히 복잡합니다.
• Jquery를 사용하면 단 몇 줄 만으로 간단하게 server와 Data를 주고받을 수 있습니다.

📝사용법

• 예제

  $.ajax({
           url: "/cart",
           data: cartForm,
           type: 'POST',
           success: function(result) {
               alert("상품을 담았습니다.");
               location.href = "/";
           },
  
           error: function (jqXHR, textStatus, errorThrown) {
               alert(jqXHR.responseText);
               location.href="/members"
           }
       })

  key	설명
  url	데이터를 주고받을 url
  data	보내는 데이터
  type	데이터 전송 타입, HTTP 요청 방식(GET, POST)
  dataType	Http 요청 후 return 하는 데이터의 Type을 지정(xml, Json ...)
  success	Http 요청 성공시 발생하는 이벤트 핸들러
  error	Http 요청 실패시 발생하는 이벤트 핸들러

• error키 영역에 3가지 파라미터(jqXHR, textStatus, errorThrown)을 사용가능합니다.
• textStatus의 경우 'error'가 출력되고, errorThrown의 경우 'Not Fount' 등의 구체적인 HTTP 오류 메세지가 출력 됩니다. jqXHR.responseText의 경우 서버측에서 보낸 메세지가 출력됩니다.

📝참고

• https://www.tcpschool.com/ajax/ajax_intro_basic
• https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=afidev&logNo=20184722536
• https://api.jquery.com/jquery.ajax/
• https://www.nextree.co.kr/p4771/

• 상품 상세 페이지는 Bootstrap의 쇼핑몰 무료 템플릿을 참고하였습니다.

ItemController

     /**
     * 상품 상세 조회
     */
    @GetMapping("items/{itemId}")
    public String itemView(@PathVariable(name = "itemId") Long itemId, Model model) {
        Item item = itemService.findItem(itemId);
        List<ItemImage> itemImageList = itemImageService.findItemImageDetail(itemId, "N");

        //엔티티 -> DTO
        List<ItemImageDto> itemImageDtoList = itemImageList.stream()
                .map(ItemImageDto::new)
                .collect(Collectors.toList());

        ItemForm itemform = new ItemForm(
                item.getId(),
                item.getName(),
                item.getPrice(),
                item.getStockQuantity(),
                item.getDescription(),
                itemImageDtoList
        );

        model.addAttribute("item", itemform);

        return "item/itemView";

    }

• 메인 페이지의 View Option을 클릭하면 상세화면으로 이동합니다.
• 메인 페이지에서 넘어오는 itemId를 이용하여 상품 정보와 상품 이미지를 데이터베이스에서 가져옵니다.
• itemImageService.findItemImageDetail(itemId, "N"); : 삭제 처리된 이미지는 화면에 반환하면 안되기 때문에 삭제 처리되지 않은 이미지들만 가져오도록 하였습니다.
• 엔티티를 View에 반환하지 않기 위해 DTO로 변환해주고 View에 전달하였습니다.

  @Getter
  @Setter
  @NoArgsConstructor
  @AllArgsConstructor
  public class ItemForm {
  
  

private Long itemId;
@NotEmpty(message = "상품 이름은 필수입니다.")
private String name;  //상품명
@NotNull(message = "상품 가격은 필수입니다.")
private int price; //상품 가격
@NotNull(message = "상품 재고 수량은 필수입니다.")
private int stockQuantity;  //재고 수량
private String description;  //상품 설명

//상품 수정, 장바구니,상품 상세에 사용
private List<ItemImageDto> itemImageListDto = new ArrayList<>();

public ItemServiceDTO toServiceDTO() {
    return ItemServiceDTO.builder()
            .id(itemId)
            .name(name)
            .price(price)
            .stockQuantity(stockQuantity)
            .description(description)
            .build();
}

}

<br>

---

### 상품 상세 페이지

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Shop item template

원

---

            <div class="input-group fs-5 mb-5">
                <div class="input-group-prepend">
                    <input type="hidden" th:value="${item.stockQuantity}" id="stockQuantity" name="stockQuantity">
                    <span class="input-group-text">주문 수량</span>
                </div>
                <input class="form-control text-center me-3" id="count" name="count" type="number" value="1" style=" max-width: 5rem" />
            </div>


            <div class="container bg-light">
                <h6>총 상품 금액</h6>
                <h4 name="totalPrice" id="totalPrice" class="font-weight-bold" ></h4>
            </div>
            <br>

            <div class="d-flex">
                <form th:action="@{/logout}" class="d-flex" method="post">
                    <button class="btn btn-outline-dark"
                            type="submit">
                        바로 구매하기
                    </button>
                </form>
                &nbsp
                <button class="btn btn-outline-dark flex-shrink-0" type="button">
                    <i class="bi-cart-fill me-1"></i>
                    장바구니 담기
                </button>
            </div>
        </div>
    </div>

</div>

Lorem ipsum dolor sit amet consectetur adipisicing?

---

결과 화면

📝참고

https://startbootstrap.com/template/shop-item

메인 페이지는 부트 스트랩의 무료 쇼핑몰 템플릿을 참고하였습니다!

HomeController

@Controller
@Slf4j
@RequiredArgsConstructor
public class HomeController {

    private final ItemService itemService;
    private final ItemImageService itemImageService;
    private final FileHandler fileHandler;

    @GetMapping("/")
    public String home(Model model, HttpServletRequest request) {
        List<Item> items = itemService.findItems();
           model.addAttribute("items", items);

        HttpSession session = request.getSession(false);

        //비로그인 사용자
        if (session == null || session.getAttribute(SessionConst.LOGIN_MEMBER) == null) {
            log.info("home controller");
            return "home";
        }

        //로그인된 사용자
        log.info("userHome Controller");
        return "userHome";

    }

• 로그인 기능구현 에서 로그인에 성공하면 세션을 생성하고 세션에 회원정보를 보관하였습니다.
• HomeController에서는 세션을 확인해서 세션이 없으면 비로그인 유저 페이지로 이동하고 세션이 생성되어있으면 로그인 유저 홈으로 이동합니다.

비로그인 유저 메인 페이지

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Roominis</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
</head>
<body>

<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" th:href="@{/}">Roominis</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
            </ul>

            <form th:action="@{/members}" class="d-flex">
                <button class="btn btn-outline-secondary"
                        type="submit">
                    로그인
                </button>
            </form>
            &nbsp;
              <form th:action="@{/members/new}" class="d-flex">
                <button class="btn btn-outline-secondary" type="submit">
                    회원가입
                </button>
            </form>

        </div>
    </div>
</nav>
<!-- Header-->
<header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
            <h1 class="display-4 fw-bolder">Roominis</h1>
            <p class="lead fw-normal text-white-50 mb-0">루미니스 쇼핑몰에 오신것을 환영합니다</p>
        </div>
    </div>
</header>
<!-- Section-->
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">

            <!-- 아무 상품도 등록하지 않았을 경우 -->
            <div th:if="${#lists.isEmpty(items)}">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <h5 class="fw-bolder">상품 등록 대기중</h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col mb-5" th:each="item : ${items}">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" style="width: 268px; height: 300px" th:src="|/images/${item.getItemImageList().get(0).getStoreName()}|" alt="..." />
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <h5 class="fw-bolder" th:text="${item.getName()}">Product</h5>
                            <!-- Product price-->
                            <p th:text="|${item.price}₩|">price</p>
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center">
                            <a class="btn btn-outline-dark mt-auto" href="#" th:href="@{/items/{id} (id=${item.id})}">View options</a></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark">
    <div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2022</p></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

로그인 유저 메인 페이지

<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" th:href="@{/}">Roominis</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                <!--                <li class="nav-item"><a class="nav-link" href="#!">About</a></li>-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">상품 관리</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" th:href="@{/items/new}">상품 등록</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li><a class="dropdown-item" th:href="@{/items}">상품 관리</a></li>
                    </ul>
                </li>
            </ul>
            &nbsp
            <form th:action="@{/logout}" class="d-flex" method="post">
                <button class="btn btn-outline-dark"
                        type="submit">
                    로그아웃
                </button>
            </form>
            &nbsp;
            <form class="d-flex">
                <button class="btn btn-outline-dark" type="submit">
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </button>
            </form>

        </div>
    </div>
</nav>

상품 등록 전

상품 등록 후

참고

https://startbootstrap.com/template/shop-homepage

등록된 상품 정보, 이미지를 수정하는 기능을 구현하도록 하겠습니다.

📝ItemForm

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class ItemForm {


    private Long itemId;
    @NotEmpty(message = "상품 이름은 필수입니다.")
    private String name;  //상품명
    @NotNull(message = "상품 가격은 필수입니다.")
    private int price; //상품 가격
    @NotNull(message = "상품 재고 수량은 필수입니다.")
    private int stockQuantity;  //재고 수량
    private String description;  //상품 설명

    //상품 수정, 장바구니에 사용
    private List<ItemImageDto> itemImageListDto = new ArrayList<>();

    public ItemServiceDTO toServiceDTO() {
        return ItemServiceDTO.builder()
                .id(itemId)
                .name(name)
                .price(price)
                .stockQuantity(stockQuantity)
                .description(description)
                .build();
    }

• 컨트롤러와 뷰와 통신할 때 쓰기위한 DTO

📝ItemController

@GetMapping("/items/{itemId}/edit")

@GetMapping("/items/{itemId}/edit")
    public String updateItemForm(@PathVariable(name = "itemId") Long itemId, Model model) {

        Item findItem = itemService.findItem(itemId);
        List<ItemImage> itemImageList = itemImageService.findItemImageDetail(itemId, "N");

        //엔티티 -> DTO로 변환
        List<ItemImageDto> itemImageListDto = itemImageList.stream()
                .map(ItemImageDto::new)
                .collect(Collectors.toList());


        ItemForm itemForm = new ItemForm(
                findItem.getId(),
                findItem.getName(),
                findItem.getPrice(),
                findItem.getStockQuantity(),
                findItem.getDescription(),
                itemImageListDto
        );

        model.addAttribute("itemForm", itemForm);

        return "item/updateItemForm";
    }

• 상품 수정 폼

• 바로 이전 포스트(상품 목록) 에서 상품 수정 버튼에 각자 아이템의 Primary key인 itemId를 넘기도록 구현하였습니다.

• 상품 수정화면에는 기존의 상품 정보를 화면에 보여주어야 하기 때문에

• Controller에서는 itemId를 받아와서 특정 아이템의 정보를 데이터베이스에서 찾아옵니다.

    //ItemService
    @Transactional(readOnly=true)
    public Item findItem(Long ItemId) {
        return itemRepository.findById(ItemId).orElse(null);
    }
  
    //== select * from Item where Item_Id = ItemId;

• itemId와 삭제 여부를 통해 상품 이미지 정보를 데이터베이스에서 찾아오도록 하였습니다.

    //ItemImageService  
    //삭제 여부를 판단하여 상품 이미지 정보를 조회한다
    @Transactional(readOnly = true)
    public List<ItemImage> findItemImageDetail(Long itemId, String YN) {
        return itemImageRepository.findByItemIdAndDeleteYN(itemId, YN);
    }

• 엔티티를 외부(View)로 반환하지 않기 위해 DTO로 변환해주는 작업을 진행하였습니다. (Item->ItemForm, ItemImageList -> ItemImageListDto)

@PostMapping

    @PostMapping("/items/{itemId}/edit")
    public String updateItem(@ModelAttribute ItemForm itemForm, Model model,
                             @RequestPart(name = "itemImages") List<MultipartFile> multipartFiles) throws IOException {

        List<ItemImage> findItemImages = itemImageService.findItemImageDetail(itemForm.getItemId(), "N");

        //상품 이미지를 등록안하면
        if (findItemImages.isEmpty() && multipartFiles.get(0).isEmpty()) {
            model.addAttribute("errorMessage", "상품 사진을 등록해주세요!");
            return "item/itemForm";
        }

        //상품 정보 수정
        itemService.updateItem(itemForm.toServiceDTO(), multipartFiles);

        return "redirect:/userHome";
    }

• 관리자가 입력한 상품 수정 정보(ItemForm)를 받아와서 상품 수정을 진행합니다.

    //ItemService 
    //상품 정보 업데이트 (Dirty Checking, 변경감지)
    public void updateItem(ItemServiceDTO itemServiceDTO,  List<MultipartFile> multipartFileList) throws IOException {
  
        Item findItem = itemRepository.findById(itemServiceDTO.getId()).orElse(null);  //DB에서 찾아옴 -> 영속 상태
        findItem.updateItem(itemServiceDTO.getName(), itemServiceDTO.getDescription(), itemServiceDTO.getPrice(), itemServiceDTO.getStockQuantity());
  
        log.info("=====findItem={}", findItem.getName());
  
        //상품 이미지를 수정(삭제, 추가) 하지 않으면 실행 x 
        if(!multipartFileList.get(0).isEmpty()) {
            itemImageService.addItemImage(multipartFileList, findItem);
        }
  
    }

• 데이터베이스에서 찾아온 findItem은 영속상태입니다.

• findItem을 updateItem으로 값을 세팅해주면 스프링의 @Transactional에 의해서 트랜잭션이 commit됩니다.

• 그 후 영속성 컨텍스트에서 변경된 건이 있는지 찾기 위해 flush(EntityManager.flush)를 진행하고 위와 같이 변경된 값이 있으면 Update Query를 데이터베이스에 날려고 업데이트를 진행합니다.

• 상품 사진을 추가하기 위한 메소드 : addItemImage

• 데이터베이스의 값 업데이트 완료

  //상품 이미지 추가
    public void addItemImage(List<MultipartFile> multipartFiles, Item item) throws IOException {
        List<ItemImage> itemImages = fileHandler.storeImages(multipartFiles);
  
        for (ItemImage itemImage : itemImages) {
            item.addItemImage(itemImageRepository.save(itemImage));
        }
    }

@postMapping("item/delete")

    /**
     * 아이템 이미지 삭제 처리
     */
    @PostMapping("item/delete")
    public String deleteItemImage(@RequestParam("itemImageId") Long itemImageId, @RequestParam("itemId") Long itemId) {

        itemImageService.delete(itemImageId);

        return "redirect:/items/ " + itemId + "/edit";
    }

• 상품 이미지를 삭제처리 하는 컨트롤러입니다.
• 이미지를 삭제하는 방법은 데이터베이스의 내용을 실제로 삭제하는 법과 데이터베이스의 내용을 삭제하지 않고 필드의 삭제 플래그를 통해 삭제 로직을 구현하는 방법이 있습니다. 둘 다 장 단점이 있다고 하는데 저는 이번에 후자의 방법을 택했습니다.
• 상품 수정 화면에서 삭제 버튼을 클릭(아래 쪽 참고)하면 삭제 처리되는 로직입니다.
• 등록된 상품 이미지를 조회하고 싶을 때 ItemImage의 deleteYN이 'N'인 것을 조회하면 됩니다.

    //ItemImageSerivce
      //데이터베이스를 삭제하지 않고 flag를 이용하여 처리
    public void delete(Long itemImageId) {
        ItemImage itemImage = itemImageRepository.findById(itemImageId).get();
        itemImage.deleteSet("Y");
    }

📝테스트

@RunWith(SpringRunner.class)
@SpringBootTest
@Transactional
public class ItemServiceTest {

    @Autowired
    ItemRepository itemRepository;
    @Autowired
    ItemService itemService;

    private Item createItem() {
        return Item.createItem("후드 집업", "데상트 후드 집업", 70000, 300);
    }

    @Test
    @DisplayName("상품 수정 테스트")
    public void updateItem() {
        //given
        Item item = this.createItem();
        itemRepository.save(item);

        //when
        Item findItem = itemRepository.findById(item.getId()).orElse(null);
        findItem.updateItem("후드 집업", "지프 후드 집업", 55000, 300);

        //then
        Assert.assertEquals(item.getName(), "후드 집업");
        Assert.assertEquals(item.getPrice(), 55000);

    }
}

📝상품 수정 화면

<head>
    <meta charset="utf-8">
    <th:block layout:fragment="script">
        <script th:inline="javascript">
            var error = [[${errorMessage}]];
            if(error != null){
                alert(error);
            }
        </script>
    </th:block>
</head>
<body>
<section>
    <div layout:fragment="content" class="container">
        <div class="py-5 text-center">
            <h2>상품 수정</h2>
        </div>

        <form th:action th:object="${itemForm}" method="post" enctype="multipart/form-data">
            <div th:if="${#fields.hasGlobalErrors()}">
                <p class="field-error" th:each="err : ${#fields.globalErrors()}"
                   th:text="${err}">전체 오류 메시지</p>
            </div>

            <input type="hidden" th:field="*{itemId}">

            <div>
                <label for="name">상품명</label>
                <input type="text" id="name" th:field="*{name}" class="form-control" placeholder="상품명을 입력해주세요"
                       th:errorclass="field-error">
                <div class="field-error" th:errors="*{name}" />
            </div>
            <br>
            <div>
                <label for="price">가격</label>
                <input type="number" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력해주세요"
                       th:errorclass="field-error">
                <div class="field-error" th:errors="*{price}" />
            </div>
            <br>
            <div>
                <label for="stockQuantity">재고 수량</label>
                <input type="number" id="stockQuantity" th:field="*{stockQuantity}" class="form-control" placeholder="재고 수량을 입력해주세요"
                       th:errorclass="field-error">
                <div class="field-error" th:errors="*{stockQuantity}" />
            </div>
            <br>
            <div>
                <label for="description">상품 상세 설명</label>
                <textarea id="description" th:field="*{description}" class="form-control" aria-label="With textarea"></textarea>
            </div>
            <br>
            <br>
            <div>
                <label>상품 이미지</label>
                <div class="form-group" th:each="itemImage : ${itemForm.itemImageListDto}">
                    <div class="custom-file img-div">
                         <span th:text="${itemImage.originalName}">파일이름1.png</span>
                        <span>
                            <button th:fileId="${itemImage.id}" th:onclick="itemImgageDelete(this.getAttribute('fileId'))"
                             type="button" class="btn btn-outline-danger">삭제</button>
                        </span>
                    </div>
                </div>
            </div>

             <div class="mb-3">
                <label for="formFileMultiple" class="form-label">파일업로드</label>
                <input class="form-control" type="file" id="formFileMultiple" name="itemImages" multiple>
            </div>


            <br>
            <br>
            <div style="text-align:center">
                <button class="w-50 btn btn-primary btn-lg" th:align="center" type="submit">
                    상품 수정</button>
            </div>
            <br>
            <br>

        </form>
    </div> <!-- /container -->
</section>
</body>
</html>

<script>
    function itemImgageDelete(fileId){
        if (confirm("정말로 삭제하시겠습니까?")) {
            //배열생성
            const form = document.createElement('form');
            form.setAttribute('method', 'post');
            form.setAttribute('action', '/item/delete');

            //파일 id
            var input1 = document.createElement('input');
            input1.setAttribute("type", "hidden");
            input1.setAttribute("name", "itemImageId");
            input1.setAttribute("value", fileId);

            //게시판 id
            const selectedElements = document.querySelector("#itemId")
            var input2 = document.createElement('input');
            input2.setAttribute("type", "hidden");
            input2.setAttribute("name", "itemId");
            input2.setAttribute("value", selectedElements.value);

            form.appendChild(input1);
            form.appendChild(input2);
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>

상품 수정 전

상품 수정 후

📝 수정화면 참고

• https://aamoos.tistory.com/689
• https://to-dy.tistory.com/102

📝ItemService

    @Transactional(readOnly=true)
    public List<Item> findItems() {
        return itemRepository.findAll();
    }

• 데이터베이스에 저장되어있는 모든 상품 정보를 Select 합니다.
• SELECT * FROM ITEM;

📝ItemController

    /**
     * 상품 목록 조회
     */
    @GetMapping("/items")
    public String items(Model model) {

        List<Item> itemList = itemService.findItems();

        //엔티티 -> DTO
        List<ItemDto> itemListDto = itemList.stream()
                .map(item -> new ItemDto(item))
                .collect(Collectors.toList());

        model.addAttribute("itemList", itemListDto);

        return "item/itemList";
    }

• DI한 itemService를 통해 모든 아이템 정보를 찾아옵니다.
• view layer에 모델로 데이터를 넘겨줄 때는 엔티티가 노출되지 않도록 DTO로 변환해서 넘겨주었습니다.

📝itemList.html

<body>

<div layout:fragment="content" class="container">
    <div  class="py-5 text-center">
        <h2>등록된 상품 목록</h2>
    </div>
    <br>


    <div>
        <table th:name="dd" class="table table-striped">
            <thead>
            <tr>
                <th>상품명</th>
                <th>가격</th>
                <th>재고수량</th>
                <th>상품 설명</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${itemList}">
                <tg th:hidden th:field="${item.id}"></tg>
                <td th:text="${item.name}"></td>
                <td th:text="${item.price}"></td>
                <td th:text="${item.stockQuantity}"></td>
                <td th:text="${item.description}"></td>
                <td>
                    <a href="#" th:href="@{/items/{id}/edit (id=${item.id})}"
                       class="btn btn-primary" role="button">수정</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

• 상품 목록을 보여주는 html을 작성하였습니다.
• 상품 수정은 상품 목록을 통해 수정 가능하도록 하였습니다.
• 각각 다른 아이템들을 수정하기 위해 수정 버튼에 primary key인 아이디를 링크로 달아주었습니다.

[상품(item) 엔티티] (https://velog.io/@woomin_s/%EC%97%94%ED%8B%B0%ED%8B%B0-%EC%84%A4%EA%B3%84#-%EC%83%81%ED%92%88) [상품 사진(item_image) 엔티티] (https://velog.io/@woomin_s/%EC%97%94%ED%8B%B0%ED%8B%B0-%EC%84%A4%EA%B3%84#-%EC%83%81%ED%92%88-%EC%82%AC%EC%A7%84)

📝Repository

ItemRepository

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

ItemImageRepository

public interface ItemImageRepository extends JpaRepository<ItemImage, Long> {
}

📝application.properties

file.dir=C:/Users/Woomin/Desktop/study/ImageStorage/

• application.properties파일에 이미지 업로드 경로를 지정해주었습니다.
• 이미지 파일들은 데이터베이스에 저장하지 않고 로컬 컴퓨터의 스토리지에 저장(AWS 같은 경우 AWS S3)하고, 데이터베이스에는 이미지 파일의 정보(경로)만 저장되도록 합니다.

📝Service

fileHandler

@Component
public class FileHandler {

    @Value("${file.dir}")
    private String fileDir;

    //파일 경로명
    public String getFullPath(String filename) {
        return fileDir + filename;
    }

    //파일 경로명(스토리지)에 사진 저장
    public List<ItemImage> storeImages(List<MultipartFile> multipartFiles) throws IOException {
        List<ItemImage> storeResult = new ArrayList<>();
        for (MultipartFile multipartfile : multipartFiles) {
            storeResult.add(storeImage(multipartfile));
        }
        return storeResult;
    }

    public ItemImage storeImage(MultipartFile multipartFile) throws IOException {
        if (multipartFile.isEmpty()) {
            return null;
        }

        // ex) image1.jpeg
        String oriImageName = multipartFile.getOriginalFilename();

        //서버에 저장될 파일명
        String storeImageName = createStoreImageName(oriImageName);

        //스토리지에 저장
        multipartFile.transferTo(new File(getFullPath(storeImageName)));

        return ItemImage.builder()
                .originalName(oriImageName)
                .storeName(storeImageName)
                .build();
    }

    private String createStoreImageName(String oriImageName) {
        String ext = extractExt(oriImageName);  //jpeg
        String uuid = UUID.randomUUID().toString();
        return uuid + "." + ext;
    }

    //확장자 추출
    private String extractExt(String oriImageName) {
        int pos = oriImageName.lastIndexOf(".");
        return oriImageName.substring(pos + 1);
    }
}

• 이미지 파일 저장과 관련된 업무를 처리하기 위한 component입니다.
• @Value("${file.dir}") 로 application.properties에 작성해둔 이미지 업로드 경로를 쉽게 불러올 수 있습니다.
• public ItemImage storeImage(MultipartFile multipartFile) 메소드는 업로드된 이미지인 multipartFile로 원본 파일명, 서버에 저장될 파일명을 추출하고 스토리지에 저장하는 업무를 처리합니다.

  굳이 원본 파일명과 서버에 저장하는 파일명을 구분하는 이유? 사용자가 얼마 없다면 파일명이 중복되는 문제가 발생할 가능성이 없지만 만약 사용자가 수십만명이 된다면 파일명이 충분히 중복될 가능성이 높고 기존 파일 이름과 충돌이 나기 때문에 문제가 발생될 수 있습니다. 때문에 중복이 불가능한 UUID를 생성하고 서버에서 관리하는 별도의 파일명으로 저장합니다.

ItemService

@Service
@RequiredArgsConstructor
@Transactional
public class ItemService {

    private final ItemRepository itemRepository;
    private final ItemImageRepository itemImageRepository;
    private final FileHandler filehandler;

    public Long saveItem(ItemServiceDTO itemServiceDTO, List<MultipartFile> multipartFileList) throws IOException {
        Item item = Item.createItem(itemServiceDTO.getName(),
                itemServiceDTO.getDescription(),
                itemServiceDTO.getPrice(),
                itemServiceDTO.getStockQuantity());

        List<ItemImage> itemImages = filehandler.storeImages(multipartFileList);


        for (ItemImage itemImage : itemImages) {
            item.addItemImage(itemImageRepository.save(itemImage));
        }

        return itemRepository.save(item).getId();
    }
}

• 상품 정보를 저장하는 서비스 로직입니다.
• DI(Dependecy Injection) : ItemRepository, ItemImageRepository, FileHandler
• filehandler.storeImages 메소드를 통해 이미지들을 넘겨 스토리지에 저장하고 원본 파일명, 서버에 저장될 파일명을 추출하고 ItemImage list로 반환받습니다.
• itemImageRepository에 상품 이미지 정보를 저장함과 동시에 연관 관계 편의 메소드를 호출해 양쪽에 값을 세팅해줍니다.

    public void addItemImage(ItemImage itemImage) {
        itemImageList.add(itemImage);
        itemImage.changeItem(this);
    }
  

<br>

----

## 📝Controller

```java
@Controller
@Slf4j
@RequiredArgsConstructor
public class ItemController {

    private final ItemService itemService;

    @GetMapping("/items/new")
    public String createItemForm(Model model) {
        model.addAttribute("itemForm", new ItemForm());
        return "item/itemForm";
    }

    @PostMapping("/items/new")
    public String createItem(@Valid @ModelAttribute ItemForm itemForm, BindingResult bindingResult, Model model,
                            @RequestPart(name = "itemImages") List<MultipartFile> multipartFiles
    ) throws IOException {

        if (bindingResult.hasErrors()) return "item/itemForm";

        //상품 이미지를 등록안하면
        if (multipartFiles.get(0).isEmpty()) {
            model.addAttribute("errorMessage", "상품 사진을 등록해주세요!");
            return "item/itemForm";
        }

        itemService.saveItem(itemForm.toServiceDTO(), multipartFiles);

        return "redirect:/userHome";
    }

    /**
     * 컨트롤러와 서비스간 통신을 할 때, 컨트롤러가 뷰와 통신할 때 사용한 DTO를 그대로 사용하면
     * 강한 의존이 생겨 위험!!
     */
}

GetMapping("/items/new")

• 상품 등록 폼
• ItemForm을 Model을 통해 뷰로 넘겨주었습니다. thymeleaf는 이 객체를 통해 유효성 검증을 할 수 있습니다.

PostMapping("/items/new")

• 시행착오
• 상품 이름, 가격, 수량을 입력하지 않거나 상품 이미지를 등록하지 않으면 다시 상품 입력 화면으로 오도록 구현하였습니다.
• DTO의 사용 범위 : 컨트롤러에서 DTO를 엔티티로 바꾸어서 서비스로 넘겨줄 지 서비스에서 엔티티로 바꿀지 고민을 하였는데 현재 프로젝트에서는 서비스에서 엔티티로 변환하게 구현하였습니다.
• DTO에 관해서는 다음에 자세하게 게시글로 작성하겠습니다!

📝Test

  @PostMapping("/items/new")
    @ResponseBody
    public ResponseEntity<String> createItem(@ModelAttribute(name = "itemForm") ItemForm form,
                                             @RequestPart(name = "itemImages") List<MultipartFile> multipartFiles) throws IOException {

        itemService.saveItem(form.toServiceDTO(), multipartFiles);

        return ResponseEntity.ok("이미지 업로드 성공");
    }

• 상품 등록 화면 없이 PostMan을 이용해서 테스트를 진행해보았습니다.

  

• 성공적으로 스토리지에도 사진들이 업로드 된것을 확인하였습니다.

📝결과 화면

상품 이름, 가격, 수량 등을 누락했을 경우

상품 이미지를 등록 안했을 경우

등록 후 데이터베이스 저장 내역

• 쇼핑몰 프로젝트를 진행하면서 이미지 업로드 부분에서 겪었던 시행착오를 기록합니다.
• 쇼핑몰 프로젝트

문제점

 @PostMapping("/items/new")
    public String createItem(@Valid @ModelAttribute ItemForm itemForm, BindingResult bindingResult, Model model,
                            @RequestPart(name = "itemImages") List<MultipartFile> multipartFiles
    ) throws IOException {

        if (bindingResult.hasErrors()) return "item/itemForm";

        log.info("multipartFiles={}", multipartFiles);
        log.info("multipartFiles.size={}", multipartFiles.size());


        //상품 이미지를 등록안하면
        if (multipartFiles.isEmpty()) {
            model.addAttribute("errorMessage", "상품 사진을 등록해주세요!");
            return "item/itemForm";
        }

• 처음에 구현한 내용입니다.
• 처음 저의 생각은 상품 등록 화면에서 상품 이미지를 등록하지 않으면 multipartFiles에 비어있는 값이 나올 줄 알고 multipartFiles.isEmpty()로 검증 후 오류 메세지를 출력하려고 헀습니다.
• 하지만 오류메세지는 나오지 않고 Internal Server Error(500)가 떠서 넘어오는 multipartFiles를 로그를 찍어서 보았습니다.
• 사이즈도 1이고 객체가 넘어오는 것을 확인했습니다.

• 개발자 도구의 form-data를 봐도 생성되는 멀티파트 요청에는 'file'이 들어있는 것을 확인했습니다.
• 즉, 객체가 넘어오기는 하지만 길이가 0인 비어있는 상태로 넘어온다는 것을 알 수 있었습니다.

해결

        //상품 이미지를 등록안하면
        if (multipartFiles.get(0).isEmpty()) {
            model.addAttribute("errorMessage", "상품 사진을 등록해주세요!");
            return "item/itemForm";
        }

• multipartFiles에는 객체가 바인딩되어서 넘어오기 때문에 리스트 그 자체를 isEmpty()하면 안됨
• 반복문으로 multipartFiles의 이미지 요소들을 isEmpty()로 검증하거나 위와 같이 리스트 중 하나의 이미지 파일을 검증함으로써 해결 가능하였습니다.

@GetMapping("/members")

   public String loginForm(Model model) {
        model.addAttribute("loginForm", new LoginForm());
        return "members/loginForm";
    }

• loginForm(DTO)를 모델을 통해 뷰로 전달해주었습니다.

LoginForm

@Getter
@Setter
public class LoginForm {

    @NotEmpty(message = "이메일 주소는 필수입니다.")
    @Email  //이메일 형식 validation
    private String email;
    @NotEmpty(message = "비밀번호를 입력해주세요")
    private String password;
}

@PostMapping("/members")

@PostMapping("/members")
    public String login(@Valid @ModelAttribute LoginForm form, BindingResult bindingResult, HttpServletRequest request) {

        //이메일 또는 비밀번호를 누락시
        if(bindingResult.hasErrors()) {
            log.info("error={}", bindingResult);
            return "members/loginForm";
        }

        Member loginMember = memberService.login(form.getEmail(), form.getPassword());
        log.info("login? {}", loginMember);

        if (loginMember == null) {
            bindingResult.reject("loginfail", "이메일 또는 비밀번호가 맞지 않습니다.");
            return "members/loginForm";
        }

        /**
         * HttpSession 생성
         */
        HttpSession session = request.getSession();  //만약 세션이 있으면 기존 세션을 반환하고, 없으면 신규 세션 생성
        session.setAttribute(SessionConst.LOGIN_MEMBER, loginMember);  //세션에 회원 정보 보관

        //판매자, 구매자 역할 뷰 나누기 TODO
        return "redirect:/userHome";
    }

• LoginForm의 @NotEmpty, @Email 어노테이션으로 인해 post 로 넘어올 때 bindResult에 오류 값이 넘어오게 됩니다. 만약 이메일 형식이 아니거나 이메일이나 비밀번호를 누락시 bindingResult에는 오류 값이 넘어오게 됩니다.
• memberService.login을 통해 데이터베이스에 저장되어있는 회원의 이메일, 비밀번호를 검증합니다.
• memberService.login은 회원의 이메일과 비밀번호가 일치 하지 않을 시 null을 반환하게 하였습니다.
• 로그인 검증의 경우 객체 필드의 오류(@NotEmpty, @Email ...)만으로는 판단이 불가합니다. 즉, 데이터베이스 안까지 뒤져서 검증을 해야합니다. Null을 반환하게 되면 bindingResult.reject로 뷰에서 글로벌 오류를 출력하게 합니다.
• 서블릿이 제공하는 request.getSession()으로 신규 세션을 생성하였고 세션에 회원정보를 보관하였습니다.

  request.getSession(true) : 세션이 있으면 기존 세션을 반환, 세션이 없으면 신규 세션 생성해서 반환 request.getSession(false) : 세션이 있으면 기존 세션을 반환, 세션이 없어도 신규 세션을 생성하지 않고 null을 반환

• 세션을 생성하면 이름이 JSESSIONID인 쿠키를 생성합니다. 쿠키의 값은 거의 추정이 불가능한 랜덤 값으로 할당됩니다.

server.servlet.session.tracking-modes=cookie

• URL에 jessionid가 노출되는 것을 방지하고 URL 전달 방식이 아니 항상 쿠키를 통해서만 세션을 유지하기 위해 application.properties 파일에 추가해줍니다.
• 세션의 종료 시점 : 서블릿이 제공하는 HttpSession의 세션은 기본적으로 사용자가 서버에 최근에 요청한 시간을 기준으로 30분 정도를 유지합니다.
• 세션의 타임아웃을 따로 설정도 가능합니다.

MemberSerivce

@Service
@RequiredArgsConstructor
@Transactional(readOnly = true)  //조회하는 곳에서 성능 최적화
public class MemberService {

    private final MemberRepository memberRepository;


    //회원가입
    @Transactional(readOnly = false)
    public Long join(Member member) {
        validateDuplicateMember(member);
        Member savedMember = memberRepository.save(member);
        return savedMember.getId();
    }

    //중복 회원 검증
    private void validateDuplicateMember(Member member) {
        Member findMember = memberRepository.findByEmail(member.getEmail()).orElse(null);
        if (findMember != null) {
            throw new IllegalStateException("이미 존재하는 회원입니다");
        }
    }

    //로그인 체크(null 이면 로그인 실패)
    public Member login(String email, String password) {
        return memberRepository.findByEmail(email)
                .filter(m -> m.getPassword().equals(password))
                .orElse(null);
    }

    public Member findMember(Long id) {
        return memberRepository.findById(id).get();
    }

    public List<Member> findMembers() {
        return memberRepository.findAll();
    }
}

📖로그아웃 기능

@GetMapping("/logout")

 /**
     * 로그아웃
     */
    @GetMapping("/logout")
    public String logout(HttpServletRequest request) {
        HttpSession session = request.getSession(false);
        if (session != null) {
            session.invalidate();
        }
        return "redirect:/";
    }

📖결과 화면

1. 이메일 또는 비밀번호 누락시

2. 이메일 또는 비밀번호가 맞지 않을 때

3. 로그인 성공

• 메인 화면은 아직 미완성입니다!

1.GetMapping("/members/new")

@Controller
@Slf4j
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    /**
     * 회원가입
     */
    @GetMapping("/members/new")
    public String createMemberForm(@ModelAttribute("memberForm") MemberForm memberForm, Model model) {
        List<RoleCode> roleCodes = new ArrayList<>();
        roleCodes.add(new RoleCode("admin", "판매자"));
        roleCodes.add(new RoleCode("user", "구매자"));
        model.addAttribute("roleCodes", roleCodes);

        return "members/createMemberForm";
    }

    @Data
    @AllArgsConstructor
    static class RoleCode {
        private String code;
        private String displayName;
    }

}

• RequiredArgsConstructor 어노테이션을 사용하여 meberService 의존 관계 주입(Dependency Injection)을 해주었습니다.
• 판매자, 관리자 역할을 셀렉트 박스로 정하게 하려고 RoleCode 클래스를 하나 만들어서 roleCodes를 모델을 통해 뷰로 전달해 주었습니다.
• MemberForm(DTO) 또한 모델을 통해 뷰로 전달해 주었습니다. (@ModelAttribute 어노테이션은 자동으로 model.addAttribute를 수행해 줍니다.)

@Getter
@Setter
public class MemberForm {

    @NotEmpty(message = "이름은 필수입니다.")
    private String name;
    @NotEmpty(message = "이메일은 필수입니다.")
    @Email  //이메일 형식 validation
    private String email;
    @NotEmpty(message = "비밀번호는 필수입니다.")
    private String password;

    private String city;
    private String street;
    private String zipcode;

    private String role;

}

• @NotEmpty, @Email, @Length, @Max 등 validation 어노테이션을 통해 좀 더 간편하게 유효성 검증을 할 수 있습니다.

2.postMapping("members/new")

@PostMapping("/members/new")
    public String createMember(@Valid @ModelAttribute MemberForm memberForm, BindingResult bindingResult, Model model,
                               @RequestParam("role") String role) {

        //이름, 이메일, 패스워드 중 하나라도 입력을 안했을 시
        if (bindingResult.hasErrors()) {
            List<RoleCode> roleCodes = new ArrayList<>();
            roleCodes.add(new RoleCode("admin", "판매자"));
            roleCodes.add(new RoleCode("user", "구매자"));
            model.addAttribute("roleCodes", roleCodes);
            return "/members/createMemberForm";
        }

        Address address = new Address(memberForm.getCity(), memberForm.getStreet(), memberForm.getZipcode());

        try {
            Member member = Member.builder()
                    .name(memberForm.getName())
                    .email(memberForm.getEmail())
                    .password(memberForm.getPassword())
                    .address(address)
                    .build();

            member.changeRole(role);  //사용자에게 권한 설정(판매자 또는 구매자)
            memberService.join(member);
        } catch (IllegalStateException e) {  //예외가 발생하면(회원 이메일이 중복)
            model.addAttribute("errorMessage", e.getMessage());
            return "members/createMemberForm";
        }

        return "redirect:/members";
    }

• 회원가입 화면에서 Post 요청으로 넘어온 회원가입 정보들을 memberForm 객체로 받고 , 판매자/구매자 정보를 Requestparam("role")을 통해 받습니다.
• 만약 회원 가입 정보에서 이름, 이메일, 패스워드가 누락된다면 bindingResult로 값이 전달됩니다. 이를 이용해 누락이 발생하면 다시 회원가입 화면으로 넘기도록 하였습니다.
• 정상적으로 회원 가입 정보가 memberForm 객체를 통해 들어오면 이를 이용해 member 객체를 생성하고 데이터베이스에 저장시켜주기 위해 memberService.join(member)를 호출합니다.
• 이 때 memberService에서 중복 회원을 검증하게 되고 중복이 있다면 예외를 발생시키고 없다면 정상적으로 redirect 시켜줍니다.

📖회원가입 화면

1.thymeleaf

• layout : 화면에서 공통으로 사용합니다.
• 회원가입 페이지, 로그인 페이지, 상품 등록 페이지 등에 공통으로 적용되는 머리(header)와 몸통(body)를 만들기 위한 것입니다.

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 

타임 리프의 레이아웃을 사용하기 위해 build.gradle에 추가해 줍니다.

• th:block : 동적인 처리가 필요할 때 사용됩니다. layout:fragment 속성에 이름을 지정해서 실제 컨텐츠 페이지의 내용을 채워줍니다.

• 자바스크립트 인라인 : 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 기능입니다.

  <head>
    <th:block layout:fragment="script">
        <script th:inline="javascript">
            var error = [[${errorMessage}]];
            if(error != null){
                alert(error);
            }
        </script>
    </th:block>
  </head>

2.화면개발

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      th:replace="~{layout/base :: layout(~{::section})}"
      layout:decorate="~{layout/base}">
<head>
    <th:block layout:fragment="script">
        <script th:inline="javascript">
            var error = [[${errorMessage}]];
            if(error != null){
                alert(error);
            }
        </script>
    </th:block>
</head>

<section>
<div layout:fragnemt="content" style="padding:30px; padding-left:50px"  >
    <form th:action th:object="${memberForm}" method="post">
        <div th:if="${#fields.hasGlobalErrors()}">
            <p class="field-error" th:each="err : ${#fields.globalErrors()}"
               th:text="${err}">전체 오류 메시지</p>
        </div>
        <div>
            <label for="name">&nbsp&nbsp&nbsp 이름 &nbsp&nbsp&nbsp&nbsp</label>
            <input type="text" id="name" th:field="*{name}" class="form-control" placeholder="이름을 입력해주세요">
            <div class="field-error" th:errors="*{name}" />
        </div>
        <br>
        <div>
            <label for="email">&nbsp&nbsp 이메일 &nbsp&nbsp</label>
            <input type="text" id="email" th:field="*{email}" class="form-control" placeholder="이메일 형식으로 입력해주세요">
            <div class="field-error" th:errors="*{email}" />
        </div>
        <div>
            <label for="password">&nbsp 비밀번호 </label>
            <input type="password" id="password" th:field="*{password}" class="form-control"  placeholder="비밀번호를 입력해주세요">
            <div class="field-error" th:errors="*{password}" />
        </div>
        <br>
        <div>
            <label for="city">&nbsp&nbsp  지역명 &nbsp&nbsp</label>
            <input type="text" id="city" th:field="*{city}"
                   class="formcontrol"
            >
        </div>
        <div>
            <label for="street">&nbsp&nbsp  도로명 &nbsp&nbsp</label>
            <input type="text" id="street" th:field="*{street}"
                   class="formcontrol"
            >
        </div>
        <div>
            <label for="zipcode">&nbsp 우편번호 </label>
            <input type="text" id="zipcode" th:field="*{zipcode}"
                   class="formcontrol"
            >
        </div>
        <br>
        &nbsp
        <select name="role" id="role" class="formcontrol">
            <option value="">판매자, 구매자 등록</option>
            <option th:each="roleCode : ${roleCodes}"
                    th:value="${roleCode.code}"
                    th:text="${roleCode.displayName}" />
        </select>
        <hr class="my-4">
        <div class="row">
            <div class="col" style="text-align: center">
                <button class="w-100 btn btn-primary btn-lg" type="submit">
                    회원가입</button>
            </div>
            <div class="col" style="text-align: center">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='home.html'"
                        th:onclick="|location.href='@{/members}'|"
                        type="button">취소</button>
            </div>
        </div>
    </form>
</div> 
</section>
</html>

• layout을 사용해 header 부분과 footer부분은 통일 시켜주었습니다.
• th:inline을 통해 중복 회원이 발생하면 alert창을 띄어주도록 하였습니다.

결과 화면

1. 이름, 이메일, 비밀번호 등이 누락되었을 경우

• MemberForm에 설정해주었던 @NotEmpty 어노테이션으로 인해 유효성 검증을 정상적으로 진행하고 있습니다.

2. 회원 이메일이 중복 되었을 경우

• alert창을 정상적으로 띄어주고 있습니다.

3. 회원 가입에 성공 하였을 경우

• 데이터베이스에 회원 정보가 정상적으로 저장되었습니다.

회원 엔티티

📖MemberRepository

public interface MemberRepository extends JpaRepository<Member, Long> {


    List<Member> findByName(String name);
    Optional<Member> findByEmail(String email);
}

• findyByName : 이름으로 회원을 찾습니다. 이름은 중복 될 수 있기 때문에 List로 설정하였습니다.
• findByEmail : 이메일로 회원을 찾습니다. 이메일은 중복 불가 하기 때문에 중복 회원을 검증할 때 사용됩니다.

📖MemberService

  @Service
@RequiredArgsConstructor
@Transactional(readOnly = true)  //조회하는 곳에서 성능 최적화
public class MemberService {

    private final MemberRepository memberRepository;


    //회원가입
    @Transactional(readOnly = false)
    public Long join(Member member) {
        validateDuplicateMember(member);
        Member savedMember = memberRepository.save(member);
        return savedMember.getId();
    }

    //중복 회원 검증
    private void validateDuplicateMember(Member member) {
        Member findMember = memberRepository.findByEmail(member.getEmail()).orElse(null);
        if (findMember != null) {
            throw new IllegalStateException("이미 존재하는 회원입니다");
        }
    }

    public Member findMember(Long id) {
        return memberRepository.findById(id).get();
    }

    public List<Member> findMembers() {
        return memberRepository.findAll();
    }
}

• validateDuplicateMember : 회원의 이메일로 중복 회원을 검증하는 로직입니다. 만약 회원 이메일이 중복된다면 IllegalStateException 예외를 발생시킵니다.
• join : validateDuplicateMember로 중복 회원을 검증하고 회원을 데이터베이스에 저장시킵니다.
  

📖MemberServiceTest

  @RunWith(SpringRunner.class)
@SpringBootTest
@Transactional
public class MemberServiceTest {

    @Autowired
    MemberRepository memberRepository;
    @Autowired
    MemberService memberService;

    private Member createMember() {
        return Member.builder()
                .name("woomin")
                .address(new Address("Incheon", "Ieum-ro", "123"))
                .email("woomin@google.com")
                .password("123")
                .build();
    }

    @Test
    @DisplayName("회원가입 테스트")
    public void join() {
        //given
        Member member = this.createMember();

        //when
        Long savedId = memberService.join(member);

        //then
        Assert.assertEquals(member, memberService.findMember(savedId));
    }

    @Test
    @DisplayName("중복회원 검증 테스트")
    public void duplicateMember() {
        //given
        Member member = this.createMember();

        //when
        memberService.join(member);
        try {
            memberService.join(member); //예외가 발생해야 함
        } catch (IllegalStateException e) {
            return;
        }

        //then
        Assert.fail("예외가 발생해야 함!!");
    }

    @Test
    @DisplayName("관리자, 사용자 역할 테스트")
    public void setRole() {
        //given
        Member member = createMember();
        member.changeRole("admin");  //관리자(판매자)

        //when
        Long savedId = memberService.join(member);

        //then
        Assert.assertEquals(member.getRole(), memberService.findMember(savedId).getRole());
    }

}

• RunWith(SpringRunner.class) : 스프링과 테스트를 통합합니다.
• SpringBootTest : 스프링 부트를 띄우고 테스트를 진행합니다. 만약 이 어노테이션이 없으면 @Autowired는 모두 실패합니다.
• @Transactional : default값은 readOnly=false, 각각의 테스트를 실행할 때마다 트랜잭션을 시작하고 테스트가 끝나면 트랜잭션을 강제로 롤백합니다. (단, 테스트 케이스에서 사용될 때만 롤백합니다.)

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)  // new 생성자 생성 못하게 -> Member member = new Member()
public class Member {

    @Id
    @GeneratedValue
    @Column(name = "member_id")
    private Long id;
    private String name;

    private String email;
    private String password;

    @Embedded
    private Address address;

    @Enumerated(value = EnumType.STRING)
    private Role role;


    @Builder
    private Member(String name, Address address, String email, String password, Role role) {
        this.name = name;
        this.address = address;
        this.email = email;
        this.password = password;
        this.role = role;
    }

} 

@NoArgsConstructor(access =AccessLevel.PROTECTED)

무분별한 Setter 사용은 객체의 일관성을 유지하기 힘들게 합니다. 때문에 new 생성자(new Member())를 사용할 수 없도록 접근 제어를 PROTECTED로 설정해주었습니다. 객체의 일관성을 유지할 수 있어야 프로그램의 유지 보수성을 끌어 올릴 수 있기 때문에 Setter는 최대한 지양해야 한다고 생각합니다.

Address 클래스

@Embeddable
@Getter
public class Address {

    private String city;  //지역명
    private String street;   //도로명
    private String zipcode;  //우편번호

    protected Address() {}

    public Address(String city, String street, String zipcode) {
        this.city = city;
        this.street = street;
        this.zipcode = zipcode;
    }
}

• 회원 엔티티는 지역명, 도로명, 우편번호의 공통된 속성을 가지고 있기 때문에 값 타입인 'Embedded 타입'을 사용하였습니다.
• Embedded 타입 장점 : 높은 응집도, 재사용

📌 장바구니

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Cart {

    @Id
    @GeneratedValue
    @Column(name = "cart_id")
    private Long id;

    @OneToOne(fetch = FetchType.LAZY)  //모든 ~ToOne 관계는 LAZY로딩으로 설정(EAGER 쓰지 말기!!)
    @JoinColumn(name = "member_id")
    private Member member;

    private Cart(Member member) {
        this.member = member;
    }

    public static Cart createCart(Member member) {
        return new Cart(member);
    }
}

회원과 장바구니의 관계

한명의 회원은 하나의 장바구니를 가질 수 있고 하나의 장바구니는 하나의 회원에만 설정되므로 일대일 관계로 설정하였습니다.

지연 로딩

@ManyToOne, @OneToOne 의 관계는 디폴트값이 FetchType.Eager로 되어있습니다. 즉시로딩을 사용하게 되면 연관된 모든 엔티티 테이블에 대하여 조인하기 때문에 예상하지 못한 SQL이 발생합니다. 이로 인해 JPQL에서는 1+N 문제가 발생하게 되고 성능 저하 문제가 발생합니다. 따라서 지연 로딩(FetchType.Lazy)으로 설정하였습니다.

📌 상품

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Item {

    @Id
    @GeneratedValue
    @Column(name = "item_id")
    private Long id;
    private String name;
    private int price;
    private int stockQuantity;
    private String description;

    @Builder
    private Item(String name, int price, int stockQuantity, String description) {
        this.name = name;
        this.price = price;
        this.stockQuantity = stockQuantity;
        this.description = description;
    }

     public static Item createItem(String name, String description, int price, int stockQuantity) {
        return new Item(name, description, price, stockQuantity);
    }

    public void updateItem(String name, String description, int price, int stockQuantity) {
        this.name = name;
        this.description = description;
        this.price = price;
        this.stockQuantity = stockQuantity;
    }

}

📌 상품 사진

@Entity
@Table(name = "item_image")
@Getter
public class ItemImage {

    @Id
    @GeneratedValue
    @Column(name = "item_image_id")
    private Long id;
    private String originalName; //원본 파일명
    private String storeName; //서버에 저장될 경로명
    private String deleteYN; //이미지 파일 삭제 여부 

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "item_id")
    private Item item;

     @Builder
    private ItemImage(String originalName, String storeName, String deleteYN) {
        this.originalName = originalName;
        this.storeName = storeName;
        this.deleteYN = "N";
    }

    public void changeItem(Item item) {
        this.item = item;
    }

    public void deleteSet(String deleteYN) {
        this.deleteYN = deleteYN;
    }
}

하나의 상품에는 여러 이미지가 등록되기 때문에 다대일의 관계로 설정해주었습니다.

📌 장바구니 상품

@Entity
@Table(name = "cart_item")
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class CartItem {

    @Id
    @GeneratedValue
    @Column(name = "cart_item_id")
    private Long id;
    private int count;  //장바구니 아이템 수량

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "cart_id")
    private Cart cart;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "item_id")
    private Item item;

    private CartItem(int count, Cart cart, Item item) {
        this.count = count;
        this.cart = cart;
        this.item = item;
    }

    public static CartItem createCartItem(int count, Cart cart, Item item) {
        return new CartItem(count, cart, item);
    }
}

다대다 관계

장바구니(Cart)와 상품(Item) : 하나의 장바구니에는 여러 상품이 들어갈 수 있고 하나의 상품은 여러 장바구니에 들어갈 수 있으므로 다대다의 관계가 됩니다. 따라서 Cart_Item 엔티티를 만들어서 일대다(Item:CartItem), 다대일(CartItem, cart)의 관계로 설정했습니다.

📌 주문

@Entity
@Table(name = "orders")
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Order {

    @Id
    @GeneratedValue
    @Column(name = "order_id")
    private Long id;
    private LocalDateTime orderDate;

    @Enumerated(value = EnumType.STRING)
    private OrderStatus status;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "member_id")
    private Member member;

    @OneToMany(mappedBy = "order")
    private List<OrderItem> orderItems = new ArrayList<>();

    private Order(OrderStatus status, Member member) {
        this.status = status;
        this.member = member;
        this.orderDate = LocalDateTime.now();
    }

    //==연관 관계 메서드==//
    public void addOrderItem(OrderItem orderItem) {
        orderItems.add(orderItem);
        orderItem.changeOrder(this);
    }

    public static Order createOrder(OrderStatus status, Member member, OrderItem... orderItems) {  //List<OrderItem> list??
        Order order = new Order(status, member);
        for (OrderItem orderItem : orderItems) {
            order.addOrderItem(orderItem);
        }
        return order;
    }
}

연관 관계

• 회원 : 한명의 회원은 여러 주문을 할 수 있기 때문에 다대일의 관계로 설정하였습니다.
• 주문상품 : 하나의 주문에 여러 상품이 들어가기 때문에 다대일의 관게로 설정하였습니다.
  

양방향 관계

최종 주문을 진행하려면 주문 상품이 있어야 하기 때문에 단방향이 아닌 양방향 관계로 설정해주었습니다. 이 때 연관관계의 주인은 ManyToOne에서 Many쪽인 Order를 연관관계의 주인으로 설정해주었습니다.

연관관계의 주인 : 객체와 테이블간에 연관관계를 맺는 차이에서 비롯되었는데 테이블은 외래키, 주키로 조인을 통해 양방향 참조가 가능하지만 객체의 경우 위의 코드와 같이 List를 통해 연결시켜주어야만 양방향이 가능합니다. 즉, 테이블은 외래키 하나로 두 테이블의 연관관계를 관리를 하지만 객체의 경우는 아닙니다. 위의 경우를 보았을 때 OrderItem, Order 둘 중 하나로 외래키를 관리해야 하는데 OrderItem엔티티의 order를 바꿧을 때 외래키(order_id)값을 업데이트 할지 Order엔티티의 orderItems의 값을 변경했을 때 외래키(order_id)값을 업데이트 할지 설정해야 합니다.
이것이 바로 연관관계의 주인으로 연관관계의 주인만이 외래키를 관리할 수 있도록 하고 주인이 아닌쪽은 읽기만 가능하도록 합니다.

 //==연관 관계 메서드==//
    public void addOrderItem(OrderItem orderItem) {
        orderItems.add(orderItem);
        orderItem.changeOrder(this);
    }

양방향 관계의 경우 순수 객체 상태를 고려해서 항상 양쪽에 값을 설정할 수 있도록 연관 관계 메서드를 작성해주었습니다.

📌 주문 상품

@Entity
@Table(name = "order_item")
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class OrderItem {

    @Id
    @GeneratedValue
    @Column(name = "order_item_id")
    private Long id;
    private int count;  //주문 수량
    private int orderPrice;  //주문 총 가격

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "order_id")
    private Order order;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "item_id")
    private Item item;

    private OrderItem(int count, int orderPrice, Item item) {
        this.count = count;
        this.orderPrice = orderPrice;
        this.item = item;
    }

    public void changeOrder(Order order) {
        this.order = order;
    }

    public static OrderItem createOrderItem(int count, int orderPrice, Item item) {
        return new OrderItem(count, orderPrice, item);
    }
}

다대다 관계

• 상품과 주문의 관계 : 하나의 주문에는 여러 상품이 들어 갈 수 있고 하나의 상품은 여러 주문에 들어갈 수 있으므로 다대다의 관계입니다. 따라서 OrderItem 엔티티를 만들어 일대다(Order:OrderItem), 다대일(OrderItem:Item)의 관계로 설정하였습니다.

Spring, Spring Boot, JPA, Thymeleaf를 이용하여 기본적인 쇼핑몰 기능을 구현할 계획입니다. 먼저 기본적인 CRUD 기능, 로그인 기능(Interceptor)을 구현하고 그 후 Spring security를 적용할 계획입니다. 또한 정렬(인기순, 최신순), 검색기능 등을 하나씩 추가 개발하며 점차 완벽한 쇼핑몰 E-commerce 사이트를 만들 계획입니다. 화면(Front)보다는 서버(Back)에 더 집중할 계획입니다.

📌 구현 기능

• Member(회원) 회원 가입 / 로그인, 로그아웃

• Item(상품) 상품 등록 / 상품 전체 조회 / 상품 수정 / 상품 상세 조회

• Cart(장바구니) 장바구니 담기 / 장바구니 조회 / 장부구니 수정 / 장바구니 상품 주문

• Order(주문) 상품 주문 / 주문 내역 조회 / 주문 취소

  
  
  

📌 ERD

📌 API 명세서

📌 데이터 베이스

데이터 베이스 Tool은 비교적 가볍고 쉽게 테스트 가능한 H2로 시작합니다!