diff --git a/src/component/main/NoticeList.jsx b/src/component/main/NoticeList.jsx
new file mode 100644
index 0000000..9d42ee0
--- /dev/null
+++ b/src/component/main/NoticeList.jsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import ReactPaginate from 'react-paginate';
+import { customAxios } from '../../config/axios-config';
+import './noticeList.css';
+import { useNavigate } from 'react-router-dom';
+
+export default function NoticeList() {
+ const navigate = useNavigate();
+ // const [noticeId, setNoticeId] = useState(0);
+ const [noticeData, setNoticeData] = useState([]);
+ const [pageCount, setPageCount] = useState(0);
+ const [currentPage, setCurrentPage] = useState(0);
+ const itemsPerPage = 10;
+
+ const getNoticeData = async (page = 0) => {
+ try {
+ const res = await customAxios.get(`/v1/notices`, {
+ params: { page, size: itemsPerPage },
+ });
+ if (res.data.success && res.data.data.content) {
+ // setNoticeId(res.data.data.content.noticeId);
+ setNoticeData(res.data.data.content);
+ setPageCount(res.data.data.totalPages);
+ } else {
+ setNoticeData([]);
+ }
+ } catch (error) {
+ //console.error("Error fetching data: ", error);
+ setNoticeData([]);
+ }
+ };
+
+ useEffect(() => {
+ getNoticeData(currentPage);
+ }, [currentPage]);
+
+ const handlePageClick = ({ selected }) => {
+ setCurrentPage(selected);
+ };
+
+ const onClickNotice = ( noticeId ) => {
+ navigate(`/notices/${noticeId}`);
+ }
+
+ return (
+
+
공지사항
+
+
+ 번호
+ 제목
+ 날짜
+ 작성자
+ 조회수
+
+ {noticeData.length > 0 ? (
+ noticeData.map((item) => (
+
+ {item.noticeId}
+ {onClickNotice(item.noticeId)}}>{item.title}
+ {new Date(item.createdAt).toLocaleDateString()}
+ 관리자
+ {item.totalView ? {item.totalView} : 0}
+
+ ))
+ ) : (
+
+ 공지사항이 없습니다.
+
+ )}
+
+
'}
+ pageCount={pageCount}
+ onPageChange={handlePageClick}
+ containerClassName={'pagination'}
+ previousLinkClassName={'pagination_link'}
+ nextLinkClassName={'pagination_link'}
+ disabledClassName={'pagination_link_disabled'}
+ activeClassName={'pagination_link_active'}
+ />
+
+ );
+}
diff --git a/src/component/main/NoticePage.jsx b/src/component/main/NoticePage.jsx
deleted file mode 100644
index e6d48ae..0000000
--- a/src/component/main/NoticePage.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactPaginate from 'react-paginate';
-import { customAxios } from '../../config/axios-config';
-import './noticePage.css';
-
-export default function NoticePage() {
- const [noticeData, setNoticeData] = useState([]);
- const [pageCount, setPageCount] = useState(0);
- const [currentPage, setCurrentPage] = useState(0);
- const itemsPerPage = 10;
-
- const getNoticeData = async (page = 0) => {
- try {
- const res = await customAxios.get(`/v1/notices`, {
- params: { page, size: itemsPerPage },
- });
- if (res.data.success && res.data.data.content) {
- setNoticeData(res.data.data.content);
- setPageCount(res.data.data.totalPages);
- } else {
- setNoticeData([]);
- }
- } catch (error) {
- //console.error("Error fetching data: ", error);
- setNoticeData([]);
- }
- };
-
- useEffect(() => {
- getNoticeData(currentPage);
- }, [currentPage]);
-
- const handlePageClick = ({ selected }) => {
- setCurrentPage(selected);
- };
-
- return (
-
-
공지사항
-
-
- 번호
- 제목
- 날짜
- 작성자
- 조회수
-
- {noticeData.length > 0 ? (
- noticeData.map((item, index) => (
-
- {currentPage * itemsPerPage + index + 1}
- {item.title}
- {new Date(item.createdAt).toLocaleDateString()}
- 관리자
- {item.totalView ? {item.totalView} : 0}
-
- ))
- ) : (
-
- 공지사항이 없습니다.
-
- )}
-
-
'}
- pageCount={pageCount}
- onPageChange={handlePageClick}
- containerClassName={'pagination'}
- previousLinkClassName={'pagination_link'}
- nextLinkClassName={'pagination_link'}
- disabledClassName={'pagination_link_disabled'}
- activeClassName={'pagination_link_active'}
- />
-
- );
-}
diff --git a/src/component/main/noticeList.css b/src/component/main/noticeList.css
new file mode 100644
index 0000000..ed059dc
--- /dev/null
+++ b/src/component/main/noticeList.css
@@ -0,0 +1,95 @@
+.notice_container {
+ width: 70%;
+ margin: 0 auto;
+ padding: 50px 0px 100px 0px;
+ }
+
+ h2 {
+ text-align: center;
+ margin-bottom: 35px;
+ font-size: 22px;
+ }
+
+ .notice_list {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .notice_header, .notice_item {
+ display: grid;
+ grid-template-columns: 1fr 5fr 2fr 1fr 1fr;
+ border: none;
+ border-bottom: 0.5px solid #9C9C9C;
+ padding: 10px 5px;
+ text-align: center;
+ }
+
+ .notice_header {
+ background-color: #f4f4f4;
+ font-weight: bold;
+ font-size: 14px;
+ border-top: 1px solid #202123;
+ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+ }
+
+ .notice_item {
+ color: #202123;
+ background-color: #ffffff;
+ font-size: 12px;
+ /* transition: background-color 0.3s; */
+ }
+
+ .notice_title {
+ text-align: start;
+ }
+
+ .notice_title:hover {
+ color: #7BC8E0;
+ }
+
+ .pagination {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ list-style: none;
+ padding: 8px 12px;
+ /* border: 1px solid #E9E9E9; */
+ gap: 3px;
+ }
+
+ .pagination_link {
+ padding: 8px 12px;
+ border: 1px solid #E9E9E9;
+ background-color: #fff;
+ cursor: pointer;
+ color: #626262;
+ }
+
+ .pagination_link_active {
+ padding: 8px 12px;
+ background-color: #7BC8E0;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ }
+
+ /* 선택되지 않은 페이지 번호에 대한 스타일 추가 */
+.pagination_link:not(.pagination_link_active) {
+ padding: 8px 12px;
+ border: 1px solid #E9E9E9;
+ background-color: #fff;
+ color: #626262;
+}
+
+/* 선택되지 않은 페이지 번호에 대한 호버 효과 */
+.pagination_link:not(.pagination_link_active):hover {
+ background-color: #d3e2e6; /* 호버 시 배경 색상 */
+ color: #333; /* 호버 시 텍스트 색상 */
+}
+
+ .pagination_link_disabled {
+ color: #9C9C9C;
+ cursor: not-allowed;
+ }
+
\ No newline at end of file
diff --git a/src/component/main/noticePage.css b/src/component/main/noticePage.css
deleted file mode 100644
index 46aa0b5..0000000
--- a/src/component/main/noticePage.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.notice_container {
- width: 80%;
- margin: 0 auto;
- font-family: Arial, sans-serif;
- }
-
- h2 {
- text-align: center;
- margin-bottom: 20px;
- }
-
- .notice_list {
- width: 100%;
- border-collapse: collapse;
- }
-
- .notice_header, .notice_item {
- display: grid;
- grid-template-columns: 1fr 4fr 2fr 2fr 1fr;
- border-bottom: 1px solid #ddd;
- padding: 10px 0;
- }
-
- .notice_header {
- background-color: #f4f4f4;
- font-weight: bold;
- }
-
- .notice_item span {
- text-align: center;
- }
-
- .notice_item {
- color: #666;
- transition: background-color 0.3s;
- }
-
- .notice_item:hover {
- background-color: #f9f9f9;
- }
-
- .notice_item:nth-child(even) {
- background-color: #f4f4f4;
- }
-
- .notice_item:nth-child(odd) {
- background-color: #fff;
- }
-
- .pagination {
- display: flex;
- justify-content: center;
- margin-top: 20px;
- list-style: none;
- padding: 0;
- }
-
- .pagination_link {
- margin: 0 5px;
- padding: 8px 12px;
- border: 1px solid #ddd;
- cursor: pointer;
- color: #007bff;
- }
-
- .pagination_link_active {
- background-color: #007bff;
- color: #fff;
- border: none;
- }
-
- .pagination_link_disabled {
- color: #ccc;
- cursor: not-allowed;
- }
-
\ No newline at end of file
diff --git a/src/component/mypage/review/myReview.css b/src/component/mypage/review/myReview.css
index 0d7b91b..1a846f9 100644
--- a/src/component/mypage/review/myReview.css
+++ b/src/component/mypage/review/myReview.css
@@ -7,25 +7,12 @@
margin-bottom: 200px;
}
- .club_review_container {
- display: flex;
- flex-direction: column;
- margin: 50px 0px 200px 30px;
- }
-
- .my_review_container h2 {
+ .my_review_container h2, h3 {
font-size: 22px;
font-weight: 500px;
margin-bottom: 30px;
}
- .club_review_container h2 {
- font-size: 20px;
- font-weight: 500px;
- margin-bottom: 20px;
- margin-left: 7px;
- }
-
.my_review_box {
width: 475px;
background-color: white;
diff --git a/src/pages/NoticePage.jsx b/src/pages/NoticePage.jsx
new file mode 100644
index 0000000..eabf961
--- /dev/null
+++ b/src/pages/NoticePage.jsx
@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { customAxios } from "../config/axios-config";
+
+export default function NoticePage() {
+ const url = window.location.href; // 현재 URL 가져오기
+ const urlParts = url.split('/'); // URL을 '/' 기준으로 분할
+ const noticeId = urlParts[urlParts.length - 1]; // 마지막 부분이 clubId
+ const intNoticeId = parseInt(noticeId, 10);
+
+ const [noticeData, setNoticeData] = useState([]);
+
+ const getNoticeData = async () => {
+ try {
+ const res = await customAxios.get(`/v1/notices/${intNoticeId}`);
+ if (res.data.success) {
+ setNoticeData(res.data.data);
+
+ }
+ } catch (error) {
+ console.error('Error fetching data : ', error);
+ }
+ };
+
+ useEffect(() => {
+ getNoticeData();
+ }, []);
+
+ return (
+
+
{noticeData.title}
+
{noticeData.content}
+
{noticeData.totalView}
+
{noticeData.createdAt}
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/mainPage.css b/src/pages/mainPage.css
index e81d641..65b9d3d 100644
--- a/src/pages/mainPage.css
+++ b/src/pages/mainPage.css
@@ -4,7 +4,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
- margin-bottom: 250px;
+ margin-bottom: 220px;
/*width: 80%;*/
}
.main_promote_container {