0215 작업 진행 + 메모

1.css 적용 시 특정 요소 제외 (not)

특정 태그 하위의 모든 table - tbody 일괄 설정 시 특정 tbody 제외하는 코드 

not 선택자 사용

<div>
    <table>
        <tbody>
            <tr>
                <td>내용</td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody class="exclude-tbody">
            <tr>
                <td>제외될 내용</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>내용</td>
            </tr>
        </tbody>
    </table>
</div>
-----------------------------------

/* exclude-tbody 클래스를 가진 tbody를 제외한 나머지 tbody에 스타일 적용 */
table tbody:not(.exclude-tbody) {
    /* 여기에 스타일을 적용합니다. */
    background-color: lightgray;
}

 

https://webisfree.com/2015-11-13/%5Bcss%5D-not-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

[CSS] :not 선택자 사용방법

 

그 외에..다른 선택자도 있다. 신기하다.

https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-where-is-has-not

🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()

 

---

 

2.예매 1페이지 

최대한 실제 영화관 사이트와 비슷한 ui로 구현하기 위해..(안되는 부분은 타협)

영화 리스트 / 지역 / 지점 / 날짜 리스트 / 상영 시간표 

총 5개의 테이블을 사용.

/* info-movies 하위의 모든 테이블들의 높이 고정 , 스크롤 추가 */
.info-movies table {
    height: 400px;
    /*overflow: auto;*/
}

.info-movies tbody{
    /* 각 테이블의 스타일 */
    width: 250px;
    display: block;
    overflow-y: auto;
    height: 400px;
}

 

테이블의 높이를 400px로 지정하고 원본 길이가 그 이상일 경우 스크롤이 추가된다. :)

 

 

 

https://mine-it-record.tistory.com/589

[CSS] 스크롤바 스타일 커스텀하기

 

2-1.스크롤 커스텀하기 - webkit-scrollbar 사용.

/* 수직 스크롤바 */
::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 폭 변경 */
}
::-webkit-scrollbar-thumb {
    background: darkred;  /* 스크롤바의 색상 변경 빨간색계열 */
}
::-webkit-scrollbar-track {
    background: #e2e2e2;  /* 스크롤바 트랙의 배경색 변경 회색계열 */
}

 

적용 후

 

컬러 그라데이션효과도 줄 수 있고, 막대의 둥글기도 설정할 수 있다.

 

/* 수직 스크롤바 */
::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 폭 변경 */
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#f64435, firebrick);  /* 스크롤바의 색상 변경 */
    border-radius: 25px;
}
::-webkit-scrollbar-track {
    background: transparent;  /* 스크롤바 트랙의 배경색 변경-투명 */
}

 

적용 후

 

 

일단 ui는 여기까지.

기능 마무리에 집중하기로.

 

 

2-2.상영시간표 불러오기

현재 영화리스트,지역,지점은 현재 db에서 가져온 결과값이고 (controller - model로 값을 가져와 타임리프로 뿌려줌)

날짜리스트는 local단에서 금일+21일치의 날짜만 가져온 것이다.

db에 저장된 상영시간표도 가져와보자..

현재 스케쥴이 단독으로 사용 될이 없어서 entity / dto / 상영관아이디로 찾는 쿼리만 있는 repository만 존재한다.

=>service, 그리고 controller단에서 사용할 entity to dto 추가해보자..[진행중]

 

2-3.특정 상영시간에 예약된 좌석 번호 확인하기

--순서
--특정한 상영 스케쥴 1개를 알면 
--영화 예매테이블에서 해당 상영스케쥴에 예약한 현황을 알수있고
--예매 좌석 테이블에서 해당 예약아이디만 조회해서 예매된 좌석을 확인할 수 있다.

--상영스케쥴
select * from schedule; 

--영화예매 테이블
select * from reservation;

--예매 좌석 테이블
select * from reservation_seat;

--좌석 테이블[60개 고정]
select * from seat;

select * from reservation where schedule_id=23;

SELECT rs.*
FROM reservation_seat rs
JOIN reservation r ON rs.res_id = r.id
WHERE r.schedule_id = 23;

SELECT s.*
FROM reservation_seat rs
JOIN reservation r ON rs.res_id = r.id
JOIN seat s ON rs.seat_id = s.id
WHERE r.schedule_id = 23;

 

결과

 

결과2 : 서로 다른 예약에 대해서도 조회가 된다.

예매번호 12345로 한 자리 예약 건 A01 시트

예매번호 99999로 두 자리 예약 건 C01,D01 시트

총 2건에 대해서 3개의 좌석이 예약됨.