828 lines
15 KiB
JavaScript
828 lines
15 KiB
JavaScript
import { styled } from 'styled-components';
|
|
import { BtnWrapper, InputLabel, SelectInput, Textarea, TextInput } from './Components';
|
|
import CloseIcon from '../assets/img/icon/icon-close.png';
|
|
import IconDelete from '../assets/img/icon/icon-delete.png';
|
|
import { Link } from 'react-router-dom';
|
|
import EditIcon from '../assets/img/icon/icon-edit.png';
|
|
import { STATUS_STYLES } from '../assets/data';
|
|
import SelectIcon from '../assets/img/icon/icon-select.png';
|
|
|
|
export const DetailInputItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
${TextInput},${SelectInput} {
|
|
height: 35px;
|
|
font-size: 14px;
|
|
}
|
|
${TextInput} {
|
|
padding: 0 15px;
|
|
}
|
|
${SelectInput} {
|
|
width: max-content;
|
|
}
|
|
`;
|
|
|
|
export const DetailModalWrapper = styled.div`
|
|
max-height: 70vh;
|
|
padding-bottom: 5px;
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
`;
|
|
|
|
export const DetailRegistInfo = styled.div`
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 50px;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
`;
|
|
|
|
export const AreaBtnClose = styled.button`
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url(${CloseIcon}) 50% 50% no-repeat;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
right: 20px;
|
|
opacity: ${props => props.opacity};
|
|
`;
|
|
|
|
export const LangArea = styled.div`
|
|
background: #f9f9f9;
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
position: relative;
|
|
`;
|
|
|
|
export const AppendRegistBox = styled.div`
|
|
margin-bottom: 20px;
|
|
border-top: 1px solid #999;
|
|
border-bottom: 1px solid #999;
|
|
`;
|
|
|
|
export const AppendRegistTable = styled.table`
|
|
th,
|
|
td {
|
|
padding: 15px 0;
|
|
}
|
|
td {
|
|
${TextInput} {
|
|
max-width: 600px;
|
|
}
|
|
${Textarea} {
|
|
width: 100%;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
height: 150px;
|
|
padding: 15px;
|
|
&:focus {
|
|
border: 1px solid #2c2c2c;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const DetailGroup = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
flex-flow: column;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
`;
|
|
|
|
export const DetailInputRow = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px 50px;
|
|
margin-bottom: 10px;
|
|
`;
|
|
|
|
export const RegistInputRow = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 50px;
|
|
`;
|
|
|
|
export const InputGroup = styled.div`
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const MailReceiver = styled.div`
|
|
display: flex;
|
|
align-items: flex-start;
|
|
${DetailInputItem} {
|
|
align-items: flex-start;
|
|
}
|
|
${InputLabel} {
|
|
line-height: 35px;
|
|
}
|
|
${TextInput} {
|
|
margin-left: 20px;
|
|
width: 400px;
|
|
}
|
|
${InputGroup} {
|
|
margin-bottom: 5px;
|
|
}
|
|
`;
|
|
|
|
export const DetailState = styled.span`
|
|
font-weight: 600;
|
|
color: ${props => {
|
|
const result = props.result ? props.result.toLowerCase() : '';
|
|
return result === 'success' || result === 'finish' ? '#08994B' : result === 'fail' || result === 'delete' ? '#ff0000' : '#2c2c2c'}};
|
|
`;
|
|
|
|
export const ItemList = styled.ul`
|
|
display: flex;
|
|
gap: 20px;
|
|
padding: 10px 20px;
|
|
flex-wrap: wrap;
|
|
`;
|
|
|
|
export const Item = styled.li`
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const BtnDelete = styled.button`
|
|
width: 12px;
|
|
height: 12px;
|
|
background: url(${IconDelete}) 50% 50% no-repeat;
|
|
`;
|
|
|
|
// 등록
|
|
export const RegistInputItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
${InputLabel} {
|
|
line-height: 35px;
|
|
}
|
|
${TextInput},${SelectInput} {
|
|
height: 35px;
|
|
font-size: 14px;
|
|
}
|
|
${TextInput} {
|
|
padding: 0 20px;
|
|
}
|
|
${SelectInput} {
|
|
width: max-content;
|
|
}
|
|
`;
|
|
|
|
export const RegistNotice = styled.span`
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
color: ${props => props.$color || '#999'};
|
|
margin-top: 10px;
|
|
display: block;
|
|
`;
|
|
|
|
export const RegistGroup = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
flex-flow: column;
|
|
padding: 20px;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
|
|
${RegistNotice} {
|
|
margin-bottom: 20px;
|
|
}
|
|
`;
|
|
|
|
|
|
|
|
export const RegistTable = styled.table`
|
|
th {
|
|
vertical-align: top;
|
|
line-height: 35px;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #f6f6f6;
|
|
}
|
|
td {
|
|
${RegistInputItem} {
|
|
gap: 5px;
|
|
}
|
|
${TextInput} {
|
|
max-width: 600px;
|
|
padding: 0 15px;
|
|
}
|
|
${Textarea} {
|
|
width: 100%;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
height: 255px;
|
|
padding: 15px;
|
|
&:focus {
|
|
border: 1px solid #2c2c2c;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const SubText = styled.div`
|
|
width: 100%;
|
|
color: #999;
|
|
font-size: 12px;
|
|
`;
|
|
|
|
export const ModalSubText = styled.div`
|
|
width: 100%;
|
|
color: ${props => props.$color || '#999'};
|
|
font-size: 11px;
|
|
text-align: left;
|
|
`;
|
|
|
|
export const ModalInputItem = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 5px;
|
|
`;
|
|
|
|
export const ModalItem = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const ModalItemList = styled.ul`
|
|
display: flex;
|
|
padding: 10px 20px;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export const UserDefaultTable = styled.table`
|
|
border: 1px solid #e8eaec;
|
|
border-top: 1px solid #000;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
th {
|
|
background: #efefef;
|
|
font-weight: 700;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 12px;
|
|
text-align: center;
|
|
border-left: 1px solid #e8eaec;
|
|
vertical-align: middle;
|
|
}
|
|
td {
|
|
background: #fff;
|
|
border-bottom: 1px solid #e8eaec;
|
|
word-break: break-all;
|
|
}
|
|
button {
|
|
height: 24px;
|
|
font-size: 13px;
|
|
}
|
|
`;
|
|
|
|
export const SelectWrapper = styled.div`
|
|
select {
|
|
height: 30px;
|
|
}
|
|
margin-bottom: 10px;
|
|
`;
|
|
|
|
export const RequestTab = styled(Link)`
|
|
padding: 0 8px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
color: ${props => (props.$state === 'active' ? '#2c2c2c' : '#999')};
|
|
&:hover {
|
|
color: #2c2c2c;
|
|
}
|
|
`;
|
|
|
|
export const RequestTabWrapper = styled.div`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
${RequestTab} {
|
|
&:first-child:after {
|
|
content: '';
|
|
display: block;
|
|
width: 1px;
|
|
height: 80%;
|
|
position: absolute;
|
|
background: #666;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const QuestTable = styled(UserDefaultTable)`
|
|
tbody {
|
|
td {
|
|
padding: 9px 12px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const UserTableWrapper = styled.div`
|
|
width: 100%;
|
|
overflow: auto;
|
|
margin-bottom: 40px;
|
|
${UserDefaultTable}, ${QuestTable} {
|
|
margin-bottom: 0;
|
|
}
|
|
&::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
`;
|
|
|
|
export const UserDefault = styled.div`
|
|
display: flex;
|
|
gap: 40px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 30px;
|
|
`;
|
|
export const ProfileWrapper = styled.div`
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 75px;
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
background: #fff;
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
`;
|
|
|
|
export const EditButton = styled.button`
|
|
width: 20px;
|
|
height: 22px;
|
|
background: url(${EditIcon}) 50% 50% no-repeat;
|
|
margin-left: 5px;
|
|
`;
|
|
|
|
export const UserInfoTable = styled.table`
|
|
width: 100%;
|
|
max-width: ${props => props.$maxwidth || 'auto'};
|
|
font-size: 13px;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
tr:first-child {
|
|
th,
|
|
td {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
th,
|
|
td {
|
|
height: 36px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid #d9d9d9;
|
|
}
|
|
th {
|
|
width: 120px;
|
|
background: #888;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
td {
|
|
background: #fff;
|
|
padding: 0 20px;
|
|
}
|
|
`;
|
|
export const UserTabInfo = styled.div`
|
|
padding: 50px;
|
|
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
`;
|
|
|
|
export const InfoSubTitle = styled.div`
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
margin-top: ${({ top }) => (top ? top : '0px')};
|
|
`;
|
|
|
|
export const NoticeInputItem = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center; /* 수평 중앙 정렬 */
|
|
gap: 10px;
|
|
${TextInput},${SelectInput} {
|
|
height: 35px;
|
|
font-size: 14px;
|
|
width: 100px;
|
|
}
|
|
${TextInput} {
|
|
padding: 10px 20px;
|
|
}
|
|
${SelectInput} {
|
|
width: max-content;
|
|
}
|
|
`;
|
|
|
|
export const MessageWrapper = styled.div`
|
|
max-height: 70vh;
|
|
overflow: auto;
|
|
padding-bottom: 10px;
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
`;
|
|
|
|
export const NoticeRegistGroup = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
flex-flow: column;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
`;
|
|
|
|
export const NoticeInputRow = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px 40px;
|
|
`;
|
|
|
|
export const NoticeInputRow2 = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const NoticeInputGroup = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const RepeatTime = styled(NoticeInputGroup)`
|
|
width: 320px;
|
|
`;
|
|
export const InputGroup2 = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 5px;
|
|
`;
|
|
|
|
export const NoticeInputItem2 = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
`;
|
|
|
|
export const SubTextRow = styled.div`
|
|
margin-top: 5px;
|
|
color: red;
|
|
font-size: 12px;
|
|
`;
|
|
|
|
export const BoxWrapper = styled.div`
|
|
margin-top: 5px;
|
|
margin-bottom: 20px;
|
|
`;
|
|
|
|
export const TitleLang = styled.div`
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
padding-left: 5px;
|
|
font-weight: 600;
|
|
`;
|
|
|
|
export const MessageBox = styled.div`
|
|
background: #f9f9f9;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
|
|
${Textarea} {
|
|
border-radius: 3px;
|
|
border: 1px solid #d9d9d9;
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 160px;
|
|
margin-top: 10px;
|
|
}
|
|
${BtnWrapper} {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
`;
|
|
|
|
// FORM
|
|
|
|
export const FormItemGroup = styled.div`
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
`;
|
|
|
|
export const FormGroup = styled.div`
|
|
margin-bottom: 24px;
|
|
`;
|
|
|
|
export const FormRowGroup = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 40px;
|
|
margin-bottom: 24px;
|
|
`;
|
|
|
|
export const FormLabel = styled.label`
|
|
//display: block;
|
|
font-size: 16px;
|
|
margin-bottom: 8px;
|
|
min-width: fit-content;
|
|
font-weight: 700;
|
|
line-height: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
`;
|
|
|
|
export const FormInput = styled.input`
|
|
width: ${props => props.width || '100%'};
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
font-size: 14px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #ef4444;
|
|
}
|
|
&:disabled {
|
|
color: ${props => props.color || '#cccccc'};
|
|
background: ${props => props.background_color || '#f6f6f6'};
|
|
}
|
|
|
|
${props => props.suffix && `
|
|
padding-right: 60px; // 라벨 영역을 위한 여백 확보
|
|
`}
|
|
`;
|
|
|
|
export const FormRowInput = styled.input`
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
font-size: 14px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #ef4444;
|
|
}
|
|
`;
|
|
|
|
export const FormTextArea = styled.textarea`
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
min-height: 120px;
|
|
font-size: 14px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #ef4444;
|
|
}
|
|
&:disabled {
|
|
color: ${props => props.color || '#cccccc'};
|
|
background: ${props => props.background_color || '#f6f6f6'};
|
|
}
|
|
`;
|
|
|
|
export const FormHelperText = styled.div`
|
|
color: red;
|
|
position: relative;
|
|
margin-top: 8px;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
`;
|
|
|
|
export const FormButtonContainer = styled.div`
|
|
display: flex;
|
|
gap: ${props => props.$gap};
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
`
|
|
|
|
export const FormStatusBar = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
`
|
|
|
|
export const FormStatusLabel = styled.div`
|
|
color: #374151;
|
|
font-weight: 500;
|
|
font-size: 1.15rem;
|
|
`;
|
|
|
|
export const FormStatusWarning = styled.div`
|
|
font-size: 0.695rem;
|
|
color: #dc2626;
|
|
`
|
|
|
|
export const FormCharacterLimit = styled.div`
|
|
margin-top: 32px;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const FormTextAreaWrapper = styled.div`
|
|
position: relative;
|
|
`;
|
|
|
|
export const FormInputSuffixWrapper = styled.div`
|
|
position: relative;
|
|
width: ${props => props.width || '100%'};
|
|
display: inline-block;
|
|
`;
|
|
|
|
export const FormInputSuffix = styled.div`
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f1f5f9;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 0 12px;
|
|
border-radius: 0 8px 8px 0;
|
|
border-left: 1px solid #e2e8f0;
|
|
`;
|
|
|
|
export const TitleItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-left: 10px;
|
|
`;
|
|
|
|
export const TitleItemLabel = styled.div`
|
|
color: ${props => props.color || 'black'};
|
|
`;
|
|
|
|
export const TitleItemValue = styled.div`
|
|
font-weight: ${props => props.fontWeight || 500};
|
|
color: ${props => props.color || 'black'};
|
|
`;
|
|
|
|
export const ChargeBtn = styled.button`
|
|
&&{
|
|
width: 60px;
|
|
height: 32px;
|
|
padding: 0.375rem;
|
|
border-radius: 4px;
|
|
font-size: 0.895rem;
|
|
background-color: #D9D9D9;
|
|
color: #495057;
|
|
border: 1px solid #dee2e6;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const StatusLabel = styled.div`
|
|
width: 70px;
|
|
height: 32px;
|
|
padding: 0.375rem;
|
|
border-radius: 4px;
|
|
font-size: 0.895rem;
|
|
background-color: ${props => STATUS_STYLES[props.$status]?.background || 'white'};
|
|
color: ${props => STATUS_STYLES[props.$status]?.color || 'black'};;
|
|
`;
|
|
|
|
export const StatusWapper = styled.td`
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
|
|
export const ExcelDownButton = styled.button`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
|
|
&:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
`;
|
|
|
|
//datepicker
|
|
export const DateTimeGroup = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
`;
|
|
|
|
export const TimeGroup = styled.div`
|
|
display: flex;
|
|
gap: 8px;
|
|
`;
|
|
|
|
export const DateTimeWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin: 0 10px;
|
|
flex-wrap: wrap;
|
|
`;
|
|
|
|
export const DateContainer = styled.div`
|
|
min-width: 100px;
|
|
`;
|
|
|
|
export const TimeContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
`;
|
|
|
|
export const StyledSelectInput = styled(SelectInput)`
|
|
width: 65px;
|
|
padding: 5px 25px 5px 8px;
|
|
`;
|
|
|
|
export const TimeSeparator = styled.span`
|
|
color: #94a3b8;
|
|
margin: 0 2px;
|
|
`; |