bitforum-frontend/app/(forum)/board/_component/QnAListLayout.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import Post from '@/types/forum/post';
import { BoardListMeta } from '@/types/forum/boardMeta';
import { formatDate, isNewPost } from '@/lib/utils/client';
import NoticeListLayout from './NoticeListLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment } from '@fortawesome/free-regular-svg-icons';

interface Props {
	boardListMeta: BoardListMeta;
	notice: Post[];
	list: Post[];
	startIndex: number;
	onChange: (_: number|undefined) => void;
}

export default function QnAListLayout({boardListMeta, notice, list, startIndex, onChange}: Props)
{
	const searchParams = useSearchParams();

	return (
		<>
			<section className='qna-list-layout' aria-label='1:1문의 게시판'>
				<article>
					<ul>
						<li>번호</li>
						<li>제목</li>
						<li>작성자</li>
						<li>답변 여부</li>
						<li>작성일</li>
					</ul>
				</article>
				<article>
					{/* 일반 공지 */}
					<NoticeListLayout isEnabled={!boardListMeta.exceptNotice} list={notice} layout={boardListMeta.layout} />

					{/* 일반 글 */}
					{list.length > 0 && (
						list.map((row, i) => {
							const query = Object.fromEntries(searchParams.entries());
							const isNew = isNewPost(boardListMeta.isNewIcon, row);
							const createdAt = formatDate(row.createdAt);

							return (
								<section key={row.id}>
									{/* PC */}
									<ol>
										<li>
											<small>{startIndex - i}</small>
										</li>
										<li>
											{row.boardPrefix && row.boardPrefixID && (
												<button type="button" onClick={() => onChange(row.boardPrefixID || undefined)}>
													[{row.boardPrefix.name}]
												</button>
											)}

											<Link href={{
													pathname: '/post/' + row.id,
													query: {
														...query
													}
												}}
											>
												<em>{row.subject} {row.comments > 0 && (<span>[{row.comments}]</span>)}</em>
												{isNew && <span><img src='/resources/new.gif' alt='NEW'/></span>}
											</Link>
										</li>
										<li>{row.name || row.sid}</li>
										<li>
											{!row.isReply ? (
												<span className='inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-yellow-600/20 ring-inset'>
													대기
												</span>
											) : (
												<span className='inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-600/20 ring-inset'>
													완료
												</span>
											)}
										</li>
										<li>{createdAt}</li>
									</ol>

									{/* Mobile */}
									<dl hidden>
										<dt>
											{row.boardPrefix && row.boardPrefixID && (
												<button type="button" onClick={() => onChange(row.boardPrefixID || undefined)}>
													[{row.boardPrefix.name}]
												</button>
											)}

											<Link href={{
													pathname: '/post/' + row.id,
													query: {
														...query
													}
												}}
											>
												<em>{row.subject}</em>
												{isNew && <span><img src='/resources/new.gif' alt='NEW'/></span>}
											</Link>
										</dt>
										<dd>
											<ul>
												<li>{row.name || row.sid}</li>
												<li><FontAwesomeIcon icon={faComment} /> {row.comments}</li>
												<li>
													{!row.isReply ? (
														<span className='inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-yellow-600/20 ring-inset'>
															대기
														</span>
													) : (
														<span className='inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-600/20 ring-inset'>
															완료
														</span>
													)}
												</li>
												<li>{createdAt}</li>
											</ul>
										</dd>
									</dl>
								</section>
							);
						})
					)}

					{list.length <= 0 && (
						<section>
							<p className="text-center p-10">
								1:1문의 글이 없습니다.
							</p>
						</section>
					)}
				</article>
			</section>
		</>
	);
}