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

'use client';

import './style.scss';
import Link from 'next/link';
import Image from 'next/image';
import useAuth from '@/hooks/useAuth';
import { getDateTime, stripHtmlTags } from '@/lib/utils/client';
import NavTabs from '../navTabs';

export default function Profile()
{
	const { member } = useAuth();

	if (!member) {
		return null;
	}

	return (
		<>
		<NavTabs />

		<div id="profile">
			<h1>내 정보</h1>
			<div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
				<table className="table-auto">
					<caption>등록 정보</caption>
					<colgroup>
						<col style={{width: "clamp(80px, 30%, 200px)"}}/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>사용자 ID</th>
							<td colSpan={2}>{member?.sid}</td>
						</tr>
						<tr>
							<th>이메일</th>
							<td>{member?.email}</td>
							<td>
								<Link href="/change-email" className="btn btn-default">이메일 변경</Link>
							</td>
						</tr>
						<tr>
							<th>별명</th>
							<td>{member?.name || '-'}</td>
							<td>
								<Link href="/change-name" className="btn btn-default">별명 변경</Link>
							</td>
						</tr>
						<tr>
							<th>본인인증</th>
							<td>{member?.isAuthCertified ? '인증 완료' : '-'}</td>
							<td></td>
						</tr>
						<tr>
							<th>회원가입 일시</th>
							<td colSpan={2}>{getDateTime(member.createdAt)}</td>
						</tr>
						<tr>
							<th>마지막 로그인 일시</th>
							<td colSpan={2}>{getDateTime(member.lastLoginAt)}</td>
						</tr>
						<tr>
							<th>알림 수신</th>
							<td>
								<div className="flex items-center gap-4 flex-wrap">
									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveSMS} readOnly disabled className="accent-gray-500 cursor-not-allowed" />
										SMS
									</label>

									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveEmail} readOnly disabled className="accent-gray-500 cursor-not-allowed" />
										메일
									</label>

									<label className="flex items-center gap-2 text-gray-700">
										<input type="checkbox" checked={member.memberApprove.isReceiveNote} readOnly disabled className="accent-gray-500 cursor-not-allowed" />
										쪽지
									</label>
								</div>
							</td>
							<td>
								<Link href="/change-approve" className="btn btn-default">수신 설정</Link>
							</td>
						</tr>
					</tbody>
				</table>

				<table className="mt-3 xl:mt-0 table-auto">
					<caption>활동 정보</caption>
					<colgroup>
						<col style={{width: "100%", minWidth: "80px", maxWidth: "30%"}}/>
						<col width="*"/>
						<col width="*"/>
					</colgroup>
					<tbody>
						<tr>
							<th>회원 사진</th>
							<td>
								{member?.thumb ?
								(<Image src={member?.thumb} alt="회원 사진" width={64} height={64} style={{objectFit: "cover"}} unoptimized={true} />) : '-'}
							</td>
							<td>
								<Link href="/change-thumb" className="btn btn-default">사진 변경</Link>
							</td>
						</tr>
						<tr>
							<th>회원 등급</th>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<th>한마디</th>
							<td colSpan={2}>
								<div className="grid grid-cols-[1fr_auto] gap-2 items-center">
									<span className="truncate">{member?.summary || '-'}</span>
									<Link href="/change-summary" className="btn btn-default">한마디 변경</Link>
								</div>
							</td>
						</tr>
						<tr>
							<th>자기소개</th>
							<td colSpan={2}>
								<div className="grid grid-cols-[1fr_auto] gap-2 items-center">
									<span className="truncate">{stripHtmlTags(member.intro) || '-'}</span>
									<Link href="/change-intro" className="btn btn-default">자기소개 변경</Link>
								</div>
							</td>
						</tr>
						<tr>
							<th>경험치</th>
							<td colSpan={2}>{member?.memberStats.exp}</td>
						</tr>
						<tr>
							<th>작성 게시글</th>
							<td colSpan={2}>{member?.memberStats.postCount}</td>
						</tr>
						<tr>
							<th>작성 댓글</th>
							<td colSpan={2}>{member?.memberStats.commentCount}</td>
						</tr>
						<tr>
							<th>구독자</th>
							<td colSpan={2}>{member?.memberStats.followingCount}</td>
						</tr>
					</tbody>
				</table>

				<Link href='/studio' className='text-sky-600 hover:text-red-600 hover:underline'>채널 관리</Link>
			</div>

			<br />

			<dl>
				<dt>회원님의 개인정보는 안전하게 보호됩니다.</dt>
				<dd>※ 의심스러운 활동이 감지되면 즉시 비밀번호를 변경하세요.</dd>
				<dd>※ 보안을 위해 비밀번호를 주기적으로 변경하는 것이 좋습니다.</dd>
				<dd>※ 자동 로그인 기능을 사용하면, 로그인 상태가 유지됩니다.</dd>
				<dd>※ 공용 컴퓨터에서는 자동 로그인을 사용하지 않는 것이 좋습니다.  </dd>
			</dl>
		</div>
		</>
	);
}