+
+
+
+ {rightSlot ? (
+ {title}
+{rightSlot}
+ ) : reserveRightSlot ? (
+
+ ) : null}
+
-
-
-
- {rightSlot ? {title}
-{rightSlot}
: }
-
-
-
+
+
+
-
-
+
{councilDetail.introduce.replace(/\\n/g, '\n')}
위치 및 연락처
+ 위치 및 연락처
-
diff --git a/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx b/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx
index 034653ff..7f01298f 100644
--- a/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx
+++ b/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx
@@ -11,34 +11,37 @@ function CouncilNotice() {
const observerRef = useInfiniteScroll(fetchNextPage, hasNextPage, isFetchingNextPage);
const allNotices = data?.pages.flatMap((page) => page.councilNotices) ?? [];
+ const noticeListCardClassName = 'overflow-hidden rounded-2xl bg-white shadow-[0_0_20px_rgba(0,0,0,0.03)]';
if (allNotices.length === 0) {
return (
-
-
-
-
-
-
-
- 동아리방 위치
- {councilDetail.location}
-
-
-
-
-
-
-
- 운영 시간
- {councilDetail.operatingHour}
-
-
-
-
-
+ ))}
인스타그램
-
- @{councilDetail.instagramUserName}
-
+ {contactItems.map(({ content, icon: Icon, key }) => (
+
+
-
+
+ {typeof content === 'string' ? {content}
: content}
-
등록된 공지사항이 없어요
- 새로운 공지사항이 등록되면 여기에 표시돼요
+
+
);
}
return (
-
+
등록된 공지사항이 없어요
+ 새로운 공지사항이 등록되면 여기에 표시돼요
+
- {allNotices.map((notice) => (
-
-
+ <>
+
-
- {notice.title}
- {!notice.isRead && }
- {notice.createdAt}
-
- ))}
- {hasNextPage && }
-
+ {allNotices.map((notice) => (
+
+
+ {hasNextPage && }
+
);
}
diff --git a/src/pages/Council/CouncilDetail/index.tsx b/src/pages/Council/CouncilDetail/index.tsx
index 9ce192f4..b7fa49ba 100644
--- a/src/pages/Council/CouncilDetail/index.tsx
+++ b/src/pages/Council/CouncilDetail/index.tsx
@@ -1,7 +1,8 @@
-import { Activity } from 'react';
+import { Activity, type CSSProperties } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
import { councilQueries } from '@/apis/council/queries';
+import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
import useScrollToTop from '@/utils/hooks/useScrollToTop';
import { cn } from '@/utils/ts/cn';
import CouncilIntro from './components/CouncilIntro';
@@ -12,56 +13,74 @@ type TabType = 'intro' | 'notice';
function CouncilDetail() {
useScrollToTop();
const [searchParams, setSearchParams] = useSearchParams();
- const currentTab = searchParams.get('tab') || 'intro';
+ const currentTab: TabType = searchParams.get('tab') === 'notice' ? 'notice' : 'intro';
const { data: councilInfo } = useSuspenseQuery(councilQueries.info());
const handleTabClick = (tab: TabType) => {
setSearchParams({ tab }, { replace: true });
};
+ const getTabId = (tab: TabType) => `tab-${tab}`;
+ const getPanelId = (tab: TabType) => `panel-${tab}`;
const tabs: { key: TabType; label: string }[] = [
{ key: 'intro', label: '소개' },
{ key: 'notice', label: '공지사항' },
];
+ const backgroundStyle = {
+ backgroundImage: `linear-gradient(180deg, ${councilInfo.personalColor} 0%, var(--color-background) 38%, var(--color-background) 100%)`,
+ top: 'calc(-1 * var(--subpage-header-height))',
+ } satisfies CSSProperties;
return (
- <>
-
+
+
+ {notice.title}
+
+ {!notice.isRead && }
+ {notice.createdAt}
+
+ ))}
+
-
- 
-
-
총동아리연합회
- {councilInfo.name}
+
+
+
+
-
-
-
-
+
);
}
diff --git a/src/pages/Council/CouncilNotice/index.tsx b/src/pages/Council/CouncilNotice/index.tsx
index ee647426..85d11aff 100644
--- a/src/pages/Council/CouncilNotice/index.tsx
+++ b/src/pages/Council/CouncilNotice/index.tsx
@@ -1,4 +1,5 @@
import { useParams } from 'react-router-dom';
+import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
import useScrollToTop from '@/utils/hooks/useScrollToTop';
import { useGetCouncilNoticeDetail } from './hooks/useCouncilNoticeDetail';
@@ -12,14 +13,15 @@ function CouncilNotice() {
}
return (
-
+
+
-
+
+
-
+
총동아리연합회
+ {councilInfo.name}
+
- {tabs.map((tab) => (
-
- ))}
+
+
-
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
-
{councilNoticeDetail.title}
{councilNoticeDetail.updatedAt}
+
);
}
diff --git a/src/pages/Manager/components/ApplicationDetailContent.tsx b/src/pages/Manager/components/ApplicationDetailContent.tsx
index 1872ed23..c556b889 100644
--- a/src/pages/Manager/components/ApplicationDetailContent.tsx
+++ b/src/pages/Manager/components/ApplicationDetailContent.tsx
@@ -1,6 +1,7 @@
import type { ReactNode } from 'react';
import type { ClubApplicationDetailResponse } from '@/apis/club/entity';
import Portal from '@/components/common/Portal';
+import { useBottomOverlayOffset } from '@/components/layout/bottomOverlay';
import useBooleanState from '@/utils/hooks/useBooleanState';
import { formatIsoDateToYYYYMMDDHHMM } from '@/utils/ts/datetime/date';
@@ -80,10 +81,14 @@ interface ApplicationDetailContentProps {
function ApplicationDetailContent({ application, footer }: ApplicationDetailContentProps) {
const { value: isImageOpen, setTrue: openImage, setFalse: closeImage } = useBooleanState();
+ const bottomPadding = useBottomOverlayOffset();
return (
{councilNoticeDetail.content.replace(/\\n/g, '\n')}
+
-
+
page.notifications) ?? [];
- const bottomSpacerHeight = getBottomOverlayOffset(bottomOverlayInset, NOTIFICATION_LIST_BOTTOM_GAP);
const handleNotificationClick = async (notification: InboxNotification) => {
const destinationPath = normalizeInboxNotificationPath(notification.path);
@@ -157,9 +154,7 @@ function NotificationsPage() {
)}
- {notifications.length > 0 && (
-
- )}
+ {notifications.length > 0 &&
);
}