bitforum-frontend/app/(forum)/board/_component/DefaultListLayout.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, isHotPost, isNewPost } from '@/lib/utils/client';
import NoticeListLayout from './NoticeListLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment, faThumbsUp, faEye } from '@fortawesome/free-regular-svg-icons';

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

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

	return (
		<>
			<section className="default-list-layout" aria-label='일반 게시판'>
				<article>
					<ul>
						<li>번호</li>
						<li>제목</li>
						<li>작성자</li>
						<li>작성일</li>
						<li>조회수</li>
						<li>좋아요</li>
					</ul>
				</article>
				<article>
					{/* 전체 공지 */}
					<NoticeListLayout isEnabled={!boardListMeta.exceptSpeaker} list={speaker} layout={boardListMeta.layout} />

					{/* 일반 공지 */}
					<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 isHot = isHotPost(boardListMeta.isHotIcon, 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}</em>
												{isNew && <span><img src='/resources/new.gif' alt='NEW'/></span>}
												{isHot && <span><img src='/resources/hot.gif' alt='HOT'/></span>}
											</Link>
										</li>
										<li>{row.name || row.sid}</li>
										<li>{createdAt}</li>
										<li>{row.views}</li>
										<li>{row.likes}</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>}
												{isHot && <span><img src='/resources/hot.gif' alt='HOT'/></span>}
											</Link>
										</dt>
										<dd>
											<ul>
												<li>{row.name || row.sid}</li>
												<li><FontAwesomeIcon icon={faComment} /> {row.comments}</li>
												<li><FontAwesomeIcon icon={faEye} /> {row.views}</li>
												<li><FontAwesomeIcon icon={faThumbsUp} /> {row.likes}</li>
												<li>{createdAt}</li>
											</ul>
										</dd>
									</dl>
								</section>
							);
						})
					)}

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