dpot-frontend/app/(main)/(forum)/board/_component/DefaultListLayout.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useMemo } from 'react';
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';
import { faFloppyDisk, faImage, faVideo } from '@fortawesome/free-solid-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();
	const query = useMemo(() => Object.fromEntries(searchParams.entries()), [searchParams]);

	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 isNew = isNewPost(boardListMeta.isNewIcon, row);
							const isHot = isHotPost(boardListMeta.isHotIcon, row);
							const createdAt = formatDate(row.createdAt);
							const postViewUrl = {pathname: '/post/' + row.id, query};

							return (
								<section key={row.id}>
									{/* PC */}
									<ol>
										<li>
											{row.isNotice ? (
												<small>{startIndex !== undefined ? startIndex - i : i + 1}</small>
											) : (
												<small>공지</small>
											)}
										</li>
										<li>
											{row.boardPrefix && row.boardPrefixID && onChange && (
												<button type="button" onClick={() => onChange(row.boardPrefixID || undefined)}>
													[{row.boardPrefix.name}]
												</button>
											)}
											<Link href={postViewUrl}>
												<em>{row.subject} {row.comments > 0 && <span>[{row.comments}]</span>}</em>
												{row.files > 0 && <FontAwesomeIcon icon={faFloppyDisk} />}
												{row.images > 0 && <FontAwesomeIcon icon={faImage} />}
												{row.videos > 0 && <FontAwesomeIcon icon={faVideo} />}
												{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 && onChange && (
												<button type="button" onClick={() => onChange(row.boardPrefixID || undefined)}>
													[{row.boardPrefix.name}]
												</button>
											)}
											<Link href={postViewUrl}>
												<em>{row.subject} {row.comments > 0 && <span>[{row.comments}]</span>}</em>
												{row.files > 0 && <FontAwesomeIcon icon={faFloppyDisk} />}
												{row.images > 0 && <FontAwesomeIcon icon={faImage} />}
												{row.videos > 0 && <FontAwesomeIcon icon={faVideo} />}
												{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>
		</>
	);
}