feat(ui): 헤더 로고 및 기본 레이아웃 골격 추가
docs(todo): 헤더 네비 작업 1~2번 완료 표시
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
### 헤더 네비 작업 체크리스트 (순서)
|
### 헤더 네비 작업 체크리스트 (순서)
|
||||||
|
|
||||||
1) 레퍼런스 분석
|
1) 레퍼런스 분석
|
||||||
- [ ] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
|
- [x] ref/headerref01.html 구조/스타일 패턴 분석 (접근성/반응형 확인)
|
||||||
|
|
||||||
2) 기본 골격/리소스 준비
|
2) 기본 골격/리소스 준비
|
||||||
- [ ] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
|
- [x] 로고 파일 경로 확인(`/public/logo.png`) 및 Next Image 적용 여부 결정
|
||||||
- [ ] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)
|
- [x] 헤더 컨테이너/레이아웃 골격 생성(`src/app/components/AppHeader.tsx` 확장)
|
||||||
|
|
||||||
3) 데이터 연동 설계
|
3) 데이터 연동 설계
|
||||||
- [ ] 대분류 소스 결정: `GET /api/boards?category=...` 또는 카테고리 전용 API 사용
|
- [ ] 대분류 소스 결정: `GET /api/boards?category=...` 또는 카테고리 전용 API 사용
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
// 클라이언트 훅(useState/useEffect)을 사용하여 세션 표시/로그아웃을 처리합니다.
|
// 클라이언트 훅(useState/useEffect)을 사용하여 세션 표시/로그아웃을 처리합니다.
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
import { ThemeToggle } from "@/app/components/ThemeToggle";
|
import { ThemeToggle } from "@/app/components/ThemeToggle";
|
||||||
import { SearchBar } from "@/app/components/SearchBar";
|
import { SearchBar } from "@/app/components/SearchBar";
|
||||||
import { Button } from "@/app/components/ui/Button";
|
import { Button } from "@/app/components/ui/Button";
|
||||||
@@ -20,11 +22,15 @@ export function AppHeader() {
|
|||||||
location.reload();
|
location.reload();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
|
<header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: 12 }}>
|
||||||
<div>msg App</div>
|
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||||||
|
<Link href="/" aria-label="홈">
|
||||||
|
<Image src="/logo.png" alt="logo" width={120} height={28} priority />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
<nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
|
<nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
|
||||||
<a href="/">홈</a>
|
{/* 대분류/소분류 네비는 이후 단계에서 데이터 연동 포함 확장 */}
|
||||||
<a href="/boards">게시판</a>
|
<Link href="/boards">게시판</Link>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
{user ? (
|
{user ? (
|
||||||
@@ -33,7 +39,7 @@ export function AppHeader() {
|
|||||||
<Button variant="ghost" onClick={onLogout}>로그아웃</Button>
|
<Button variant="ghost" onClick={onLogout}>로그아웃</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<a href="/login">로그인</a>
|
<Link href="/login">로그인</Link>
|
||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Reference in New Issue
Block a user