Skip to content

GitLab

Commit 0eae2912 authored by Kim, Subin's avatar Kim, Subin
Browse files

TicketFeeTable - Mobile css 완성

parent df7f83d9
Show whitespace changes
Inline Side-by-side
client/src/components/Admin/TicketFeeTable.js
View file @ 0eae2912
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import cinemaApi from "../../apis/cinema.api.js"; import cinemaApi from "../../apis/cinema.api.js";
import catchErrors from "../../utils/catchErrors.js"; import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";
const TicketFeeTable = ({ setEditFee }) => { const TicketFeeTable = ({ setEditFee }) => {
const [ticketFee, setTicketFee] = useState([]) const [ticketFee, setTicketFee] = useState([])
...@@ -41,9 +42,9 @@ const TicketFeeTable = ({ setEditFee }) => { ...@@ -41,9 +42,9 @@ const TicketFeeTable = ({ setEditFee }) => {
} }
return ( return (
<table className="table caption-top text-center align-middle"> <table className={`table caption-top text-center align-middle ${styles.tableForm}`}>
<caption className="text-dark">영화관람료 안내</caption> <caption className="text-dark">영화관람료 안내</caption>
<thead className="table-dark"> <thead className={`table-dark ${styles.dNone}`}>
<tr> <tr>
<th>상영관 종류</th> <th>상영관 종류</th>
<th>주중 / 주말</th> <th>주중 / 주말</th>
...@@ -58,13 +59,13 @@ const TicketFeeTable = ({ setEditFee }) => { ...@@ -58,13 +59,13 @@ const TicketFeeTable = ({ setEditFee }) => {
{ticketFee.length !== 0 ? ticketFee.map(info => {ticketFee.length !== 0 ? ticketFee.map(info =>
<> <>
<tr> <tr>
<td rowSpan="6">{info.theaterType}</td> <td rowSpan="6" className={`d-block d-md-table-cell ${styles.Row} ${styles.type}`}>{info.theaterType}</td>
<td rowSpan="3">주중(월~목)</td> <td rowSpan="3" className={`d-block d-md-table-cell ${styles.Row} ${styles.moreData}`} data-label="- 청소년 / 성인 / 경로">주중(월~목)</td>
<td>조조 (06:00 ~ )</td> <td className="d-inline-block d-md-table-cell">조조 (06:00 ~ )</td>
<td>{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.morning + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td>
<td rowSpan="6"> <td rowSpan="6" className="d-none d-md-table-cell">
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theaterType)}>수정</button> <button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theaterType)}>수정</button>
<button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theaterType)}>삭제</button> <button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theaterType)}>삭제</button>
...@@ -72,35 +73,41 @@ const TicketFeeTable = ({ setEditFee }) => { ...@@ -72,35 +73,41 @@ const TicketFeeTable = ({ setEditFee }) => {
</td> </td>
</tr> </tr>
<tr> <tr>
<td>일반 (11:00 ~ )</td> <td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
<td>{priceToString(info.weekdays + info.day + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.day + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.day + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.day + info.senior + info.defaultPrice)}원</td>
</tr> </tr>
<tr> <tr>
<td>심야 (00:00 ~ )</td> <td className="d-inline-block d-md-table-cell">심야 (00:00 ~ )</td>
<td>{priceToString(info.weekdays + info.night + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.night + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekdays + info.night + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.night + info.senior + info.defaultPrice)}원</td>
</tr> </tr>
<tr> <tr>
<td rowSpan="3">주말(금~일) 및 공휴일</td> <td rowSpan="3" className={`d-block d-md-table-cell ${styles.Row} ${styles.moreData}`} data-label="- 청소년 / 성인 / 경로">주말(금~일) 및 공휴일</td>
<td>조조 (06:00 ~ )</td> <td className="d-inline-block d-md-table-cell">조조 (06:00 ~ )</td>
<td>{priceToString(info.weekend + info.morning + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.morning + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.morning + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.morning + info.senior + info.defaultPrice)}원</td>
</tr> </tr>
<tr> <tr>
<td>일반 (11:00 ~ )</td> <td className="d-inline-block d-md-table-cell">일반 (11:00 ~ )</td>
<td>{priceToString(info.weekend + info.day + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.day + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.day + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.day + info.senior + info.defaultPrice)}원</td>
</tr> </tr>
<tr> <tr className={styles.Row}>
<td>심야 (00:00 ~ )</td> <td className="d-inline-block d-md-table-cell">심야 (00:00 ~ )</td>
<td>{priceToString(info.weekend + info.night + info.youth + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.youth + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.night + info.adult + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.adult + info.defaultPrice)}원</td>
<td>{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td> <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td>
<td className={`d-block d-md-none ${styles.borderTop}`}>
<div className="d-flex justify-content-end">
<button type="button" className="btn btn-primary" onClick={() => editRow(info.theaterType)}>수정</button>
<button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theaterType)}>삭제</button>
</div>
</td>
</tr> </tr>
</>) </>)
: <tr> : <tr>
......
client/src/components/Admin/admin.module.scss
View file @ 0eae2912
...@@ -14,6 +14,34 @@ ...@@ -14,6 +14,34 @@
z-index: 10; z-index: 10;
} }
} }
.tableForm {
border-top: 2px solid;
& .dNone {
display: none;
border: 0;
}
& .Row {
border-bottom: 2px solid;
}
& .type {
font-size: 1.2rem;
background-color: #000;
color: #fff;
}
& .borderTop {
border-top: 1px solid;
}
& .moreData::after {
content: attr(data-label);
margin-left: 1em;
}
}
} }
.shadowNone { .shadowNone {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment