bcjang/operationSystem-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
bcjang
2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/components/ServiceManage/modal/ReportListDetailModal.js Normal file
View File

@@ -0,0 +1,221 @@
import { styled } from 'styled-components';
import { Title, BtnWrapper, TextInput, Label, Textarea, InputItem } from '../../../styles/Components';
import Modal from '../../common/modal/Modal';
import Button from '../../common/button/Button';
import { useEffect, useState } from 'react';
import { convertKTC } from '../../../utils';
const ReportListDetailModal = ({ detailView, handleDetailView, handleReply, detailData, replyData, replyAuth }) => {
const [dataList, setDataList] = useState([]);
// UTC + 9 처리 해줄 변수
const RESOLVE_TIME = detailData && new Date(detailData.resolution_time);
const REPORT_TIME = detailData && new Date(detailData.create_time);
// 신고 유형 데이터 매핑
const report_type = [
{ value: 'ALL', name: '전체' },
{ value: 'UNMANNERED_ACT', name: '비매너 행위' },
{ value: 'USE_UNHEALTHY_NAMES', name: '불건전 이름 사용' },
{ value: 'CASH_TRADING', name: '현금거래 행위' },
{ value: 'INTERFERENCE_GAME', name: '게임 진행 방해' },
{ value: 'INTERFERENCE_SERVICE', name: '운영서비스 방해' },
{ value: 'ACCOUNT_EXPLOITATION', name: '계정도용' },
{ value: 'BUG_ABUSING', name: '버그/어뷰징' },
{ value: 'USE_HACK', name: '불법프로그램 사용' },
{ value: 'LEAK_PERSONAL_INFO', name: '개인정보 유출' },
{ value: 'PRETENDING_GM', name: '운영자 사칭' },
];
// console.log(detailData);
useEffect(() => {
setDataList({
create_time: detailData && convertKTC(REPORT_TIME, false),
detail: detailData && detailData.detail,
manager_email: replyData && replyData.manager_email,
report_type: detailData && detailData.report_type,
reporter_guid: detailData && detailData.reporter_guid,
reporter_nickname: detailData && detailData.reporter_nickname,
resolution_time: detailData && detailData.resolution_time,
state: detailData && detailData.state,
target_guid: detailData && detailData.target_guid,
target_nickname: detailData && detailData.target_nickname,
title: detailData && detailData.title,
});
}, [detailData]);
// console.log('모달창에서 리포트 상세 정보 : ', dataList);
return (
<>
<Modal min="960px" $view={detailView}>
<Title $align="center">신고내역 상세 정보</Title>
{/* RegistInfo는 답변 완료시에만 보여집니다 */}
{dataList && dataList.resolution_time && (
<RegistInfo>
<span>등록자(이메일주소) : {dataList && dataList.manager_email}</span>
<span>등록일 : {dataList && convertKTC(RESOLVE_TIME)}</span>
</RegistInfo>
)}
<Subtitle>[신고 대상 정보]</Subtitle>
<ReportDetailState>
<table>
<caption></caption>
<tbody>
<tr>
<th width="120">신고 일자</th>
<td>{dataList.create_time}</td>
<th width="120">신고 유형</th>
<td>{report_type.map(data => data.value === (dataList && dataList.report_type) && data.name)}</td>
</tr>
<tr>
<th>처리상태</th>
<td colSpan="3">{dataList && dataList.state === 'RESOLVED' ? <ReportState results="solved">해결</ReportState> : <ReportState results="remain">미해결</ReportState>}</td>
</tr>
<tr>
<th width="100px">신고자 GUID</th>
<td>
<TextInput value={(dataList && dataList.reporter_guid) || ''} readOnly />
</td>
<th width="100px">닉네임</th>
<td>
<TextInput value={(dataList && dataList.reporter_nickname) || ''} readOnly />
</td>
</tr>
<tr>
<th width="100px">신고대상 GUID</th>
<td>
<TextInput value={(dataList && dataList.target_guid) || ''} readOnly />
</td>
<th width="100px">닉네임</th>
<td>
<TextInput value={(dataList && dataList.target_nickname) || ''} readOnly />
</td>
</tr>
</tbody>
</table>
</ReportDetailState>
<Subtitle>[신고내용]</Subtitle>
<AnswerRegistTable>
<tbody>
<tr>
<th width="120">
<Label>제목</Label>
</th>
<td>
<InputItem>
<TextInput maxLength="30" value={(dataList && dataList.title) || ''} readOnly />
</InputItem>
</td>
</tr>
<tr>
<th>
<Label>내용</Label>
</th>
<td>
<Textarea value={(dataList && dataList.detail) || ''} readOnly></Textarea>
</td>
</tr>
</tbody>
</AnswerRegistTable>
<BtnWrapper $justify="flex-end" $gap="10px">
<Button text="확인" theme="line" handleClick={() => handleDetailView()} />
{
// 답변이 있을 때
dataList && dataList.resolution_time ? (
<Button text="답변보기" theme="line" handleClick={() => handleReply()} />
) : // 답변이 없고, 답변 권한이 있을 때
dataList && !dataList.resolution_time && replyAuth ? (
<Button text="답변하기" theme="primary" handleClick={() => handleReply()} />
) : (
// 답변이 없고, 답변 권한도 없을 때
<></>
)
}
</BtnWrapper>
</Modal>
</>
);
};
export default ReportListDetailModal;
const ReportDetailState = styled.div`
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 15px 10px;
font-size: 14px;
margin-bottom: 20px;
input {
height: 35px;
max-width: 330px;
font-size: 14px;
padding: 5px 10px;
}
table {
tr {
th,
td {
padding: 5px;
height: 45px;
vertical-align: middle;
}
}
}
`;
const ReportState = styled.span`
font-weight: 600;
color: ${props => (props.results === 'solved' ? '#08994B' : props.results === 'remain' ? '#ff0000' : '#2c2c2c')};
`;
const RegistInfo = styled.div`
display: flex;
justify-content: flex-end;
gap: 50px;
font-size: 14px;
margin-bottom: 10px;
`;
const Subtitle = styled.div`
font-size: 16px;
font-weight: 500;
line-height: 1.6;
`;
const AnswerRegistTable = styled.table`
border-top: 1px solid #999;
margin-bottom: 20px;
th,
td {
padding: 15px 0;
border-bottom: 1px solid #f6f6f6;
}
tr:last-child {
th,
td {
padding: 15px 0;
border-bottom: 1px solid #999;
}
}
th {
vertical-align: top;
line-height: 30px;
}
td {
${TextInput} {
max-width: 600px;
}
${Textarea} {
width: 100%;
border: 1px solid #d9d9d9;
border-radius: 5px;
height: 150px;
padding: 15px;
&:focus {
border: 1px solid #2c2c2c;
}
}
}
`;