core/components/ReportTemplate.tsx

import { FC, useState } from 'react'
import dynamic from 'next/dynamic'
import { FormikErrors, FormikTouched } from 'formik'

const Button = dynamic(() => import('@components/Button'))
const TextArea = dynamic(() => import('@components/Form/TextArea'))

export const Check: FC<{ checked: boolean; text: string }> = ({ checked, text }) => (
	<>
		{checked && <i className='fas fa-check-circle mr-1 text-emerald-400' />}
		{text}
	</>
)

export const SubmitButton: FC = () => (
	<div className='text-right'>
		<Button type='submit'>제출</Button>
	</div>
)

export const TextField: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => (
	<>
		<TextArea
			name='description'
			placeholder='최대한 자세하게 설명해주세요!'
			value={values.description}
			setValue={(value) => setFieldValue('description', value)}
		/>
		<div className='mt-1 text-xs font-light text-red-500'>
			{errors.description && touched.description ? errors.description : null}
		</div>
		<SubmitButton />
	</>
)

export const DMCA: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => {
	const [isOwner, setOwner] = useState(null)
	const [contacted, setContacted] = useState(null)
	return (
		<div>
			<h3 className='my-2 font-bold'>권리자와는 어떤 관계인가요?</h3>
			<Button onClick={() => setOwner(true)}>
				<Check checked={isOwner} text='권리자 본인 혹은 대리인입니다.' />
			</Button>
			<Button onClick={() => setOwner(false)}>
				<Check checked={isOwner === false} text='권리자가 아닙니다.' />
			</Button>
			{isOwner === true ? (
				<>
					<h3 className='my-2 font-bold'>
						권리 침해자에게 연락하여 라이선스 위반사항을 고지하셨나요?
					</h3>
					<Button onClick={() => setContacted(true)}>
						<Check checked={contacted} text='최대한 연락을 시도하였지만 개선되지 않았습니다.' />
					</Button>
					<Button onClick={() => setContacted(false)}>
						<Check checked={contacted === false} text='아니요, 아직 연락하지 않았습니다.' />
					</Button>
					{contacted ? (
						<div>
							<h3 className='mt-2 font-bold'>설명</h3>
							<p className='mb-1 text-sm text-gray-400'>반드시 아래 항목들을 포함해야합니다.</p>
							<ul className='mb-1 list-inside list-disc text-sm text-gray-400'>
								<li>
									권리자 본인임을 증명 (단체 소속인 경우 어떤 자격으로 단체를 대표하여 신고하는지
									설명)
								</li>
								<li>본인의 권리를 입증 (원본 콘텐츠의 주소, 라이선스 등을 포함)</li>
							</ul>
							<p className='mb-1 text-sm text-gray-400'>
								콘텐츠를 추가로 첨부해야하는 경우{' '}
								<a
									className='text-blue-400'
									target='_blank'
									rel='noreferrer'
									href={`mailto:dmca@koreanbots.dev?subject=${encodeURI(
										'[DMCA] 추가 콘텐츠'
									)}&body=${encodeURI('디스코드 태그:')}`}
								>
									dmca@koreanbots.dev
								</a>
								의 이메일로 첨부해주시고, 해당 이메일로 첨부했음을 아래 설명에 기재해주세요.
							</p>
							<TextField
								values={values}
								errors={errors}
								touched={touched}
								setFieldValue={setFieldValue}
							/>
						</div>
					) : contacted === false ? (
						<>
							<h2 className='mt-4 text-xl font-bold'>먼저 권리 침해자에게 연락을 시도해주세요.</h2>
							<p>
								본인의 권리를 침해하신 분께 먼저 연락을 시도하셔서 위반사항을 고지하시고, 연락이
								불가하다면 신고 기능을 이용해주세요.
							</p>
						</>
					) : (
						''
					)}
				</>
			) : isOwner === false ? (
				<>
					<h2 className='mt-4 text-xl font-bold'>
						아쉽지만, 권리자 본인 혹은 대리인만 신고하실 수 있습니다.
					</h2>
					<p>권리자 분께 말씀드려, 권리자 본인이 직접 신고하시도록 해주세요!</p>
				</>
			) : (
				''
			)}
		</div>
	)
}

interface ReportValues {
	category: string | null
	description: string
	_csrf: string
}
interface ReportTemplateProps {
	values?: ReportValues
	errors?: FormikErrors<ReportValues>
	touched?: FormikTouched<ReportValues>
	setFieldValue?(field: string, value: unknown): void
}