dpot-frontend/app/(main)/(forum)/latest/_component/LatestListLayout.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 { formatDate } from '@/lib/utils/client';
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 {
	list: Post[];
	startIndex?: number;
}

export default function LatestListLayout({list, startIndex}: Props)
{
	const searchParams = useSearchParams();
	const query = useMemo(() => Object.fromEntries(searchParams.entries()), [searchParams]);

	return (
		<section className="latest-list-layout" aria-label='최근 게시글'>
			<article>
				<ul>
					<li>번호</li>
					<li>게시판</li>
					<li>제목</li>
					<li>작성자</li>
					<li>작성일</li>
					<li>조회수</li>
					<li>좋아요</li>
				</ul>
			</article>
			<article>
				{list.length > 0 && (
					list.map((row, i) => {
						const createdAt = formatDate(row.createdAt);
						const postViewUrl = {pathname: '/post/' + row.id, query};

						return (
							<section key={row.id}>
								{/* PC */}
								<ol>
									<li>
										<small>{startIndex !== undefined ? startIndex - i : i + 1}</small>
									</li>
									<li>{row.boardName}</li>
									<li>
										{row.boardPrefix && row.boardPrefixID && (
											<span className='prefix'>[{row.boardPrefix.name}]</span>
										)}
										<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} />}
										</Link>
									</li>
									<li>{row.name || row.sid}</li>
									<li>{createdAt}</li>
									<li>{row.views}</li>
									<li>{row.likes}</li>
								</ol>

								{/* Mobile */}
								<dl hidden>
									<dt>
										<span className='board-name'>{row.boardName}</span>
										{row.boardPrefix && row.boardPrefixID && (
											<span className='prefix'>[{row.boardPrefix.name}]</span>
										)}
										<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} />}
										</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>
	);
}