branch: 관리자페이지 진입 및 공지사항 파트 UI + API 연동

src/commons/svgs/AdminButton.jsx

@@ -0,0 +1,7 @@
+export const AdminButton = () => {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2 2 7v6c0 5 5 9 10 9s10-4 10-9V7l-10-5zM12 18a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm4-8H8V9a4 4 0 018 0v1z" />
+    </svg>
+  );
+};

src/components/admin/AdminHeader.jsx

@@ -0,0 +1,28 @@
+import {
+  ADMIN_ANNOUNCE_URL,
+  ADMIN_MANAGE_CUSTOMER_URL,
+  ADMIN_MANAGE_REPORT_URL,
+  ADMIN_MANAGE_USER_URL,
+  ROOT_URL,
+} from "constants/url";
+import { Link } from "react-router-dom";
+import logo from "assets/commons/home-logo.png";
+import "styles/components/admin/AdminHeader.scss";
+import Profile from "components/home/Profile";
+
+export const AdminHeader = () => {
+  return (
+    <header className="admin-page-header">
+      <Link to={ROOT_URL}>
+        <img src={logo} alt="logo" className="home-logo-img" />
+      </Link>
+      <nav className="admin-page-nav-container">
+        <Link to={ADMIN_ANNOUNCE_URL}>공지 관리</Link>
+        <Link to={ADMIN_MANAGE_USER_URL}>유저 관리</Link>
+        <Link to={ADMIN_MANAGE_REPORT_URL}>신고 관리</Link>
+        <Link to={ADMIN_MANAGE_CUSTOMER_URL}>고객센터</Link>
+      </nav>
+      <Profile />
+    </header>
+  );
+};

src/components/admin/AnnounceManageBar.jsx

@@ -0,0 +1,31 @@
+import { ADMIN_ANNOUNCE_URL } from "constants/url";
+import { Link, useNavigate } from "react-router-dom";
+import { eraseNotification } from "services/admin/admin";
+import "styles/components/admin/AnnounceManageBar.scss";
+
+export const AnnounceManageBar = ({ notificationId }) => {
+  const navigate = useNavigate();
+
+  const handleDelete = async () => {
+    try {
+      await eraseNotification(notificationId);
+      navigate(ADMIN_ANNOUNCE_URL);
+    } catch (error) {
+      console.error("삭제 실패:", error);
+    }
+  };
+
+  return (
+    <div className="announce-manage-button-bar">
+      <Link
+        to={`${ADMIN_ANNOUNCE_URL}/${notificationId}/edit`}
+        className="button--edit"
+      >
+        수정
+      </Link>
+      <button className="button--delete" onClick={handleDelete}>
+        삭제
+      </button>
+    </div>
+  );
+};

src/components/home/EnterAdmin.jsx

@@ -0,0 +1,31 @@
+import { AdminButton } from "commons/svgs/AdminButton";
+import { ADMIN_URL } from "constants/url";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import "styles/components/home/EnterAdmin.scss";
+
+export const EnterAdmin = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(ADMIN_URL);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <button
+      className="admin-button"
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      <AdminButton />
+    </button>
+  );
+};

src/components/home/Home.jsx

@@ -12,8 +12,8 @@ import { getUserInfoAPI } from "services/user/user";
 import "styles/components/home/Home.scss";
 import { getAuthToken } from "utils/token";
 import { getUserInfo } from "utils/user";
+import { EnterAdmin } from "components/home/EnterAdmin.jsx";
 import { RankingPreview } from "components/home/RankingPreview.jsx";
-
 const Home = () => {
   const navigate = useNavigate();
   const { isSignIn } = useOutletContext();
@@ -84,6 +84,7 @@ const Home = () => {
           <IntroduceCharacterPreview />
         </div>
       </div>
+      <EnterAdmin />
     </div>
   );
 };

src/constants/api.js

@@ -70,12 +70,18 @@ export const SOCKET_CHAT_PRIVATE = process.env.REACT_APP_WS_CHAT_PRIVATE_API;
 // 공지사항 API
 export const ANNOUNCE_LIST_API = process.env.REACT_APP_ANNOUNCE_LIST_API;
 
+// 관리자 API
+export const ADMIN_ANNOUNCE_MANAGE_API =
+  process.env.REACT_APP_ADMIN_ANNOUNCE_MANAGE_API;
+export const ADMIN_QNA_MANAGE_API = process.env.ADMIN_QNA_MANAGE_API;
+export const ADMIN_REPORT_API = process.env.REACT_APP_ADMIN_REPORT_API;
 // 서비스센터 API
 export const SERVICE_LIST_API = process.env.REACT_APP_SERVICE_LIST_API;
 export const SERVICE_MY_LIST_API = process.env.REACT_APP_SERVICE_MY_LIST_API;
 export const SERVICE_QNA_API = process.env.REACT_APP_SERVICE_QNA;
 
+
 export const RANKING_API = process.env.REACT_APP_RANKING_API;
 export const RANkING_MY_API = process.env.REACT_APP_MY_RANKING_API;
 
-export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP;
+export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP;

src/constants/url.js

@@ -5,6 +5,13 @@ export const SIGN_UP_URL = "/signup"; // 회원가입
 export const ACCOUNT_URL = "/find/account"; // 비밀번호 찾기
 export const WITHDRAW_URL = "/withdraw"; // 비밀번호 찾기
 
+export const ADMIN_URL = "/admin";
+export const ADMIN_ANNOUNCE_URL = "/admin/announce"; //공지사항 관리
+export const ADMIN_CREATE_ANNOUNCE_URL = "/admin/announce/create"; //공지 생성
+export const ADMIN_MANAGE_USER_URL = "/admin/user-manage"; // 유저 관리
+export const ADMIN_MANAGE_REPORT_URL = "/admin/report-manage"; //신고 관리
+export const ADMIN_MANAGE_CUSTOMER_URL = "/admin/customer-manage"; //고객센터 1ㄷ1 문의 관리
+
 export const LOBBY_URL = "/lobby"; // 로비
 export const MY_PAGE_URL = "/lobby/myinfo"; // 마이페이지
 export const MY_RECORD_URL = "/lobby/myinfo/record"; // 마이페이지 내 전적

src/pages/admin/AdminHome.jsx

@@ -0,0 +1,9 @@
+import "styles/pages/admin/AdminHome.scss";
+import yagadaRabbit from "assets/components/admin/yagada-rabbit.png";
+export const AdminHome = () => {
+  return (
+    <div className="admin-home-container">
+      <img src={yagadaRabbit} />
+    </div>
+  );
+};

src/pages/admin/AdminPage.jsx

@@ -0,0 +1,41 @@
+import { AdminHeader } from "components/admin/AdminHeader";
+import ScrollToTop from "components/common/ScrollToTop";
+import { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import { tokenReissueAPI } from "services/auth/auth";
+import "styles/pages/admin/AdminPage.scss";
+import { getAuthToken } from "utils/token";
+
+const AdminPage = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <div className="admin-page-container">
+      <ScrollToTop />
+      <AdminHeader />
+      <Outlet />
+    </div>
+  );
+};
+
+export default AdminPage;
+
+export const loader = async () => {
+  const { accessToken, setAccessToken } = getAuthToken();
+
+  if (!accessToken) {
+    // 토큰 재발급
+    try {
+      const res = await tokenReissueAPI();
+      const newAccessToken = res.accessToken;
+      const expireTime = res.expiredAt;
+      setAccessToken(newAccessToken, expireTime);
+    } catch (e) {
+      console.error(e);
+      return { isSignIn: false };
+    }
+  }
+  return { isSignIn: true };
+};

src/pages/admin/AnnounceEditPage.jsx

@@ -0,0 +1,86 @@
+import CloseButton from "commons/ui/button/CloseButton";
+import { useNavigate, useParams } from "react-router-dom";
+import "styles/pages/admin/AnnounceEditPage.scss";
+import { useEffect, useState } from "react";
+import { getAnnounceDetailAPI } from "services/home/announce";
+import useUserInformationStore from "store/userInformation";
+import { updateAnnounceAPI } from "services/admin/admin";
+import { ADMIN_ANNOUNCE_URL } from "constants/url";
+
+const AnnounceEditPage = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const profile = useUserInformationStore((state) => state.profile);
+  const isAdminMode =
+    profile?.role === "ADMIN" && window.location.pathname.includes("admin");
+
+  const closeEditPage = () => navigate(-1);
+
+  useEffect(() => {
+    const fetchDetail = async () => {
+      try {
+        const res = await getAnnounceDetailAPI(id);
+        setTitle(res.title);
+        setContent(res.content);
+      } catch (err) {
+        alert("공지사항 정보를 불러오지 못했습니다.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDetail();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      const notificationInfo = { id, title, content };
+      await updateAnnounceAPI(notificationInfo);
+      navigate(`${ADMIN_ANNOUNCE_URL}/${id}`);
+    } catch (err) {
+      console.log(err);
+      alert("공지 수정에 실패했습니다.");
+    }
+  };
+
+  if (!isAdminMode) return <div>권한이 없습니다.</div>;
+  if (loading) return <div className="announce-edit-loading">로딩 중...</div>;
+
+  return (
+    <div className="announce-edit-page-container">
+      <article className="announce-edit-container">
+        <header className="announce-edit-header">
+          <CloseButton onClick={closeEditPage} />
+        </header>
+
+        <div className="announce-edit-content">
+          <div className="content-title">
+            <input
+              type="text"
+              className="edit-title-input"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="공지 제목을 입력하세요"
+            />
+          </div>
+
+          <textarea
+            className="edit-content-input"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="공지 내용을 입력하세요"
+          />
+
+          <button className="save-button" onClick={handleSubmit}>
+            수정 완료
+          </button>
+        </div>
+      </article>
+    </div>
+  );
+};
+
+export default AnnounceEditPage;

src/pages/admin/CreateAnnouncePage.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { postAnnounceAPI } from "services/admin/admin";
+import "styles/pages/admin/CreateAnnouncePage.scss";
+
+export const CreateAnnouncePage = () => {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const navigate = useNavigate();
+  const handleSubmit = async () => {
+    if (!title || !content) {
+      return;
+    }
+    const notification = { title, content };
+    try {
+      await postAnnounceAPI(notification);
+      navigate(-1);
+    } catch (error) {
+      console.error(error);
+      alert("등록 중 오류가 발생했습니다.");
+    }
+  };
+
+  return (
+    <div className="announce-create-container">
+      <input
+        className="announce-create-title"
+        type="text"
+        placeholder="공지사항 제목 입력"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+
+      <textarea
+        className="announce-create-content"
+        placeholder="내용을 입력하세요"
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+      />
+
+      <button className="announce-submit" onClick={handleSubmit}>
+        등록
+      </button>
+    </div>
+  );
+};

src/pages/home/AnnounceDetailPage.jsx

@@ -5,6 +5,8 @@ import "styles/pages/home/AnnounceDetailPage.scss";
 import { formatDate } from "utils/time";
 import { useEffect, useState } from "react";
 import { getAnnounceDetailAPI } from "services/home/announce";
+import useUserInformationStore from "store/userInformation";
+import { AnnounceManageBar } from "components/admin/AnnounceManageBar";
 
 /** 공통 상태 컴포넌트 */
 const AnnounceStatus = ({ type, message }) => (
@@ -20,6 +22,10 @@ const AnnounceDetailPage = () => {
   const [notice, setNotice] = useState(null);
   const [status, setStatus] = useState({ loading: true, error: null });
 
+  const profile = useUserInformationStore((state) => state.profile);
+  const isAdminMode =
+    profile?.role === "ADMIN" && window.location.href.includes("admin");
+
   const closeDetailPage = () => navigate(-1);
 
   useEffect(() => {
@@ -67,6 +73,7 @@ const AnnounceDetailPage = () => {
             {notice.title}
           </div>
           <div className="content-description">{notice.content}</div>
+          {isAdminMode && <AnnounceManageBar notificationId={id} />}
         </div>
       </article>
     </div>