motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
mota
2025-11-02 15:13:03 +09:00
parent b10d41532b
commit fadd402e63
31 changed files with 1105 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/AppHeader.tsx
View File

@@ -3,6 +3,9 @@
import Image from "next/image";
import Link from "next/link";
import { SearchBar } from "@/app/components/SearchBar";
import useSWR from "swr";
import { UserAvatar } from "@/app/components/UserAvatar";
import { GradeIcon } from "@/app/components/GradeIcon";
import React from "react";
import { usePathname, useSearchParams } from "next/navigation";
import { SinglePageLogo } from "@/app/components/SinglePageLogo";
@@ -23,6 +26,11 @@ export function AppHeader() {
const [blockWidths, setBlockWidths] = React.useState<Record<string, number>>({});
const closeTimer = React.useRef<number | null>(null);
const [navMinWidths, setNavMinWidths] = React.useState<Record<string, number>>({});
// 모바일 사이드바 열릴 때만 현재 사용자 정보를 가져옵니다(훅은 항상 동일한 순서로 호출)
const { data: meData } = useSWR<{ user: { userId: string; nickname: string; profileImage: string | null; points: number; level: number; grade: number } | null }>(
mobileOpen ? "/api/me" : null,
(u: string) => fetch(u).then((r) => r.json())
);
// 현재 경로 기반 활성 보드/카테고리 계산
const pathname = usePathname();
@@ -416,6 +424,28 @@ export function AppHeader() {
<div className="mb-3 h-10 flex items-center justify-between">
</div>
<div className="flex flex-col gap-4">
{/* 미니 프로필 패널 */}
<div className="rounded-xl border border-neutral-200 p-3">
{meData?.user ? (
<div className="flex items-center gap-3">
<UserAvatar src={meData.user.profileImage} alt={meData.user.nickname || "프로필"} width={48} height={48} className="rounded-full" />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold text-neutral-900 truncate">{meData.user.nickname}</span>
<GradeIcon grade={meData.user.grade} width={20} height={20} />
</div>
<div className="text-xs text-neutral-600">Lv.{meData.user.level} · {meData.user.points.toLocaleString()}점</div>
</div>
</div>
) : (
<div className="text-sm text-neutral-600">로그인 정보를 불러오는 중...</div>
)}
<div className="grid grid-cols-3 gap-2 mt-3">
<Link href="/my-page?tab=points" onClick={() => setMobileOpen(false)} className="h-9 rounded-md border border-neutral-300 text-xs flex items-center justify-center hover:bg-neutral-100">포인트 히스토리</Link>
<Link href="/my-page?tab=posts" onClick={() => setMobileOpen(false)} className="h-9 rounded-md border border-neutral-300 text-xs flex items-center justify-center hover:bg-neutral-100">내가 쓴 글</Link>
<Link href="/my-page?tab=comments" onClick={() => setMobileOpen(false)} className="h-9 rounded-md border border-neutral-300 text-xs flex items-center justify-center hover:bg-neutral-100">내가 쓴 댓글</Link>
</div>
</div>
<SearchBar />
<Link
href="/admin"