2023.05.30 86일차 Team Project

86일차

아이디별 목록 보기
로그인안하면 버튼 안눌리게
눌려잇으면 색변하게
메인페이지

손님 상품 목록페이지 상품페이지

1. 상품상세페이지

이미지를 기준으로 이쁘게 나오게 고민했다.

<!-- Product section-->
<section class="bg-dark">
    <div class="container-lg px-4 px-lg-5 text-white">
        <div class="row gx-4 gx-lg-5 align-items-center">
            <div class="col">
                <img class="card-img-top mb-5 mb-md-0" src="/img/product/2.png" alt="" width="600" height="600" />
            </div>
            <div class="col-md-6">
                <div class="small mb-1">상품번호 - ${product.productId}</div>
                <h1 class="display-5 fw-bolder">${product.productName}</h1>
                <div class="fs-5 mb-5">
                    <span>${product.price}원</span>
                </div>
                <p class="lead">
                    원산지 : ${product.countryOfOrigin }
                    <br />
                    ${product.categoryName }
                </p>

                <div class="d-flex mb-4">
                    <div class="me-3">옵션</div>
                    <button class="minus-btn me-1 btn btn-secondary">
                        <i class="fa-solid fa-minus"></i>
                    </button>
                    <input type="number" id="count" class="form-control number-input" style="max-width: 4rem" value="1" size="100">
                    <button class="plus-btn ms-1 btn btn-secondary">
                        <i class="fa-solid fa-plus"></i>
                    </button>
                </div>
                <div class="d-flex">
                    <input type="hidden" id="productId" value="${product.productId}" />
                    <input type="hidden" id="stockQuantity" value="${product.stockQuantity }" />
                    <input type="hidden" id="price" value="${product.price }" />
                    <button class="btn btn-success me-3" id="orderButton"><i class="fa-solid fa-credit-card"></i> 바로주문하기</button>
                    <button class="btn btn-danger" id="goToCartBtn"><i class="fa-solid fa-cart-shopping"></i> 장바구니로가기</button>
                </div>
            </div>
        </div>
    </div>
</section>

2. 일괄선택 체크 해제 선택

관리자 상품페이지 목록에서 체크박스를 일괄적으로 선택하는 것이 있으면 좋겠다는 생각을 하게 되었다.

//체크박스 전체 누르기
$("#allCheck").change(function() {
    var isChecked = $(this).is(":checked");

    //openIds에 true면 checked추가 아니면 없애기
    $("input[name='openIds']").prop("checked", isChecked);
});

// 체크박스 해제
$("input[name='openIds']").change(function() {
    var totalOpenIds = $("input[name='openIds']").length;
    var checkedOpenIds = $("input[name='openIds']:checked").length;

    //전체 박스개수와 체크된박스수를 비교 allCheck에 true면 checked추가 아니면 없애기
    $("#allCheck").prop("checked", totalOpenIds === checkedOpenIds);
});

rop()은 jQuery의 메소드로 요소의 속성 값을 가져오거나 설정할 수 있다.
예를 들어, prop("checked")는 체크박스의 체크 여부를 가져오는 데 사용된다고 한다.
prop("checked", true)는 체크박스를 선택(체크) 상태로 설정하고 prop("checked", false)는 체크박스를 선택 해제 상태로 설정한다.

change()는 jQuery의 이벤트 메소드로, 요소의 변경 사항을 감지하는 데 사용된다고 한다.
이 메소드는 선택한 요소의 값이 변경되면 실행할 함수를 정의하는데 사용할 수 있다.
예를 들어, $("input[name='openIds']").change(function() { ... })는 "openIds"라는 이름을 가진 체크박스가 변경되었을 때 실행할 함수를 정의한다.
위의 예시 코드에서 prop() 메소드는 체크박스의 상태를 가져오거나 설정하기 위해 사용되었으며
change() 메소드는 체크박스의 변경 사항을 감지하여 적절한 동작을 수행하기 위해 사용되었다.

3. 메인페이지 구상하기

내브바
배너
가장 많이 팔린 상품 6개
쇼핑하러가기
footer

4. 위시리스트(찜하기)

좋아요방식사용
로그인하면 눌러지게 즐겨찾기 누르면 누르기
실시간으로 변하는것 보이기
눌러져잇으면 색변하게 보이기

멤버 id별 좋아요 목록 보기
찜목록 삭제하기
상품 상세페이지로 가기

테이블
멤버 id 상품 id 좋아요 여부?

2023.05.30

예상외로 디자인을 만지는 것이 시간이 오래걸린다.
간단하지만 깔끔하게 보이는 디자인을 위한 것이 너무 시간을 쓰게 되는 것 같다.