Merge branch 'main' into feat/footer_qna

Clubber2024 · Aug 19, 2024 · 56de45a · 56de45a
2 parents 3ab9cef + b369bfc
commit 56de45a
Show file tree

Hide file tree

Showing 18 changed files with 340 additions and 231 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -17,14 +17,16 @@ import BranchCentralPage from './pages/BranchCentral';
 import BranchSmallPage from './pages/BranchSmall';
 import ReviewComment from './component/detail/review/ReviewComment';
 import MyReview from './component/mypage/review/MyReview';
-import AdminPage from './pages/AdminPage';
+// import AdminPage from './pages/AdminPage';
+import AdminMenu from './component/admin/AdminMenu';
 import EditPage from './component/admin/EditPage';
 import PendingList from './component/admin/pending/PendingList';
 import Layout from './component/admin/component/Layout';
 import ClubReviews from './component/admin/ClubReviews';
-import NoticePage from './component/main/NoticePage';
 import RecruitPage from './pages/RecruitPage';
 import QnAPage from './pages/QnAPage';
+import NoticeList from './component/main/NoticeList';
+import NoticePage from './pages/NoticePage';
 
 function App() {
     const isPc = useMediaQuery({
@@ -41,7 +43,8 @@ function App() {
                     <Header />
                     <Routes>
                         <Route path="/" element={<MainPage />} />
-                        <Route path="/notice" element={<NoticePage />}></Route>
+                        <Route path="/notices" element={<NoticeList />} />
+                        <Route path="/notices/:noticeId" element={<NoticePage />} />
                         <Route path="/central" element={<CentralClubPage />} />
                         {/* <Route path="/menu/central_club/detail_page/review_write" element={<ReviewWrite />} /> */}
                         <Route path="/small" element={<SmallClubPage />} />
@@ -58,13 +61,21 @@ function App() {
                         <Route path="/bookmark" element={<BookMarkPage />} />
                         <Route path="/user/reviews" element={<MyReview />} />
                         <Route path="/recruit" element={<RecruitPage />} />
+
                         <Route path="/qna" element={<QnAPage />} />
-                        <Route path="/admin" element={<Layout />}>
-                            <Route index element={<AdminPage />} />
+
+
+                        <Route path="/admin" element={<AdminMenu />} />
+                        <Route path="/admin/edit/:clubId" element={<EditPage />} />
+                        <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
+                        <Route path="/admin/mypage/pending" element={<PendingList />} />
+                        {/* <Route path="/admin" element={<Layout />}>
+                            <Route index element={<AdminMenu />} />
+
                             <Route path="/admin/edit/:clubId" element={<EditPage />} />
                             <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                             <Route path="/admin/mypage/pending" element={<PendingList />} />
-                        </Route>
+                        </Route> */}
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -75,7 +86,8 @@ function App() {
                     <Header />
                     <Routes>
                         <Route path="/" element={<MainPage />} />
-                        <Route path="/notice" element={<NoticePage />}></Route>
+                        <Route path="/notices" element={<NoticeList />} />
+                        <Route path="/notices/:noticeId" element={<NoticePage />} />
                         <Route path="/central" element={<CentralClubPage />} />
                         <Route path="/small" element={<SmallClubPage />} />
                         <Route path="/clubs/:clubId" element={<DetailPage />} />
@@ -90,7 +102,7 @@ function App() {
                         <Route path="/summary" element={<SummaryPage />} />
                         <Route path="/bookmark" element={<BookMarkPage />} />
                         <Route path="/user/reviews" element={<MyReview />} />
-                        <Route path="/admin" element={<AdminPage />} />
+                        <Route path="/admin" element={<AdminMenu />} />
                         <Route path="/admin/edit/:clubId" element={<EditPage />} />
                         <Route path="/admin/mypage/reviews" element={<ClubReviews />} />
                         <Route path="/admin/mypage/pending" element={<PendingList />} />

diff --git a/src/component/admin/AdminMenu.jsx b/src/component/admin/AdminMenu.jsx
@@ -0,0 +1,19 @@
+import "./adminMenu.css";
+import { NavLink } from 'react-router-dom';
+
+export default function AdminMenu() {
+    return (
+        <div className="admin_container">
+            <div className="admin_header">
+                <h3>마이페이지</h3>
+            </div>
+            <div className="admin_body">
+                <div className="menu_tab">소개글 수정</div>
+                <div className="menu_tab">모집글 작성</div>
+                <div className="divider"/>
+                <NavLink to={`/admin/mypage/reviews`} className="menu_tab">리뷰 목록</NavLink>
+                <NavLink to={`/admin/mypage/pending`} className="menu_tab">리뷰 승인</NavLink>
+            </div>
+        </div>
+    )
+}
diff --git a/src/component/admin/ClubReviews.jsx b/src/component/admin/ClubReviews.jsx
@@ -29,8 +29,8 @@ export default function ClubReviews() {
     }, [accessToken]);
 
     return (
-        <div className="club_review_container">
-            <h2>동아리 리뷰 목록</h2>
+        <div className="my_review_container">
+            <h3>동아리 리뷰 목록</h3>
             {clubReviewData.map((cReview) => (
                 <div key={cReview.reviewId} className="my_review_box">
                     <div className="review_box_header">

diff --git a/src/component/admin/adminMenu.css b/src/component/admin/adminMenu.css
@@ -0,0 +1,51 @@
+.admin_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 200px;
+}
+
+.admin_header {
+    width: 100%;
+    height: 177px;
+    background: #7bc8e0;
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.admin_header h3 {
+    position: relative;
+    top: 45%;
+}
+
+.admin_body {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.menu_tab {
+    width: 40%;
+    padding: 10px 0px;
+    text-align: center;
+    border-radius: 8px;
+    border: 1px solid #9c9c9c4d;
+    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+    margin: 4px 0px;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.menu_tab:hover {
+    color: #7bc8e0;
+}
+
+.divider {
+    width: 45%;
+    border: 0.2px solid #9c9c9c4d;
+    margin: 20px 0px;
+}
diff --git a/src/component/admin/pending/PendingList.jsx b/src/component/admin/pending/PendingList.jsx
@@ -107,7 +107,7 @@ export default function PendingList() {
   };
 
   return (
-    <div className="pending_wrapper">
+
       <div className="pending_container">
         <h3>리뷰 승인 대기</h3>
         <div className="pending_divider" />
@@ -131,11 +131,9 @@ export default function PendingList() {
                 checked={checkedList.includes(pending.reviewId)}
                 className="checkbox_input"
               />
-              <div className="text_align">
-                <p className="pending_comment">{pending.content}</p>
-                <p className="vertical_divider">|</p>
-                <p className="pending_date">{pending.writtenDate}</p>
-              </div>
+              <p className="pending_comment">{pending.content}</p>
+              <p className="vertical_divider">|</p>
+              <p className="pending_date">{pending.writtenDate}</p>
             </div>
           ))}
         </div>
@@ -147,8 +145,8 @@ export default function PendingList() {
             승인거절
           </button>
         </div>
+        <ConfirmModal isOpen={isModalOpen} message={modalMessage} onClickOk={onClickOk} onClose={closeModal} />
       </div>
-      <ConfirmModal isOpen={isModalOpen} message={modalMessage} onClickOk={onClickOk} onClose={closeModal} />
-    </div>
+
   );
 }
diff --git a/src/component/admin/pending/pendingList.css b/src/component/admin/pending/pendingList.css
@@ -1,29 +1,14 @@
-.pending_wrapper {
-    display: flex;
-    flex-direction: row;
-    margin: 0% 18%;
-    margin-left: 0;
-}
-
-.pending_sidebar {
-    display: flex;
-    flex: 1;
-    margin-top: 2%;
-    margin-left: 7%;
-}
-
 .pending_container {
     display: flex;
     flex-direction: column;
-    flex: 5;
-    padding: 30px;
+    margin-top: 50px;
+    padding: 0% 20%;
 }
 
 .pending_divider {
     width: 100%;
-    border: 1px solid #9c9c9c80;
-    margin-top: 15px;
-    margin-bottom: 25px;
+    border: 0.5px solid #9c9c9c80;
+    margin-bottom: 45px;
 }
 
 .checkbox_container {
@@ -55,16 +40,16 @@
 .checkbox_input:checked {
     background: #7bc8e0;
     background-image: url('./Vector.png');
-    background-position: center;
-    background-size: auto;
+    background-position: -2px 16px;
+    background-size: cover;
     border: none;
 }
 
 .single_checkbox {
     display: flex;
     flex-direction: row;
     align-items: center;
-    /* justify-content: space-between; */
+    justify-content: space-between;
     width: 100%;
     height: 45px;
     border: 2px solid #0000000d;
@@ -73,17 +58,8 @@
     margin: 5px auto;
     padding: 5px auto;
     font-weight: 400;
-    font-family: Noto Sans KR;
-}
-
-.text_align {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
     font-size: 14px;
-    font-weight: 400;
+    font-family: Noto Sans KR;
     color: #202123;
 }
 
@@ -92,14 +68,17 @@
 }
 
 .pending_date {
+    width: 80px;
+    text-align: right;
     margin-right: 15px;
 }
 
 .vertical_divider {
-    margin: 3px 10px 0px 10px;
+    /* margin: 3px 0px 0px 10px; */
     color: #9c9c9c80;
     font-size: 24px;
     font-weight: 100;
+    padding: 0px 10px;
 }
 
 .approve_button {
@@ -136,6 +115,6 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-top: 25px;
+    margin-top: 40px;
     margin-bottom: 300px;
 }
diff --git a/src/component/detail/review/ReviewWrite.jsx b/src/component/detail/review/ReviewWrite.jsx
@@ -59,7 +59,7 @@ function ReviewWrite() {
         navigate(`/clubs/${clubId}/review/comment`, { state: { clubId, selectedKeywords } });
     };
 
-    const submitButtonClass = Object.values(btnActive).includes(true) ? 'next-active' : 'next';
+    const submitButtonClass = Object.values(btnActive).includes(true) ? 'next-active' : 'next-button';
 
     return (
         <div className="write-container">

diff --git a/src/component/detail/review/reviewWrite.css b/src/component/detail/review/reviewWrite.css
@@ -78,7 +78,7 @@
     border: none;
 }
 
-.next {
+.next-button {
     width: 90px;
     height: 40px;
     border-radius: 5px;

diff --git a/src/component/layout/Header.jsx b/src/component/layout/Header.jsx
@@ -64,7 +64,7 @@ export default function Header() {
             //console.log(error.response);
             if (error.response && error.response.status === 401) {
                 //console.log(error.response.data.reason);
-                getNewToken();
+                getNewToken(false);
             } else {
                 console.error('Error fetching user data : ', error);
             }
@@ -77,7 +77,7 @@ export default function Header() {
         }
     }, [accessToken, isAdmin]);
 
-    const getNewToken = async (isLogout = false) => {
+    const getNewToken = async (isLogout) => {
         try {
             const res = await customAxios.post(
                 `/v1/auths/refresh`,
@@ -96,8 +96,11 @@ export default function Header() {
                 setModalMessage(error.response.data.reason);
                 setIsModalOpen(true);
             }
+            setIsModalOpen(false);
             localStorage.removeItem('accessToken');
             localStorage.removeItem('refreshToken');
+            localStorage.removeItem('adminId');
+            localStorage.removeItem('isAdmin');
             navigate('/login');
         }
     };
@@ -166,7 +169,7 @@ export default function Header() {
             navigate('/');
         } catch (error) {
             if (error.response && error.response.status === 401) {
-                getNewToken();
+                getNewToken(true);
             } else {
                 console.error('로그아웃 실패:', error);
             }

diff --git a/src/component/login/Login.jsx b/src/component/login/Login.jsx
@@ -5,8 +5,8 @@ import { customAxios } from '../../config/axios-config';
 
 function Login() {
     const REST_API_KEY = '6a5dafa758e469d18292acc6fbca333b';
-    //const REDIRECT_URI = 'http://13.125.141.171/v1/auths/oauth/kakao';
-    const REDIRECT_URI = 'http://localhost:3000/v1/auths/oauth/kakao';
+    const REDIRECT_URI = 'http://13.125.141.171/v1/auths/oauth/kakao';
+    // const REDIRECT_URI = 'http://localhost:3000/v1/auths/oauth/kakao';
     const [activeForm, setActiveForm] = useState('sign-in-form-active');
 
     const [adminId, setAdminId] = useState('');
@@ -19,8 +19,6 @@ function Login() {
         window.location.href = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;
     };
     const adminLoginHandler = async () => {
-        // console.log(adminId);
-        // console.log(adminPw);
         try {
             const res = await customAxios.post(`/v1/admins/login`, {
                 username: adminId,

diff --git a/src/component/main/MainNotice.jsx b/src/component/main/MainNotice.jsx
@@ -11,7 +11,6 @@ export default function MainNotice() {
             const res = await customAxios.get(`/v1/notices/main-page`);
             if (res.data.success) {
                 setNoticeData(res.data.data);
-                //console.log(res.data.data);
             }
         } catch (error) {
             console.error('Error fetching data : ', error);
@@ -33,7 +32,7 @@ export default function MainNotice() {
     // 메인 페이지에 보여줄 공지사항
     return (
         <div className={styles.container}>
-            <LinkItem to={'/notice'}>
+            <LinkItem to={'/notices'}>
                 <div className={styles.notice_index}>공지사항</div>
             </LinkItem>
             <div className={styles.notice_container}>