551 lines
11 KiB
JavaScript
551 lines
11 KiB
JavaScript
import styled, { css, keyframes } from 'styled-components';
|
|
import SelectIcon from '../assets/img/icon/icon-select.png';
|
|
import CloseUrl from '../assets/img/icon/icon-close.png';
|
|
import SelectIcon2 from '../assets/img/icon/icon-select2.png';
|
|
|
|
import IconCalendar from '../assets/img/icon/icon-date.png';
|
|
import IconArrow from '../assets/img/icon/icon-arrow.png';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export const Container = styled.div`
|
|
background: url(${props => props.$bgimg}) 50% 50%;
|
|
background-size: cover;
|
|
min-height: 100vh;
|
|
height: 100%;
|
|
padding: ${props => props.$padding || 0};
|
|
display: ${props => props.type};
|
|
${props => {
|
|
if (props.type) {
|
|
return `
|
|
align-items:${props.$align || 'flex-start'};
|
|
justify-content:${props.$justify || 'flex-start'};
|
|
`;
|
|
}
|
|
}}
|
|
`;
|
|
|
|
export const HeaderContainer = styled.div`
|
|
width: 280px;
|
|
flex: 0 0 280px;
|
|
background: #666666;
|
|
min-height: 100vh;
|
|
align-self: stretch;
|
|
`;
|
|
|
|
export const ContentContainer = styled.div`
|
|
min-height: calc(100vh - 58px);
|
|
width: 100%;
|
|
padding: 55px 60px;
|
|
background: #fff;
|
|
`;
|
|
|
|
export const FullContainer = styled.div`
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
max-width: calc(100% - 280px);
|
|
`;
|
|
export const TextInput = styled.input`
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 5px;
|
|
width: ${props => props.width || '100%'};
|
|
padding: ${props => props.$padding || '5px 15px'};
|
|
line-height: 18px;
|
|
font-size: ${props => props.fontSize || '14px'};
|
|
&::placeholder {
|
|
color: #b8b8b8;
|
|
}
|
|
&:disabled {
|
|
color: #cccccc;
|
|
background: #f6f6f6;
|
|
}
|
|
&:focus {
|
|
border: 1px solid #2c2c2c;
|
|
}
|
|
`;
|
|
|
|
export const SelectInput = styled.select`
|
|
border: 1px solid #e4e4e4;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
height: 40px;
|
|
padding: 5px 40px 5px 15px;
|
|
background: url('${SelectIcon}') no-repeat right 50% #fff;
|
|
font-size: 14px;
|
|
width: ${props => props.width || 'auto'};
|
|
&:disabled {
|
|
color: ${props => props.color || '#cccccc'};
|
|
background: url('${SelectIcon}') no-repeat right 50% ${props => props.background_color || '#f6f6f6'};
|
|
}
|
|
`;
|
|
|
|
export const Textarea = styled.textarea`
|
|
&:focus {
|
|
border: 1px solid #2c2c2c;
|
|
}
|
|
outline-color: #d9d9d9;
|
|
padding: 10px;
|
|
`;
|
|
|
|
export const FormBox = styled.div`
|
|
background: #fff;
|
|
width: 486px;
|
|
padding: 75px 45px;
|
|
text-align: center;
|
|
border-radius: 30px;
|
|
color: #8d8d8d;
|
|
`;
|
|
|
|
export const AlertText = styled.div`
|
|
font-size: 14px;
|
|
padding-left: 10px;
|
|
color: #fe565e;
|
|
`;
|
|
|
|
export const AccountTitle = styled.h2`
|
|
color: #2c2c2c;
|
|
text-align: center;
|
|
margin-bottom: 45px;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
`;
|
|
|
|
export const FormWrapper = styled.form`
|
|
display: flex;
|
|
flex-flow: ${props => props.$flow};
|
|
gap: 20px;
|
|
text-align: left;
|
|
`;
|
|
|
|
export const Label = styled.div`
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
${props =>
|
|
props.require &&
|
|
css`
|
|
&:after {
|
|
content: '*';
|
|
color: #fe565e;
|
|
margin-left: 5px;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
export const InputLabel = styled.span`
|
|
display: inline-block;
|
|
min-width: fit-content;
|
|
font-weight: 600;
|
|
`;
|
|
|
|
export const InputItem = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 10px;
|
|
`;
|
|
|
|
export const BtnWrapper = styled.div`
|
|
width: ${props => props.width};
|
|
display: flex;
|
|
position: relative;
|
|
flex-flow: ${props => props.$flow};
|
|
justify-content: ${props => props.$justify};
|
|
gap: ${props => props.$gap};
|
|
margin-top: ${props => props.$marginTop};
|
|
margin-bottom: ${props => props.$marginBottom};
|
|
padding-top: ${props => props.$paddingTop};
|
|
`;
|
|
|
|
export const Title = styled.h2`
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
margin-bottom: 30px;
|
|
text-align: ${props => props.$align || 'left'};
|
|
`;
|
|
|
|
// table
|
|
|
|
export const TableInfo = styled.div`
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 14px;
|
|
position: relative;
|
|
${props =>
|
|
props.$align &&
|
|
css`
|
|
align-items: ${props.$align};
|
|
`}
|
|
${SelectInput} {
|
|
width: 86px;
|
|
height: 24px;
|
|
padding: 0 20px 0 10px;
|
|
color: #686868;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
background: url(${SelectIcon2}) right center no-repeat;
|
|
}
|
|
`;
|
|
|
|
export const ListTitle = styled.h3`
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 0;
|
|
`;
|
|
|
|
export const ListCount = styled.div`
|
|
position: absolute;
|
|
display: flex;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
color: #686868;
|
|
gap: 20px;
|
|
span {
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
`;
|
|
|
|
export const ListOption = styled.div`
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
button {
|
|
min-width: max-content;
|
|
padding: 0 10px;
|
|
height: 24px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 3px;
|
|
}
|
|
`;
|
|
export const MailTitle = styled.td``;
|
|
export const TableContent = styled.td``;
|
|
|
|
export const TableStyle = styled.table`
|
|
font-size: 13px;
|
|
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #000;
|
|
display: block;
|
|
top: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
tr:last-child {
|
|
border-bottom: 1px solid #e8eaec;
|
|
}
|
|
th,
|
|
td {
|
|
border-top: 1px solid #e8eaec;
|
|
border-left: 1px solid #e8eaec;
|
|
letter-spacing: 0;
|
|
vertical-align: middle;
|
|
padding: 5px 10px;
|
|
line-height: 1.4;
|
|
}
|
|
th:last-child,
|
|
td:last-child {
|
|
border-right: 1px solid #e8eaec;
|
|
}
|
|
th {
|
|
height: 40px;
|
|
background: #f6f6f6;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
td {
|
|
text-align: center;
|
|
height: 40px;
|
|
word-break: break-all;
|
|
font-weight: 400;
|
|
}
|
|
button {
|
|
font-size: 13px;
|
|
width: 52px;
|
|
min-width: max-content;
|
|
padding: 0 10px;
|
|
height: 24px;
|
|
}
|
|
${SelectInput} {
|
|
height: 24px;
|
|
width: calc(100% - 30px);
|
|
padding: 0 30px 0 10px;
|
|
}
|
|
tr.table-line {
|
|
th,
|
|
td {
|
|
border-top: 1px solid #999;
|
|
}
|
|
}
|
|
input[type='checkbox'] ~ label {
|
|
padding-left: 0;
|
|
&:before {
|
|
position: relative;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
${MailTitle} {
|
|
text-align: left;
|
|
}
|
|
${TableContent} {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
`;
|
|
|
|
export const TableWrapper = styled.div`
|
|
min-width: 680px;
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
height: 10px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
${TableStyle} {
|
|
width: 100%;
|
|
min-width: max-content;
|
|
}
|
|
`;
|
|
|
|
export const State = styled.span`
|
|
color: ${props => props.color || '#2c2c2c'};
|
|
`;
|
|
|
|
// 지표 탭
|
|
export const IndexTableWrap = styled.div`
|
|
width: 100%;
|
|
min-width: 680px;
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
${TableStyle} {
|
|
width: 100%;
|
|
min-width: max-content;
|
|
th {
|
|
&.cell-nru {
|
|
background: #f0f0f0;
|
|
border-left: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
}
|
|
td {
|
|
&.blank {
|
|
background: #f9f9f9;
|
|
}
|
|
&.cell-nru {
|
|
background: #fafafa;
|
|
border-left: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
&.text-left {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
/*20231205 유저지표 테이블 변경으로 인한 NRU css수정*/
|
|
tbody {
|
|
.cell-nru-th td:nth-child(2) {
|
|
background: #fafafa;
|
|
border-left: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
}
|
|
`;
|
|
|
|
//date-picker
|
|
export const InputGroup = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
`;
|
|
const InputGroup2 = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 5px;
|
|
`;
|
|
|
|
export const DateGroup = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 5px;
|
|
`;
|
|
export const DatePickerWrapper = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px 0;
|
|
align-items: center;
|
|
.datepicker {
|
|
width: 160px;
|
|
border: 1px solid #e0e0e0;
|
|
padding: 5px 40px 5px 15px;
|
|
border-radius: 5px;
|
|
line-height: 18px;
|
|
font-size: 14px;
|
|
height: 35px;
|
|
background: url(${IconCalendar}) center right no-repeat #fff;
|
|
&::placeholder {
|
|
color: #b8b8b8;
|
|
}
|
|
&:disabled {
|
|
background: url(${IconCalendar}) center right no-repeat #f6f6f6;
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
${InputGroup} {
|
|
display: flex;
|
|
gap: 0;
|
|
${SelectInput} {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
|
|
border-bottom-color: #fff;
|
|
}
|
|
.calendar {
|
|
.react-datepicker__header {
|
|
background: #fff;
|
|
}
|
|
.btn-prev,
|
|
.btn-next {
|
|
width: 26px;
|
|
height: 26px;
|
|
overflow: hidden;
|
|
}
|
|
.btn-prev {
|
|
background: url(${IconArrow}) 0 50% no-repeat;
|
|
}
|
|
.btn-next {
|
|
background: url(${IconArrow}) -26px 50% no-repeat;
|
|
}
|
|
|
|
.calendar-top {
|
|
button {
|
|
margin: 0 10px;
|
|
}
|
|
select {
|
|
font-size: 16px;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
.react-datepicker__day-names > div:first-child,
|
|
.react-datepicker__week > div:first-child {
|
|
color: #ff0000;
|
|
}
|
|
.react-datepicker__day-names > div:last-child,
|
|
.react-datepicker__week > div:last-child {
|
|
color: #256bfa;
|
|
}
|
|
}
|
|
span {
|
|
padding: 0 10px;
|
|
}
|
|
`;
|
|
|
|
// modal
|
|
export const ModalText = styled.div`
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
text-align: ${props => props.$align};
|
|
font-weight: 600;
|
|
padding: 10px 0 40px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
max-width: ${props => props.$maxWidth || '500px'};
|
|
`;
|
|
|
|
export const ButtonClose = styled.button`
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url(${CloseUrl}) 50% 50% no-repeat;
|
|
`;
|
|
|
|
export const SearchBarAlert = styled.div`
|
|
width: 100%;
|
|
color: #d60000;
|
|
margin-top: ${props => props.$marginTop};
|
|
padding: ${props => props.$padding};
|
|
text-align: ${props => props.$align};
|
|
`;
|
|
|
|
const loadingAnimation = keyframes`
|
|
0% {
|
|
background-position: -200px 0;
|
|
}
|
|
100% {
|
|
background-position: calc(200px + 100%) 0;
|
|
}
|
|
`;
|
|
|
|
export const Skeleton = styled.div`
|
|
background: linear-gradient(90deg,
|
|
#e0e0e0 25%,
|
|
#f8f8f8 50%,
|
|
#e0e0e0 75%
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: ${loadingAnimation} 1.5s infinite ease-in-out;
|
|
border-radius: 4px;
|
|
width: ${({ width }) => width || '100%'};
|
|
height: ${({ height }) => height || '20px'};
|
|
margin-bottom: ${({ spacing }) => spacing || '10px'};
|
|
`;
|
|
|
|
// Skeleton 이미지 영역
|
|
// export const SkeletonImg = styled.div`
|
|
// background: linear-gradient(90deg,
|
|
// #e0e0e0 25%,
|
|
// #f8f8f8 50%,
|
|
// #e0e0e0 75%
|
|
// );
|
|
// background-size: 400% 100%;
|
|
// animation: ${loadingAnimation} 1.5s infinite ease-in-out;
|
|
// border-radius: 50%;
|
|
// margin-right: 15px;
|
|
// position: relative;
|
|
// width: ${({ width }) => width || '150px'};
|
|
// height: ${({ height }) => height || '150px'};
|
|
// margin-bottom: ${({ spacing }) => spacing || '10px'};
|
|
// `;
|
|
const radialLoadingAnimation = keyframes`
|
|
0% {
|
|
background-position: -200px 0%;
|
|
}
|
|
100% {
|
|
background-position: calc(200px + 100%) 0%;
|
|
}
|
|
`;
|
|
export const SkeletonImg = styled.div`
|
|
background: radial-gradient(circle, #f8f8f8, #e0e0e0, #f8f8f8);
|
|
background-size: 200% 200%;
|
|
// animation: ${radialLoadingAnimation} 2s infinite ease-in-out;
|
|
border-radius: 50%;
|
|
width: ${({ width }) => width || '100px'};
|
|
height: ${({ height }) => height || '100px'};
|
|
`;
|
|
|
|
export const DetailMessage = styled(Link)`
|
|
color: #61a2d0;
|
|
text-decoration: underline;
|
|
`;
|
|
|
|
export const PopupMessage = styled(Link)`
|
|
color: #61a2d0;
|
|
text-decoration: underline;
|
|
`; |