operationSystem-front/src/components/ServiceManage/modal/ReportListDetailModal.js

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;
			}
		}
	}
`;