From 35e66039a95be74c7b06f1fee1d6090d2ab98dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 31 Mar 2026 12:50:19 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=ED=95=98=EB=8B=A8=20=EC=98=A4?=
 =?UTF-8?q?=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=B2=98=EB=A6=AC=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/BottomOverlaySpacer.tsx | 24 +++++++++++++++++++
 .../{layoutMetrics.ts => bottomOverlay.ts}    | 14 ++++++++---
 .../hooks/useLayoutBottomOverlayInset.ts      |  2 +-
 .../notification/InAppNotificationToast.tsx   |  6 ++---
 src/pages/Chat/index.tsx                      |  8 ++-----
 .../components/ApplicationDetailContent.tsx   |  7 +++++-
 src/pages/Notifications/index.tsx             |  9 ++-----
 7 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 src/components/layout/BottomOverlaySpacer.tsx
 rename src/components/layout/{layoutMetrics.ts => bottomOverlay.ts} (63%)

diff --git a/src/components/layout/BottomOverlaySpacer.tsx b/src/components/layout/BottomOverlaySpacer.tsx
new file mode 100644
index 0000000..b0dd2f1
--- /dev/null
+++ b/src/components/layout/BottomOverlaySpacer.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+import {
+  DEFAULT_BOTTOM_OVERLAY_GAP,
+  type BottomOverlayGap,
+  useBottomOverlayOffset,
+} from '@/components/layout/bottomOverlay';
+import { cn } from '@/utils/ts/cn';
+
+interface BottomOverlaySpacerProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: BottomOverlayGap;
+}
+
+function BottomOverlaySpacer({
+  gap = DEFAULT_BOTTOM_OVERLAY_GAP,
+  className,
+  style,
+  ...props
+}: BottomOverlaySpacerProps) {
+  const height = useBottomOverlayOffset(gap);
+
+  return <div aria-hidden="true" className={cn('shrink-0', className)} style={{ height, ...style }} {...props} />;
+}
+
+export default BottomOverlaySpacer;
diff --git a/src/components/layout/layoutMetrics.ts b/src/components/layout/bottomOverlay.ts
similarity index 63%
rename from src/components/layout/layoutMetrics.ts
rename to src/components/layout/bottomOverlay.ts
index b7ec6d0..954dd7d 100644
--- a/src/components/layout/layoutMetrics.ts
+++ b/src/components/layout/bottomOverlay.ts
@@ -1,7 +1,9 @@
+import { useLayoutElementsContext } from '@/contexts/useLayoutElementsContext';
+
 export const DEFAULT_BOTTOM_OVERLAY_INSET = 'var(--sab)';
 export const DEFAULT_BOTTOM_NAV_OVERLAY_INSET = 'calc(80px + var(--sab))';
-export const NOTIFICATION_LIST_BOTTOM_GAP = 24;
-export const NOTIFICATION_TOAST_BOTTOM_GAP = 16;
+export type BottomOverlayGap = 16 | 24;
+export const DEFAULT_BOTTOM_OVERLAY_GAP: BottomOverlayGap = 16;
 
 function getViewportHeight() {
   return window.visualViewport?.height ?? window.innerHeight;
@@ -21,6 +23,12 @@ export function getLayoutBottomOverlayInset(showBottomNav: boolean, bottomNav: H
   return `${Math.ceil(visibleBottomInset)}px`;
 }
 
-export function getBottomOverlayOffset(bottomOverlayInset: string, gap: number) {
+export function getBottomOverlayOffset(bottomOverlayInset: string, gap: BottomOverlayGap) {
   return `calc(${bottomOverlayInset} + ${gap}px)`;
 }
+
+export function useBottomOverlayOffset(gap: BottomOverlayGap = DEFAULT_BOTTOM_OVERLAY_GAP) {
+  const { bottomOverlayInset } = useLayoutElementsContext();
+
+  return getBottomOverlayOffset(bottomOverlayInset, gap);
+}
diff --git a/src/components/layout/hooks/useLayoutBottomOverlayInset.ts b/src/components/layout/hooks/useLayoutBottomOverlayInset.ts
index f32bcbb..1d04c9f 100644
--- a/src/components/layout/hooks/useLayoutBottomOverlayInset.ts
+++ b/src/components/layout/hooks/useLayoutBottomOverlayInset.ts
@@ -3,7 +3,7 @@ import {
   DEFAULT_BOTTOM_NAV_OVERLAY_INSET,
   DEFAULT_BOTTOM_OVERLAY_INSET,
   getLayoutBottomOverlayInset,
-} from '@/components/layout/layoutMetrics';
+} from '@/components/layout/bottomOverlay';
 
 export function useLayoutBottomOverlayInset(showBottomNav: boolean, bottomNavRef: RefObject<HTMLElement | null>) {
   const [bottomOverlayInset, setBottomOverlayInset] = useState(
diff --git a/src/components/notification/InAppNotificationToast.tsx b/src/components/notification/InAppNotificationToast.tsx
index 8e69c48..8911c3c 100644
--- a/src/components/notification/InAppNotificationToast.tsx
+++ b/src/components/notification/InAppNotificationToast.tsx
@@ -2,7 +2,7 @@ import type { InboxNotification } from '@/apis/notification/entity';
 import NotificationToastApprovedImage from '@/assets/image/notification-toast-approved.png';
 import NotificationToastGeneralImage from '@/assets/image/notification-toast-general.png';
 import Portal from '@/components/common/Portal';
-import { getBottomOverlayOffset, NOTIFICATION_TOAST_BOTTOM_GAP } from '@/components/layout/layoutMetrics';
+import { useBottomOverlayOffset } from '@/components/layout/bottomOverlay';
 import { useLayoutElementsContext } from '@/contexts/useLayoutElementsContext';
 import { getInboxNotificationMessage, getInboxNotificationToastVariant } from '@/utils/ts/notification';
 
@@ -26,14 +26,14 @@ function NotificationToneIcon({ notification }: { notification: InboxNotificatio
 }
 
 function InAppNotificationToast({ notification, onAction }: InAppNotificationToastProps) {
-  const { bottomOverlayInset, layoutElement } = useLayoutElementsContext();
+  const { layoutElement } = useLayoutElementsContext();
+  const bottomPosition = useBottomOverlayOffset();
 
   if (!notification) {
     return null;
   }
 
   const message = getInboxNotificationMessage(notification);
-  const bottomPosition = getBottomOverlayOffset(bottomOverlayInset, NOTIFICATION_TOAST_BOTTOM_GAP);
 
   return (
     <Portal container={layoutElement}>
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index c65a979..0109c56 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -4,14 +4,12 @@ import type { Advertisement } from '@/apis/advertisement/entity';
 import type { Room } from '@/apis/chat/entity';
 import BellOffIcon from '@/assets/svg/bell-off.svg';
 import PersonIcon from '@/assets/svg/person.svg';
-import { getBottomOverlayOffset } from '@/components/layout/layoutMetrics';
-import { useLayoutElementsContext } from '@/contexts/useLayoutElementsContext';
+import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
 import { useAdvertisementInterval } from '@/utils/hooks/useAdvertisementInterval';
 import { useAdvertisements } from '@/utils/hooks/useAdvertisements';
 import useChat from './hooks/useChat';
 
 const DEFAULT_LAST_MESSAGE = '동아리에 궁금한 점을 물어보세요';
-const CHAT_LIST_BOTTOM_GAP = 24;
 
 const formatTime = (timeString: string) => {
   const timeMatch = timeString.match(/(\d{1,2}):(\d{2})/);
@@ -167,7 +165,6 @@ function ChatAdvertisementListItemSkeleton() {
 }
 
 function ChatListPage() {
-  const { bottomOverlayInset } = useLayoutElementsContext();
   const { chatRoomList } = useChat();
   const rooms = chatRoomList.rooms;
   const firstChatRoomItemRef = useRef<HTMLAnchorElement>(null);
@@ -185,7 +182,6 @@ function ChatListPage() {
     advertisementCount,
     scope: 'chat-list',
   });
-  const bottomSpacerHeight = getBottomOverlayOffset(bottomOverlayInset, CHAT_LIST_BOTTOM_GAP);
 
   if (rooms.length === 0) {
     return (
@@ -220,7 +216,7 @@ function ChatListPage() {
           </Fragment>
         );
       })}
-      <div aria-hidden="true" className="shrink-0" style={{ height: bottomSpacerHeight }} />
+      <BottomOverlaySpacer />
     </div>
   );
 }
diff --git a/src/pages/Manager/components/ApplicationDetailContent.tsx b/src/pages/Manager/components/ApplicationDetailContent.tsx
index 1872ed2..c556b88 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 (
     <div className="flex h-full flex-col">
-      <div className="flex flex-1 flex-col gap-6 overflow-auto px-[19px] pt-[17px] pb-[calc(17px+var(--sab))]">
+      <div
+        className="flex flex-1 flex-col gap-6 overflow-auto px-[19px] pt-[17px]"
+        style={{ paddingBottom: bottomPadding }}
+      >
         <ApplicantSummaryCard
           appliedAt={application.appliedAt}
           name={application.name}
diff --git a/src/pages/Notifications/index.tsx b/src/pages/Notifications/index.tsx
index c8dfda7..329a4f0 100644
--- a/src/pages/Notifications/index.tsx
+++ b/src/pages/Notifications/index.tsx
@@ -6,9 +6,8 @@ import { notificationQueries, notificationQueryKeys } from '@/apis/notification/
 import BellOffIcon from '@/assets/svg/bell-off.svg';
 import ChatIcon from '@/assets/svg/chat-icon.svg';
 import PersonIcon from '@/assets/svg/person-icon.svg';
-import { getBottomOverlayOffset, NOTIFICATION_LIST_BOTTOM_GAP } from '@/components/layout/layoutMetrics';
+import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
 import { useMarkInboxNotificationAsReadMutation } from '@/components/notification/hooks/useInboxNotificationMutations';
-import { useLayoutElementsContext } from '@/contexts/useLayoutElementsContext';
 import { useInfiniteScroll } from '@/utils/hooks/useInfiniteScroll';
 import {
   getInboxNotificationIconKind,
@@ -85,7 +84,6 @@ function NotificationRow({ notification, disabled = false, onClick }: Notificati
 function NotificationsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const { bottomOverlayInset } = useLayoutElementsContext();
   const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteQuery(
     notificationQueries.inboxInfinite()
   );
@@ -97,7 +95,6 @@ function NotificationsPage() {
   }
 
   const notifications = data?.pages.flatMap((page) => 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() {
           </div>
         )}
       </section>
-      {notifications.length > 0 && (
-        <div aria-hidden="true" className="shrink-0" style={{ height: bottomSpacerHeight }} />
-      )}
+      {notifications.length > 0 && <BottomOverlaySpacer gap={24} />}
     </div>
   );
 }

From 46f5942af017a95cc68d9336cc33c67ce053e0a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 31 Mar 2026 12:50:39 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=B4=9D=EB=8F=99=EC=95=84?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  8 +-
 src/assets/svg/clock.svg                      |  2 +-
 src/assets/svg/instagram.svg                  |  2 +-
 src/assets/svg/location-pin.svg               |  4 +-
 src/components/layout/BottomNav/index.tsx     |  6 +-
 .../Header/components/BackTitleHeader.tsx     | 50 +++++++++++
 .../Header/components/CouncilHeader.tsx       | 27 ------
 .../Header/components/PlainSubpageHeader.tsx  | 11 +++
 .../Header/components/SubpageHeader.tsx       | 26 ++----
 src/components/layout/Header/headerConfig.ts  | 10 +--
 src/components/layout/Header/index.tsx        |  2 +
 src/components/layout/Header/routeTitles.ts   |  4 +
 src/components/layout/Header/types.ts         |  1 +
 .../CouncilDetail/components/CouncilIntro.tsx | 85 ++++++++++---------
 .../components/CouncilNotice.tsx              | 43 +++++-----
 src/pages/Council/CouncilDetail/index.tsx     | 81 ++++++++++--------
 src/pages/Council/CouncilNotice/index.tsx     |  8 +-
 17 files changed, 214 insertions(+), 156 deletions(-)
 create mode 100644 src/components/layout/Header/components/BackTitleHeader.tsx
 delete mode 100644 src/components/layout/Header/components/CouncilHeader.tsx
 create mode 100644 src/components/layout/Header/components/PlainSubpageHeader.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2672b46..124be5c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -86,6 +86,10 @@ function App() {
             <Route element={<Layout showBottomNav />}>
               <Route path="home" element={<Home />} />
               <Route path="notifications" element={<NotificationsPage />} />
+              <Route path="council">
+                <Route index element={<CouncilDetail />} />
+                <Route path="notice/:noticeId" element={<CouncilNotice />} />
+              </Route>
               <Route path="mypage">
                 <Route index element={<MyPage />} />
                 <Route path="manager">
@@ -116,10 +120,6 @@ function App() {
               <Route path="mypage/manager/:clubId/recruitment/write" element={<ManagedRecruitmentWrite />} />
               <Route path="mypage/manager/:clubId/recruitment/account" element={<ManagedAccount />} />
               <Route path="profile" element={<Profile />} />
-              <Route path="council">
-                <Route index element={<CouncilDetail />} />
-                <Route path="notice/:noticeId" element={<CouncilNotice />} />
-              </Route>
               <Route path="chats/:chatRoomId" element={<ChatRoom />} />
             </Route>
           </Route>
diff --git a/src/assets/svg/clock.svg b/src/assets/svg/clock.svg
index 068bd52..1a502a8 100644
--- a/src/assets/svg/clock.svg
+++ b/src/assets/svg/clock.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.66669 3.33341V6.66675H10M6.66669 12.6667C3.35298 12.6667 0.666687 9.98046 0.666687 6.66675C0.666687 3.35304 3.35298 0.666748 6.66669 0.666748C9.9804 0.666748 12.6667 3.35304 12.6667 6.66675C12.6667 9.98046 9.9804 12.6667 6.66669 12.6667Z" stroke="#3A4C61" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66669 3.33341V6.66675H10M6.66669 12.6667C3.35298 12.6667 0.666687 9.98046 0.666687 6.66675C0.666687 3.35304 3.35298 0.666748 6.66669 0.666748C9.9804 0.666748 12.6667 3.35304 12.6667 6.66675C12.6667 9.98046 9.9804 12.6667 6.66669 12.6667Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/assets/svg/instagram.svg b/src/assets/svg/instagram.svg
index 91325d7..909561d 100644
--- a/src/assets/svg/instagram.svg
+++ b/src/assets/svg/instagram.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 0C5.10037 0 4.8615 0.00875 4.11512 0.042C3.36875 0.077 2.86037 0.19425 2.415 0.3675C1.94761 0.542785 1.52437 0.818474 1.17513 1.17513C0.818474 1.52437 0.542785 1.94761 0.3675 2.415C0.19425 2.8595 0.076125 3.36875 0.042 4.1125C0.00875 4.86062 0 5.09863 0 7.00088C0 8.90137 0.00875 9.13937 0.042 9.88575C0.077 10.6313 0.19425 11.1396 0.3675 11.585C0.546875 12.0452 0.78575 12.4355 1.17513 12.8249C1.56362 13.2142 1.95388 13.454 2.41412 13.6325C2.86037 13.8057 3.36788 13.9239 4.11338 13.958C4.86062 13.9912 5.09862 14 7 14C8.90137 14 9.1385 13.9912 9.88575 13.958C10.6304 13.923 11.1405 13.8057 11.5859 13.6325C12.0529 13.4571 12.4759 13.1814 12.8249 12.8249C13.2142 12.4355 13.4531 12.0452 13.6325 11.585C13.8049 11.1396 13.923 10.6313 13.958 9.88575C13.9912 9.13937 14 8.90137 14 7C14 5.09862 13.9912 4.86062 13.958 4.11338C13.923 3.36875 13.8049 2.8595 13.6325 2.415C13.4572 1.94761 13.1815 1.52437 12.8249 1.17513C12.4756 0.818474 12.0524 0.542785 11.585 0.3675C11.1388 0.19425 10.6295 0.076125 9.88487 0.042C9.13762 0.00875 8.9005 0 6.99825 0H7ZM6.37262 1.26175H7.00088C8.86987 1.26175 9.09125 1.26788 9.82887 1.302C10.5114 1.33263 10.8824 1.44725 11.1291 1.54262C11.4555 1.6695 11.6891 1.82175 11.9341 2.06675C12.1791 2.31175 12.3305 2.5445 12.4574 2.87175C12.5536 3.11762 12.6674 3.48863 12.698 4.17112C12.7321 4.90875 12.7391 5.13012 12.7391 6.99825C12.7391 8.86637 12.7321 9.08862 12.698 9.82625C12.6674 10.5087 12.5528 10.8789 12.4574 11.1256C12.3444 11.4292 12.1653 11.7038 11.9332 11.9297C11.6882 12.1747 11.4555 12.3261 11.1282 12.453C10.8832 12.5492 10.5122 12.663 9.82887 12.6945C9.09125 12.7277 8.86987 12.7356 7.00088 12.7356C5.13188 12.7356 4.90963 12.7277 4.172 12.6945C3.4895 12.663 3.11937 12.5492 2.87262 12.453C2.56885 12.3403 2.2939 12.1616 2.06762 11.9297C1.83511 11.7037 1.65579 11.4287 1.54262 11.1247C1.44725 10.8789 1.33263 10.5079 1.302 9.82537C1.26875 9.08775 1.26175 8.86637 1.26175 6.9965C1.26175 5.12662 1.26875 4.907 1.302 4.16937C1.3335 3.48687 1.44725 3.11587 1.5435 2.86912C1.67037 2.54275 1.82262 2.30912 2.06762 2.06412C2.31262 1.81912 2.54537 1.66775 2.87262 1.54087C3.11937 1.44462 3.4895 1.33087 4.172 1.29937C4.81775 1.26962 5.068 1.26087 6.37262 1.26V1.26175ZM10.7371 2.42375C10.6268 2.42375 10.5176 2.44548 10.4157 2.48769C10.3138 2.52991 10.2212 2.59178 10.1432 2.66978C10.0652 2.74778 10.0033 2.84038 9.96107 2.9423C9.91885 3.04421 9.89712 3.15344 9.89712 3.26375C9.89712 3.37406 9.91885 3.48329 9.96107 3.5852C10.0033 3.68712 10.0652 3.77972 10.1432 3.85772C10.2212 3.93572 10.3138 3.99759 10.4157 4.03981C10.5176 4.08202 10.6268 4.10375 10.7371 4.10375C10.9599 4.10375 11.1736 4.01525 11.3311 3.85772C11.4886 3.70019 11.5771 3.48653 11.5771 3.26375C11.5771 3.04097 11.4886 2.82731 11.3311 2.66978C11.1736 2.51225 10.9599 2.42375 10.7371 2.42375ZM7.00088 3.4055C6.52406 3.39806 6.05053 3.48555 5.60786 3.66287C5.16518 3.8402 4.7622 4.10381 4.42238 4.43837C4.08256 4.77293 3.81269 5.17175 3.62849 5.6116C3.44428 6.05146 3.34941 6.52357 3.34941 7.00044C3.34941 7.47731 3.44428 7.94942 3.62849 8.38927C3.81269 8.82913 4.08256 9.22795 4.42238 9.5625C4.7622 9.89706 5.16518 10.1607 5.60786 10.338C6.05053 10.5153 6.52406 10.6028 7.00088 10.5954C7.9446 10.5807 8.84469 10.1954 9.50686 9.52284C10.169 8.85026 10.5402 7.94428 10.5402 7.00044C10.5402 6.0566 10.169 5.15061 9.50686 4.47803C8.84469 3.80545 7.9446 3.42022 7.00088 3.4055ZM7.00088 4.66638C7.30733 4.66638 7.61079 4.72674 7.89391 4.84401C8.17704 4.96129 8.4343 5.13318 8.651 5.34988C8.86769 5.56657 9.03959 5.82383 9.15686 6.10696C9.27414 6.39009 9.3345 6.69354 9.3345 7C9.3345 7.30646 9.27414 7.60991 9.15686 7.89304C9.03959 8.17617 8.86769 8.43342 8.651 8.65012C8.4343 8.86682 8.17704 9.03871 7.89391 9.15599C7.61079 9.27326 7.30733 9.33362 7.00088 9.33362C6.38196 9.33362 5.78839 9.08776 5.35075 8.65012C4.91311 8.21248 4.66725 7.61892 4.66725 7C4.66725 6.38108 4.91311 5.78752 5.35075 5.34988C5.78839 4.91224 6.38196 4.66638 7.00088 4.66638Z" fill="#3A4C61"/>
+<path d="M7 0C5.10037 0 4.8615 0.00875 4.11512 0.042C3.36875 0.077 2.86037 0.19425 2.415 0.3675C1.94761 0.542785 1.52437 0.818474 1.17513 1.17513C0.818474 1.52437 0.542785 1.94761 0.3675 2.415C0.19425 2.8595 0.076125 3.36875 0.042 4.1125C0.00875 4.86062 0 5.09863 0 7.00088C0 8.90137 0.00875 9.13937 0.042 9.88575C0.077 10.6313 0.19425 11.1396 0.3675 11.585C0.546875 12.0452 0.78575 12.4355 1.17513 12.8249C1.56362 13.2142 1.95388 13.454 2.41412 13.6325C2.86037 13.8057 3.36788 13.9239 4.11338 13.958C4.86062 13.9912 5.09862 14 7 14C8.90137 14 9.1385 13.9912 9.88575 13.958C10.6304 13.923 11.1405 13.8057 11.5859 13.6325C12.0529 13.4571 12.4759 13.1814 12.8249 12.8249C13.2142 12.4355 13.4531 12.0452 13.6325 11.585C13.8049 11.1396 13.923 10.6313 13.958 9.88575C13.9912 9.13937 14 8.90137 14 7C14 5.09862 13.9912 4.86062 13.958 4.11338C13.923 3.36875 13.8049 2.8595 13.6325 2.415C13.4572 1.94761 13.1815 1.52437 12.8249 1.17513C12.4756 0.818474 12.0524 0.542785 11.585 0.3675C11.1388 0.19425 10.6295 0.076125 9.88487 0.042C9.13762 0.00875 8.9005 0 6.99825 0H7ZM6.37262 1.26175H7.00088C8.86987 1.26175 9.09125 1.26788 9.82887 1.302C10.5114 1.33263 10.8824 1.44725 11.1291 1.54262C11.4555 1.6695 11.6891 1.82175 11.9341 2.06675C12.1791 2.31175 12.3305 2.5445 12.4574 2.87175C12.5536 3.11762 12.6674 3.48863 12.698 4.17112C12.7321 4.90875 12.7391 5.13012 12.7391 6.99825C12.7391 8.86637 12.7321 9.08862 12.698 9.82625C12.6674 10.5087 12.5528 10.8789 12.4574 11.1256C12.3444 11.4292 12.1653 11.7038 11.9332 11.9297C11.6882 12.1747 11.4555 12.3261 11.1282 12.453C10.8832 12.5492 10.5122 12.663 9.82887 12.6945C9.09125 12.7277 8.86987 12.7356 7.00088 12.7356C5.13188 12.7356 4.90963 12.7277 4.172 12.6945C3.4895 12.663 3.11937 12.5492 2.87262 12.453C2.56885 12.3403 2.2939 12.1616 2.06762 11.9297C1.83511 11.7037 1.65579 11.4287 1.54262 11.1247C1.44725 10.8789 1.33263 10.5079 1.302 9.82537C1.26875 9.08775 1.26175 8.86637 1.26175 6.9965C1.26175 5.12662 1.26875 4.907 1.302 4.16937C1.3335 3.48687 1.44725 3.11587 1.5435 2.86912C1.67037 2.54275 1.82262 2.30912 2.06762 2.06412C2.31262 1.81912 2.54537 1.66775 2.87262 1.54087C3.11937 1.44462 3.4895 1.33087 4.172 1.29937C4.81775 1.26962 5.068 1.26087 6.37262 1.26V1.26175ZM10.7371 2.42375C10.6268 2.42375 10.5176 2.44548 10.4157 2.48769C10.3138 2.52991 10.2212 2.59178 10.1432 2.66978C10.0652 2.74778 10.0033 2.84038 9.96107 2.9423C9.91885 3.04421 9.89712 3.15344 9.89712 3.26375C9.89712 3.37406 9.91885 3.48329 9.96107 3.5852C10.0033 3.68712 10.0652 3.77972 10.1432 3.85772C10.2212 3.93572 10.3138 3.99759 10.4157 4.03981C10.5176 4.08202 10.6268 4.10375 10.7371 4.10375C10.9599 4.10375 11.1736 4.01525 11.3311 3.85772C11.4886 3.70019 11.5771 3.48653 11.5771 3.26375C11.5771 3.04097 11.4886 2.82731 11.3311 2.66978C11.1736 2.51225 10.9599 2.42375 10.7371 2.42375ZM7.00088 3.4055C6.52406 3.39806 6.05053 3.48555 5.60786 3.66287C5.16518 3.8402 4.7622 4.10381 4.42238 4.43837C4.08256 4.77293 3.81269 5.17175 3.62849 5.6116C3.44428 6.05146 3.34941 6.52357 3.34941 7.00044C3.34941 7.47731 3.44428 7.94942 3.62849 8.38927C3.81269 8.82913 4.08256 9.22795 4.42238 9.5625C4.7622 9.89706 5.16518 10.1607 5.60786 10.338C6.05053 10.5153 6.52406 10.6028 7.00088 10.5954C7.9446 10.5807 8.84469 10.1954 9.50686 9.52284C10.169 8.85026 10.5402 7.94428 10.5402 7.00044C10.5402 6.0566 10.169 5.15061 9.50686 4.47803C8.84469 3.80545 7.9446 3.42022 7.00088 3.4055ZM7.00088 4.66638C7.30733 4.66638 7.61079 4.72674 7.89391 4.84401C8.17704 4.96129 8.4343 5.13318 8.651 5.34988C8.86769 5.56657 9.03959 5.82383 9.15686 6.10696C9.27414 6.39009 9.3345 6.69354 9.3345 7C9.3345 7.30646 9.27414 7.60991 9.15686 7.89304C9.03959 8.17617 8.86769 8.43342 8.651 8.65012C8.4343 8.86682 8.17704 9.03871 7.89391 9.15599C7.61079 9.27326 7.30733 9.33362 7.00088 9.33362C6.38196 9.33362 5.78839 9.08776 5.35075 8.65012C4.91311 8.21248 4.66725 7.61892 4.66725 7C4.66725 6.38108 4.91311 5.78752 5.35075 5.34988C5.78839 4.91224 6.38196 4.66638 7.00088 4.66638Z" fill="currentColor"/>
 </svg>
diff --git a/src/assets/svg/location-pin.svg b/src/assets/svg/location-pin.svg
index 143251c..c8f3fa1 100644
--- a/src/assets/svg/location-pin.svg
+++ b/src/assets/svg/location-pin.svg
@@ -1,4 +1,4 @@
 <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.676208 5.3575C0.676208 8.63831 3.54632 11.3514 4.81671 12.3916C4.99852 12.5405 5.09052 12.6158 5.22616 12.654C5.33179 12.6837 5.48724 12.6837 5.59286 12.654C5.72876 12.6157 5.82011 12.5411 6.00261 12.3917C7.273 11.3515 10.143 8.63861 10.143 5.35781C10.143 4.11622 9.64429 2.92535 8.75661 2.04742C7.86892 1.16949 6.66504 0.67627 5.40967 0.67627C4.15429 0.67627 2.95028 1.16956 2.06259 2.04749C1.1749 2.92542 0.676208 4.11592 0.676208 5.3575Z" stroke="#3A4C61" stroke-width="1.3524" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.05721 4.73347C4.05721 5.48038 4.6627 6.08587 5.40961 6.08587C6.15652 6.08587 6.76201 5.48038 6.76201 4.73347C6.76201 3.98656 6.15652 3.38107 5.40961 3.38107C4.6627 3.38107 4.05721 3.98656 4.05721 4.73347Z" stroke="#3A4C61" stroke-width="1.3524" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.676208 5.3575C0.676208 8.63831 3.54632 11.3514 4.81671 12.3916C4.99852 12.5405 5.09052 12.6158 5.22616 12.654C5.33179 12.6837 5.48724 12.6837 5.59286 12.654C5.72876 12.6157 5.82011 12.5411 6.00261 12.3917C7.273 11.3515 10.143 8.63861 10.143 5.35781C10.143 4.11622 9.64429 2.92535 8.75661 2.04742C7.86892 1.16949 6.66504 0.67627 5.40967 0.67627C4.15429 0.67627 2.95028 1.16956 2.06259 2.04749C1.1749 2.92542 0.676208 4.11592 0.676208 5.3575Z" stroke="currentColor" stroke-width="1.3524" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.05721 4.73347C4.05721 5.48038 4.6627 6.08587 5.40961 6.08587C6.15652 6.08587 6.76201 5.48038 6.76201 4.73347C6.76201 3.98656 6.15652 3.38107 5.40961 3.38107C4.6627 3.38107 4.05721 3.98656 4.05721 4.73347Z" stroke="currentColor" stroke-width="1.3524" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/layout/BottomNav/index.tsx b/src/components/layout/BottomNav/index.tsx
index 6930ec2..0d13b8f 100644
--- a/src/components/layout/BottomNav/index.tsx
+++ b/src/components/layout/BottomNav/index.tsx
@@ -22,7 +22,11 @@ const BOTTOM_NAV_ITEMS = [
     to: '/home',
     label: '홈',
     floatingImageSrc: HomeResultImage,
-    matchesPath: (pathname) => pathname === '/home' || pathname === '/notifications',
+    matchesPath: (pathname) =>
+      pathname === '/home' ||
+      pathname === '/notifications' ||
+      pathname === '/council' ||
+      pathname.startsWith('/council/'),
   },
   { to: '/chats', label: '채팅방', Icon: ChatIcon },
   { to: '/mypage', label: '내정보', Icon: MyPageIcon },
diff --git a/src/components/layout/Header/components/BackTitleHeader.tsx b/src/components/layout/Header/components/BackTitleHeader.tsx
new file mode 100644
index 0000000..44263eb
--- /dev/null
+++ b/src/components/layout/Header/components/BackTitleHeader.tsx
@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode } from 'react';
+import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
+import { useSmartBack } from '@/utils/hooks/useSmartBack';
+import { cn } from '@/utils/ts/cn';
+
+interface BackTitleHeaderProps {
+  title: string;
+  onBack?: () => void;
+  rightSlot?: ReactNode;
+  reserveRightSlot?: boolean;
+  headerClassName?: string;
+  leftContentClassName?: string;
+  rightSlotContainerClassName?: string;
+  titleClassName?: string;
+  style?: CSSProperties;
+}
+
+function BackTitleHeader({
+  title,
+  onBack,
+  rightSlot,
+  reserveRightSlot = false,
+  headerClassName,
+  leftContentClassName,
+  rightSlotContainerClassName,
+  titleClassName,
+  style,
+}: BackTitleHeaderProps) {
+  const smartBack = useSmartBack();
+  const handleBack = onBack ?? smartBack;
+
+  return (
+    <header className={cn('fixed top-0 right-0 left-0 z-30 flex items-center bg-white', headerClassName)} style={style}>
+      <div className={cn('flex min-w-0 flex-1 items-center gap-1', leftContentClassName)}>
+        <button type="button" aria-label="뒤로가기" onClick={handleBack} className="shrink-0">
+          <ChevronLeftIcon />
+        </button>
+        <h1 className={cn('text-text-700 min-w-0 truncate leading-7 font-semibold', titleClassName)}>{title}</h1>
+      </div>
+
+      {rightSlot ? (
+        <div className={cn('shrink-0', rightSlotContainerClassName)}>{rightSlot}</div>
+      ) : reserveRightSlot ? (
+        <div className={cn('size-6 shrink-0', rightSlotContainerClassName)} aria-hidden="true" />
+      ) : null}
+    </header>
+  );
+}
+
+export default BackTitleHeader;
diff --git a/src/components/layout/Header/components/CouncilHeader.tsx b/src/components/layout/Header/components/CouncilHeader.tsx
deleted file mode 100644
index 5aa24d5..0000000
--- a/src/components/layout/Header/components/CouncilHeader.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
-import useChat from '@/pages/Chat/hooks/useChat';
-
-function ChatHeader() {
-  const navigate = useNavigate();
-  const { chatRoomId } = useParams();
-  const { chatRoomList } = useChat();
-
-  const chatRoom = chatRoomList.rooms.find((room) => room.roomId === Number(chatRoomId));
-
-  return (
-    <header className="fixed top-0 right-0 left-0 z-30 flex h-11 items-center justify-center bg-white px-4 py-2">
-      <button
-        type="button"
-        aria-label="뒤로가기"
-        onClick={() => navigate(-1)}
-        className="absolute top-1/2 left-4 -translate-y-1/2"
-      >
-        <ChevronLeftIcon />
-      </button>
-      <span className="text-lg">{chatRoom?.roomName ?? ''}</span>
-    </header>
-  );
-}
-
-export default ChatHeader;
diff --git a/src/components/layout/Header/components/PlainSubpageHeader.tsx b/src/components/layout/Header/components/PlainSubpageHeader.tsx
new file mode 100644
index 0000000..44952d2
--- /dev/null
+++ b/src/components/layout/Header/components/PlainSubpageHeader.tsx
@@ -0,0 +1,11 @@
+import BackTitleHeader from './BackTitleHeader';
+
+interface PlainSubpageHeaderProps {
+  title: string;
+}
+
+function PlainSubpageHeader({ title }: PlainSubpageHeaderProps) {
+  return <BackTitleHeader title={title} headerClassName="px-4 py-2" />;
+}
+
+export default PlainSubpageHeader;
diff --git a/src/components/layout/Header/components/SubpageHeader.tsx b/src/components/layout/Header/components/SubpageHeader.tsx
index f5860a3..bcd33ab 100644
--- a/src/components/layout/Header/components/SubpageHeader.tsx
+++ b/src/components/layout/Header/components/SubpageHeader.tsx
@@ -1,7 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
-import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
-import { useSmartBack } from '@/utils/hooks/useSmartBack';
 import { cn } from '@/utils/ts/cn';
+import BackTitleHeader from './BackTitleHeader';
 
 interface SubpageHeaderProps {
   title: string;
@@ -14,28 +13,19 @@ function SubpageHeader({
   rightSlot,
   shadowClassName = 'shadow-[0_0_20px_rgba(0,0,0,0.03)]',
 }: SubpageHeaderProps) {
-  const smartBack = useSmartBack();
   const headerStyle = {
     minHeight: 'var(--subpage-header-height)',
   } as CSSProperties;
 
   return (
-    <header
-      className={cn(
-        'fixed top-0 right-0 left-0 z-30 flex items-center justify-between rounded-b-3xl bg-white px-4 py-3',
-        shadowClassName
-      )}
+    <BackTitleHeader
+      title={title}
+      rightSlot={rightSlot}
+      reserveRightSlot
+      headerClassName={cn('justify-between rounded-b-3xl px-4 py-3', shadowClassName)}
+      titleClassName="text-sub1 text-indigo-700"
       style={headerStyle}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-1">
-        <button type="button" aria-label="뒤로가기" onClick={smartBack} className="shrink-0">
-          <ChevronLeftIcon />
-        </button>
-        <h1 className="text-sub1 truncate text-indigo-700">{title}</h1>
-      </div>
-
-      {rightSlot ? <div className="shrink-0">{rightSlot}</div> : <div className="size-6 shrink-0" aria-hidden="true" />}
-    </header>
+    />
   );
 }
 
diff --git a/src/components/layout/Header/headerConfig.ts b/src/components/layout/Header/headerConfig.ts
index 6b76f71..ff865d9 100644
--- a/src/components/layout/Header/headerConfig.ts
+++ b/src/components/layout/Header/headerConfig.ts
@@ -9,6 +9,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
     type: 'notification',
     match: (pathname) => pathname === '/notifications',
   },
+  {
+    type: 'subpage',
+    match: (pathname) => /^\/council\/notice\/\d+$/.test(pathname),
+  },
   {
     type: 'default',
     match: (pathname) => /^\/clubs\/\d+$/.test(pathname),
@@ -19,16 +23,12 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
   },
   {
     type: 'info',
-    match: (pathname) => pathname === '/home' || pathname === '/timer',
+    match: (pathname) => pathname === '/home' || pathname === '/timer' || pathname === '/council',
   },
   {
     type: 'chat',
     match: (pathname) => /^\/chats\/\d+$/.test(pathname),
   },
-  {
-    type: 'council',
-    match: (pathname) => pathname === '/council',
-  },
   {
     type: 'normal',
     match: (pathname) => pathname === '/signup/finish' || /^\/clubs\/\d+\/complete$/.test(pathname),
diff --git a/src/components/layout/Header/index.tsx b/src/components/layout/Header/index.tsx
index 919fadd..7a4b81b 100644
--- a/src/components/layout/Header/index.tsx
+++ b/src/components/layout/Header/index.tsx
@@ -3,6 +3,7 @@ import ChatHeader from './components/ChatHeader';
 import DefaultHeader from './components/DefaultHeader';
 import InfoHeader from './components/InfoHeader';
 import ManagerHeader from './components/ManagerHeader';
+import PlainSubpageHeader from './components/PlainSubpageHeader';
 import ProfileHeader from './components/ProfileHeader';
 import ScheduleHeader from './components/ScheduleHeader';
 import SubpageHeader from './components/SubpageHeader';
@@ -20,6 +21,7 @@ function Header() {
     chat: () => <ChatHeader />,
     none: () => null,
     notification: ({ title }) => <SubpageHeader title={title} />,
+    subpage: ({ title }) => <PlainSubpageHeader title={title} />,
     schedule: () => <ScheduleHeader />,
     normal: ({ title }) => <DefaultHeader title={title} showBackButton={false} />,
     full: ({ title }) => <DefaultHeader title={title} showNotificationBell={true} />,
diff --git a/src/components/layout/Header/routeTitles.ts b/src/components/layout/Header/routeTitles.ts
index 1772499..5f149fb 100644
--- a/src/components/layout/Header/routeTitles.ts
+++ b/src/components/layout/Header/routeTitles.ts
@@ -52,6 +52,10 @@ export const ROUTE_TITLES: RouteTitle[] = [
     match: (pathname) => pathname === '/council',
     title: '총동아리연합회',
   },
+  {
+    match: (pathname) => /^\/council\/notice\/\d+$/.test(pathname),
+    title: '공지사항',
+  },
   {
     match: (pathname) => pathname === '/notifications',
     title: '알림',
diff --git a/src/components/layout/Header/types.ts b/src/components/layout/Header/types.ts
index 8f8cb9f..e4b07eb 100644
--- a/src/components/layout/Header/types.ts
+++ b/src/components/layout/Header/types.ts
@@ -6,6 +6,7 @@ export type HeaderType =
   | 'chat'
   | 'none'
   | 'notification'
+  | 'subpage'
   | 'default'
   | 'normal'
   | 'full'
diff --git a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
index 39e8de5..8243e4e 100644
--- a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
+++ b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import type { ComponentType, ReactNode, SVGProps } from 'react';
 import type { CouncilResponse } from '@/apis/council/entity';
 import ClockIcon from '@/assets/svg/clock.svg';
 import InstagramIcon from '@/assets/svg/instagram.svg';
@@ -10,51 +10,58 @@ interface CouncilIntroProps {
 }
 
 function CouncilIntro({ councilDetail }: CouncilIntroProps) {
+  const cardClassName = 'rounded-2xl p-4 shadow-[0_0_20px_rgba(0,0,0,0.03)]';
+  const contactItemClassName = 'text-text-800 text-[13px] leading-[1.6] font-semibold';
+  const contactItems: {
+    content: ReactNode;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    key: string;
+  }[] = [
+    {
+      content: councilDetail.location,
+      icon: LocationPinIcon,
+      key: 'location',
+    },
+    {
+      content: councilDetail.operatingHour,
+      icon: ClockIcon,
+      key: 'operatingHour',
+    },
+    {
+      content: (
+        <a
+          href={`https://instagram.com/${councilDetail.instagramUserName}`}
+          target="_blank"
+          rel="noreferrer"
+          className={`${contactItemClassName} underline`}
+        >
+          @{councilDetail.instagramUserName}
+        </a>
+      ),
+      icon: InstagramIcon,
+      key: 'instagram',
+    },
+  ];
+
   return (
-    <div className="mt-31.5 flex flex-col gap-2 p-3">
-      <Card>
-        <div className="mt-1.5 text-xs leading-3.5 whitespace-pre-line text-indigo-300">
+    <div className="flex flex-col gap-2">
+      <Card className={cardClassName}>
+        <div className="text-xs leading-4 whitespace-pre-line text-indigo-300">
           {councilDetail.introduce.replace(/\\n/g, '\n')}
         </div>
       </Card>
 
-      <Card>
-        <div className="text-sm leading-4 font-bold text-indigo-700">위치 및 연락처</div>
+      <Card className={cardClassName}>
+        <div className="text-text-700 leading-[1.6] font-semibold">위치 및 연락처</div>
         <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-[#E8EBEF]">
-              <LocationPinIcon />
-            </div>
-            <div className="flex flex-col gap-1">
-              <div className="text-[10px] leading-3 font-medium text-indigo-300">동아리방 위치</div>
-              <div className="text-sm leading-3.5 font-semibold text-indigo-700">{councilDetail.location}</div>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-[#E8EBEF]">
-              <ClockIcon />
-            </div>
-            <div className="flex flex-col gap-1">
-              <div className="text-[10px] leading-3 font-medium text-indigo-300">운영 시간</div>
-              <div className="text-sm leading-3.5 font-semibold text-indigo-700">{councilDetail.operatingHour}</div>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-[#E8EBEF]">
-              <InstagramIcon />
-            </div>
-            <div className="flex flex-col gap-1">
-              <div className="text-[10px] leading-3 font-medium text-indigo-300">인스타그램</div>
-              <Link
-                to={`https://instagram.com/${councilDetail.instagramUserName}`}
-                className="text-sm leading-3.5 font-semibold text-indigo-700"
-              >
-                @{councilDetail.instagramUserName}
-              </Link>
+          {contactItems.map(({ content, icon: Icon, key }) => (
+            <div key={key} className="flex items-center gap-1">
+              <div className="flex size-8 items-center justify-center">
+                <Icon className="text-primary-500" />
+              </div>
+              {typeof content === 'string' ? <div className={contactItemClassName}>{content}</div> : content}
             </div>
-          </div>
+          ))}
         </div>
       </Card>
     </div>
diff --git a/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx b/src/pages/Council/CouncilDetail/components/CouncilNotice.tsx
index 034653f..7f01298 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 (
-      <div className="mt-31.5 flex flex-col items-center justify-center py-16">
-        <MegaphoneIcon className="mb-3 h-12 w-12 text-gray-300" />
-        <div className="text-sm text-gray-500">등록된 공지사항이 없어요</div>
-        <div className="mt-1 text-xs text-gray-400">새로운 공지사항이 등록되면 여기에 표시돼요</div>
+      <div className={`${noticeListCardClassName} px-5 py-16`}>
+        <div className="flex flex-col items-center justify-center">
+          <MegaphoneIcon className="mb-3 h-12 w-12 text-gray-300" />
+          <div className="text-sm text-gray-500">등록된 공지사항이 없어요</div>
+          <div className="mt-1 text-xs text-gray-400">새로운 공지사항이 등록되면 여기에 표시돼요</div>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="mt-31.5">
-      {allNotices.map((notice) => (
-        <Link
-          to={`notice/${notice.id}`}
-          key={notice.id}
-          className="bg-indigo-0 border-indigo-5 block border-b px-5 py-4"
-        >
-          <div className="flex items-center gap-1">
-            <div className="text-[13px] leading-[15px] font-semibold text-indigo-700">{notice.title}</div>
-            {!notice.isRead && <div className="h-1 w-1 rounded-full bg-[#ff4e4e]" />}
-          </div>
-          <div className="mt-2 text-xs leading-3.5 text-indigo-300">{notice.createdAt}</div>
-        </Link>
-      ))}
-      {hasNextPage && <div ref={observerRef} className="flex h-20 items-center justify-center" />}
-    </div>
+    <>
+      <div className={noticeListCardClassName}>
+        {allNotices.map((notice) => (
+          <Link to={`notice/${notice.id}`} key={notice.id} className="block bg-white px-5 py-4">
+            <div className="flex items-center gap-1">
+              <div className="text-text-700 min-w-0 text-[14px] leading-[1.6] font-semibold break-keep">
+                {notice.title}
+              </div>
+              {!notice.isRead && <div className="h-1 w-1 shrink-0 rounded-full bg-[#8ED0E6]" />}
+            </div>
+            <div className="mt-2 text-[12px] leading-[1.6] text-indigo-300">{notice.createdAt}</div>
+          </Link>
+        ))}
+      </div>
+      {hasNextPage && <div ref={observerRef} className="h-px" />}
+    </>
   );
 }
 
diff --git a/src/pages/Council/CouncilDetail/index.tsx b/src/pages/Council/CouncilDetail/index.tsx
index 9ce192f..db09b76 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,7 +13,7 @@ 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());
 
@@ -24,44 +25,54 @@ function CouncilDetail() {
     { key: 'intro', label: '소개' },
     { key: 'notice', label: '공지사항' },
   ];
+  const backgroundStyle = {
+    backgroundImage: `linear-gradient(180deg, ${councilInfo.personalColor} 0%, #f4f6f9 38%, #f4f6f9 100%)`,
+    top: 'calc(-1 * var(--subpage-header-height))',
+  } satisfies CSSProperties;
 
   return (
-    <>
-      <div
-        className="fixed right-0 left-0 shadow-[0_1px_2px_0_rgba(0,0,0,0.04)]"
-        style={{ backgroundColor: councilInfo.personalColor }}
-      >
-        <div className="flex items-center gap-4 p-4">
-          <img className="h-14 w-14 rounded-sm" src={councilInfo.imageUrl} alt={councilInfo.name} />
-          <div>
-            <div className="text-indigo-0 text-xl leading-5.5 font-bold">총동아리연합회</div>
-            <div className="text-indigo-0 mt-1 text-sm leading-4.5">{councilInfo.name}</div>
+    <div className="relative min-h-full">
+      <div aria-hidden="true" className="absolute inset-x-0 bottom-0" style={backgroundStyle} />
+
+      <div className="relative z-10">
+        <section className="px-4">
+          <div className="flex items-center gap-3 p-4">
+            <img className="size-15 rounded-sm object-cover" src={councilInfo.imageUrl} alt={councilInfo.name} />
+            <div className="flex flex-col gap-1">
+              <div className="leading-[1.6] font-semibold text-white">총동아리연합회</div>
+              <div className="text-sm leading-[1.6] text-white">{councilInfo.name}</div>
+            </div>
           </div>
-        </div>
-        <div className="flex items-center gap-3 bg-white px-3">
-          {tabs.map((tab) => (
-            <button
-              key={tab.key}
-              onClick={() => handleTabClick(tab.key)}
-              className={cn(
-                'relative h-[38px] px-3 py-1 text-sm leading-5 font-medium transition-colors',
-                currentTab === tab.key
-                  ? 'text-indigo-700 after:absolute after:bottom-0 after:left-0 after:h-[1.6px] after:w-full after:bg-indigo-300'
-                  : 'text-indigo-300'
-              )}
-            >
-              {tab.label}
-            </button>
-          ))}
+
+          <div className="grid grid-cols-2 items-center px-1">
+            {tabs.map((tab) => (
+              <button
+                type="button"
+                key={tab.key}
+                onClick={() => handleTabClick(tab.key)}
+                aria-pressed={currentTab === tab.key}
+                className={cn(
+                  'flex h-12 items-center justify-center px-3 text-[15px] leading-5 font-medium transition-colors',
+                  currentTab === tab.key ? 'text-primary-500' : 'text-text-600'
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </section>
+
+        <div className="px-4.5 pt-2">
+          <Activity mode={currentTab === 'intro' ? 'visible' : 'hidden'}>
+            <CouncilIntro councilDetail={councilInfo} />
+          </Activity>
+          <Activity mode={currentTab === 'notice' ? 'visible' : 'hidden'}>
+            <CouncilNotice />
+          </Activity>
+          <BottomOverlaySpacer gap={24} />
         </div>
       </div>
-      <Activity mode={currentTab === 'intro' ? 'visible' : 'hidden'}>
-        <CouncilIntro councilDetail={councilInfo} />
-      </Activity>
-      <Activity mode={currentTab === 'notice' ? 'visible' : 'hidden'}>
-        <CouncilNotice />
-      </Activity>
-    </>
+    </div>
   );
 }
 
diff --git a/src/pages/Council/CouncilNotice/index.tsx b/src/pages/Council/CouncilNotice/index.tsx
index ee64742..85d11af 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 (
-    <div className="flex h-full flex-col">
-      <div className="bg-indigo-0 border-indigo-5 border-b px-5 py-4">
+    <div className="flex min-h-full flex-col bg-white">
+      <div className="bg-indigo-0 border-indigo-5 border-y px-5 py-4">
         <div className="leading-5 font-semibold text-indigo-700">{councilNoticeDetail.title}</div>
         <div className="mt-2 text-xs leading-3.5 text-indigo-300">{councilNoticeDetail.updatedAt}</div>
       </div>
-      <div className="bg-indigo-0 flex-1 px-5 pt-4 pb-20 text-[13px] leading-4.5 whitespace-pre-line text-indigo-700">
+      <div className="bg-indigo-0 flex-1 px-5 pt-4 pb-6 text-[13px] leading-4.5 whitespace-pre-line text-indigo-700">
         {councilNoticeDetail.content.replace(/\\n/g, '\n')}
       </div>
+      <BottomOverlaySpacer className="bg-white" />
     </div>
   );
 }

From 4d799b97695d8c56cda67d38aea03fa51ac595d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 31 Mar 2026 13:06:01 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EC=B1=84=ED=8C=85=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=EC=97=AC=EB=B0=B1=EA=B3=BC=20=EC=99=B8=EB=B6=80=20?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EC=86=8D=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chat/index.tsx                                    | 2 +-
 src/pages/Council/CouncilDetail/components/CouncilIntro.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index 0109c56..cafb530 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -216,7 +216,7 @@ function ChatListPage() {
           </Fragment>
         );
       })}
-      <BottomOverlaySpacer />
+      <BottomOverlaySpacer gap={24} />
     </div>
   );
 }
diff --git a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
index 8243e4e..1c21fb3 100644
--- a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
+++ b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
@@ -32,7 +32,7 @@ function CouncilIntro({ councilDetail }: CouncilIntroProps) {
         <a
           href={`https://instagram.com/${councilDetail.instagramUserName}`}
           target="_blank"
-          rel="noreferrer"
+          rel="noopener noreferrer"
           className={`${contactItemClassName} underline`}
         >
           @{councilDetail.instagramUserName}

From 98c276b2d38331ce268dab71dfa230f5c145634c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 31 Mar 2026 13:19:59 +0900
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=EC=B4=9D=EB=8F=99=EC=95=84?=
 =?UTF-8?q?=EB=A6=AC=20=ED=97=A4=EB=8D=94=20=EC=84=A4=EC=A0=95=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/BottomNav/index.tsx                   | 6 +-----
 .../layout/Header/components/PlainSubpageHeader.tsx         | 2 +-
 src/components/layout/Header/components/SubpageHeader.tsx   | 2 +-
 src/components/layout/Header/index.tsx                      | 1 -
 src/components/layout/Header/types.ts                       | 1 -
 5 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/BottomNav/index.tsx b/src/components/layout/BottomNav/index.tsx
index 0d13b8f..cc09d0a 100644
--- a/src/components/layout/BottomNav/index.tsx
+++ b/src/components/layout/BottomNav/index.tsx
@@ -22,11 +22,7 @@ const BOTTOM_NAV_ITEMS = [
     to: '/home',
     label: '홈',
     floatingImageSrc: HomeResultImage,
-    matchesPath: (pathname) =>
-      pathname === '/home' ||
-      pathname === '/notifications' ||
-      pathname === '/council' ||
-      pathname.startsWith('/council/'),
+    matchesPath: (pathname) => pathname === '/home' || pathname === '/notifications' || pathname.startsWith('/council'),
   },
   { to: '/chats', label: '채팅방', Icon: ChatIcon },
   { to: '/mypage', label: '내정보', Icon: MyPageIcon },
diff --git a/src/components/layout/Header/components/PlainSubpageHeader.tsx b/src/components/layout/Header/components/PlainSubpageHeader.tsx
index 44952d2..26304b4 100644
--- a/src/components/layout/Header/components/PlainSubpageHeader.tsx
+++ b/src/components/layout/Header/components/PlainSubpageHeader.tsx
@@ -1,4 +1,4 @@
-import BackTitleHeader from './BackTitleHeader';
+import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
 
 interface PlainSubpageHeaderProps {
   title: string;
diff --git a/src/components/layout/Header/components/SubpageHeader.tsx b/src/components/layout/Header/components/SubpageHeader.tsx
index bcd33ab..b23a4fd 100644
--- a/src/components/layout/Header/components/SubpageHeader.tsx
+++ b/src/components/layout/Header/components/SubpageHeader.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
+import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
 import { cn } from '@/utils/ts/cn';
-import BackTitleHeader from './BackTitleHeader';
 
 interface SubpageHeaderProps {
   title: string;
diff --git a/src/components/layout/Header/index.tsx b/src/components/layout/Header/index.tsx
index 7a4b81b..e7a6024 100644
--- a/src/components/layout/Header/index.tsx
+++ b/src/components/layout/Header/index.tsx
@@ -26,7 +26,6 @@ function Header() {
     normal: ({ title }) => <DefaultHeader title={title} showBackButton={false} />,
     full: ({ title }) => <DefaultHeader title={title} showNotificationBell={true} />,
     signup: ({ title, onBack }) => <DefaultHeader title={title} onBack={onBack} />,
-    council: ({ title }) => <DefaultHeader title={title} />,
     default: ({ title }) => <DefaultHeader title={title} />,
     manager: ({ title }) => <ManagerHeader fallbackTitle={title} />,
   };
diff --git a/src/components/layout/Header/types.ts b/src/components/layout/Header/types.ts
index e4b07eb..056a034 100644
--- a/src/components/layout/Header/types.ts
+++ b/src/components/layout/Header/types.ts
@@ -12,7 +12,6 @@ export type HeaderType =
   | 'full'
   | 'signup'
   | 'schedule'
-  | 'council'
   | 'manager';
 
 export interface HeaderConfig {

From 85c561749e17f269444f4107397c25d512d8fc70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 31 Mar 2026 13:20:12 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EC=B4=9D=EB=8F=99=EC=95=84=EB=A6=AC?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=EC=A0=91=EA=B7=BC=EC=84=B1=EA=B3=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CouncilDetail/components/CouncilIntro.tsx  |  3 ++-
 src/pages/Council/CouncilDetail/index.tsx      | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
index 1c21fb3..b43e6bb 100644
--- a/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
+++ b/src/pages/Council/CouncilDetail/components/CouncilIntro.tsx
@@ -4,6 +4,7 @@ import ClockIcon from '@/assets/svg/clock.svg';
 import InstagramIcon from '@/assets/svg/instagram.svg';
 import LocationPinIcon from '@/assets/svg/location-pin.svg';
 import Card from '@/components/common/Card';
+import { cn } from '@/utils/ts/cn';
 
 interface CouncilIntroProps {
   councilDetail: CouncilResponse;
@@ -33,7 +34,7 @@ function CouncilIntro({ councilDetail }: CouncilIntroProps) {
           href={`https://instagram.com/${councilDetail.instagramUserName}`}
           target="_blank"
           rel="noopener noreferrer"
-          className={`${contactItemClassName} underline`}
+          className={cn(contactItemClassName, 'underline')}
         >
           @{councilDetail.instagramUserName}
         </a>
diff --git a/src/pages/Council/CouncilDetail/index.tsx b/src/pages/Council/CouncilDetail/index.tsx
index db09b76..b7fa49b 100644
--- a/src/pages/Council/CouncilDetail/index.tsx
+++ b/src/pages/Council/CouncilDetail/index.tsx
@@ -20,13 +20,15 @@ function CouncilDetail() {
   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%, #f4f6f9 38%, #f4f6f9 100%)`,
+    backgroundImage: `linear-gradient(180deg, ${councilInfo.personalColor} 0%, var(--color-background) 38%, var(--color-background) 100%)`,
     top: 'calc(-1 * var(--subpage-header-height))',
   } satisfies CSSProperties;
 
@@ -44,13 +46,15 @@ function CouncilDetail() {
             </div>
           </div>
 
-          <div className="grid grid-cols-2 items-center px-1">
+          <div role="tablist" className="grid grid-cols-2 items-center px-1">
             {tabs.map((tab) => (
               <button
                 type="button"
                 key={tab.key}
                 onClick={() => handleTabClick(tab.key)}
-                aria-pressed={currentTab === tab.key}
+                id={getTabId(tab.key)}
+                role="tab"
+                aria-selected={currentTab === tab.key}
                 className={cn(
                   'flex h-12 items-center justify-center px-3 text-[15px] leading-5 font-medium transition-colors',
                   currentTab === tab.key ? 'text-primary-500' : 'text-text-600'
@@ -64,10 +68,14 @@ function CouncilDetail() {
 
         <div className="px-4.5 pt-2">
           <Activity mode={currentTab === 'intro' ? 'visible' : 'hidden'}>
-            <CouncilIntro councilDetail={councilInfo} />
+            <div role="tabpanel" id={getPanelId('intro')} aria-labelledby={getTabId('intro')}>
+              <CouncilIntro councilDetail={councilInfo} />
+            </div>
           </Activity>
           <Activity mode={currentTab === 'notice' ? 'visible' : 'hidden'}>
-            <CouncilNotice />
+            <div role="tabpanel" id={getPanelId('notice')} aria-labelledby={getTabId('notice')}>
+              <CouncilNotice />
+            </div>
           </Activity>
           <BottomOverlaySpacer gap={24} />
         </div>