+ {/* 헤더 */}
+
+ );
+};
+
+export default ActivityPage;
diff --git a/src/pages/activityDetail/index.module.scss b/src/pages/activityDetail/index.module.scss
new file mode 100644
index 0000000..3b44aff
--- /dev/null
+++ b/src/pages/activityDetail/index.module.scss
@@ -0,0 +1,126 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/mixins' as m;
+
+.container {
+ max-width: 1000px;
+ margin: 1rem auto;
+ padding-inline: 1rem;
+
+ .title {
+ position: relative;
+
+ display: inline-block;
+
+ margin-bottom: 0.5rem;
+
+ font-size: v.$text-xl;
+ font-weight: v.$font-medium;
+
+ &::before {
+ position: absolute;
+ content: '';
+ bottom: 0;
+ left: 0;
+ height: 1rem;
+ width: 100%;
+ z-index: -1;
+ background-color: v.$red-100;
+ opacity: 0.5;
+ }
+ }
+
+ @include m.tablet {
+ max-width: 680px;
+ }
+ @include m.mobile {
+ max-width: 680px;
+ }
+}
+
+.infoWrap {
+ display: flex;
+ justify-content: space-between;
+
+ & > div {
+ border-left: 1px solid #ccc;
+ }
+
+ & > div:first-of-type {
+ flex-grow: 1;
+ font-size: 1.3rem;
+ border: none;
+ }
+ & > div:nth-of-type(2) {
+ flex-grow: 5;
+
+ padding-left: 1rem;
+ }
+ & > div:last-of-type {
+ flex-grow: 5;
+
+ padding-left: 1rem;
+ }
+
+ & > div > div {
+ margin-block: 0.3rem;
+ }
+
+ & > div > div > span:first-of-type {
+ display: inline-block;
+ width: 30%;
+
+ font-size: 0.8rem;
+ }
+ & > div > div > span:last-of-type {
+ display: inline-block;
+ width: 70%;
+
+ white-space: wrap;
+ color: v.$gray;
+
+ font-size: 0.8rem;
+ }
+
+ @include m.tablet {
+ flex-flow: column;
+
+ & > div {
+ border: none;
+ }
+
+ & > div:nth-of-type(2) {
+ padding: 0;
+ }
+ & > div:last-of-type {
+ padding: 0;
+ }
+
+ & > div:first-of-type {
+ display: none;
+ }
+ }
+ @include m.mobile {
+ flex-flow: column;
+
+ & > div {
+ border: none;
+ }
+
+ & > div:nth-of-type(2) {
+ padding: 0;
+ }
+ & > div:last-of-type {
+ padding: 0;
+ }
+
+ & > div:first-of-type {
+ display: none;
+ }
+ }
+}
+
+.content {
+ & > img {
+ width: 100%;
+ }
+}
diff --git a/src/pages/activityDetail/index.tsx b/src/pages/activityDetail/index.tsx
new file mode 100644
index 0000000..fda0557
--- /dev/null
+++ b/src/pages/activityDetail/index.tsx
@@ -0,0 +1,148 @@
+import { useLocation } from 'react-router-dom';
+import styles from './index.module.scss';
+import { itemADetail, itemBDetail } from '../activity/constants';
+import Divider from '@/components/atoms/Divider';
+
+const ActivityDetailPage = () => {
+ // const { id } = useParams();
+ const location = useLocation();
+ const queryParams = new URLSearchParams(location.search);
+ const tabName = queryParams.get('t');
+
+ return (
+
+ setCurrentTab(0)} />
+ setCurrentTab(1)} />
+
+ {/* 필터링 검색 바 */}
+
+
+
+ {filter.map((item, index) => {
+ return (
+ filteringItem(index)}
+ />
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {currentTab === 0 &&
+ listARes.data.competitions.map((item) => {
+ return (
+
- + ); + })} + + {currentTab === 1 && + listBRes.data.activities.map((item) => { + return ( +
- + ); + })} +
+
+
+
+ {/** *
+ * TODO: 리스트 아이템 개수 연결
+ */}
+ {Array.from({ length: 49 }, (_, i) => i + 1)
+ .slice(currentPageList * 5, currentPageList * 5 + 5)
+ .map((number, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+export default ActivityDetailPage;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index e30d466..5489000 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -1,15 +1,17 @@
+import SignIn from '@/components/signIn';
import { createBrowserRouter } from 'react-router-dom';
import App from '../App';
-import SignIn from '@/components/signIn';
-import ArticleDetailPage from '@/pages/articleDetail';
import SignUp from '@/components/signUp';
-import MyPage from '@/pages/myPage';
-import ArticleListPage from '@/pages/articleList';
-import AdminLogin from '@/pages/adminLogin';
import AdminBoardDetail from '@/pages/AdminBoardDetail';
+import ActivityPage from '@/pages/activity';
+import ActivityDetailPage from '@/pages/activityDetail';
import AdminBoard from '@/pages/adminBoard';
+import AdminLogin from '@/pages/adminLogin';
+import ArticleDetailPage from '@/pages/articleDetail';
+import ArticleListPage from '@/pages/articleList';
import CampReviewListPage from '@/pages/campReviewList';
+import MyPage from '@/pages/myPage';
import ReviewDetailListPage from '@/pages/reviewDetailList';
import { Suspense, lazy } from 'react';
@@ -59,6 +61,8 @@ export const router = createBrowserRouter([
),
},
+ { path: '/activity', element:
+ {tabName === 'competitions' ? itemADetail.data.title : itemBDetail.data.title}
+
+
+
+
+ 기본
+
+ 정보 +
+ + 정보 +
+
+
+ {tabName === 'competitions' ? '공모전 주최' : '대외 활동 주최'}
+
+ {tabName === 'competitions'
+ ? itemADetail.data.organization || ''
+ : itemBDetail.data.organization}
+
+
+
+ 기업 형태
+
+ {tabName === 'competitions'
+ ? itemADetail.data.corporate_type || ''
+ : itemBDetail.data.corporate_type}
+
+
+
+ 참여 대상
+
+ {tabName === 'competitions'
+ ? itemADetail.data.participate || ''
+ : itemBDetail.data.participate}
+
+
+
+ 접수 기간
+
+ {tabName === 'competitions'
+ ? `${itemADetail.data.start_date || ''} ~ ${itemADetail.data.end_date || ''}` || ''
+ : `${itemBDetail.data.start_date || ''} ~ ${itemBDetail.data.end_date || ''}`}
+
+
+
+ {tabName === 'activities' && (
+
+ 활동 기간
+ {itemBDetail.data.period}
+
+ )}
+ {tabName === 'activities' && (
+
+ 모집 인원
+ {itemBDetail.data.recruitment}명
+
+ )}
+
+ {tabName === 'competitions' && (
+
+
+ 시상 규모
+ {itemADetail.data.activity_benefit || ''}
+
+ )}
+
+ {tabName === 'activities' && (
+
+ 활동 지역
+ {itemBDetail.data.area}
+
+ )}
+ {tabName === 'activities' && (
+
+ 우대 역량
+ {itemBDetail.data.preferred_skills}
+
+ )}
+ {tabName === 'activities' && (
+
+ 활동 분야
+ {itemBDetail.data.activity_field}
+
+ )}
+
+
+ 활동 혜택
+
+ {tabName === 'competitions'
+ ? itemADetail.data.activity_benefit || ''
+ : itemBDetail.data.activity_benefit}
+
+
+
+ 추가 혜택
+
+ {tabName === 'competitions'
+ ? itemADetail.data.bonus_benefit || ''
+ : itemBDetail.data.bonus_benefit}
+
+
+
+
+ 
+
+
+ {tabName === 'competitions' ? itemADetail.data.description : itemBDetail.data.description}
+
+