잇!(IT) 블로그

- 최종 완성본 - index.html (메인 페이지) TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 사이좋은 사람들, 싸이월드 사생활보호설정 홈 쥬크박스 게임 홈 쥬크박스 게임 - 홈, 쥬크박스, 게임 버튼 3개 각각 클릭되게 되면 menuHome(), menuJukebox(), menuGame() 함수가 실행되게 된다. const menuHome = () => { document.getElementById("contentFrame").setAttribute("src","home.html") // 매개변수가 2개 들어간다. "src", "값" document.getElementById("menuHome").style = "..

- index.html TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 - class명을 지정할 때, 보통 최대 4개까지 작성하도록 한다. 종속 클래스 명을 지을 때 제일 대표가 되는 맨 앞의 단어 하나정도는 생략해도 된다. (class는 어차피 구분하기 위해 작성하는 것이기 때문에 이름이 꼭 종속 될 필요는 없지만, 구분하기 편하게 하기 위해 작성한다.) - index.css * { box-sizing: border-box; /*border-box로 설정하면, 요소의 크기를 width와 height 값에 padding과 border를 포함한 총 크기로 설정 */ margin: 0px; } .background { width:..

- 장바구니 목록 중 체크박스가 선택된 상품을 주문하는 로직을 작성한다. - 장바구니에서 주문을 하면 기존 주문 로직과의 차이점은 여러 개의 상품을 하나의 주문에 담을 수 있다는 점과 주문한 상품은 장바구니에서 삭제해야 한다는 점이다. - 장바구니 페이지에서 주문할 상품 데이터를 전달할 DTO를 생성한다. - CartOrderDto.java @Getter @Setter public class CartOrderDto { private Long cartItemId; private List cartOrderDtoList; // 1. 장바구니에서 여러 개의 상품을 주문하므로 CartOrderDto 클래스가 자기 자신을 List로 가지고 있도록 만든다. } - 장바구니 주문은 cartItem의 Id와 장바구니에서..

- 이전에 장바구니에 담는 기능을 추가했다면, 이번에는 담은 장바구니를 조회하는 기능에 대해 구현할 것이다. - 장바구니 조회 페이지에 데이터를 전달할 DTO 클래스를 생성한다. - 이번에는 JPQL로 쿼리 작성 시 생성자를 이용해서 DTO로 바로 변환하는 방법을 사용한다. - CartDetailDto.java @Getter @Setter public class CartDetailDto { private Long cartItemId; //장바구니 상품 아이디 private String itemNm; private int price; private int count; private String imgUrl; public CartDetailDto(Long cartItemId, String itemNm, in..

- 상품 상세 페이지에서 장바구니에 담을 수량을 선택하고 장바구니 담기 버튼을 클릭할 때 상품이 장바구니에 담기는 기능을 구현해야 한다. - 상품 상세 페이지에서 장바구니에 담을 상품의 아이디와 수량을 전달 받을 CartItemDto 클래스를 생성한다. (장바구니에 담을 상품의 최소 수량은 1개 이상으로 제한한다.) - CartItemDto.java @Getter @Setter public class CartItemDto { @NotNull(message = "상품 아이디는 필수 입력 값 입니다.") private Long itemId; @Min(value = 1, message = "최소 1개 이상 담아주세요") private int count; } - 회원 한 명당 1개의 장바구니를 갖어야 한다. 처..

- 주문 이력에서 원하지 않는 주문을 취소하는 기능도 필요하다. 주문을 취소할 경우 해당 주문의 상태를 취소 상태로 만들어주고, 주문할 때 상품의 재고를 감소시켰던 만큼 다시 더해주는 로직을 작성하면 된다. - 상품의 재고를 더해주기 위해 Item 클래스에 addStock 메서드를 생성한다. - Item.java // 상품에 재고를 더해주기 위해서 Item 클래스에 addStock 메소드를 생성한다. public void addStock(int stockNumber) { // 1. 상품의 재고를 증가시키는 메소드이다. this.stockNumber += stockNumber; } - addStock을 호출하게 되면 재고를 증가시킨다. - 주문을 취소할 경우 주문 수량만큼 상품의 재고를 증가시키는 메소드를..

- 주문을 한 다음에는 주문 이력을 조회할 수 있는 페이지를 만들어야 한다. - 조회한 주문 데이터를 화면에 보낼 때 사용할 DTO 클래스를 생성한다. - OrderItemDto.java @Getter @Setter public class OrderItemDto { private String itemNm; //상품명 private int count; //주문 수량 private int orderPrice; //주문 금액 private String imgUrl; //상품 이미지 경로 public OrderItemDto(OrderItem orderItem, String imgUrl) { // OrderItemDto 클래스의 생성자로 orderItem 객체와 이미지 경로를 파라미터로 받아서 멤버 변수 값을 세..

- 고객이 상품을 주문하면 현재 상품의 재고에서 주문 수량만큼 재고를 감소시켜야 한다. 1. 주문만큼 재고를 감소 2. 주문 수량보다 재고의 수가 적을 때 발생시킬 exception(RuntimeException) 정의 - 예외 클래스 작성 - OutofStockException.java package com.shop.exception; public class OutOfStockException extends RuntimeException{ // 상품의 주문 수량보다 재고의 수가 적을 때 발생시킬 exception public OutOfStockException(String message) { super(message); } } - 재고 감소 로직 - Item.java ... //남은 재고 수량 확인 p..

- 메인 페이지 - 메인 페이지의 경우 상품 관리 메뉴와 비슷하며, Querydsl을 사용하여 페이징 처리 및 네비게이션바에 있는 Search 버튼을 이용하여 상품명으로 검색이 가능하도록 구현하겠다. - 메인페이지의 경우 @QueryProjection을 이용하여 상품 조회 시 DTO 객체로 결과 값을 받는 방법을 사용한다. - @QueryProjection을 이용하면 Item 객체로 값을 받은 후 DTO 클래스로 변환하는 과정 없이 바로 DTO 객체를 뽑아낼 수 있다. - MainItemDto.java @Getter @Setter public class MainItemDto { private Long id; private String itemNm; private String itemDetail; priv..

- 상품의 상세 페이지에 진입하기 위해서 등록된 상품 번호를 직접 URL에 입력하여 상품 상세 페이지에 진입한다. 상품 번호를 모를 경우 상세 페이지로 진입할 수 없으므로 등록된 상품 리스트를 조회할 수 있는 화면을 만들어야 한다. - 조회 조건 1. 상품 등록일 2. 상품 판매 상태 3. 상품명 또는 상품 등록자 아이디 - 복잡한 조회 조건의 경우 Querydsl을 이용해 조건에 맞는 쿼리를 동적으로 쉽게 생성할 수 있다. Querydsl을 사용하면 비슷한 쿼리를 재활용 할 수 있다는 장점이 있다. 또한 쿼리를 JAVA 문법으로 작성하기 때문에 오류를 컴파일 단계에서 찾을 수 있다는 장점이 있다. - ItemSearchDto.java @Getter @Setter public class ItemSearc..