Skip to content

Commit

Permalink
Merge pull request #95 from Clubber2024/feat/recruit-content-page
Browse files Browse the repository at this point in the history
feat: 개별 모집글 페이지 및 페이징 css 수정
  • Loading branch information
Kangyeeun0 authored Aug 24, 2024
2 parents 827e3f0 + a80569b commit 0a42cdc
Show file tree
Hide file tree
Showing 15 changed files with 683 additions and 139 deletions.
12 changes: 10 additions & 2 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import NoticeList from './component/main/NoticeList';
import NoticePage from './pages/NoticePage';
import AdminPage from './pages/AdminPage';
import MyPage from './component/mypage/MyPage';
import AdminRecruitList from './component/admin/recruit/AdminRecruitList';
import RecruitContent from './component/recruit/RecruitContent';

function App() {
const isPc = useMediaQuery({
Expand Down Expand Up @@ -61,6 +63,7 @@ function App() {
<Route path="/user/bookmark" element={<BookMarkPage />} />
<Route path="/user/reviews" element={<MyReview />} />
<Route path="/recruit" element={<RecruitPage />} />
<Route path="/recruit/:recruitId" element={<RecruitContent />} />

<Route path="/qna" element={<QnAPage />} />

Expand All @@ -69,6 +72,7 @@ function App() {
<Route path="/admin/edit/:clubId" element={<EditPage />} />
<Route path="/admin/mypage/reviews" element={<ClubReviews />} />
<Route path="/admin/mypage/pending" element={<PendingList />} />
<Route path="/admin/recruit" element={<AdminRecruitList />} />
</Routes>
<Footer />
</BrowserRouter>
Expand Down Expand Up @@ -96,13 +100,17 @@ function App() {
<Route path="/user" element={<MyPage />} />
<Route path="/user/bookmark" element={<BookMarkPage />} />
<Route path="/user/reviews" element={<MyReview />} />
<Route path="/qna" element={<QnAPage />} />
<Route path="/recruit" element={<RecruitPage />} />
<Route path="/recruit/:recruitId" element={<RecruitContent />} />

<Route path="/admin" element={<MyPage />} />
<Route path="/admin/mypage" element={<AdminPage />} />
<Route path="/admin/edit/:clubId" element={<EditPage />} />
<Route path="/admin/mypage/reviews" element={<ClubReviews />} />
<Route path="/admin/mypage/pending" element={<PendingList />} />
<Route path="/recruit" element={<RecruitPage />} />
<Route path="/qna" element={<QnAPage />} />

<Route path="/admin/recruit" element={<AdminRecruitList />} />
</Routes>

<Footer />
Expand Down
73 changes: 50 additions & 23 deletions src/component/QnA/QnA.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,34 +22,61 @@ export default function QnA() {

useEffect(() => {
getFaQData();
});
}, []);

const renderDataInRows = (data) => {
const rows = [];
for (let i = 0; i < data.length; i += 4) {
const rowItems = data.slice(i, i + 4);
rows.push(
<div key={`row-${i}`} className={styles.faq_container}>
{rowItems.map((item, index) => {
const globalIndex = i + index; // 전역 인덱스를 계산합니다.
const isRightBox = activeIndex === 2 || activeIndex === 3; // 오른쪽에 위치한 박스 여부 확인

return (
<div
key={item.id} // 고유한 key 사용
className={styles.faq_rectangle}
onClick={() => toggleAnswer(globalIndex)} // 각 아이템에 고유한 인덱스를 주기 위해 globalIndex 사용
>
<div className={styles.faq_container}>
<p className={styles.faq_Q}>Q</p>
<p className={styles.faq_question}>{item.question}</p>
</div>

{activeIndex === globalIndex && ( // 현재 활성화된 질문에 대한 답변만 표시
<div className={styles.faq_answer_div}>
<div className={styles.faq_answer_triangle}></div>

<div
className={
isRightBox
? styles.faq_right_answer_rectangle
: styles.faq_answer_rectangle
}
>
<div className={styles.faq_answer}>
<p className={styles.faq_answer_content}>{item.answer}</p>
</div>
</div>
</div>
)}
</div>
);
})}
</div>
);
}

return rows;
};

return (
<div className={styles.qna_div}>
<p className={styles.qna_title}>문의사항</p>
<p className={styles.faq_title}>자주 묻는 질문</p>
<div className={styles.faq_container}>
{faqData?.map((item, index) => (
<div key={index} className={styles.faq_rectangle} onClick={() => toggleAnswer(index)}>
<div className={styles.faq_container}>
<p className={styles.faq_Q}>Q</p>
<p className={styles.faq_question}>{item.question}</p>
</div>

{activeIndex === index && ( // 현재 활성화된 질문에 대한 답변만 표시
<div className={styles.faq_answer_div}>
<div className={styles.faq_answer_rectangle}>
<div className={styles.faq_answer}>
<div className={styles.faq_container}>
<p className={styles.faq_answer_content}>{item.answer}</p>
</div>
</div>
</div>
</div>
)}
</div>
))}
</div>
{renderDataInRows(faqData)}
</div>
);
}
71 changes: 65 additions & 6 deletions src/component/QnA/QnA.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -70,21 +70,24 @@
/* display: contents; */
}
.faq_answer_div {
display: flex;
position: absolute;
background: #a7a7a780;
width: 80%;
}

.faq_answer_rectangle {
/* width: 443px; */
width: 350px;
/* .faq_answer_rectangle {
width: 285px;
height: 110px;
background: #ffffff;
background: #a7a7a780;
position: relative;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #a7a7a780;
box-shadow: 0px 0px 2px 1px #0000000d;
}

} */
/*
.faq_answer_rectangle::after {
content: '';
position: absolute;
Expand All @@ -100,6 +103,35 @@
z-index: 0;
}
.faq_right_answer_rectangle {
width: 285px;
height: 110px;
background: #ffffff;
position: relative;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #a7a7a780;
box-shadow: 0px 0px 2px 1px #0000000d;
display: block;
}
.faq_right_answer_rectangle::after {
content: '';
position: absolute;
top: -16px;
left: 220px;
width: 30px;
height: 30px;
background: #ffffff;
border-left: 1px solid #a7a7a780;
border-top: 1px solid #a7a7a780;
box-shadow: 0px 0px 2px 1px #0000000d;
transform: rotate(45deg);
z-index: 0;
}
*/

.faq_answer {
display: flex;
position: absolute;
Expand Down Expand Up @@ -224,6 +256,33 @@
z-index: 0;
}

.faq_right_answer_rectangle {
/* width: 443px; */
width: 220px;
height: 110px;
background: #ffffff;
position: relative;
margin-top: 130px;
border-radius: 20px;
border: 1px solid #a7a7a780;
box-shadow: 0px 0px 2px 1px #0000000d;
}

.faq_right_answer_rectangle::after {
content: '';
position: absolute;
top: -16px;
left: 50px;
width: 30px;
height: 30px;
background: #ffffff;
border-left: 1px solid #a7a7a780;
border-top: 1px solid #a7a7a780;
box-shadow: 0px 0px 2px 1px #0000000d;
transform: rotate(45deg);
z-index: 0;
}

.faq_answer {
display: flex;
position: absolute;
Expand Down
2 changes: 2 additions & 0 deletions src/component/admin/Mypage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export default function MyPage() {
const [clubId, setClubId] = useState();
const [clubInfo, setClubInfo] = useState([]);

console.log(accessToken);

const getAdminClub = async () => {
try {
const response = await customAxios.get(`/v1/admins/mypage`, {
Expand Down
55 changes: 55 additions & 0 deletions src/component/admin/recruit/AdminRecruitList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import styles from './adminRecruitList.module.css';
import { customAxios } from '../../../config/axios-config';
import { useEffect, useState } from 'react';

export default function AdminRecruitList() {
const [PromoteData, setPromoteData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [pageSize, setPageSize] = useState(1); // 한 페이지에 표시할 항목 수
const [sort, setSort] = useState(['string']); // 정렬 기준

useEffect(() => {
getPromoteData(currentPage);
}, [currentPage]);

const getPromoteData = async (page) => {
try {
const res = await customAxios.get(`/v1/admins/recruits`, {
params: {
page: page,
size: pageSize,
//sort: sort,
},
});
if (res.data.success) {
setPromoteData(res.data.data.content);
setTotalPages(res.data.pagination.totalPages);
console.log(res.data.data);
}
} catch (error) {
console.error('Error fetching data : ', error);
}
};

const handlePageChange = (newPage) => {
setCurrentPage(newPage);
};

return (
<>
<div className={styles.title}>모집글</div>
<div className={styles.recruit_container} key={PromoteData.recruitId}>
{PromoteData?.map((item) => (
<div className={styles.recruit_box}>
<img src={item.images} alt="club_logo" className={styles.recruit_logo} />
<div className={styles.recruit_div}>
<p className={styles.recruit_title}>{item.title}</p>
<p className={styles.recruit_text}>{item.content}</p>
</div>
</div>
))}
</div>
</>
);
}
Loading

0 comments on commit 0a42cdc

Please sign in to comment.