dpot-frontend/app/(main)/(account)/my-posts/page.tsx

'use client';

import './style.scss';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { fetchApi, getDateTime } from '@/lib/utils/client';
import type { MyPostsResponse } from '@/types/response/account/myPosts';
import Loading from '@/app/component/Loading';
import Pagination from '@/app/component/Pagination';
import NavTabs from '../navTabs';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp, faEye } from '@fortawesome/free-regular-svg-icons';
import { faLock, faReply, faFloppyDisk, faImage, faVideo } from '@fortawesome/free-solid-svg-icons';

export default function MyPosts()
{
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(true);
	const [page, setPage] = useState<number>(1);
	const [data, setData] = useState<MyPostsResponse>({
		total: 0,
		list: []
	});

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

	useEffect(() => {
		setLoading(true);
		fetchApi<MyPostsResponse>(`/api/mypage/posts?page=${page}&perPage=20`).then((res) => {
			setData(res.data!);
		}).catch(err => {
			setError(err.message);
		}).finally(() => {
			setLoading(false);
		});
	}, [page]);

	return (
		<>
		<NavTabs />

		<div id="myPosts">
			{ loading && <Loading /> }

			<h1>작성 게시글</h1>
			<div className="summary">합계： {data.total}</div>

			<section className="mypage-list">
				<article>
					<ul>
						<li>번호</li>
						<li>게시판</li>
						<li>제목</li>
						<li>조회</li>
						<li>추천</li>
						<li>댓글</li>
						<li>작성일</li>
					</ul>
				</article>
				<article>
					{data.list.length > 0 ? (
						data.list.map((row) => (
							<section key={row.id}>
								{/* PC */}
								<ol>
									<li>{row.num}</li>
									<li>{row.boardName}</li>
									<li>
										{row.isSecret && <FontAwesomeIcon icon={faLock} />}
										{row.isReply && <FontAwesomeIcon icon={faReply} />}
										<Link href={`/post/${row.id}`}>
											<em>{row.subject} {row.comments > 0 && <span>[{row.comments}]</span>}</em>
											{row.files > 0 && <FontAwesomeIcon icon={faFloppyDisk} />}
											{row.images > 0 && <FontAwesomeIcon icon={faImage} />}
											{row.medias > 0 && <FontAwesomeIcon icon={faVideo} />}
										</Link>
									</li>
									<li>{row.views}</li>
									<li>{row.likes}</li>
									<li>{row.comments}</li>
									<li>{getDateTime(row.createdAt)}</li>
								</ol>

								{/* Mobile */}
								<dl hidden>
									<dt>
										{row.isSecret && <FontAwesomeIcon icon={faLock} />}
										{row.isReply && <FontAwesomeIcon icon={faReply} />}
										<Link href={`/post/${row.id}`}>
											<em>{row.subject} {row.comments > 0 && <span>[{row.comments}]</span>}</em>
											{row.files > 0 && <FontAwesomeIcon icon={faFloppyDisk} />}
											{row.images > 0 && <FontAwesomeIcon icon={faImage} />}
											{row.medias > 0 && <FontAwesomeIcon icon={faVideo} />}
										</Link>
									</dt>
									<dd>
										<ul>
											<li>{row.boardName}</li>
											<li><FontAwesomeIcon icon={faEye} /> {row.views}</li>
											<li><FontAwesomeIcon icon={faThumbsUp} /> {row.likes}</li>
											<li>{getDateTime(row.createdAt)}</li>
										</ul>
									</dd>
								</dl>
							</section>
						))
					) : (
						<p className="empty">작성한 게시글이 없습니다.</p>
					)}
				</article>
			</section>

			{data.list.length > 0 && (
				<Pagination total={data.total} page={page} perPage={20} onChange={setPage} />
			)}
		</div>
		</>
	);
}