컴포넌트 관련 변경

이미지 업로드 한글명칭 불가 처리 유저 조회 부분 수정
2025-09-15 16:37:46 +09:00
parent b01c5cd410
commit 4407fdc6b6
11 changed files with 484 additions and 521 deletions
--- a/src/components/common/Header/Navi_bak.js
+++ b/src/components/common/Header/Navi_bak.js
@@ -0,0 +1,205 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import arrowIcon from '../../../assets/img/icon/icon-tab.png';
+import styled from 'styled-components';
+import { useRecoilValue } from 'recoil';
+import { authList } from '../../../store/authList';
+import Modal from '../modal/Modal';
+import { BtnWrapper, ButtonClose, ModalText } from '../../../styles/Components';
+import { useEffect, useState } from 'react';
+import Button from '../button/Button';
+import { useLocation } from 'react-router-dom';
+import { AuthInfo } from '../../../apis';
+import { getMenuConfig } from '../../../utils';
+import { adminAuthLevel } from '../../../assets/data/types';
+
+const Navi = () => {
+	const token = sessionStorage.getItem('token');
+	const userInfo = useRecoilValue(authList);
+	const menu = getMenuConfig(userInfo);
+
+	const [modalClose, setModalClose] = useState('hidden');
+	const [logoutModalClose, setLogoutModalClose] = useState('hidden');
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	const handleToken = async () => {
+		const tokenStatus = await AuthInfo(token);
+
+		tokenStatus.message === '잘못된 타입의 토큰입니다.' && setLogoutModalClose('view');
+	};
+
+	useEffect(() => {
+		handleToken();
+	}, [token]);
+
+	const handleTopMenu = e => {
+		e.preventDefault();
+		e.target.classList.toggle('active');
+	};
+
+	const handleLink = e => {
+		let topActive = document.querySelectorAll('nav .active');
+		let currentTopMenu = e.target.closest('ul').previousSibling;
+		for (let i = 0; i < topActive.length; i++) {
+			if (topActive[i] !== currentTopMenu) {
+				topActive[i].classList.remove('active');
+			}
+		}
+
+		handleToken();
+	};
+
+	// 등록 완료 모달
+	const handleModalClose = () => {
+		if (modalClose === 'hidden') {
+			setModalClose('view');
+		} else {
+			setModalClose('hidden');
+		}
+	};
+
+	// 로그아웃 안내 모달
+	const handleConfirmClose = () => {
+		if (logoutModalClose === 'hidden') {
+			setLogoutModalClose('view');
+		} else {
+			setLogoutModalClose('hidden');
+			sessionStorage.removeItem('token');
+
+			navigate('/');
+		}
+	};
+
+	const isClickable = (submenu) => {
+		switch (userInfo.auth_level_type) {
+			case adminAuthLevel.DEVELOPER:
+			case adminAuthLevel.READER:
+			case adminAuthLevel.MASTER:
+				return true;
+			default:
+				return submenu.authLevel === adminAuthLevel.NONE && userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === submenu.id);
+		}
+	}
+
+	return (
+		<>
+			<nav>
+				<ul>
+					{menu.map((item, idx) => {
+						return (
+							<li key={idx}>
+								{item.access && (
+									<TopMenu to={item.link} onClick={handleTopMenu}>
+										{item.title}
+									</TopMenu>
+								)}
+								<SubMenu>
+									{item.submenu && userInfo &&
+										item.submenu.map((submenu, idx) => {
+											return (
+												<SubMenuItem key={idx} $isclickable={isClickable(submenu) ? 'true' : 'false'}>
+													<NavLink
+														to={isClickable(submenu) ? submenu.link : location.pathname}
+														onClick={e => {
+															isClickable(submenu) ? handleLink(e) : handleModalClose();
+														}}>
+														{submenu.title}
+													</NavLink>
+												</SubMenuItem>
+											);
+										})}
+								</SubMenu>
+							</li>
+						);
+					})}
+				</ul>
+			</nav>
+			{/* 접근 불가 모달 */}
+			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={modalClose}>
+				<BtnWrapper $justify="flex-end">
+					<ButtonClose onClick={handleModalClose} />
+				</BtnWrapper>
+				<ModalText $align="center">
+					해당 메뉴에 대한 조회 권한이 없습니다.
+					<br />
+					권한 등급을 변경 후 다시 이용해주세요.
+				</ModalText>
+				<BtnWrapper $gap="10px">
+					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleModalClose} />
+				</BtnWrapper>
+			</Modal>
+
+			{/* 로그아웃 안내 모달 */}
+			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={logoutModalClose}>
+				<BtnWrapper $justify="flex-end">
+					<ButtonClose onClick={handleConfirmClose} />
+				</BtnWrapper>
+				<ModalText $align="center">로그아웃 되었습니다.</ModalText>
+				<BtnWrapper $gap="10px">
+					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleConfirmClose} />
+				</BtnWrapper>
+			</Modal>
+		</>
+	);
+};
+
+export default Navi;
+
+const TopMenu = styled(NavLink)`
+	padding: 16px 30px;
+	width: 100%;
+	text-align: left;
+	border-bottom: 1px solid #888;
+	position: relative;
+	color: #fff;
+
+	&:before {
+		content: '';
+		display: block;
+		width: 12px;
+		height: 12px;
+		position: absolute;
+		right: 30px;
+		top: 50%;
+		transform: translate(0, -50%);
+		background: url('${arrowIcon}') -12px 0 no-repeat;
+	}
+	&:hover,
+	&.active {
+		background: #444;
+	}
+	&.active ~ ul {
+		display: block;
+	}
+	&.active:before {
+		background: url('${arrowIcon}') 0 0 no-repeat;
+	}
+`;
+
+const SubMenu = styled.ul`
+	display: none;
+`;
+
+const SubMenuItem = styled.li`
+	background: #eee;
+	border-bottom: 1px solid #ccc;
+	color: #2c2c2c;
+	a {
+		width: 100%;
+		padding: 16px 30px;
+		color: ${props => (props.$isclickable === 'false' ? '#818181' : '#2c2c2c')};
+		text-align: left;
+		&:hover,
+		&.active {
+			color: ${props => (props.$isclickable === 'false' ? '#818181' : '#2c2c2c')};
+			font-weight: ${props => (props.$isclickable === 'false' ? 400 : 600)};
+		}
+	}
+`;
+
+const BackGround = styled.div`
+	background: #eee2;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
+`;