bitforum-frontend/app/(forum)/post/_component/LatestPosts.tsx

'use client';

import './style.scss';
import '../../board/_component/style.scss';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import Image, { ImageProps } from 'next/image';
import { useState, useEffect } from 'react';
import { clsx } from 'clsx';
import { BoardListMeta } from '@/types/forum/boardMeta';
import { fetchLatestPosts } from '@/lib/api/forum/board';
import LatestPostsRequest from '@/dtos/request/forum/board/latestPostsRequest'
import LatestPostsResponse from '@/dtos/response/forum/board/latestPostsResponse'
import { throwError, isNewPost, isHotPost, formatDate } from '@/lib/utils/client';
import Loading from '@/app/component/Loading';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment, faThumbsUp, faEye, faClock } from '@fortawesome/free-regular-svg-icons';
import { BoardLayout } from '@/constants/forum';

type Props = {
	boardListMeta: BoardListMeta;
	boardID: number;
	boardCode: string;
	postID?: number|null;
}

function ImageWithFallback({
	src,
	fallbackSrc = '/resources/no-image.png',
	alt,
	...option
}: ImageProps & { fallbackSrc?: string }) {
	const [imgSrc, setImgSrc] = useState(src);

	return (
		<Image
			{...option}
			src={imgSrc}
			alt={alt}
			onError={() => setImgSrc(fallbackSrc)}
		/>
	);
}

export default function LatestPosts(params : Props)
{
	const searchParams = useSearchParams();
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(false);
	const [latestPosts, setLatestPosts] = useState<LatestPostsResponse>({
		list: []
	});
	const query = Object.fromEntries(searchParams.entries());

	useEffect(() => {
		if (error) {
			alert(error);
			setError('');
		}
	}, [error]);

	useEffect(() => {
		(async () => {

			setLoading(true);

			const page = searchParams.get('page');
			const perPage = searchParams.get('perPage');
			const boardPrefixID = searchParams.get('boardPrefixID');

			fetchLatestPosts({
				boardID: params.boardID,
				boardCode: params.boardCode,
				postID: params.postID,
				page: page ? Number(page) : null,
				perPage: perPage ? Number(perPage) : null,
				boardPrefixID: boardPrefixID ? Number(boardPrefixID) : null,
				sort: searchParams.get('sort'),
				search: searchParams.get('search'),
				keyword: searchParams.get('keyword'),
			} as LatestPostsRequest).then((res) => {
				throwError(res);
				setLatestPosts(res.data as LatestPostsResponse);
			}).catch((err) => {
				setError(err.message);
			}).finally(() => {
				setLoading(false);
			});

		})();
	}, []);

	const handleClick = (boardPrefixID: number|null) => {
		const querys = new URLSearchParams(searchParams.toString());
		if (boardPrefixID) {
			querys.set('prefix', String(boardPrefixID));
		}
		window.location.href = `/board/${params.boardCode}?${querys.toString()}`;
	}

	if (latestPosts.list.length <= 0) {
		return;
	}

	return (
		<>
		<div id="latestPosts">
			{loading && <Loading />}

			<article>

				{params.boardListMeta.layout == BoardLayout.Default && (
				<section className="default-list-layout" aria-label='일반 게시판'>
					<article>
						<ul>
							<li>번호</li>
							<li>제목</li>
							<li>작성자</li>
							<li>작성일</li>
							<li>조회수</li>
							<li>좋아요</li>
						</ul>
					</article>
					<article>
						{/* 일반 글 */}
						{(latestPosts.list.map((row) => {
								const query = Object.fromEntries(searchParams.entries());
								const isNew = isNewPost(params.boardListMeta.isNewIcon, row);
								const isHot = isHotPost(params.boardListMeta.isHotIcon, row);
								const createdAt = formatDate(row.createdAt);

								return (
									<section key={row.id} className={clsx({ active: row.isActive })}>
										{/* PC */}
										<ol>
											<li>
												<small>{row.no}</small>
											</li>
											<li>
												{row.boardPrefixID && (
													<button type="button" onClick={() => handleClick(row.boardPrefixID)}>
														[{row.boardPrefixName}]
													</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>
												<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>
								);
							})
						)}
					</article>
				</section>
				)}

				{/* 1:1문의 */}
				{params.boardListMeta.layout == BoardLayout.QnA && (
				<section className="qna-list-layout" aria-label='일반 게시판'>
					<article>
						<ul>
							<li>번호</li>
							<li>제목</li>
							<li>작성자</li>
							<li>답변 여부</li>
							<li>작성일</li>
						</ul>
					</article>
					<article>

						{(latestPosts.list.map((row) => {
								const query = Object.fromEntries(searchParams.entries());
								const isNew = isNewPost(params.boardListMeta.isNewIcon, row);
								const createdAt = formatDate(row.createdAt);

								return (
									<section key={row.id} className={clsx({ active: row.isActive })}>
										{/* PC */}
										<ol>
											<li>
												<small>{row.no}</small>
											</li>
											<li>
												{row.boardPrefixID && (
													<button type="button" onClick={() => handleClick(row.boardPrefixID)}>
														[{row.boardPrefixName}]
													</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>
												<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>
								);
							})
						)}
					</article>
				</section>
				)}

				{/* 사진/동영상 글 */}
				{params.boardListMeta.layout == BoardLayout.Media && (
				<section aria-label='사진/동영상 게시판'>
					<article>
						<div className="album-list-layout">
						{(latestPosts.list.map((row) => {
								const query = Object.fromEntries(searchParams.entries());
								const isNew = isNewPost(params.boardListMeta.isNewIcon, row);
								const isHot = isHotPost(params.boardListMeta.isHotIcon, row);
								const createdAt = formatDate(row.createdAt);

								// 사진/동영상 게시판
								const href = `/post/${row.id}${window.location.search}`;
								return (
									<div key={row.id} className={clsx({ active: row.isActive })}>
										<figure>
											<article>
												<Link href={href}>
													{row.thumbnail ? (
														<ImageWithFallback src={row.thumbnail} alt={row.subject} fill style={{ objectFit: 'cover' }} loading="lazy" />
													) : (
														<Image src='/resources/no-image.png' alt={row.subject} loading='lazy' fill />
													)}
												</Link>
											</article>
											<dl>
												<dt>
													{row.boardPrefixID && (
														<button type="button" onClick={() => handleClick(row.boardPrefixID)}>
															[{row.boardPrefixName}]
														</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>}
														{isHot && <span><img src='/resources/hot.gif' alt='HOT'/></span>}
													</Link>
												</dt>
												<dd>{row.name}</dd>
											</dl>
											<figcaption>
												<ul>
													<li><FontAwesomeIcon icon={faThumbsUp} /> {row.likes}</li>
													<li><FontAwesomeIcon icon={faEye} /> {row.views}</li>
													<li><FontAwesomeIcon icon={faClock} /> {createdAt}</li>
												</ul>
											</figcaption>
										</figure>
									</div>
								);
							})
						)}
						</div>
					</article>
				</section>
				)}
			</article>

			<article>
				<Link href={{
					pathname: '/board/' + params.boardCode,
					query: {
						...query
					}
				}} className='btn btn-default'>목록으로</Link>
			</article>
		</div>
		</>
	);
}