From 9ab655caa1e27e3cb28e409ab22e683d06c0b386 Mon Sep 17 00:00:00 2001
From: sunglitter <kds0284@gmail.com>
Date: Fri, 6 Dec 2024 14:22:55 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20=EA=B3=84?=
 =?UTF-8?q?=EC=A0=95=20=EC=A0=91=EC=86=8D=20=EC=8B=9C=20Admin=20Page?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B0=8F=20=ED=95=98=EC=9C=84?=
 =?UTF-8?q?=20=ED=95=AD=EB=AA=A9=20=EC=B6=94=EA=B0=80=20(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 관리자 계정으로 접속한 경우 My Page 대신 Admin Page로 접속하도록 수정
- Admin Page 하위 항목에 게시물 관리 및 채팅방 관리 추가
- 권한에 따른 페이지 전환 로직 및 네비게이션 구조 개선
---
 src/components/common/Header.tsx | 103 +++++++++++++++++++++++++++++--
 1 file changed, 97 insertions(+), 6 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 449aab6..bf766a7 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -6,17 +6,40 @@ import logo from '../../assets/icons/goodbuyus-logo.svg';
 import menu from '../../assets/icons/menu.svg';
 const Header = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [isUser, setIsUser] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isAdminDropdownOpen, setIsAdminDropdownOpen] = useState(false);
 
   useEffect(() => {
     const token = localStorage.getItem('jwt');
     setIsLoggedIn(!!token);
+
+    // 관리자 여부 확인 (예: localStorage에서 'role'의 ADMIN 여부 확인)
+    const adminStatus = localStorage.getItem('role') === 'ROLE_ADMIN';
+    const userStatus = localStorage.getItem('role') === 'ROLE_USER';
+    setIsAdmin(adminStatus);
+    setIsUser(userStatus);
   }, []);
 
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
+  const toggleAdminDropdown = () => {
+    setIsAdminDropdownOpen((prev) => !prev);
+  };
+
+  const handleCommunityClick = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) => {
+    if (!isUser && !isAdmin) {
+      e.preventDefault();
+      alert('로그인 후 이용할 수 있는 페이지입니다.');
+      setIsMobileMenuOpen(!isMobileMenuOpen);
+    }
+  };
+
   return (
     <HeaderContainer>
       <HeaderContent>
@@ -50,15 +73,44 @@ const Header = () => {
               </StyledLink>
             </NavItem>
             <NavItem>
-              <StyledLink to="/community/post" onClick={toggleMobileMenu}>
+              <StyledLink to="/community/post" onClick={handleCommunityClick}>
                 Community
               </StyledLink>
             </NavItem>
-            <NavItem>
-              <StyledLink to="/mypage/setting" onClick={toggleMobileMenu}>
-                My Page
-              </StyledLink>
-            </NavItem>
+            {isAdmin ? (
+              <NavItem>
+                <StyledLink
+                  to="#"
+                  onMouseEnter={toggleAdminDropdown}
+                  onMouseLeave={toggleAdminDropdown}
+                >
+                  Admin Page
+                </StyledLink>
+                {isAdminDropdownOpen && (
+                  <AdminMenu
+                    onMouseEnter={toggleAdminDropdown}
+                    onMouseLeave={toggleAdminDropdown}
+                  >
+                    <AdminDropdown>
+                      <DropdownItem>
+                        <StyledLink to="/admin/post">게시물 관리</StyledLink>
+                      </DropdownItem>
+                      <DropdownItem>
+                        <StyledLink to="/admin/chatlist">
+                          채팅방 관리
+                        </StyledLink>
+                      </DropdownItem>
+                    </AdminDropdown>
+                  </AdminMenu>
+                )}
+              </NavItem>
+            ) : (
+              <NavItem>
+                <StyledLink to="/mypage/setting" onClick={toggleMobileMenu}>
+                  My Page
+                </StyledLink>
+              </NavItem>
+            )}
             {!isLoggedIn ? (
               <Login>
                 <Link to="/signin" onClick={toggleMobileMenu}>
@@ -297,3 +349,42 @@ const CartIcon = styled.div`
     }
   }
 `;
+
+const AdminMenu = styled.li`
+  position: relative;
+  margin-left: 12.5px;
+  a {
+    font-weight: bold;
+    padding: 5px 5px;
+    border-radius: 5px;
+    text-decoration: none;
+    color: black;
+  }
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+`;
+
+const AdminDropdown = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: white;
+  list-style: none;
+  margin: 0;
+  padding: 10px 0;
+  border-radius: 5px;
+  transform: translateY(-10%); /* 추가로 위치 조정 */
+  z-index: 10; /* 다른 요소 위로 표시 */
+`;
+
+const DropdownItem = styled.li`
+  font-size: 0.9rem;
+
+  a {
+    text-decoration: none;
+    color: black;
+    display: block;
+  }
+`;