generated from pricelees/issue-pr-template
pricelees
ef903cf267
<!-- 제목 양식 --> <!-- [이슈번호] 작업 요약 (예시: [#10] Gitea 템플릿 생성) --> ## 📝 관련 이슈 및 PR **PR과 관련된 이슈 번호** - #22 ## ✨ 작업 내용 <!-- 어떤 작업을 했는지 알려주세요! --> - 기존 Thymeleaf 기반의 프론트엔드 코드를 React + Typescript 기반으로 마이그레이션 - 프론트엔드 분리에 따른 인증 API 수정 및 회원가입 API 추가 ## 🧪 테스트 <!-- 어떤 테스트를 생각했고 진행했는지 알려주세요! --> - 새로 추가된 API, 변경된 API 테스트 반영 ## 📚 참고 자료 및 기타 <!-- 참고한 자료, 또는 논의할 사항이 있다면 알려주세요! --> 프론트엔드 코드는 Gemini CLI가 구현하였고, API 관련 코드(ee21782ef9, frontend/src/api/**) 만 직접 구성 Reviewed-on: #23 Co-authored-by: pricelees <priceelees@gmail.com> Co-committed-by: pricelees <priceelees@gmail.com>
64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
|
|
const AdminNavbar: React.FC = () => {
|
|
const { loggedIn, userName, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
await logout();
|
|
navigate('/');
|
|
} catch (error) {
|
|
console.error("Logout failed", error);
|
|
// Handle logout error if needed
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light">
|
|
<Link className="navbar-brand" to="/admin">
|
|
<img src="/image/admin-logo.png" alt="LOGO" style={{ height: '40px' }} />
|
|
</Link>
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav ms-auto">
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/reservation">Reservation</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/waiting">Waiting</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/theme">Theme</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/time">Time</Link>
|
|
</li>
|
|
{!loggedIn ? (
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/login">Login</Link>
|
|
</li>
|
|
) : (
|
|
<li className="nav-item dropdown">
|
|
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<img className="profile-image" src="/image/default-profile.png" alt="Profile" />
|
|
<span id="profile-name">{userName || 'Profile'}</span>
|
|
</a>
|
|
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li><a className="dropdown-item" href="#" onClick={handleLogout}>Logout</a></li>
|
|
</ul>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default AdminNavbar;
|