diff --git a/src/App.tsx b/src/App.tsx
index 675b8b5..66e1a75 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,28 +1,45 @@
+import ErrorBoundary from '@components/common/errorBoundary';
+import Error from '@components/errorFallback';
 import ModalProvider from '@components/ui/modal/modal-provider';
+import { Spinner } from '@components/ui/spinner/indext';
+import { Toaster } from '@components/ui/toast/toaster';
+import { useResetError } from '@hooks/useResetErrorBoundary';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
-import Router from './Router';
+import Router from '@/Router';
+const DefaultLayout = lazy(() => import('@components/layouts/DefaultLayout'));
+
 
 const queryClient = new QueryClient({
    defaultOptions: {
       queries: {
          retry: 0,
          refetchOnWindowFocus: false,
-         throwOnError: true,
+         throwOnError: true,         
       },
    },
 });
 
-export default function App() {
+const App = () => {
+   const { handleErrorReset } = useResetError();
    return (
       <QueryClientProvider client={queryClient}>
          <ModalProvider>
+            <Toaster />
             <BrowserRouter>
-               <Router />
+               <ErrorBoundary onReset={handleErrorReset} Fallback={Error}>
+                  <Suspense fallback={<Spinner />}>
+                     <DefaultLayout>
+                        <Router />
+                     </DefaultLayout>
+                  </Suspense>
+               </ErrorBoundary>
             </BrowserRouter>
          </ModalProvider>
       </QueryClientProvider>
    );
-}
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/Router.tsx b/src/Router.tsx
index 8fde523..187b5f2 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,4 +1,4 @@
-import DefaultLayout from '@components/layouts/DefaultLayout';
+import MainSkeleton from '@components/ui/skeleton/main';
 import { ROUTES } from '@constants/route';
 import NotFound from '@pages/404';
 import BusinessBoard from '@pages/business';
@@ -29,44 +29,55 @@ import SignupVerify from '@pages/signup';
 import SignupInfo from '@pages/signup/info';
 import SignupSuccess from '@pages/signup/success';
 import SignupTerms from '@pages/signup/terms';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 
-
 export default function Router() {
    return (
-      <DefaultLayout>
-         <Routes>
-            <Route path={ROUTES.MAIN} element={<Main />} />
-            <Route path={ROUTES.LOGIN} element={<Login />} />
-            <Route path={ROUTES.RESET.INDEX} element={<ResetIdPw />} />
-            <Route path={ROUTES.RESET.ID} element={<ResetId />} />
-            <Route path={ROUTES.RESET.PW_VERIFY} element={<VerifyPw />} />
-            <Route path={ROUTES.RESET.PW} element={<ResetPw />} />
-            <Route path={ROUTES.MYPAGE.INDEX} element={<MyPage />} />
-            <Route path={ROUTES.MYPAGE.PASSWORD} element={<MyPagePassword />} />
-            <Route path={ROUTES.MYPAGE.EDIT} element={<MyPageEdit />} />
-            <Route path={ROUTES.MYPAGE.UPDATE} element={<MyPageUpdate />} />
-            <Route index path={ROUTES.SIGNUP.ROOT} element={<SignupVerify />} />
-            <Route path={ROUTES.SIGNUP.TERMS} element={<SignupTerms />} />
-            <Route path={ROUTES.SIGNUP.INFO} element={<SignupInfo />} />
-            <Route path={ROUTES.SIGNUP.SUCCESS} element={<SignupSuccess />} />
-            <Route path={ROUTES.COUNCIL.GREETING} element={<Greeting />} />
-            <Route path={ROUTES.COUNCIL.ORGANIZATION} element={<Organization />} />
-            <Route path={ROUTES.COUNCIL.LOCATION} element={<Location />} />
-            <Route path={ROUTES.COUNCIL.RECRUITMENT} element={<Recruitment />} />
-            <Route path={ROUTES.PETITION.ROOT} element={<PetitionBoard />} />
-            <Route path={ROUTES.PETITION.ID(':id')} element={<PetitionDetail />} />
-            <Route path={ROUTES.NOTICE.ROOT} element={<NoticeBoard />} />
-            <Route path={ROUTES.NOTICE.ID(':id')} element={<NoticeDetail />} />
-            <Route path={ROUTES.PETITION.POST} element={<PetitionForm />} />
-            <Route path={ROUTES.NOT_FOUND} element={<NotFound />} />
-            <Route path={ROUTES.NOTICE.POST} element={<NoticePost />} />
-            <Route path={ROUTES.CONFERENCE.ROOT} element={<ConferenceBoard />} />
-            <Route path={ROUTES.RULE.ROOT} element={<RuleBoard />} />
-            <Route path={ROUTES.BUSINESS.CATEGORY(':category')} element={<BusinessBoard />} />
-            <Route path={ROUTES.BUSINESS.DETAIL(':id', ':category')} element={<BusinessDetail />} />
-         </Routes>
-      </DefaultLayout>
+      <Routes>
+         <Route
+            path={ROUTES.MAIN}
+            element={
+               <Suspense fallback={<MainSkeleton />}>
+                  <Main />
+               </Suspense>
+            }
+         />
+         <Route path={ROUTES.LOGIN} element={<Login />} />
+         {/* 아이디 및 비밀번호 재설정 */}
+         <Route path={ROUTES.RESET.INDEX} element={<ResetIdPw />} />
+         <Route path={ROUTES.RESET.ID} element={<ResetId />} />
+         <Route path={ROUTES.RESET.PW_VERIFY} element={<VerifyPw />} />
+         <Route path={ROUTES.RESET.PW} element={<ResetPw />} />
+         {/* 마이페이지 설정 */}
+         <Route path={ROUTES.MYPAGE.INDEX} element={<MyPage />} />
+         <Route path={ROUTES.MYPAGE.PASSWORD} element={<MyPagePassword />} />
+         <Route path={ROUTES.MYPAGE.EDIT} element={<MyPageEdit />} />
+         <Route path={ROUTES.MYPAGE.UPDATE} element={<MyPageUpdate />} />
+         {/* 회원가입 */}
+         <Route index path={ROUTES.SIGNUP.ROOT} element={<SignupVerify />} />
+         <Route path={ROUTES.SIGNUP.TERMS} element={<SignupTerms />} />
+         <Route path={ROUTES.SIGNUP.INFO} element={<SignupInfo />} />
+         <Route path={ROUTES.SIGNUP.SUCCESS} element={<SignupSuccess />} />
+         {/* 총학생회 */}
+         <Route path={ROUTES.COUNCIL.GREETING} element={<Greeting />} />
+         <Route path={ROUTES.COUNCIL.ORGANIZATION} element={<Organization />} />
+         <Route path={ROUTES.COUNCIL.LOCATION} element={<Location />} />
+         <Route path={ROUTES.COUNCIL.RECRUITMENT} element={<Recruitment />} />
+         <Route path={ROUTES.CONFERENCE.ROOT} element={<ConferenceBoard />} />
+         <Route path={ROUTES.RULE.ROOT} element={<RuleBoard />} />
+         {/* 청원 */}
+         <Route path={ROUTES.PETITION.ROOT} element={<PetitionBoard />} />
+         <Route path={ROUTES.PETITION.ID(':id')} element={<PetitionDetail />} />
+         <Route path={ROUTES.PETITION.POST} element={<PetitionForm />} />
+         {/* 총학공지 */}
+         <Route path={ROUTES.NOTICE.ROOT} element={<NoticeBoard />} />
+         <Route path={ROUTES.NOTICE.ID(':id')} element={<NoticeDetail />} />
+         <Route path={ROUTES.NOTICE.POST} element={<NoticePost />} />
+         <Route path={ROUTES.NOT_FOUND} element={<NotFound />} />
+         {/* 제휴 */}
+         <Route path={ROUTES.BUSINESS.CATEGORY(':category')} element={<BusinessBoard />} />
+         <Route path={ROUTES.BUSINESS.DETAIL(':id', ':category')} element={<BusinessDetail />} />
+      </Routes>
    );
 }
diff --git a/src/components/business/index.tsx b/src/components/business/index.tsx
new file mode 100644
index 0000000..4258643
--- /dev/null
+++ b/src/components/business/index.tsx
@@ -0,0 +1,48 @@
+import Board from '@components/ui/board';
+import IntersectionBox from '@components/ui/box/intersectionBox';
+import ItemList from '@components/ui/item-list';
+import { Spinner } from '@components/ui/spinner/indext';
+import { ROUTES } from '@constants/route';
+import { CoalitionContentResponse, useGetCoalitionList } from '@hooks/api/coalition/useGetCoalitionList';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { CoalitionType } from '@/types/coalition';
+
+export default function BusinessList({categoryType}: {categoryType: string}) {
+   const navigate = useNavigate();
+
+   const {
+      data: coalition,
+      refetch,
+      fetchNextPage,
+      isFetchingNextPage,
+   } = useGetCoalitionList(categoryType as CoalitionType);
+   const intersectionRef = useInfiniteScroll(fetchNextPage);
+
+   useEffect(() => {
+      refetch();
+   }, [categoryType, refetch]);
+
+
+   const goToBusinessDetail = (item: CoalitionContentResponse) => {
+      navigate(ROUTES.BUSINESS.DETAIL(categoryType.toLowerCase() as string, item.id.toString()), {
+         state: item,
+      });
+   };
+
+   return (
+      <Board>
+         {coalition?.pages.map((page) =>
+            page.content.map((item) => (
+               <Board.Cell key={item.id} onClick={() => goToBusinessDetail(item)}>
+                  <ItemList content={item} />
+               </Board.Cell>
+            )),
+         )}
+         <IntersectionBox ref={intersectionRef} />
+         {isFetchingNextPage && <Spinner />}
+      </Board>
+   );
+}
\ No newline at end of file
diff --git a/src/components/common/carousel/index.tsx b/src/components/common/carousel/index.tsx
index e1fd730..efe8021 100644
--- a/src/components/common/carousel/index.tsx
+++ b/src/components/common/carousel/index.tsx
@@ -47,7 +47,7 @@ export default function Carousel({ data, className }: CarouselProps) {
          </div>
          <div className='absolute bottom-0 h-[30px] text-white flex gap-2'>
             {data.map((_, index) => (
-               <GoDotFill key={index} className={index === currentIndex ? '' : 'text-slate-300'} />
+               <GoDotFill key={index} className={index === currentIndex ? 'text-black' : 'text-slate-300'} />
             ))}
          </div>
          {data.map((item, index) => (
diff --git a/src/components/common/gnb/index.tsx b/src/components/common/gnb/index.tsx
index 4c21e50..7ec76d3 100644
--- a/src/components/common/gnb/index.tsx
+++ b/src/components/common/gnb/index.tsx
@@ -5,11 +5,10 @@ import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 interface Props extends React.ComponentProps<'header'> {
-   left?: JSX.Element | null;
-   center?: JSX.Element | null;
+   children: React.ReactNode;
 }
 
-export default function Gnb({ left, center, ...props }: Props) {
+const Gnb = ({ children, ...props }: Props) => {
    return (
       <header
          className={`w-[390px] flex mx-auto px-[22px] py-1.5 h-[50px] items-center ${
@@ -17,15 +16,12 @@ export default function Gnb({ left, center, ...props }: Props) {
          }`}
          {...props}
       >
-         <div className='w-full flex items-center'>
-            {left && left}
-            {center && center}
-         </div>
+         <div className='w-full flex items-center'>{children}</div>
       </header>
    );
-}
+};
 
-Gnb.Logo = function Logo() {
+const GnbLogo = () => {
    return (
       <Link to={ROUTES.MAIN}>
          <img src={logo} alt='단국대학교 로고' />
@@ -33,11 +29,21 @@ Gnb.Logo = function Logo() {
    );
 };
 
-Gnb.GoBack = function GoBack() {
+const GnbGoBack = ({ url }: { url?: string }) => {
    const navigate = useNavigate();
-   return <IconButton id='arrow_back' width={18} height={22} color='white' onClick={() => navigate(-1)} />;
+   return (
+      <IconButton
+         id='arrow_back'
+         width={18}
+         height={22}
+         color='white'
+         onClick={() => (url ? navigate(url) : navigate(-1))}
+      />
+   );
 };
 
-Gnb.Title = function Title({ children }: { children: string }) {
+const GnbTitle = ({ children }: { children: string }) => {
    return <h1 className='font-semibold mx-auto text-white text-xs'>{children}</h1>;
 };
+
+export { Gnb, GnbLogo, GnbGoBack, GnbTitle };
diff --git a/src/components/common/gnh/index.tsx b/src/components/common/gnh/index.tsx
index ea19bad..219c8aa 100644
--- a/src/components/common/gnh/index.tsx
+++ b/src/components/common/gnh/index.tsx
@@ -1,22 +1,17 @@
-import Selector, { TOption } from '@components/ui/selector';
 import React from 'react';
 
-interface GnhProps {
-   headingText: string;
-   subHeadingText?: string;
-   subHeadingStyle: string;
-   headingStyle: string;
-   dropDown?: TOption[];
-}
+const GnhTitle = ({ children, className }: React.ComponentProps<'h1'>) => {
+   return (
+      <h1 className={`${className ?? ''} text-2xl font-extrabold text-white`}>{children}</h1>
+   );
+};
+
+const GnhSubtitle = ({ children, className }: React.ComponentProps<'h2'>) => {
+   return (
+      <h2 className={`${className ?? ''} text-white`}>{children}</h2>
+   );
+};
+
+
+export { GnhTitle, GnhSubtitle };
 
-const Gnh = ({ headingText, subHeadingText, headingStyle, subHeadingStyle, dropDown }: GnhProps) => (
-   <React.Fragment>
-      {headingText && <h1 className={`${headingStyle} text-2xl font-extrabold text-white`}>{headingText}</h1>}
-      {dropDown !== undefined && dropDown.length > 0 && subHeadingText ? (
-         <Selector list={dropDown} subHeadingText={subHeadingText} />
-      ) : (
-         <h2 className={`${subHeadingStyle} text-white`}>{subHeadingText}</h2>
-      )}
-   </React.Fragment>
-);
-export default Gnh;
diff --git a/src/components/conference/index.tsx b/src/components/conference/index.tsx
new file mode 100644
index 0000000..83c9242
--- /dev/null
+++ b/src/components/conference/index.tsx
@@ -0,0 +1,33 @@
+import Board from '@components/ui/board';
+import IntersectionBox from '@components/ui/box/intersectionBox';
+import { Spinner } from '@components/ui/spinner/indext';
+import { Date } from '@components/ui/text/board';
+import { useGetConference } from '@hooks/api/conference/useGetConference';
+import { ConferenceContentResponse } from '@hooks/api/conference/useGetConference';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+import React from 'react';
+
+export default function ConferenceList() {
+   const { data: conference, fetchNextPage, isFetchingNextPage } = useGetConference();
+   const intersectionRef = useInfiniteScroll(fetchNextPage);
+
+   const openFile = (item: ConferenceContentResponse) => {
+      window.open(item.files[0].url);
+   };
+   return (
+      <Board>
+         {conference?.pages.map((page) =>
+            page.content.map((item) => (
+               <Board.Cell key={item.id} onClick={() => openFile(item)}>
+                  <div className='flex gap-2 p-3'>
+                     <p className='grow text-center truncate'>{item.title}</p>
+                     <Date date={item.createdAt} />
+                  </div>
+               </Board.Cell>
+            )),
+         )}
+         <IntersectionBox ref={intersectionRef} />
+         {isFetchingNextPage && <Spinner />}
+      </Board>
+   );
+}
\ No newline at end of file
diff --git a/src/components/layouts/ContentSection.tsx b/src/components/layouts/ContentSection.tsx
new file mode 100644
index 0000000..9a468e8
--- /dev/null
+++ b/src/components/layouts/ContentSection.tsx
@@ -0,0 +1,23 @@
+import Nav from '@components/common/nav';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+interface ContentSectionProps extends React.ComponentProps<'div'> {
+    showNav?: boolean;
+}
+
+const ContentSection = ({ children, className, showNav, ...props }: ContentSectionProps) => {
+   return (
+      <div className={`rounded-t-3xl pt-4 flex flex-col bg-white ${className ?? ''} 
+      ${showNav ? 'mb-20' : ''}`} {...props}>
+         {children}
+         {showNav && (
+            <AnimatePresence>
+               <Nav />
+            </AnimatePresence>
+         )}
+      </div>
+   );
+};
+
+export default ContentSection;
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
index c58777a..078f6c4 100644
--- a/src/components/layouts/DefaultLayout.tsx
+++ b/src/components/layouts/DefaultLayout.tsx
@@ -1,88 +1,18 @@
-import Gnb from '@components/common/gnb';
-import Gnh from '@components/common/gnh';
-import Nav from '@components/common/nav';
 import Menu from '@components/main/menu';
-import { Toaster } from '@components/ui/toast/toaster';
-import { bottomNavSize } from '@constants/nav';
-import { useDefaultModal } from '@hooks/useDefaultModal';
-import { useEnrollmentStore } from '@stores/enrollment-store';
-import { gnbState } from '@stores/gnb-store';
-import { gnhState } from '@stores/gnh-store';
 import { menuStore } from '@stores/menu-store';
-import { navStore } from '@stores/nav-store';
-import { isLoggedIn } from '@utils/token';
-import { AnimatePresence } from 'framer-motion';
-import React, { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
 
-import { WithReactChildren } from '@/types/default-interfaces';
-
-type DefaultLayoutProps = WithReactChildren & React.HTMLAttributes<HTMLDivElement>;
-
-export default function DefaultLayout({ children, ...props }: DefaultLayoutProps) {
-   const { title, backButton, isMain } = gnbState();
-   const { headingText, subHeadingText, headingStyle, subHeadingStyle, dropDown } = gnhState();
-   const { fullscreen, rounded, margin } = navStore();
+const DefaultLayout = ({ children, className, ...props }: React.ComponentProps<'div'>) => {
    const { menuOpen } = menuStore();
-   const defaultStyle = 'w-[390px] mx-auto bg-black';
-
-   const { enrollment } = useEnrollmentStore();
-   const { pathname } = useLocation();
-   const { modal } = useDefaultModal();
-
-   useEffect(() => {
-      if (pathname.indexOf('/mypage') === -1 && enrollment === false && isLoggedIn) {
-         setTimeout(() => {
-            modal({
-               content: '회원 정보 업데이트 후 이용 가능합니다.',
-               target: '/mypage/update',
-               disableCancle: true,
-            });
-         }, 500);
-      }
-   }, [pathname, enrollment]);
-
    return (
-      <div className={defaultStyle}>
+      <div className={`w-[390px] mx-auto bg-black ${className ?? ''}`} {...props}>
          {menuOpen ? (
             <Menu />
          ) : (
-            <>
-               <Gnb
-                  left={backButton ? <Gnb.GoBack /> : isMain ? <Gnb.Logo /> : null}
-                  center={title ? <Gnb.Title>{title}</Gnb.Title> : null}
-               />
-               {headingText && (
-                  <Gnh
-                     headingText={headingText}
-                     subHeadingText={subHeadingText}
-                     headingStyle={headingStyle}
-                     subHeadingStyle={subHeadingStyle}
-                     dropDown={dropDown}
-                  />
-               )}
-               <div
-                  className='w-[390px] mx-auto overflow-y-auto overflow-x-hidden'
-                  style={{ marginBottom: bottomNavSize, marginTop: margin }}
-                  {...props}
-               >
-                  <div
-                     className={`${rounded && 'rounded-t-3xl pt-4'} 
-                   flex flex-col bg-white`}
-                  >
-                     {children}
-                  </div>
-               </div>
-               <Toaster />
-               <AnimatePresence>
-                  {!fullscreen && (
-                     <>
-                        <Nav />
-                     </>
-                  )}
-               </AnimatePresence>
-            </>
+            children
          )}
       </div>
    );
-}
+};
+
+export default DefaultLayout;
diff --git a/src/components/layouts/HeaderSection.tsx b/src/components/layouts/HeaderSection.tsx
new file mode 100644
index 0000000..c453f9d
--- /dev/null
+++ b/src/components/layouts/HeaderSection.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HeaderSection = ({ children, className, ...props }: React.ComponentProps<'div'>) => {
+   return (
+      <div className={`${className ?? ''}`} {...props}>
+         {children}
+      </div>
+   );
+};
+
+export default HeaderSection;
\ No newline at end of file
diff --git a/src/components/layouts/MyPageLayout.tsx b/src/components/layouts/MyPageLayout.tsx
index 7853b5d..d420eea 100644
--- a/src/components/layouts/MyPageLayout.tsx
+++ b/src/components/layouts/MyPageLayout.tsx
@@ -3,11 +3,13 @@ import { useApi } from '@hooks/useApi';
 import { useEffectOnce } from '@hooks/useEffectOnce';
 import { useLayout } from '@hooks/useLayout';
 import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { Gnb, GnbGoBack } from '../common/gnb';
 
 import SvgIcon from '@/components/common/icon/SvgIcon';
 import { IMyInfo } from '@/types/mypage/edit';
 
-
 export default function MyPageLayout({
    children,
    getStudentId,
@@ -18,6 +20,8 @@ export default function MyPageLayout({
    const { setLayout } = useLayout();
    const [myInfo, setMyInfo] = React.useState<IMyInfo | null>(null);
    const { get } = useApi();
+   const { pathname } = useLocation();
+   const navigate = useNavigate();
 
    const fetchMyInfo = async () => {
       const data = await get<IMyInfo>(API_PATH.USER.ME, { authenticate: true });
@@ -25,7 +29,7 @@ export default function MyPageLayout({
       getStudentId && getStudentId(data.studentId);
    };
    useEffectOnce(() => {
-      fetchMyInfo();
+      localStorage.getItem('damda-atk') !== null ? fetchMyInfo() : navigate('/login');
       setLayout({
          title: '',
          backButton: true,
@@ -40,19 +44,24 @@ export default function MyPageLayout({
    });
 
    return (
-      <div className='h-[calc(100vh-110px)]'>
-         <div className='flex justify-between px-8 pt-4 pb-14 bg-black text-white'>
-            <div className='flex flex-col justify-evenly w-7/12'>
-               <strong className='text-2xl'>{myInfo?.nickname}</strong>
-               <p>
-                  {myInfo?.studentId} <br />
-                  {myInfo?.department} {myInfo?.major}
-               </p>
+      <>
+         <Gnb>
+            <GnbGoBack url={pathname === '/mypage' ? '/' : '/mypage'} />
+         </Gnb>
+         <div className='h-[calc(100vh-110px)] bg-white'>
+            <div className='flex justify-between px-8 pt-4 pb-14 text-white bg-black'>
+               <div className='flex flex-col justify-evenly w-7/12'>
+                  <strong className='text-2xl'>{myInfo?.nickname}</strong>
+                  <p>
+                     {myInfo?.studentId} <br />
+                     {myInfo?.department} {myInfo?.major}
+                  </p>
+               </div>
+               <ProfileImage gender={myInfo?.gender ?? '남자'} />
             </div>
-            <ProfileImage gender={myInfo?.gender ?? '남자'} />
+            {children}
          </div>
-         {children}
-      </div>
+      </>
    );
 }
 
diff --git a/src/components/layouts/index.ts b/src/components/layouts/index.ts
new file mode 100644
index 0000000..4fcc49a
--- /dev/null
+++ b/src/components/layouts/index.ts
@@ -0,0 +1,3 @@
+export { default as HeaderSection } from './HeaderSection';
+export { default as ContentSection } from './ContentSection';
+export { default as DefaultLayout } from './DefaultLayout';
diff --git a/src/components/login/form.tsx b/src/components/login/form.tsx
index 6af8c59..ad1cfe6 100644
--- a/src/components/login/form.tsx
+++ b/src/components/login/form.tsx
@@ -4,12 +4,13 @@ import { Input } from '@components/ui/input/index';
 import { Label } from '@components/ui/label';
 import { ROUTES } from '@constants/route';
 import { usePostLogin } from '@hooks/api/auth/usePostLogin';
+import { usePostOAuthLogin } from '@hooks/api/auth/usePostOAuthLogin';
+import { isOAuthFlow } from '@utils/oAuth';
 import React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
-import { usePostOAuthLogin } from '@/hooks/api/auth/usePostOAuthLogin';
+import { useAlert } from '@/hooks/useAlert';
 import { IdPassword } from '@/types/default-interfaces';
-import { isOAuthFlow } from '@/utils/oAuth';
 
 export default function LoginForm() {
    const initLoginInfo: IdPassword = {
@@ -21,14 +22,18 @@ export default function LoginForm() {
    const { mutate: login } = usePostLogin();
    const { mutate: oAuthLogin } = usePostOAuthLogin();
    const [searchParams] = useSearchParams();
-
+   const { alert } = useAlert();
    const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      if (isOAuthFlow(searchParams)) {
-         oAuthLogin(loginInfo);
+      if (loginInfo.studentId.length > 0 && loginInfo.password.length > 0) {
+         if (isOAuthFlow(searchParams)) {
+            oAuthLogin(loginInfo);
+         }
+         login(loginInfo);
+      } else {
+         alert('모두 입력해주세요');
       }
-      login(loginInfo);
    };
 
    return (
diff --git a/src/components/main/post.tsx b/src/components/main/post.tsx
index 9a9f263..8cf7027 100644
--- a/src/components/main/post.tsx
+++ b/src/components/main/post.tsx
@@ -1,13 +1,15 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { GnhSubtitle, GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import PostBox from '@components/ui/box/PostBox';
 import FloatingButton from '@components/ui/button/FloatingButton';
 import { Textarea } from '@components/ui/textarea';
-import { HEADING_STYLE, HEADING_TEXT } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
+import { HEADING_TEXT } from '@constants/heading';
 import { ImageProps } from '@hooks/useImageUpload';
-import { useLayout } from '@hooks/useLayout';
 import React, { ReactNode } from 'react';
 import { FaCamera } from 'react-icons/fa';
 
+
 export interface PostFormInfo {
    title: string;
    body: string;
@@ -35,80 +37,80 @@ export default function Post({
    deleteImage,
    postType,
 }: PostProps) {
-   const { setLayout } = useLayout();
 
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.PETITION.HEAD,
-         headingStyle: `${HEADING_STYLE.COUNCIL.HEAD} mb-[30px]`,
-         rounded: true,
-      });
-   });
    //TODO) 이미지 리스트 컴포넌트로 분리
    //TODO) Input 도 onChange를 useUploadForm 에 작성
 
    return (
-      <form onSubmit={handleSubmit} encType='multipart/form-data' className='flex-col'>
-         <Box>
-            <p>{`${postType} 제목`}</p>
-            <input
-               type='text'
-               id='title'
-               name='title'
-               value={formInfo.title}
-               placeholder='제목을 입력해주세요'
-               className='w-full focus:outline-0'
-               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setFormInfo((prev) => {
-                     return { ...prev, title: e.target.value };
-                  });
-               }}
-            />
-         </Box>
-         <Box>
-            <p>{`${postType} 내용`}</p>
-            <Textarea
-               value={formInfo.body && formInfo.body}
-               placeholder={`${postType} 내용을 입력해 주세요.`}
-               onChange={handleUpdate}
-            />
-         </Box>
-         <Box>
-            <label htmlFor='input-file' className='flex items-center gap-3'>
-               <input
-                  type='file'
-                  id='input-file'
-                  multiple
-                  onChange={(e) => addImage({ e, formInfo, setFormInfo })}
-                  className='hidden'
-                  accept='image/png, image/jpeg'
-               />
-               <FaCamera />
-               <span>이미지를 업로드하세요.</span>
-            </label>
-            {imageList.map((image, id) => (
-               <div key={id} className='flex gap-3'>
-                  <img src={image.imageUrl} alt={`Image-${id}`} className='w-10 h-10' />
-                  <span className='truncate'>{image.imageName}</span>
-                  <button
-                     type='button'
-                     onClick={() => {
-                        deleteImage({ id, setFormInfo });
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <HeaderSection>
+            <GnhTitle>{HEADING_TEXT.PETITION.HEAD}</GnhTitle>
+            <GnhSubtitle>{HEADING_TEXT.COUNCIL.HEAD}</GnhSubtitle>
+         </HeaderSection>
+         <ContentSection>
+            <form onSubmit={handleSubmit} encType='multipart/form-data' className='flex-col gap-4'>
+               <Box>
+                  <p>{`${postType} 제목`}</p>
+                  <input
+                     type='text'
+                     id='title'
+                     name='title'
+                     value={formInfo.title}
+                     placeholder='제목을 입력해주세요'
+                     className='w-full focus:outline-0'
+                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setFormInfo((prev) => {
+                           return { ...prev, title: e.target.value };
+                        });
                      }}
-                  >
+                  />
+               </Box>
+               <Box>
+                  <p>{`${postType} 내용`}</p>
+                  <Textarea
+                     className="h-14"
+                     value={formInfo.body && formInfo.body}
+                     placeholder={`${postType} 내용을 입력해 주세요.`}
+                     onChange={handleUpdate}
+                  />
+               </Box>
+               <Box>
+                  <label htmlFor='input-file' className='flex items-center gap-3'>
+                     <input
+                        type='file'
+                        id='input-file'
+                        multiple
+                        onChange={(e) => addImage({ e, formInfo, setFormInfo })}
+                        className='hidden'
+                        accept='image/png, image/jpeg'
+                     />
+                     <FaCamera />
+                     <span>이미지를 업로드하세요.</span>
+                  </label>
+                  {imageList.map((image, id) => (
+                     <div key={id} className='flex gap-3'>
+                        <img src={image.imageUrl} alt={`Image-${id}`} className='w-10 h-10' />
+                        <span className='truncate'>{image.imageName}</span>
+                        <button
+                           type='button'
+                           onClick={() => {
+                              deleteImage({ id, setFormInfo });
+                           }}
+                        >
                      x
-                  </button>
-               </div>
-            ))}
-         </Box>
-         <FloatingButton event={() => {}}>
-            <p className='text-white'>Upload</p>
-         </FloatingButton>
-      </form>
+                        </button>
+                     </div>
+                  ))}
+               </Box>
+               <FloatingButton event={() => {}}>
+                  <p className='text-white'>Upload</p>
+               </FloatingButton>
+            </form>
+         </ContentSection>
+      </React.Fragment>
    );
 }
 
diff --git a/src/components/notice/[id].tsx b/src/components/notice/[id].tsx
new file mode 100644
index 0000000..6590cb9
--- /dev/null
+++ b/src/components/notice/[id].tsx
@@ -0,0 +1,22 @@
+import Carousel from '@components/common/carousel';
+import FileBox from '@components/ui/box/FileBox';
+import PostBox from '@components/ui/box/PostBox';
+import Collapse from '@components/ui/collapse';
+import { useGetNoticeItem } from '@hooks/api/notice/useGetNoticeItem';
+import React from 'react';
+
+export default function NoticeItem({ noticeId }: { noticeId: string }) {
+   const { data: notice } = useGetNoticeItem(noticeId as string);
+   return (
+      <React.Fragment>
+         <PostBox>
+            <Collapse status={true}>
+               {notice?.images.length > 0 && <Carousel data={notice?.images} />}
+            </Collapse>
+            <p>{notice.title}</p>
+            <p>{notice.body}</p>
+         </PostBox>
+         {notice.files.length > 0 && <FileBox files={notice.files} />}
+      </React.Fragment>
+   );
+}
diff --git a/src/components/notice/index.tsx b/src/components/notice/index.tsx
new file mode 100644
index 0000000..e2cc2cc
--- /dev/null
+++ b/src/components/notice/index.tsx
@@ -0,0 +1,38 @@
+import Board from '@components/ui/board';
+import IntersectionBox from '@components/ui/box/intersectionBox';
+import ItemList from '@components/ui/item-list';
+import { Spinner } from '@components/ui/spinner/indext';
+import { ROUTES } from '@constants/route';
+import { useGetNoticeList } from '@hooks/api/notice/useGetNoticeList';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+import React, { Suspense } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+
+export default function NoticeList() {
+
+   const navigate = useNavigate();
+   const { data: notice, fetchNextPage, isFetchingNextPage } = useGetNoticeList();
+   const intersectionRef = useInfiniteScroll(fetchNextPage);
+
+   const goToNoticeDetail = (itemId: number) => {
+      const noticeId = itemId.toString();
+      navigate(ROUTES.NOTICE.ID(noticeId));
+   };
+
+   return (
+      <Board>
+         {notice?.pages.map((page) =>
+            page.content.map((item) => (
+               <Board.Cell key={item.id} onClick={() => goToNoticeDetail(item.id)}>
+                  <Suspense fallback={<div>loading...</div>}>
+                     <ItemList content={item} />
+                  </Suspense>
+               </Board.Cell>
+            )),
+         )}
+         <IntersectionBox ref={intersectionRef} />
+         {isFetchingNextPage && <Spinner />}
+      </Board>
+   );
+}
\ No newline at end of file
diff --git a/src/components/petition/index.tsx b/src/components/petition/index.tsx
new file mode 100644
index 0000000..a22990c
--- /dev/null
+++ b/src/components/petition/index.tsx
@@ -0,0 +1,42 @@
+import Board from '@components/ui/board';
+import IntersectionBox from '@components/ui/box/intersectionBox';
+import { Spinner } from '@components/ui/spinner/indext';
+import { ROUTES } from '@constants/route';
+import { useGetPetition } from '@hooks/api/petition/useGetPetiition';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+import { getDaysBetween, getPetitionStatus } from '@pages/petition';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+
+
+export default function PetitionList() {
+   const navigate = useNavigate();
+   const { data: petition, fetchNextPage, isFetchingNextPage } = useGetPetition();
+   const intersectionRef = useInfiniteScroll(fetchNextPage);
+
+   const goToPetitionDetail = (itemId: number) => {
+      navigate(ROUTES.PETITION.ID(itemId.toString()));
+   };
+   return (
+      <Board>
+         {petition?.pages.map((page) =>
+            page.content.map((item) => (
+               <Board.Cell key={item.id} onClick={() => goToPetitionDetail(item.id)}>
+                  <div className=' py-3 flex justify-between leading-9 px-6 gap-3 whitespace-nowrap'>
+                     <p>{getPetitionStatus(item.status)}</p>
+                     <p className='text-ellipsis overflow-hidden'>{item.title}</p>
+                     <p>
+                        {getDaysBetween(item.expiresAt!) > 0
+                           ? `D-${getDaysBetween(item.expiresAt!)}`
+                           : '만료'}
+                     </p>
+                  </div>
+               </Board.Cell>
+            )),
+         )}
+         <IntersectionBox ref={intersectionRef} />
+         {isFetchingNextPage && <Spinner />}
+      </Board>
+   );
+}
\ No newline at end of file
diff --git a/src/components/reset/code.tsx b/src/components/reset/code.tsx
index aac4bbc..2742177 100644
--- a/src/components/reset/code.tsx
+++ b/src/components/reset/code.tsx
@@ -27,11 +27,17 @@ export default function PwVerifyForm() {
       onSuccess: (res) => {
          setToken(res.token);
       },
+      onError: () => {
+         alert('가입되지 않은 휴대폰번호입니다.');
+      },
    });
-   const { mutate: confirmCode } = usePostPhoneConfirmCode({
+   const { mutate: confirmCode, isSuccess: codeSuccess } = usePostPhoneConfirmCode({
       onSuccess: () => {
          navigate(`${ROUTES.RESET.PW}?${searchParams.toString()}`, { state: token });
       },
+      onError: () => {
+         alert('인증번호가 알맞지 않습니다.');
+      },
    });
 
    const handlePhoneVerify = () => {
@@ -54,6 +60,14 @@ export default function PwVerifyForm() {
       }
    };
 
+   React.useEffect(() => {
+      if (codeSuccess) {
+         navigate(ROUTES.RESET.PW, {
+            state: token,
+         });
+      }
+   }, [codeSuccess, navigate, token]);
+
    return (
       <form className='flex flex-col mx-auto w-[311px]'>
          <div className='flex items-center mb-4'>
diff --git a/src/components/reset/id.tsx b/src/components/reset/id.tsx
index cd28a97..0651fe1 100644
--- a/src/components/reset/id.tsx
+++ b/src/components/reset/id.tsx
@@ -19,7 +19,7 @@ export default function IdForm() {
       setPhoneNumber(e.target.value);
    };
 
-   const { mutate } = usePostFindId({
+   const { mutate: findId } = usePostFindId({
       onSuccess: () => {
          alert('휴대전화로 아이디가 전송되었습니다.');
          redirectLogin();
@@ -31,7 +31,7 @@ export default function IdForm() {
       if (phoneNumber.length === 11) {
          const formattedPhoneNumber = formatphoneNumber(phoneNumber);
          //TODO) 타입 수정
-         mutate({ phoneNumber: formattedPhoneNumber });
+         findId({ phoneNumber: formattedPhoneNumber });
       } else {
          alert('올바른 휴대폰번호를 입력해주세요.');
       }
diff --git a/src/components/reset/pw.tsx b/src/components/reset/pw.tsx
index 9dcf10a..70fdd67 100644
--- a/src/components/reset/pw.tsx
+++ b/src/components/reset/pw.tsx
@@ -16,7 +16,7 @@ export default function ResetPwForm({ token }: { token: string }) {
    const { alert } = useAlert();
    const [searchParams] = useSearchParams();
 
-   const { mutate, isSuccess: resetSuccess } = usePostResetPw();
+   const { mutate , isSuccess: resetSuccess } = usePostResetPw();
 
    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
       const { name, value } = e.target;
diff --git a/src/components/rule/index.tsx b/src/components/rule/index.tsx
new file mode 100644
index 0000000..3eabb66
--- /dev/null
+++ b/src/components/rule/index.tsx
@@ -0,0 +1,35 @@
+import Board from '@components/ui/board';
+import IntersectionBox from '@components/ui/box/intersectionBox';
+import { Spinner } from '@components/ui/spinner/indext';
+import { Date } from '@components/ui/text/board';
+import { useGetRule } from '@hooks/api/rule/useGetRule';
+import { RuleContentResponse } from '@hooks/api/rule/useGetRule';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+import React from 'react';
+
+export default function RuleList() {
+   const { data: rule, fetchNextPage, isFetchingNextPage } = useGetRule();
+
+   const intersectionRef = useInfiniteScroll(fetchNextPage);
+
+   const openFile = (item: RuleContentResponse) => {
+      window.open(item.files[0].url);
+   };
+
+   return (
+      <Board>
+         {rule?.pages.map((page) =>
+            page.content.map((item) => (
+               <Board.Cell key={item.id} onClick={() => openFile(item)}>
+                  <div className='flex gap-2 p-3'>
+                     <p className='grow text-center truncate'>{item.title}</p>
+                     <Date date={item.createdAt} />
+                  </div>
+               </Board.Cell>
+            )),
+         )}
+         <IntersectionBox ref={intersectionRef} />
+         {isFetchingNextPage && <Spinner />}
+      </Board>
+   );
+}
\ No newline at end of file
diff --git a/src/components/signup/info.tsx b/src/components/signup/info.tsx
index a7b282f..e04322b 100644
--- a/src/components/signup/info.tsx
+++ b/src/components/signup/info.tsx
@@ -11,8 +11,6 @@ import React, { ChangeEvent, useEffect } from 'react';
 
 import HTTPError from '@/types/statusError';
 
-
-
 export default function InfoForm({ signupToken }: { signupToken: string }) {
    const [signupInfo, setSignupInfo] = React.useState<UserRegistrationInfo>({
       nickname: '',
@@ -37,6 +35,7 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
    const [passwordMatch, setPasswordMatch] = React.useState<boolean>(false);
    const [phoneNumber, setphoneNumber] = React.useState<string>('');
    const [code, setCode] = React.useState<string>('');
+   const [isPasswordValid, setIsPasswordValid] = React.useState(false);
    const [isNicknameValid, setIsNicknameValid] = React.useState<boolean>(false);
    const [isFormValid, setIsFormValid] = React.useState<boolean>(false);
 
@@ -65,6 +64,7 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
             passwordMatch &&
             signupInfo.nickname !== '' &&
             signupInfo.password !== '' &&
+            isPasswordValid &&
             isNicknameValid,
       );
    }, [
@@ -75,6 +75,7 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
       signupInfo.nickname,
       signupInfo.password,
       isNicknameValid,
+      isPasswordValid,
    ]);
 
    useEffect(() => {
@@ -85,9 +86,21 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
       );
    }, [signupInfo.nickname]);
 
+   useEffect(() => {
+      setIsPasswordValid(
+         signupInfo.password.length > 7 &&
+            signupInfo.password.length < 17 &&
+            /^(?=.*[a-zA-Z])(?=.*[0-9]).{7,17}$/.test(signupInfo.password),
+      );
+   }, [signupInfo.password]);
+
    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
       const { name, value } = e.target;
       switch (name) {
+         case 'password':
+            setSignupInfo((prev) => ({ ...prev, password: value }));
+            setPasswordMatch(signupInfo.password === value);
+            break;
          case 'passwordConfirm':
             setPasswordConfirm(value);
             setPasswordMatch(signupInfo.password === value);
@@ -135,6 +148,9 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
                size='md'
                className='rounded-[10px]'
             />
+            {!isPasswordValid && (
+               <Message>비밀번호는 영문과 숫자 1자이상을 포함하는 8~16자리여야합니다.</Message>
+            )}
             {passwordMismatch && <Message>비밀번호가 일치하지 않습니다.</Message>}
          </section>
          <section className='mb-6'>
@@ -204,4 +220,4 @@ export default function InfoForm({ signupToken }: { signupToken: string }) {
          </Button>
       </form>
    );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/box/FileBox.tsx b/src/components/ui/box/FileBox.tsx
new file mode 100644
index 0000000..a7abfe0
--- /dev/null
+++ b/src/components/ui/box/FileBox.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PiPaperclipFill } from 'react-icons/pi';
+
+import { ContentFileResponse } from '@/types/page';
+
+interface FileBoxProps {
+   files: ContentFileResponse[];
+   className?: string;
+   children?: React.ReactNode;
+}
+
+export default function FileBox({ files, className, children }: FileBoxProps) {
+   return (
+      <div
+         className={`text-sm px-4 py-5 bg-white rounded-lg shadow-[2px_2px_5px_2px_#00000010] leading-5 transition-opacity animate-fadeIn ${
+            className ?? ''
+         }`}
+      >
+         {files.map((file) => (
+            <a
+               className='flex items-center gap-2'
+               href={file.url}
+               target='_blank'
+               rel='noopener noreferrer'
+               key={file.id}
+            >
+               <PiPaperclipFill style={{ fontSize: '20px' }} />
+               <span className='overflow-hidden text-ellipsis truncate'>{file.originalName}</span>
+            </a>
+         ))}
+         {children}
+      </div>
+   );
+}
\ No newline at end of file
diff --git a/src/components/ui/box/PostBox.tsx b/src/components/ui/box/PostBox.tsx
index 9e43da5..5fa4df6 100644
--- a/src/components/ui/box/PostBox.tsx
+++ b/src/components/ui/box/PostBox.tsx
@@ -1,8 +1,8 @@
 import React, { ComponentProps } from 'react';
-import { PiPaperclipFill } from 'react-icons/pi';
+// import { PiPaperclipFill } from 'react-icons/pi';
 
 import { WithReactChildren } from '@/types/default-interfaces';
-import { ContentFileResponse } from '@/types/page';
+// import { ContentFileResponse } from '@/types/page';
 
 interface IPostBox {
    shadow?: boolean;
@@ -25,32 +25,32 @@ export default function PostBox({
    );
 }
 
-interface FileBoxProps {
-   files: ContentFileResponse[];
-   className?: string;
-   children?: React.ReactNode;
-}
+// interface FileBoxProps {
+//    files: ContentFileResponse[];
+//    className?: string;
+//    children?: React.ReactNode;
+// }
 
-export function FileBox({ files, className, children }: FileBoxProps) {
-   return (
-      <div
-         className={`text-sm px-4 py-5 bg-white rounded-lg shadow-[2px_2px_5px_2px_#00000010] leading-5 transition-opacity animate-fadeIn ${
-            className ?? ''
-         }`}
-      >
-         {files.map((file) => (
-            <a
-               className='flex items-center gap-2'
-               href={file.url}
-               target='_blank'
-               rel='noopener noreferrer'
-               key={file.id}
-            >
-               <PiPaperclipFill style={{ fontSize: '20px' }} />
-               <span className='overflow-hidden text-ellipsis truncate'>{file.originalName}</span>
-            </a>
-         ))}
-         {children}
-      </div>
-   );
-}
+// export default function FileBox({ files, className, children }: FileBoxProps) {
+//    return (
+//       <div
+//          className={`text-sm px-4 py-5 bg-white rounded-lg shadow-[2px_2px_5px_2px_#00000010] leading-5 transition-opacity animate-fadeIn ${
+//             className ?? ''
+//          }`}
+//       >
+//          {files.map((file) => (
+//             <a
+//                className='flex items-center gap-2'
+//                href={file.url}
+//                target='_blank'
+//                rel='noopener noreferrer'
+//                key={file.id}
+//             >
+//                <PiPaperclipFill style={{ fontSize: '20px' }} />
+//                <span className='overflow-hidden text-ellipsis truncate'>{file.originalName}</span>
+//             </a>
+//          ))}
+//          {children}
+//       </div>
+//    );
+// }
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index b5f2838..6b9a594 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
    const sizeClass = {
       md: 'w-[311px] py-[15px]',
       lg: 'w-[336px] py-[15px]',
-      full: 'w-100',
+      full: 'w-100 py-[15px]',
    };
    return (
       <React.Fragment>
diff --git a/src/components/ui/modal/index.tsx b/src/components/ui/modal/index.tsx
index d4c3711..5a2fd77 100644
--- a/src/components/ui/modal/index.tsx
+++ b/src/components/ui/modal/index.tsx
@@ -17,6 +17,7 @@ export interface ModalProps {
       disable?: boolean;
    };
    disableCancle?: boolean;
+   isActiveCancle?: boolean;
 }
 
 export default function Modal({
@@ -47,27 +48,27 @@ export default function Modal({
             </header>
             <div />
             <div className='my-4 mx-2 overflow-hidden'>{children}</div>
-            <div className='flex flex-col gap-2'>
-               {accept && (
+            <div className='flex gap-2'>
+               {cancel && (
                   <Button
-                     size='md'
+                     className='w-1/2'
                      onClick={() => {
-                        accept?.onClick();
+                        cancel?.onClick();
                         close();
                      }}
                   >
-                     {accept?.text ?? '확인'}
+                     {cancel?.text ?? '취소'}
                   </Button>
                )}
-               {cancel && (
+               {accept && (
                   <Button
-                     size='md'
+                     className={cancel ? 'w-1/2' : 'w-full'}
                      onClick={() => {
-                        cancel?.onClick();
+                        accept?.onClick();
                         close();
                      }}
                   >
-                     {cancel?.text ?? '취소'}
+                     {accept?.text ?? '확인'}
                   </Button>
                )}
             </div>
diff --git a/src/components/ui/selector/index.tsx b/src/components/ui/selector/index.tsx
index fe238d1..0132a43 100644
--- a/src/components/ui/selector/index.tsx
+++ b/src/components/ui/selector/index.tsx
@@ -33,7 +33,7 @@ export default function Selector({ list, subHeadingText }: { list: TOption[]; su
 
    const SubHeadingText = ({ className, id }: SubHeadingProps) => {
       return (
-         <div className={`flex items-center gap-1 ml-[29px] ${className}`}>
+         <div className={`flex items-center gap-1 ${className ?? ''}`}>
             <h2 className='text-xl font-extrabold text-white'>{selected}</h2>
             <IconButton id={id} width={18} height={18} onClick={handleOption} />
          </div>
@@ -43,11 +43,11 @@ export default function Selector({ list, subHeadingText }: { list: TOption[]; su
    return (
       <Fragment>
          {!open ? (
-            <SubHeadingText className='mb-[30px]' id='drop_down_circle' />
+            <SubHeadingText id='drop_down_circle' />
          ) : (
             <Fragment>
                <SubHeadingText className='mb-3' id='drop_up_circle' />
-               <ul className='ml-[29px] w-20 mb-[30px]'>
+               <ul className='w-20 mb-[30px]'>
                   {list
                      .filter((option) => option.text !== subHeadingText)
                      .map((option, index) => (
diff --git a/src/components/ui/skeleton/cafeteria.tsx b/src/components/ui/skeleton/cafeteria.tsx
new file mode 100644
index 0000000..bc22fe3
--- /dev/null
+++ b/src/components/ui/skeleton/cafeteria.tsx
@@ -0,0 +1,19 @@
+import MainSectionLayout from '@components/layouts/MainSectionLayout';
+import { Skeleton } from '@components/ui/skeleton/base';
+import React from 'react';
+
+export default function CafeteriaSkeleton() {
+   return (
+      <MainSectionLayout>
+         <Skeleton className="w-20 h-7 mb-3" />
+         <div className="flex justify-between">
+            <ul className="flex flex-col gap-1">
+               <li><Skeleton className="w-[70px] h-6"/></li>
+               <li><Skeleton className="w-[70px] h-6"/></li>
+               <li><Skeleton className="w-[70px] h-6"/></li>
+            </ul>
+            <Skeleton className="w-[216px] h-36"/>
+         </div>
+      </MainSectionLayout>
+   );
+}
\ No newline at end of file
diff --git a/src/components/ui/skeleton/conference.tsx b/src/components/ui/skeleton/conference.tsx
new file mode 100644
index 0000000..fc3ab5f
--- /dev/null
+++ b/src/components/ui/skeleton/conference.tsx
@@ -0,0 +1,16 @@
+import Board from '@components/ui/board';
+import { Skeleton } from '@components/ui/skeleton/base';
+import React from 'react';
+
+export default function ConferenceSkeleton() {
+   const skeletonItems = Array.from({ length: 7 }, (_, index) => (
+      <li key={index}>
+         <Skeleton className="w-full h-[44px]" />
+      </li>
+   ));
+   return (
+      <Board>
+         {skeletonItems}
+      </Board>
+   );
+}
diff --git a/src/components/ui/skeleton/council.tsx b/src/components/ui/skeleton/council.tsx
index 34305ce..ea7bf07 100644
--- a/src/components/ui/skeleton/council.tsx
+++ b/src/components/ui/skeleton/council.tsx
@@ -3,23 +3,14 @@ import { Skeleton } from '@components/ui/skeleton/base';
 import React from 'react';
 
 export default function CouncilSkeleton() {
+   const skeletonItems = Array.from({ length: 6 }, (_, index) => (
+      <li key={index}>
+         <Skeleton className="w-full h-[60px]" />
+      </li>
+   ));
    return (
       <Board>
-         <li>
-            <Skeleton className='w-full h-5' />
-         </li>
-         <li>
-            <Skeleton className='w-full h-5' />
-         </li>
-         <li>
-            <Skeleton className='w-full h-5' />
-         </li>
-         <li>
-            <Skeleton className='w-full h-5' />
-         </li>
-         <li>
-            <Skeleton className='w-full h-5' />
-         </li>
+         {skeletonItems}
       </Board>
    );
 }
diff --git a/src/components/ui/skeleton/main.tsx b/src/components/ui/skeleton/main.tsx
index 66843cf..2747ba7 100644
--- a/src/components/ui/skeleton/main.tsx
+++ b/src/components/ui/skeleton/main.tsx
@@ -1,31 +1,28 @@
-import MainSectionLayout from '@components/layouts/MainSectionLayout';
+import { Gnb, GnbLogo } from '@components/common/gnb';
+import { GnhTitle, GnhSubtitle } from '@components/common/gnh';
+import { HeaderSection } from '@components/layouts';
 import { Skeleton } from '@components/ui/skeleton/base';
-import React from 'react';
+import MainBoardSkeleton from '@components/ui/skeleton/mainBoard';
+import { HEADING_TEXT } from '@constants/heading';
+import React, { Fragment } from 'react';
 
-export default function NoticeSkeleton() {
+
+export default function MainSkeleton() {
    return (
-      <MainSectionLayout>
-         <div className='flex items-center justify-between mb-3'>
-            <Skeleton className='w-20 h-7' />
-            <Skeleton className='w-9 h-5' />
+      <Fragment>
+         <Gnb>
+            <GnbLogo />
+         </Gnb>
+         <HeaderSection className="text-center h-[155px] pt-[41px] pb-[65px]">
+            <GnhTitle className='mb-[3pb]'>{HEADING_TEXT.MAIN.HEAD}</GnhTitle>
+            <GnhSubtitle className='text-[11px]'>{HEADING_TEXT.MAIN.SUBHEAD}</GnhSubtitle>
+         </HeaderSection>
+         <div className='w-full h-[337px] flex justify-center bg-white relative'>
+            <Skeleton className="w-[322px] h-[322px]" />
+         </div>
+         <div className='bg-gray-100 pt-5 pb-4'>
+            <MainBoardSkeleton />
          </div>
-         <ul className='space-y-2'>
-            <li>
-               <Skeleton className='w-full h-5' />
-            </li>
-            <li>
-               <Skeleton className='w-full h-5' />
-            </li>
-            <li>
-               <Skeleton className='w-full h-5' />
-            </li>
-            <li>
-               <Skeleton className='w-full h-5' />
-            </li>
-            <li>
-               <Skeleton className='w-full h-5' />
-            </li>
-         </ul>
-      </MainSectionLayout>
+      </Fragment>
    );
-}
+}
\ No newline at end of file
diff --git a/src/components/ui/skeleton/mainBoard.tsx b/src/components/ui/skeleton/mainBoard.tsx
new file mode 100644
index 0000000..ac640f0
--- /dev/null
+++ b/src/components/ui/skeleton/mainBoard.tsx
@@ -0,0 +1,31 @@
+import MainSectionLayout from '@components/layouts/MainSectionLayout';
+import { Skeleton } from '@components/ui/skeleton/base';
+import React from 'react';
+
+export default function MainBoardSkeleton() {
+   return (
+      <MainSectionLayout>
+         <div className='flex items-center justify-between mb-3'>
+            <Skeleton className='w-20 h-7' />
+            <Skeleton className='w-9 h-5' />
+         </div>
+         <ul className='space-y-2'>
+            <li>
+               <Skeleton className='w-full h-5' />
+            </li>
+            <li>
+               <Skeleton className='w-full h-5' />
+            </li>
+            <li>
+               <Skeleton className='w-full h-5' />
+            </li>
+            <li>
+               <Skeleton className='w-full h-5' />
+            </li>
+            <li>
+               <Skeleton className='w-full h-5' />
+            </li>
+         </ul>
+      </MainSectionLayout>
+   );
+}
diff --git a/src/components/ui/skeleton/notice.tsx b/src/components/ui/skeleton/notice.tsx
index a11d5fb..a8bd854 100644
--- a/src/components/ui/skeleton/notice.tsx
+++ b/src/components/ui/skeleton/notice.tsx
@@ -3,44 +3,20 @@ import { Skeleton } from '@components/ui/skeleton/base';
 import React from 'react';
 
 export default function NoticeSkeleton() {
+   const noticeList = Array.from({ length: 5 }, (_, index) => (
+      <Board.Cell key={index}>
+         <div className='flex gap-4 overflow-hidden px-1'>
+            <Skeleton className='w-[40%] h-[100px] overflow-hidden' />
+            <div className='w-[60%] h-[100px] flex flex-col gap-3 justify-center'>
+               <Skeleton className='w-12' />
+               <Skeleton className='w-4' />
+            </div>
+         </div>
+      </Board.Cell>
+   ));
    return (
       <Board>
-         <Board.Cell>
-            <div className='flex gap-4 overflow-hidden px-1'>
-               <Skeleton className='w-[40%] h-[100px] overflow-hidden' />
-               <div className='w-[60%] h-[100px] flex flex-col gap-3 justify-center'>
-                  <Skeleton className='w-12' />
-                  <Skeleton className='w-4' />
-               </div>
-            </div>
-         </Board.Cell>
-         <Board.Cell>
-            <div className='flex gap-4 overflow-hidden px-1'>
-               <Skeleton className='w-[40%] h-[100px] overflow-hidden' />
-               <div className='w-[60%] h-[100px] flex flex-col gap-3 justify-center'>
-                  <Skeleton className='w-12' />
-                  <Skeleton className='w-4' />
-               </div>
-            </div>
-         </Board.Cell>
-         <Board.Cell>
-            <div className='flex gap-4 overflow-hidden px-1'>
-               <Skeleton className='w-[40%] h-[100px] overflow-hidden' />
-               <div className='w-[60%] h-[100px] flex flex-col gap-3 justify-center'>
-                  <Skeleton className='w-12' />
-                  <Skeleton className='w-4' />
-               </div>
-            </div>
-         </Board.Cell>
-         <Board.Cell>
-            <div className='flex gap-4 overflow-hidden px-1'>
-               <Skeleton className='w-[40%] h-[100px] overflow-hidden' />
-               <div className='w-[60%] h-[100px] flex flex-col gap-3 justify-center'>
-                  <Skeleton className='w-12' />
-                  <Skeleton className='w-4' />
-               </div>
-            </div>
-         </Board.Cell>
+         {noticeList}
       </Board>
    );
 }
diff --git a/src/components/ui/toast/toaster.tsx b/src/components/ui/toast/toaster.tsx
index ac07976..153efa6 100644
--- a/src/components/ui/toast/toaster.tsx
+++ b/src/components/ui/toast/toaster.tsx
@@ -19,7 +19,7 @@ export function Toaster() {
       <ToastProvider>
          {toasts.map(function ({ id, title, description, action, ...props }) {
             return (
-               <Toast key={id} {...props}>
+               <Toast className='bg-white' key={id} {...props}>
                   <div className='grid gap-1'>
                      {title && <ToastTitle>{title}</ToastTitle>}
                      {description && <ToastDescription>{description}</ToastDescription>}
diff --git a/src/constants/heading.ts b/src/constants/heading.ts
index ac86ad1..72c255d 100644
--- a/src/constants/heading.ts
+++ b/src/constants/heading.ts
@@ -67,26 +67,3 @@ export const BUSINESS_LIST: TOption[] = [
    { text: '헬스', path: `${ROUTES.BUSINESS.ROOT}/health` },
    { text: '기타', path: `${ROUTES.BUSINESS.ROOT}/etc` },
 ];
-
-export const HEADING_STYLE = {
-   MAIN: {
-      HEAD: 'mt-[41px] mb-[3px] text-center',
-      SUBHEAD: 'text-center font-normal text-[11px] mb-[61px]',
-   },
-   LOGIN: {
-      HEAD: 'mt-7 mb-[19px] text-center',
-      SUBHEAD: 'text-center mb-[51px] font-extrabold',
-   },
-   COUNCIL: {
-      HEAD: 'ml-[29px] mt-[38px] mb-2',
-      SUBHEAD: 'text-xl ml-[29px] mb-[30px] font-extrabold',
-      DROPDOWN: COUNCIL_LIST,
-   },
-   RESET: {
-      HEAD: 'mt-[15px] mb-[19px] text-center',
-      SUBHEAD: 'text-center mb-[55px] font-extrabold',
-   },
-   BUSINESS: {
-      DROPDOWN: BUSINESS_LIST,
-   },
-};
diff --git a/src/constants/style.ts b/src/constants/style.ts
index f6b2df6..b8c46e0 100644
--- a/src/constants/style.ts
+++ b/src/constants/style.ts
@@ -1,11 +1,9 @@
 import { Palette } from '@constants/colors';
-import { HEADING_STYLE } from '@constants/heading';
 import { bottomNavSize } from '@constants/nav';
 import { TextStyle } from '@constants/textStyle';
 
 export const styles = {
    Palette,
-   HEADING_STYLE,
    TextStyle,
    bottomNavSize,
 };
diff --git a/src/hooks/api/auth/useDeleteUser.ts b/src/hooks/api/auth/useDeleteUser.ts
index 93053a6..b22ac7a 100644
--- a/src/hooks/api/auth/useDeleteUser.ts
+++ b/src/hooks/api/auth/useDeleteUser.ts
@@ -4,13 +4,21 @@ import { del } from '@libs/api';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { useToast } from '@/components/ui/toast/use-toaster';
+import { removeToken } from '@/utils/token';
+
 export const useDeleteUser = () => {
    //TODO) 탈퇴하였습니다 -> 토스트 추가
    const navigate = useNavigate();
+   const { toast } = useToast();
    return useMutation({
       mutationFn: () => del(API_PATH.USER.ME),
       onSuccess: () => {
          navigate(ROUTES.MAIN);
+         removeToken();
+         toast({
+            title: '탈퇴하였습니다.',
+         });
       },
    });
 };
diff --git a/src/hooks/api/auth/usePostLogin.ts b/src/hooks/api/auth/usePostLogin.ts
index 6d7d0a1..6f7017b 100644
--- a/src/hooks/api/auth/usePostLogin.ts
+++ b/src/hooks/api/auth/usePostLogin.ts
@@ -4,7 +4,9 @@ import { post } from '@libs/api';
 import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
 import { setToken } from '@utils/token';
 import { AxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useAlert } from '@/hooks/useAlert';
 
 interface LoginRequest {
    studentId: string;
@@ -18,15 +20,19 @@ interface LoginResponse {
 
 export const usePostLogin = (options?: UseMutationOptions<LoginResponse, AxiosError, LoginRequest>) => {
    const navigate = useNavigate();
+   const { pathname } = useLocation();
+   const { alert } = useAlert();
+
    return useMutation<LoginResponse, AxiosError, LoginRequest>({
       mutationFn: ({ studentId, password }: LoginRequest) =>
          post(API_PATH.USER.LOGIN.DEFAULT, { studentId, password }),
       onSuccess: (data) => {
          setToken(data);
-         navigate(ROUTES.MAIN);
+         pathname === '/login' && navigate(ROUTES.MAIN);
       },
-      onError: (error: Error) => {
-         console.log(error);
+      onError: (error: AxiosError) => {
+         const data = Object.getOwnPropertyDescriptor(error.response, 'data')!.value;
+         alert(data.message[0]);
       },
       ...options,
    });
diff --git a/src/hooks/api/reset/usePostFindId.ts b/src/hooks/api/reset/usePostFindId.ts
index 1d7f32f..3146ebc 100644
--- a/src/hooks/api/reset/usePostFindId.ts
+++ b/src/hooks/api/reset/usePostFindId.ts
@@ -1,14 +1,26 @@
+import { useToast } from '@components/ui/toast/use-toaster';
 import { API_PATH } from '@constants/api';
+import { ROUTES } from '@constants/route';
 import { post } from '@libs/api';
 import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
 
 interface FindIdRequest {
    phoneNumber: string;
 }
 
 export const usePostFindId = (options?: UseMutationOptions<unknown, unknown, FindIdRequest>) => {
+   const navigate = useNavigate();
+   const { toast } = useToast();
    return useMutation({
-      mutationFn: (data) => post(API_PATH.USER.RESET.FIND_ID, data),
+      mutationFn: ({phoneNumber}: FindIdRequest) => post(API_PATH.USER.RESET.FIND_ID, {phoneNumber}),
+      onSuccess: () => {
+         toast({
+            title: '인증되었습니다.'
+         });
+         navigate(ROUTES.RESET.PW_VERIFY);
+      },
       ...options,
    });
 };
diff --git a/src/hooks/api/reset/usePostPhoneConfirmCode.ts b/src/hooks/api/reset/usePostPhoneConfirmCode.ts
index 096680c..9c119df 100644
--- a/src/hooks/api/reset/usePostPhoneConfirmCode.ts
+++ b/src/hooks/api/reset/usePostPhoneConfirmCode.ts
@@ -2,6 +2,7 @@ import { API_PATH } from '@constants/api';
 import { post } from '@libs/api';
 import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
 
+
 interface ResetConfirmCodeRequest {
    token: string;
    code: string;
diff --git a/src/hooks/api/reset/usePostResetPw.ts b/src/hooks/api/reset/usePostResetPw.ts
index 1418527..9622437 100644
--- a/src/hooks/api/reset/usePostResetPw.ts
+++ b/src/hooks/api/reset/usePostResetPw.ts
@@ -1,6 +1,10 @@
+import { useToast } from '@components/ui/toast/use-toaster';
 import { API_PATH } from '@constants/api';
+import { ROUTES } from '@constants/route';
 import { patch } from '@libs/api';
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
 
 interface ResetPwRequest {
    token: string;
@@ -8,11 +12,19 @@ interface ResetPwRequest {
 }
 
 export const usePostResetPw = () => {
+   const navigate = useNavigate();
+   const { toast } = useToast();
    return useMutation({
       mutationFn: ({ token, password }: ResetPwRequest) =>
          patch(API_PATH.USER.RESET.RESET_PW, {
             token,
             password,
          }),
+      onSuccess: () => {
+         toast({
+            title: '비밀번호가 변경되었습니다.'
+         });
+         navigate(ROUTES.LOGIN);
+      },
    });
 };
diff --git a/src/hooks/api/signup/usePostSignup.ts b/src/hooks/api/signup/usePostSignup.ts
index ce93338..1a036fe 100644
--- a/src/hooks/api/signup/usePostSignup.ts
+++ b/src/hooks/api/signup/usePostSignup.ts
@@ -24,7 +24,7 @@ export const usePostSignup = (signupToken: string) => {
          if (isOAuthFlow(searchParams)) {
             redirectToClient(searchParams);
          } else {
-            navigate(ROUTES.LOGIN);
+            navigate(ROUTES.SIGNUP.SUCCESS);
          }
       },
    });
diff --git a/src/hooks/useResetErrorBoundary.ts b/src/hooks/useResetErrorBoundary.ts
index 4eb9592..8ce43d9 100644
--- a/src/hooks/useResetErrorBoundary.ts
+++ b/src/hooks/useResetErrorBoundary.ts
@@ -1,28 +1,24 @@
 import { HTTP_STATUS_CODE } from '@constants/error';
-import { ROUTES } from '@constants/route';
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import HTTPError from '@/types/statusError';
 
 export const useResetError = () => {
-   const navigate = useNavigate();
 
    const handleErrorReset = useCallback(
       (error: Error | HTTPError) => {
          if (error instanceof Error && !(error instanceof HTTPError)) {
-            navigate(ROUTES.MAIN);
-
+            window.location.href = '/';
             return;
          }
 
          if (error.statusCode && error?.statusCode >= HTTP_STATUS_CODE.INTERNAL_SERVER_ERROR) {
-            navigate(0);
+            window.location.reload();
          } else {
-            navigate(ROUTES.MAIN);
+            window.location.href = '/';
          }
       },
-      [navigate],
+      [],
    );
 
    return { handleErrorReset };
diff --git a/src/libs/api.ts b/src/libs/api.ts
index 0a908fb..6ba9897 100644
--- a/src/libs/api.ts
+++ b/src/libs/api.ts
@@ -1,9 +1,9 @@
 import { CONSTANTS } from '@constants/api';
-import { checkToken } from '@libs/interceptor';
+// import { checkToken } from '@libs/interceptor';
 import { authorization } from '@libs/interceptor';
+import { TokenType, getRefreshToken, setToken } from '@utils/token';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 
-
 export const client = axios.create({
    baseURL: CONSTANTS.SERVER_URL,
    timeout: 18000,
@@ -36,6 +36,27 @@ client.interceptors.response.use(
       return response.data;
    },
    async (error: AxiosError) => {
-      await checkToken(error);
+      const originalRequest = error.config;
+      if (!originalRequest?.headers || originalRequest.headers.Authorization) return Promise.reject(error);
+      const refreshToken = getRefreshToken();
+      if (localStorage.getItem('damda-atk') === null && error.response?.status === 401) {
+         alert('로그인 이후 이용 가능합니다.');
+         window.location.href = '/login';
+      }
+      if (error.response?.status === 401) {
+         try {
+            const res = await client.post<TokenType>('/user/reissue', { refreshToken });
+            const newAccessToken = res.data.accessToken;
+            const newRefreshToken = res.data.refreshToken;
+            setToken({ accessToken: newAccessToken, refreshToken: newRefreshToken });
+            originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+            return client(originalRequest);
+         } catch (error) {
+            alert('세션이 만료되었습니다. 다시 로그인을 시도해주세요');
+            window.location.href = '/login';
+            return Promise.reject(error);
+         }
+      }
+      return Promise.reject(error);
    },
 );
diff --git a/src/pages/business/[id].tsx b/src/pages/business/[id].tsx
index b799a6b..8709744 100644
--- a/src/pages/business/[id].tsx
+++ b/src/pages/business/[id].tsx
@@ -1,45 +1,48 @@
 import Carousel from '@components/common/carousel';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import PostDetailLayout from '@components/layouts/PostDetailLayout';
-import PostBox, { FileBox } from '@components/ui/box/PostBox';
+import FileBox from '@components/ui/box/FileBox';
+import PostBox from '@components/ui/box/PostBox';
 import Collapse from '@components/ui/collapse';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useLayout } from '@hooks/useLayout';
-import React, { useEffect } from 'react';
+import Selector from '@components/ui/selector';
+import { BUSINESS_LIST, HEADING_TEXT } from '@constants/heading';
+import React from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 
+import { CoalitionType } from '@/types/coalition';
+
+
 export default function BusinessDetail() {
-   const { setLayout } = useLayout();
    const params = useParams();
-   const category = params.category;
+   const category = params.id?.toUpperCase();
    const location = useLocation();
    const coalition = location.state;
-   useEffect(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.BUSINESS.HEAD,
-         subHeadingText:
-            Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, category as string)?.value ?? '',
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.BUSINESS.DROPDOWN,
-      });
-   }, [category]);
 
    return (
-      <PostDetailLayout>
-         <PostBox>
-            <Collapse status={true}>
-               <Carousel data={coalition?.images} />
-            </Collapse>
-            <p className='text-slate-400'>{coalition?.createdAt}</p>
-            <p>{coalition?.title}</p>
-            <p>{coalition?.body}</p>
-         </PostBox>
-         {coalition.files.length > 0 && <FileBox files={coalition.files} />}
-      </PostDetailLayout>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.BUSINESS.HEAD}</GnhTitle>
+            <Selector list={BUSINESS_LIST} subHeadingText={Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, category as CoalitionType)?.value} />
+         </HeaderSection>
+         <ContentSection>
+            <PostDetailLayout>
+               <PostBox>
+                  <Collapse status={true}>
+                     <Carousel data={coalition?.images} />
+                  </Collapse>
+                  <p className='text-slate-400'>{coalition?.createdAt}</p>
+                  <p>{coalition?.title}</p>
+                  <p>{coalition?.body}</p>
+               </PostBox>
+               {coalition.files.length > 0 && <FileBox files={coalition.files} />}
+            </PostDetailLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/business/index.tsx b/src/pages/business/index.tsx
index 1158c66..3f0c956 100644
--- a/src/pages/business/index.tsx
+++ b/src/pages/business/index.tsx
@@ -1,71 +1,36 @@
-import Board from '@components/ui/board';
-import IntersectionBox from '@components/ui/box/intersectionBox';
-import ItemList from '@components/ui/item-list';
-import { Spinner } from '@components/ui/spinner/indext';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useGetCoalitionList } from '@hooks/api/coalition/useGetCoalitionList';
-import { CoalitionContentResponse } from '@hooks/api/coalition/useGetCoalitionList';
-import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
-import { useLayout } from '@hooks/useLayout';
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
+import Selector from '@components/ui/selector';
+import NoticeSkeleton from '@components/ui/skeleton/notice';
+import { HEADING_TEXT, BUSINESS_LIST } from '@constants/heading';
+import React, { Suspense, lazy } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { ROUTES } from '@/constants/route';
 import { CoalitionType } from '@/types/coalition';
 
-export default function BusinessBoard() {
-   const category = useParams();
-   const { setLayout } = useLayout();
-   const navigate = useNavigate();
-   const categoryType = category.category?.toUpperCase();
-
-   const {
-      data: coalition,
-      refetch,
-      fetchNextPage,
-      isFetchingNextPage,
-   } = useGetCoalitionList(categoryType as CoalitionType);
-   const intersectionRef = useInfiniteScroll(fetchNextPage);
-
-   useEffect(() => {
-      refetch();
-   }, [category, refetch]);
+const BusinessList = lazy(() => import('@components/business/index'));
 
-   useEffect(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.BUSINESS.HEAD,
-         subHeadingText:
-            Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, categoryType as CoalitionType)
-               ?.value ?? '',
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.BUSINESS.DROPDOWN,
-      });
-   }, [category]);
-
-   const goToBusinessDetail = (item: CoalitionContentResponse) => {
-      navigate(ROUTES.BUSINESS.DETAIL(category.category?.toLowerCase() as string, item.id.toString()), {
-         state: item,
-      });
-   };
 
+export default function BusinessBoard() {
+   const { category } = useParams();
+   const categoryType = category?.toUpperCase() as string;
    return (
-      <Board>
-         {coalition?.pages.map((page) =>
-            page.content.map((item) => (
-               <Board.Cell key={item.id} onClick={() => goToBusinessDetail(item)}>
-                  <ItemList content={item} />
-               </Board.Cell>
-            )),
-         )}
-         <IntersectionBox ref={intersectionRef} />
-         {isFetchingNextPage && <Spinner />}
-      </Board>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] pl-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.BUSINESS.HEAD}</GnhTitle>
+            <Selector list={BUSINESS_LIST} subHeadingText={Object.getOwnPropertyDescriptor(HEADING_TEXT.BUSINESS.SUBHEAD, categoryType as CoalitionType)
+               ?.value ?? ''} />
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <Suspense fallback={<NoticeSkeleton />}>
+               <BusinessList categoryType={categoryType} />
+            </Suspense>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/conference/index.tsx b/src/pages/conference/index.tsx
index 016e153..395d011 100644
--- a/src/pages/conference/index.tsx
+++ b/src/pages/conference/index.tsx
@@ -1,56 +1,29 @@
-import Board from '@components/ui/board';
-import IntersectionBox from '@components/ui/box/intersectionBox';
-import CouncilSkeleton from '@components/ui/skeleton/council';
-import { Spinner } from '@components/ui/spinner/indext';
-import { Date } from '@components/ui/text/board';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useGetConference } from '@hooks/api/conference/useGetConference';
-import { ConferenceContentResponse } from '@hooks/api/conference/useGetConference';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
-import { useLayout } from '@hooks/useLayout';
-import React, { Suspense } from 'react';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
+import Selector from '@components/ui/selector';
+import ConferenceSkeleton from '@components/ui/skeleton/conference';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
+import React, { Suspense, lazy } from 'react';
 
-export default function ConferenceBoard() {
-   const { setLayout } = useLayout();
-   const { data: conference, fetchNextPage, isFetchingNextPage } = useGetConference();
-   const intersectionRef = useInfiniteScroll(fetchNextPage);
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.CONFERENCE.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
-
-   const openFile = (item: ConferenceContentResponse) => {
-      window.open(item.files[0].url);
-   };
+const ConferenceList = lazy(() => import('@components/conference/index'));
 
+export default function ConferenceBoard() {
    return (
-      <Suspense fallback={<CouncilSkeleton />}>
-         <Board>
-            {conference?.pages.map((page) =>
-               page.content.map((item) => (
-                  <Board.Cell key={item.id} onClick={() => openFile(item)}>
-                     <div className='flex gap-2 p-3'>
-                        <p className='grow text-center truncate'>{item.title}</p>
-                        <Date date={item.createdAt} />
-                     </div>
-                  </Board.Cell>
-               )),
-            )}
-            <IntersectionBox ref={intersectionRef} />
-            {isFetchingNextPage && <Spinner />}
-         </Board>
-      </Suspense>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.CONFERENCE.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <Suspense fallback={<ConferenceSkeleton />}>
+               <ConferenceList />
+            </Suspense>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/council/index.tsx b/src/pages/council/index.tsx
index d8e9228..09d9662 100644
--- a/src/pages/council/index.tsx
+++ b/src/pages/council/index.tsx
@@ -1,50 +1,48 @@
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import SinglePageLayout from '@components/layouts/SinglePageLayout';
 import Box from '@components/ui/box';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
+import Selector from '@components/ui/selector';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
 import React from 'react';
 
 export default function Greeting() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.GREETING.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
-
    return (
-      <SinglePageLayout>
-         <Box className='overflow-hidden' type='shadowImage'>
-            <img className='w-full h-[calc(100vw*0.2)] border-none bg-neutral-300' src={''} />
-         </Box>
-         <Box className='text-sm leading-5 flex flex-col gap-5' type='shadow'>
-            <header>
-               <h1>그대의 청춘에 단국을 담다,</h1>
-            </header>
-            <section className='flex flex-col gap-5'>
-               <p>
-                  안녕하십니까 단국대학교 죽전 캠퍼스 학우 여러분, <br />
-                  <strong>55대 담다 총학생회</strong>입니다. <br />
-               </p>
-               <p>
-                  2023년, 우리 단국은 코로나19로부터 벗어나 제약 없는 대면 학교생활을 맞이하게 됩니다. <br />
-                  저희 담다 총학생회는 학우 여러분의 청춘의 한 페이지에 단국을 담을 수 있도록,
-               </p>
-               <p>학우 여러분의 다양한 목소리를 담아 더 나은 학교를 만들기 위해 노력하겠습니다.</p>
-               <span>감사합니다.</span>
-            </section>
-         </Box>
-      </SinglePageLayout>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className='pt-[38px] ml-[29px] pb-[30px]'>
+            <GnhTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.GREETING.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true} className='mb-10'>
+            <SinglePageLayout>
+               {/* <Box className='overflow-hidden' type='shadowImage'>
+                  <img className='w-full h-[calc(100vw*0.2)] border-none bg-neutral-300' src={''} />
+               </Box> */}
+               <Box className='text-sm leading-5 flex flex-col gap-5' type='shadow'>
+                  <header>
+                     <h1>그대의 청춘에 단국을 담다,</h1>
+                  </header>
+                  <section className='flex flex-col gap-5'>
+                     <p>
+                        안녕하십니까 단국대학교 죽전 캠퍼스 학우 여러분, <br />
+                        <strong>55대 담다 총학생회</strong>입니다. <br />
+                     </p>
+                     <p>
+                        2023년, 우리 단국은 코로나19로부터 벗어나 제약 없는 대면 학교생활을 맞이하게 됩니다.{' '}
+                        <br />
+                        저희 담다 총학생회는 학우 여러분의 청춘의 한 페이지에 단국을 담을 수 있도록,
+                     </p>
+                     <p>학우 여러분의 다양한 목소리를 담아 더 나은 학교를 만들기 위해 노력하겠습니다.</p>
+                     <span>감사합니다.</span>
+                  </section>
+               </Box>
+            </SinglePageLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/council/location.tsx b/src/pages/council/location.tsx
index cb5a323..ed521fd 100644
--- a/src/pages/council/location.tsx
+++ b/src/pages/council/location.tsx
@@ -1,53 +1,60 @@
 import map from '@assets/images/map.png';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import SinglePageLayout from '@components/layouts/SinglePageLayout';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
+import Selector from '@components/ui/selector';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
 import React from 'react';
 
-export default function Location() {
-   const { setLayout } = useLayout();
 
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.LOCATION.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
+export default function Location() {
+   const LOCATION_INFO = [
+      {
+         KEY: '위치',
+         VALUE: '해당관 406호 총학생회실'
+      },
+      {
+         KEY: '주소',
+         VALUE: '(16890) 경기도 용인시 수지구 죽전동 1491 단국대학교 혜당관 406호 총학생회실',
+      },
+      {
+         KEY: '전화',
+         VALUE: '031)8005-2680-1',
+      },
+      {
+         KEY: '이메일',
+         VALUE: 'dkudamda@gmail.com',
+      },
+      {
+         KEY: '인스타그램',
+         VALUE: '@dku_damda',
+      },
+   ];
 
    return (
-      <SinglePageLayout>
-         <img className='w-[366px] h-[240px] mx-auto' src={map} alt='단국대학교 총학생회 지도' />
-         <ul className='flex flex-col gap-4'>
-            <li>
-               <h2 className='font-semibold'>위치</h2>
-               <span>혜당관 406호 총학생회실</span>
-            </li>
-            <li>
-               <h2 className='font-semibold'>주소</h2>
-               <span>(16890) 경기도 용인시 수지구 죽전동 1491 단국대학교 혜당관 406호 총학생회실</span>
-            </li>
-            <li>
-               <h2 className='font-semibold'>전화</h2>
-               <span>{'031)'}8005-2680-1</span>
-            </li>
-            <li>
-               <h2 className='font-semibold'>이메일</h2>
-               <span>dkudamda@gmail.com</span>
-            </li>
-            <li>
-               <h2 className='font-semibold'>인스타그램</h2>
-               <span>@dku_damda</span>
-            </li>
-         </ul>
-      </SinglePageLayout>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.LOCATION.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <SinglePageLayout>
+               <img className='w-[366px] h-[240px] mx-auto' src={map} alt='단국대학교 총학생회 지도' />
+               <ul className='flex flex-col gap-4'>
+                  {LOCATION_INFO.map((info, index) => (
+                     <li key={index}>
+                        <h2 className="font-semibold">{info.KEY}</h2>
+                        <span>{info.VALUE}</span>
+                     </li>
+                  ))}
+               </ul>
+            </SinglePageLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/council/organization.tsx b/src/pages/council/organization.tsx
index c8e0c5c..b4a26b4 100644
--- a/src/pages/council/organization.tsx
+++ b/src/pages/council/organization.tsx
@@ -1,36 +1,34 @@
 import Organization01 from '@assets/images/organization-01.jpg';
 import Organization02 from '@assets/images/organization-02.jpg';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import SinglePageLayout from '@components/layouts/SinglePageLayout';
 import Box from '@components/ui/box/index';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
+import Selector from '@components/ui/selector';
+import { COUNCIL_LIST, HEADING_TEXT } from '@constants/heading';
 import React from 'react';
 
-export default function Organization() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.ORGANIZATION.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
 
+export default function Organization() {
    return (
-      <SinglePageLayout>
-         <Box type='shadow' className='flex flex-col gap-5'>
-            <img className='rounded-md' src={Organization01} />
-            <img className='rounded-md' src={Organization02} />
-         </Box>
-      </SinglePageLayout>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.ORGANIZATION.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true} className="mb-20">
+            <SinglePageLayout>
+               <Box type='shadow' className='flex flex-col gap-5'>
+                  <img className='rounded-md' src={Organization01} />
+                  <img className='rounded-md' src={Organization02} />
+               </Box>
+            </SinglePageLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/council/recruitment.tsx b/src/pages/council/recruitment.tsx
index 94d716d..6ff46b2 100644
--- a/src/pages/council/recruitment.tsx
+++ b/src/pages/council/recruitment.tsx
@@ -1,54 +1,52 @@
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import SinglePageLayout from '@components/layouts/SinglePageLayout';
 import Box from '@components/ui/box';
-import { FileBox } from '@components/ui/box/PostBox';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
+import FileBox from '@components/ui/box/FileBox';
+import Selector from '@components/ui/selector';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
 import React from 'react';
 
-export default function Recruitment() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.RECRUIT.HEAD,
-         subHeadingText: HEADING_TEXT.RECRUIT.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
 
+export default function Recruitment() {
    return (
-      <SinglePageLayout>
-         <Box type='shadow' className='text-sm'>
-            <h3>[55대 담다 총학생회 재학생 집행부 모집 ]</h3>
-            <br></br>
-            <p>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle>{HEADING_TEXT.RECRUIT.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.RECRUIT.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <SinglePageLayout>
+               <Box type='shadow' className='text-sm'>
+                  <h3>[55대 담다 총학생회 재학생 집행부 모집 ]</h3>
+                  <br></br>
+                  <p>
                그대의 청춘에 단국을 담다 🫴안녕하십니까 단국대학교 학우 여러분, 55대 담다 총학생회입니다. 담다
                총학생회와 함께 2023년 2학기를 만들어 나갈 단국대학교 재학생 집행부를 모집합니다!
-            </p>
-            <br></br>
-            <ul>
-               <li>✅️ 지원기간: 2023년 7월 13일 ~ 2023년 7월 18일</li>
-               <li>✅️ 면접기간: 2023년 7월 19일 ~ 2023년 7월 22일</li>
-               <li>✅️ 지원방법: 지원서 다운로드 후 작성하여dkudamda@gmail.com 으로 제출</li>
-            </ul>
-            <br></br>
-            <span>
+                  </p>
+                  <br></br>
+                  <ul>
+                     <li>✅️ 지원기간: 2023년 7월 13일 ~ 2023년 7월 18일</li>
+                     <li>✅️ 면접기간: 2023년 7월 19일 ~ 2023년 7월 22일</li>
+                     <li>✅️ 지원방법: 지원서 다운로드 후 작성하여dkudamda@gmail.com 으로 제출</li>
+                  </ul>
+                  <br></br>
+                  <span>
                ❗️반드시 <strong>지원 기간 내에</strong> 지원서를 제출해 주시기 바랍니다.
-            </span>
-            <span>
+                  </span>
+                  <span>
                ❗️* 문의는 총학생회장 박성헌 (010-6453-7733) 부총학생회장 박범성 (010-5246-3764)로
                부탁드립니다.
-            </span>
-         </Box>
-         <FileBox files={[{ id: 0, url: '', originalName: '지원서.pdf', mimeType: 'pdf' }]} />
-      </SinglePageLayout>
+                  </span>
+               </Box>
+               <FileBox files={[{ id: 0, url: '', originalName: '지원서.pdf', mimeType: 'pdf' }]} />
+            </SinglePageLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3e01897..ce4c539 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,55 +1,55 @@
-import Carousel from '@components/common/carousel';
-import { Cafeteria, AppDownload, Notice, Petition } from '@components/main/';
-import NoticeSkeleton from '@components/ui/skeleton/main';
+// import Carousel from '@components/common/carousel';
+import { HeaderSection, ContentSection } from '@components/layouts';
+import { AppDownload } from '@components/main/';
+import CafeteriaSkeleton from '@components/ui/skeleton/cafeteria';
 import { Spinner } from '@components/ui/spinner/indext';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
+import { HEADING_TEXT } from '@constants/heading';
 import useGetMain from '@hooks/api/main/useGetMain';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
-import React, { Suspense } from 'react';
+import React, { Suspense, lazy } from 'react';
 
+import { Gnb, GnbLogo } from '@/components/common/gnb';
+import { GnhSubtitle, GnhTitle } from '@/components/common/gnh';
+import Nav from '@/components/common/nav';
+
+const Carousel = lazy(() => import('@components/common/carousel'));
+const Notice = lazy(() => import('@components/main/notice'));
+const Petition = lazy(() => import('@components/main/petition'));
+const Cafeteria = lazy(() => import('@components/main/cafeteria'));
 
 
 export default function Main() {
-   const { setLayout } = useLayout();
    const { data: main } = useGetMain();
    
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: false,
-         isMain: true,
-         fullscreen: false,
-         headingText: HEADING_TEXT.MAIN.HEAD,
-         subHeadingText: HEADING_TEXT.MAIN.SUBHEAD,
-         headingStyle: HEADING_STYLE.MAIN.HEAD,
-         subHeadingStyle: HEADING_STYLE.MAIN.SUBHEAD,
-         rounded: false,
-      });
-   });
    //TODO) Cafeteria skeleton 추가
    return (
       <React.Fragment>
-         <div className='w-full h-[337px] flex justify-center'>
-            <Suspense fallback={<Spinner />}>
-               <Carousel
-                  data={main?.carousels ?? []}
-                  className='w-[322px] h-[322px] absolute top-44 mx-auto'
-               />
-            </Suspense>
-         </div>
-         <div className='bg-gray-100 pt-5 pb-4'>
-            <Suspense fallback={<NoticeSkeleton />}>
+         {/* <MainSkeleton /> */}
+         <Gnb>
+            <GnbLogo />
+         </Gnb>
+         <HeaderSection className="text-center h-[155px] pt-[41px] pb-[65px]">
+            <GnhTitle className='mb-[3pb]'>{HEADING_TEXT.MAIN.HEAD}</GnhTitle>
+            <GnhSubtitle className='text-[11px]'>{HEADING_TEXT.MAIN.SUBHEAD}</GnhSubtitle>
+         </HeaderSection>
+         <ContentSection className="!rounded-t-none mb-[60px]">
+            <div className='w-full h-[337px] flex justify-center bg-white relative'>
+               <Suspense fallback={<Spinner />}>
+                  <Carousel
+                     data={main?.carousels ?? []}
+                     className='w-[322px] h-[322px] absolute -top-12 mx-auto'
+                  />
+               </Suspense>
+            </div>
+            <div className='bg-gray-100 pt-5 pb-4'>
                <Notice notices={main?.recentNotices} />
-            </Suspense>
-            <Suspense fallback={<NoticeSkeleton />}>
                <Petition petitions={main?.popularPetitions} />
-            </Suspense>
-            <Suspense fallback={<div>로딩중</div>}>
-               <Cafeteria />
-            </Suspense>
-            <AppDownload />
-         </div>
+               <Suspense fallback={<CafeteriaSkeleton />}>
+                  <Cafeteria />
+               </Suspense>
+               <AppDownload />
+            </div>
+         </ContentSection>
+         <Nav />
       </React.Fragment>
    );
 }
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index e5cbdfb..1e3f166 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,29 +1,23 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { GnhSubtitle, GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
 import LoginForm from '@components/login/form';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
-import React, { Fragment } from 'react';
+import { HEADING_TEXT } from '@constants/heading';
+import React from 'react';
 
 export default function Login() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.LOGIN.HEAD,
-         subHeadingText: HEADING_TEXT.LOGIN.SUBHEAD,
-         headingStyle: HEADING_STYLE.LOGIN.HEAD,
-         subHeadingStyle: HEADING_STYLE.LOGIN.SUBHEAD,
-         rounded: true,
-      });
-   });
-
    return (
-      <Fragment>
-         <LoginForm />
-      </Fragment>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack url='/' />
+         </Gnb>
+         <HeaderSection className='pt-9 pb-[51px] text-center'>
+            <GnhTitle className='mb-[19px]'>{HEADING_TEXT.LOGIN.HEAD}</GnhTitle>
+            <GnhSubtitle className='font-extrabold'>{HEADING_TEXT.LOGIN.SUBHEAD}</GnhSubtitle>
+         </HeaderSection>
+         <ContentSection>
+            <LoginForm />
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/mypage/edit.tsx b/src/pages/mypage/edit.tsx
index 55b792f..5d1d3ef 100644
--- a/src/pages/mypage/edit.tsx
+++ b/src/pages/mypage/edit.tsx
@@ -18,6 +18,7 @@ import { useLayout } from '@hooks/useLayout';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { Gnb, GnbGoBack } from '@/components/common/gnb';
 import { IEvent, IFormInfo, IInputValue, IValidationInfo } from '@/types/mypage/edit';
 
 export default function MyPageEdit() {
@@ -265,8 +266,11 @@ export default function MyPageEdit() {
 
    return (
       <>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
          {myInfo && (
-            <div className='px-3 pb-5 flex items-center flex-col w-full'>
+            <div className='px-3 pb-5 flex items-center flex-col w-full bg-white'>
                <div className='flex justify-center py-10'>
                   <ProfileImage gender={myInfo.gender} />
                </div>
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 4aaf58e..f54ea2b 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -11,21 +11,52 @@ import { FaUser } from 'react-icons/fa6';
 import { IoIosListBox } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
+import { useAlert } from '@/hooks/useAlert';
+import { useModal } from '@/hooks/useModal';
+
 export default function MyPage() {
    const navigate = useNavigate();
    const { mutate } = useDeleteUser();
    const { toast } = useToast();
+   const { alert } = useAlert();
+   const { open, close } = useModal();
 
    const deleteAccount = () => {
-      mutate();
+      open(<>탈퇴하시겠습니까?</>, {
+         accept: {
+            text: '확인',
+            onClick: () => {
+               mutate();
+            },
+         },
+         cancel: {
+            text: '취소',
+            onClick: () => {
+               close();
+            },
+         },
+      });
    };
 
    const logout = () => {
-      removeToken();
-      toast({
-         title: '로그아웃 되었습니다.',
+      open(<>로그아웃하시겠습니까?</>, {
+         accept: {
+            text: '확인',
+            onClick: () => {
+               removeToken();
+               toast({
+                  title: '로그아웃되었습니다.',
+               });
+               navigate(ROUTES.MAIN);
+            },
+         },
+         cancel: {
+            text: '취소',
+            onClick: () => {
+               close();
+            },
+         },
       });
-      navigate(ROUTES.MAIN);
    };
 
    return (
@@ -39,7 +70,7 @@ export default function MyPage() {
                      key={id}
                      className='flex flex-col items-center text-4xl cursor-pointer'
                      onClick={() => {
-                        id === 'edit' ? navigate('password') : navigate(id);
+                        id === 'edit' ? navigate('password') : alert('준비 중입니다');
                      }}
                   >
                      {icon}
diff --git a/src/pages/notice/[id].tsx b/src/pages/notice/[id].tsx
index 3e60a0f..576bb62 100644
--- a/src/pages/notice/[id].tsx
+++ b/src/pages/notice/[id].tsx
@@ -1,47 +1,35 @@
-import Carousel from '@components/common/carousel';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
 import PostDetailLayout from '@components/layouts/PostDetailLayout';
-import PostBox, { FileBox } from '@components/ui/box/PostBox';
-import Collapse from '@components/ui/collapse';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useGetNoticeItem } from '@hooks/api/notice/useGetNoticeItem';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
+import NoticeItem from '@components/notice/[id]';
+import Selector from '@components/ui/selector';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-export default function NoticeDetail() {
-   const { setLayout } = useLayout();
-   const params = useParams();
-   const id = params.id;
-   const noticeId = id?.toString();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.NOTICE.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
 
-   const { data: notice } = useGetNoticeItem(noticeId as string);
 
+export default function NoticeDetail() {
+   const params = useParams();   
+   const id = params.id as string;
+   const noticeId = id.toString();
+   
    return (
-      <PostDetailLayout>
-         <PostBox>
-            <Collapse status={true}>
-               <Carousel data={notice?.images} />
-            </Collapse>
-            <p>{notice.title}</p>
-            <p>{notice.body}</p>
-         </PostBox>
-         {notice.files.length && <FileBox files={notice.files} />}
-      </PostDetailLayout>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.NOTICE.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection>
+            <PostDetailLayout>
+               <NoticeItem noticeId={noticeId} />
+            </PostDetailLayout>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/notice/index.tsx b/src/pages/notice/index.tsx
index 2e38dbb..58b8a14 100644
--- a/src/pages/notice/index.tsx
+++ b/src/pages/notice/index.tsx
@@ -1,54 +1,29 @@
-import Board from '@components/ui/board';
-import IntersectionBox from '@components/ui/box/intersectionBox';
-import ItemList from '@components/ui/item-list';
-import { Spinner } from '@components/ui/spinner/indext';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { ROUTES } from '@constants/route';
-import { useGetNoticeList } from '@hooks/api/notice/useGetNoticeList';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
-import { useLayout } from '@hooks/useLayout';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
+import Selector from '@components/ui/selector';
+import NoticeSkeleton from '@components/ui/skeleton/notice';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
+import React, { Fragment, Suspense, lazy } from 'react';
 
-export default function NoticeBoard() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.NOTICE.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
-
-   const navigate = useNavigate();
-   const { data: notice, fetchNextPage, isFetchingNextPage } = useGetNoticeList();
-   const intersectionRef = useInfiniteScroll(fetchNextPage);
-
-   const goToNoticeDetail = (itemId: number) => {
-      const noticeId = itemId.toString();
-      navigate(ROUTES.NOTICE.ID(noticeId));
-   };
+const NoticeList = lazy(() => import('@components/notice/index'));
 
+export default function NoticeBoard() {
    return (
-      <Board>
-         {notice?.pages.map((page) =>
-            page.content.map((item) => (
-               <Board.Cell key={item.id} onClick={() => goToNoticeDetail(item.id)}>
-                  <ItemList content={item} />
-               </Board.Cell>
-            )),
-         )}
-         <IntersectionBox ref={intersectionRef} />
-         {isFetchingNextPage && <Spinner />}
-      </Board>
+      <Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className='mb-2'>{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.NOTICE.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection>
+            <Suspense fallback={<NoticeSkeleton />}>
+               <NoticeList />
+            </Suspense>
+         </ContentSection>
+      </Fragment>
    );
 }
diff --git a/src/pages/notice/post.tsx b/src/pages/notice/post.tsx
index 12cf4e0..93aa51a 100644
--- a/src/pages/notice/post.tsx
+++ b/src/pages/notice/post.tsx
@@ -1,3 +1,6 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
 import Post from '@components/main/post';
 import { usePostNoticeForm } from '@hooks/api/notice/usePostNoticeForm';
 import { PostFormInfo } from '@hooks/api/notice/usePostNoticeForm';
@@ -5,6 +8,7 @@ import { useFormUpload } from '@hooks/useFormUpload';
 import useImageUpload from '@hooks/useImageUpload';
 import React from 'react';
 
+
 export default function NoticePost() {
    const initFormInfo: PostFormInfo = {
       title: '',
@@ -13,7 +17,6 @@ export default function NoticePost() {
    };
 
    const { formInfo, setFormInfo, handleUpdate } = useFormUpload(initFormInfo);
-
    const { mutate } = usePostNoticeForm();
 
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -32,15 +35,25 @@ export default function NoticePost() {
    const { imageList, addImage, deleteImage } = useImageUpload();
 
    return (
-      <Post
-         postType='공지'
-         formInfo={formInfo}
-         setFormInfo={setFormInfo}
-         handleUpdate={handleUpdate}
-         handleSubmit={handleSubmit}
-         imageList={imageList}
-         addImage={addImage}
-         deleteImage={deleteImage}
-      />
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <HeaderSection className="pt-[45px] pb-14 pl-8">
+            <GnhTitle>공지</GnhTitle>
+         </HeaderSection>
+         <ContentSection>
+            <Post
+               postType='공지'
+               formInfo={formInfo}
+               setFormInfo={setFormInfo}
+               handleUpdate={handleUpdate}
+               handleSubmit={handleSubmit}
+               imageList={imageList}
+               addImage={addImage}
+               deleteImage={deleteImage}
+            />
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/petition/[id].tsx b/src/pages/petition/[id].tsx
index a569a29..5f3c322 100644
--- a/src/pages/petition/[id].tsx
+++ b/src/pages/petition/[id].tsx
@@ -1,19 +1,21 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
 import PostDetailLayout from '@components/layouts/PostDetailLayout';
-import PostBox, { FileBox } from '@components/ui/box/PostBox';
+import FileBox from '@components/ui/box/FileBox';
+import PostBox from '@components/ui/box/PostBox';
 import FloatingButton from '@components/ui/button/FloatingButton';
 import DoughnutChart from '@components/ui/chart/DoughnutChart';
 import PetitonChartList from '@components/ui/chart/PetitionChartList';
 import Collapse from '@components/ui/collapse';
 import { Spinner } from '@components/ui/spinner/indext';
 import { API_PATH } from '@constants/api';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
+import { HEADING_TEXT } from '@constants/heading';
 import { useGetPetitionItem } from '@hooks/api/petition/useGetPetitionItem';
 import { PetitionContentResponse } from '@hooks/api/petition/useGetPetitionItem';
 import { StatistResponse } from '@hooks/api/petition/useGetPetitionItem';
 import { useAlert } from '@hooks/useAlert';
 import { useApi } from '@hooks/useApi';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React, { ComponentProps, ReactNode, useEffect, useState, Suspense } from 'react';
 import { TbThumbUp, TbThumbUpFilled } from 'react-icons/tb';
 import { useParams } from 'react-router-dom';
@@ -23,23 +25,9 @@ import { getDaysBetween, getPetitionStatus } from '.';
 import { WithReactChildren } from '@/types/default-interfaces';
 
 export default function PetitionDetail() {
-   const { setLayout } = useLayout();
    const params = useParams();
    const id = params.id;
 
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.PETITION.HEAD,
-         headingStyle: `${HEADING_STYLE.COUNCIL.HEAD} mb-[30px]`,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
-
    const [updatePost, setUpdatePost] = useState(false);
    const [chartData, setChartData] = useState({ labels: [''], data: [0] });
 
@@ -104,62 +92,76 @@ export default function PetitionDetail() {
    };
 
    return (
-      <Suspense fallback={<Spinner />}>
-         {petition !== undefined && (
-            <PostDetailLayout>
-               {/* 청원글 */}
-               <Box>
-                  <div className='flex gap-4 text-gray-400'>
-                     <span>{petitionStatus}</span>
-                     <span>
-                        {remainingDays !== undefined && remainingDays > 0
-                           ? `D-${remainingDays}`
-                           : '기간 만료'}
-                     </span>
-                     <span>{`${petition.agreeCount}/150`}</span>
-                  </div>
-                  <Title>{petition.title}</Title>
-                  <p>{petition.body}</p>
-               </Box>
-
-               {/* 첨부파일 */}
-               {petition.files.length > 0 && <FileBox className='p-0 mt-0' files={petition?.files} />}
-
-               {/* 동의현황 */}
-               <PostBox className='shadow-none px-0 py-0 text-center'>
-                  <Collapse status={false} size='text-2xl' title={<Title className='mr-1'>동의현황</Title>}>
-                     <PostBox className='mx-0 mt-2 flex flex-col gap-3 px-6'>
-                        <p>어떤 과에서 가장 동의를 많이 했을까요?</p>
-                        <hr />
-                        <DoughnutChart chartData={chartData} sum={sum} />
-                        <PetitonChartList statisticList={petition.statisticList} sum={sum} />
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <HeaderSection className='pt-[45px] ml-[29px] pb-[53px]'>
+            <GnhTitle>{HEADING_TEXT.PETITION.HEAD}</GnhTitle>
+         </HeaderSection>
+         <ContentSection>
+            <Suspense fallback={<Spinner />}>
+               {petition !== undefined && (
+                  <PostDetailLayout>
+                     {/* 청원글 */}
+                     <Box>
+                        <div className='flex gap-4 text-gray-400'>
+                           <span>{petitionStatus}</span>
+                           <span>
+                              {remainingDays !== undefined && remainingDays > 0
+                                 ? `D-${remainingDays}`
+                                 : '기간 만료'}
+                           </span>
+                           <span>{`${petition.agreeCount}/150`}</span>
+                        </div>
+                        <Title>{petition.title}</Title>
+                        <p>{petition.body}</p>
+                     </Box>
+
+                     {/* 첨부파일 */}
+                     {petition.files.length > 0 && <FileBox className='p-0 mt-0' files={petition?.files} />}
+
+                     {/* 동의현황 */}
+                     <PostBox className='shadow-none px-0 py-0 text-center'>
+                        <Collapse
+                           status={false}
+                           size='text-2xl'
+                           title={<Title className='mr-1'>동의현황</Title>}
+                        >
+                           <PostBox className='mx-0 mt-2 flex flex-col gap-3 px-6'>
+                              <p>어떤 과에서 가장 동의를 많이 했을까요?</p>
+                              <hr />
+                              <DoughnutChart chartData={chartData} sum={sum} />
+                              <PetitonChartList statisticList={petition.statisticList} sum={sum} />
+                           </PostBox>
+                        </Collapse>
                      </PostBox>
-                  </Collapse>
-               </PostBox>
-
-               {/* 답변 */}
-               {petition.answer !== null && (
-                  <Box>
-                     <Title>총학생회 답변</Title>
-                     <p>{petition.answer}</p>
-                  </Box>
-               )}
 
-               {/* 플로팅 버튼 */}
-               <FloatingButton
-                  event={() => {
-                     handleAgreeButtonClick();
-                  }}
-               >
-                  {petition.agree ? (
-                     <TbThumbUpFilled color='white' size={40} />
-                  ) : (
-                     <TbThumbUp color='white' size={40} />
-                  )}
-               </FloatingButton>
-            </PostDetailLayout>
-         )}
-      </Suspense>
+                     {/* 답변 */}
+                     {petition.answer !== null && (
+                        <Box>
+                           <Title>총학생회 답변</Title>
+                           <p>{petition.answer}</p>
+                        </Box>
+                     )}
+
+                     {/* 플로팅 버튼 */}
+                     <FloatingButton
+                        event={() => {
+                           handleAgreeButtonClick();
+                        }}
+                     >
+                        {petition.agree ? (
+                           <TbThumbUpFilled color='white' size={40} />
+                        ) : (
+                           <TbThumbUp color='white' size={40} />
+                        )}
+                     </FloatingButton>
+                  </PostDetailLayout>
+               )}
+            </Suspense>
+         </ContentSection>
+      </React.Fragment>
    );
 }
 
diff --git a/src/pages/petition/index.tsx b/src/pages/petition/index.tsx
index ce4e9cf..3d81c33 100644
--- a/src/pages/petition/index.tsx
+++ b/src/pages/petition/index.tsx
@@ -1,19 +1,18 @@
-import Board from '@components/ui/board';
-import IntersectionBox from '@components/ui/box/intersectionBox';
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { HeaderSection, ContentSection } from '@components/layouts';
 import FloatingButton from '@components/ui/button/FloatingButton';
-import { Spinner } from '@components/ui/spinner/indext';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
+import CouncilSkeleton from '@components/ui/skeleton/council';
+import { HEADING_TEXT } from '@constants/heading';
 import { ROUTES } from '@constants/route';
-import { useGetPetition } from '@hooks/api/petition/useGetPetiition';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
-import { useLayout } from '@hooks/useLayout';
 import { isLoggedIn } from '@utils/token';
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { PetitionType } from '@/types/petition';
 
+const PetitionList = lazy(() => import('@components/petition/index'));
+
 export const getDaysBetween = (expiresAt: string) => {
    const startDate = new Date();
    const endDate = new Date(expiresAt);
@@ -35,48 +34,20 @@ export const getPetitionStatus = (status: PetitionType) => {
 
 export default function PetitionBoard() {
    const navigate = useNavigate();
-   const { setLayout } = useLayout();
-   const { data: petition, fetchNextPage, isFetchingNextPage } = useGetPetition();
-   const intersectionRef = useInfiniteScroll(fetchNextPage);
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.PETITION.HEAD,
-         headingStyle: `${HEADING_STYLE.COUNCIL.HEAD} mb-[30px]`,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
-
-   const goToPetitionDetail = (itemId: number) => {
-      navigate(ROUTES.PETITION.ID(itemId.toString()));
-   };
 
    return (
       <React.Fragment>
-         <Board>
-            {petition?.pages.map((page) =>
-               page.content.map((item) => (
-                  <Board.Cell key={item.id} onClick={() => goToPetitionDetail(item.id)}>
-                     <div className=' py-3 flex justify-between leading-9 px-6 gap-3 whitespace-nowrap'>
-                        <p>{getPetitionStatus(item.status)}</p>
-                        <p className='text-ellipsis overflow-hidden'>{item.title}</p>
-                        <p>
-                           {getDaysBetween(item.expiresAt!) > 0
-                              ? `D-${getDaysBetween(item.expiresAt!)}`
-                              : '만료'}
-                        </p>
-                     </div>
-                  </Board.Cell>
-               )),
-            )}
-            <IntersectionBox ref={intersectionRef} />
-            {isFetchingNextPage && <Spinner />}
-         </Board>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <HeaderSection className="pt-[45px] ml-[29px] pb-[53px]">
+            <GnhTitle>{HEADING_TEXT.PETITION.HEAD}</GnhTitle>
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <Suspense fallback={<CouncilSkeleton />}>
+               <PetitionList />
+            </Suspense>
+         </ContentSection>
          {isLoggedIn && (
             <FloatingButton
                event={() => {
diff --git a/src/pages/reset/resetId.tsx b/src/pages/reset/resetId.tsx
index c87fa17..141acb0 100644
--- a/src/pages/reset/resetId.tsx
+++ b/src/pages/reset/resetId.tsx
@@ -1,26 +1,20 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import IdForm from '@components/reset/id';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 
-export default function ResetId() {
-   const { setLayout } = useLayout();
 
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         margin: '140px',
-         rounded: true,
-      });
-   });
+export default function ResetId() {
    return (
       <React.Fragment>
-         <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
-         <h2 className='text-base ml-10 font-extrabold mb-[60px]'>ID 찾기</h2>
-         <IdForm />
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[140px]" showNav={true}>
+            <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
+            <h2 className='text-base ml-10 font-extrabold mb-[60px]'>ID 찾기</h2>
+            <IdForm />
+         </ContentSection>
       </React.Fragment>
    );
 }
diff --git a/src/pages/reset/resetIdPw.tsx b/src/pages/reset/resetIdPw.tsx
index e729802..cb30668 100644
--- a/src/pages/reset/resetIdPw.tsx
+++ b/src/pages/reset/resetIdPw.tsx
@@ -1,14 +1,15 @@
 import Box from '@components/ui/box';
 import { Button } from '@components/ui/button';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
+import { HEADING_TEXT } from '@constants/heading';
 import { ROUTES } from '@constants/route';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { Gnb, GnbGoBack } from '@/components/common/gnb';
+import { GnhSubtitle, GnhTitle } from '@/components/common/gnh';
+import { ContentSection, HeaderSection } from '@/components/layouts';
+
 export default function ResetIdPw() {
-   const { setLayout } = useLayout();
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
 
@@ -20,44 +21,39 @@ export default function ResetIdPw() {
       navigate(`${ROUTES.RESET.PW_VERIFY}?${searchParams.toString()}`);
    };
 
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.LOGIN.HEAD,
-         subHeadingText: HEADING_TEXT.RESET_ID_PW.SUBHEAD,
-         headingStyle: HEADING_STYLE.RESET.HEAD,
-         subHeadingStyle: HEADING_STYLE.RESET.SUBHEAD,
-         rounded: true,
-      });
-   });
-
    return (
-      <div className='flex flex-col px-5 mt-10'>
-         <section className='mb-5'>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <HeaderSection className="text-center pt-4 pb-[55px]">
+            <GnhTitle className='mb-[19px]'>{HEADING_TEXT.LOGIN.HEAD}</GnhTitle>
+            <GnhSubtitle>{HEADING_TEXT.RESET_ID_PW.SUBHEAD}</GnhSubtitle>
+         </HeaderSection>
+         <ContentSection showNav={true} className="items-center">
+            <section className='mb-5'>
+               <Box className='mb-4' type='shadow'>
+                  <h3 className='text-xl font-extrabold mb-[10px]'>ID 찾기</h3>
+                  <p className='whitespace-pre-line text-[13px]'>
+                     {'잃어버린 ID에 대해서 휴대전화 번호를 입력하면,\n 문자를 통해서 ID를 제공 받습니다.'}
+                  </p>
+               </Box>
+               <Button size='xl' variant='default' className='rounded-[30px]' onClick={handleFindId}>
+               ID 찾기
+               </Button>
+            </section>
             <Box className='mb-4' type='shadow'>
-               <h3 className='text-xl font-extrabold mb-[10px]'>ID 찾기</h3>
-               <p className='whitespace-pre-line text-[13px]'>
-                  {'잃어버린 ID에 대해서 휴대전화 번호를 입력하면,\n 문자를 통해서 ID를 제공 받습니다.'}
+               <h3 className='text-xl font-extrabold mb-[10px]'>PW 재설정</h3>
+               <p className='text-[13px] whitespace-pre-line'>
+                  {
+                     '잃어버린 PW에 대해서 휴대전화번호를 입력하면,\n 인증번호 제공을 통해 새로운 비밀번호를 설정합니다.'
+                  }
                </p>
             </Box>
-            <Button size='xl' variant='default' className='rounded-[30px]' onClick={handleFindId}>
-               ID 찾기
-            </Button>
-         </section>
-         <Box className='mb-4' type='shadow'>
-            <h3 className='text-xl font-extrabold mb-[10px]'>PW 재설정</h3>
-            <p className='text-[13px] whitespace-pre-line'>
-               {
-                  '잃어버린 PW에 대해서 휴대전화번호를 입력하면,\n 인증번호 제공을 통해 새로운 비밀번호를 설정합니다.'
-               }
-            </p>
-         </Box>
-         <Button size='xl' variant='default' className='rounded-[30px]' onClick={handleVerifyPw}>
+            <Button size='xl' variant='default' className='rounded-[30px]' onClick={handleVerifyPw}>
             PW 재설정
-         </Button>
-      </div>
+            </Button>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/reset/resetPw.tsx b/src/pages/reset/resetPw.tsx
index 3667313..39bd461 100644
--- a/src/pages/reset/resetPw.tsx
+++ b/src/pages/reset/resetPw.tsx
@@ -1,26 +1,15 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import ResetPwForm from '@components/reset/pw';
 import { ROUTES } from '@constants/route';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+
 export default function ResetPw() {
    const location = useLocation();
    const navigate = useNavigate();
    const { state } = location;
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         margin: '140px',
-         rounded: true,
-      });
-   });
 
    React.useEffect(() => {
       if (!state) {
@@ -31,9 +20,14 @@ export default function ResetPw() {
 
    return (
       <React.Fragment>
-         <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
-         <h2 className='text-base ml-10 font-extrabold mb-6'>PW 재설정</h2>
-         <ResetPwForm token={state} />
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[140px]" showNav={true}>
+            <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
+            <h2 className='text-base ml-10 font-extrabold mb-6'>PW 재설정</h2>
+            <ResetPwForm token={state} />
+         </ContentSection>
       </React.Fragment>
    );
 }
diff --git a/src/pages/reset/verifyPw.tsx b/src/pages/reset/verifyPw.tsx
index 45a4a39..5a86748 100644
--- a/src/pages/reset/verifyPw.tsx
+++ b/src/pages/reset/verifyPw.tsx
@@ -1,27 +1,20 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import PwVerifyForm from '@components/reset/code';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 
-export default function VerifyPw() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         margin: '140px',
-         rounded: true,
-      });
-   });
 
+export default function VerifyPw() {
    return (
       <React.Fragment>
-         <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
-         <h2 className='text-base ml-10 font-extrabold mb-6'>PW 재설정</h2>
-         <PwVerifyForm />
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[140px]" showNav={true}>
+            <h1 className='text-2xl font-extrabold ml-10 mb-[14px] mt-[52px]'>Login</h1>
+            <h2 className='text-base ml-10 font-extrabold mb-6'>PW 재설정</h2>
+            <PwVerifyForm />
+         </ContentSection>
       </React.Fragment>
    );
 }
diff --git a/src/pages/rule/index.tsx b/src/pages/rule/index.tsx
index 4ccba47..091c604 100644
--- a/src/pages/rule/index.tsx
+++ b/src/pages/rule/index.tsx
@@ -1,54 +1,31 @@
-import Board from '@components/ui/board';
-import IntersectionBox from '@components/ui/box/intersectionBox';
-import { Spinner } from '@components/ui/spinner/indext';
-import { Date } from '@components/ui/text/board';
-import { HEADING_TEXT, HEADING_STYLE } from '@constants/heading';
-import { useGetRule } from '@hooks/api/rule/useGetRule';
-import { RuleContentResponse } from '@hooks/api/rule/useGetRule';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
-import { useLayout } from '@hooks/useLayout';
-import React from 'react';
+import { Gnb, GnbGoBack, GnbTitle } from '@components/common/gnb';
+import { GnhTitle } from '@components/common/gnh';
+import { ContentSection, HeaderSection } from '@components/layouts';
+import Selector from '@components/ui/selector';
+import ConferenceSkeleton from '@components/ui/skeleton/conference';
+import { HEADING_TEXT, COUNCIL_LIST } from '@constants/heading';
+import React, { Suspense, lazy } from 'react';
 
-export default function RuleBoard() {
-   const { setLayout } = useLayout();
-   const { data: rule, fetchNextPage, isFetchingNextPage } = useGetRule();
-
-   const intersectionRef = useInfiniteScroll(fetchNextPage);
 
-   useEffectOnce(() => {
-      setLayout({
-         title: HEADING_TEXT.COUNCIL.HEAD,
-         backButton: true,
-         isMain: false,
-         fullscreen: false,
-         headingText: HEADING_TEXT.COUNCIL.HEAD,
-         subHeadingText: HEADING_TEXT.RULE.SUBHEAD,
-         headingStyle: HEADING_STYLE.COUNCIL.HEAD,
-         subHeadingStyle: HEADING_STYLE.COUNCIL.SUBHEAD,
-         rounded: true,
-         dropDown: HEADING_STYLE.COUNCIL.DROPDOWN,
-      });
-   });
+const RuleList = lazy(() => import('@components/rule/index'));
 
-   const openFile = (item: RuleContentResponse) => {
-      window.open(item.files[0].url);
-   };
 
+export default function RuleBoard() {
    return (
-      <Board>
-         {rule?.pages.map((page) =>
-            page.content.map((item) => (
-               <Board.Cell key={item.id} onClick={() => openFile(item)}>
-                  <div className='flex gap-2 p-3'>
-                     <p className='grow text-center truncate'>{item.title}</p>
-                     <Date date={item.createdAt} />
-                  </div>
-               </Board.Cell>
-            )),
-         )}
-         <IntersectionBox ref={intersectionRef} />
-         {isFetchingNextPage && <Spinner />}
-      </Board>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+            <GnbTitle>{HEADING_TEXT.COUNCIL.HEAD}</GnbTitle>
+         </Gnb>
+         <HeaderSection className="pt-[38px] ml-[29px] pb-[30px]">
+            <GnhTitle className="mb-2">{HEADING_TEXT.COUNCIL.HEAD}</GnhTitle>
+            <Selector list={COUNCIL_LIST} subHeadingText={HEADING_TEXT.RULE.SUBHEAD} />
+         </HeaderSection>
+         <ContentSection showNav={true}>
+            <Suspense fallback={<ConferenceSkeleton />}>
+               <RuleList />
+            </Suspense>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index 8ade374..c0ace4f 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -1,28 +1,23 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import VerifyForm from '@components/signup/verify';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 
-export default function SignupVerify() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: true,
-         margin: '140px',
-         rounded: true,
-      });
-   });
 
+export default function SignupVerify() {
    return (
-      <div className='flex flex-col px-10 pt-12'>
-         <h1 className='text-2xl font-extrabold mb-[14px]'>Sign up</h1>
-         <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
-         <h3 className="text-sm before:content-['●'] flex items-center gap-1 mb-8">학생 인증</h3>
-         <VerifyForm />
-      </div>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[140px]">
+            <div className='flex flex-col px-10 pt-12'>
+               <h1 className='text-2xl font-extrabold mb-[14px]'>Sign up</h1>
+               <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
+               <h3 className="text-sm before:content-['●'] flex items-center gap-1 mb-8">학생 인증</h3>
+               <VerifyForm />
+            </div>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/signup/info.tsx b/src/pages/signup/info.tsx
index e4fde70..9a576a4 100644
--- a/src/pages/signup/info.tsx
+++ b/src/pages/signup/info.tsx
@@ -1,11 +1,12 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import InfoForm from '@components/signup/info';
 import { ROUTES } from '@constants/route';
 import { useAlert } from '@hooks/useAlert';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React, { useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
+
 export default function SignupInfo() {
    const navigate = useNavigate();
    const location = useLocation();
@@ -13,18 +14,6 @@ export default function SignupInfo() {
    const { state } = location || {};
    const data = state?.data ?? null;
    const signupToken = data?.signupToken ?? null;
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: true,
-         margin: '41px',
-         rounded: true,
-      });
-   });
 
    const handleVerify = useCallback(() => {
       if (!data) {
@@ -38,11 +27,18 @@ export default function SignupInfo() {
    }, [handleVerify]);
 
    return (
-      <div className='flex flex-col px-10 pt-12'>
-         <h1 className='text-2xl font-extrabold mb-[14px]'>Sign up</h1>
-         <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
-         <h3 className="text-sm before:content-['●'] flex items-center gap-1 mb-8">회원 정보 입력</h3>
-         <InfoForm signupToken={signupToken} />
-      </div>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[41px] mb-5">
+            <div className='flex flex-col px-10 pt-12'>
+               <h1 className='text-2xl font-extrabold mb-[14px]'>Sign up</h1>
+               <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
+               <h3 className="text-sm before:content-['●'] flex items-center gap-1 mb-8">회원 정보 입력</h3>
+               <InfoForm signupToken={signupToken} />
+            </div>
+         </ContentSection>
+      </React.Fragment>
    );
 }
diff --git a/src/pages/signup/success.tsx b/src/pages/signup/success.tsx
index 48499ba..1b80c34 100644
--- a/src/pages/signup/success.tsx
+++ b/src/pages/signup/success.tsx
@@ -1,45 +1,33 @@
 import SvgIcon from '@components/common/icon/SvgIcon';
 import { Button } from '@components/ui/button';
 import { ROUTES } from '@constants/route';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { ContentSection, HeaderSection } from '@/components/layouts';
+
 export default function SignupSuccess() {
-   const { setLayout } = useLayout();
    const navigate = useNavigate();
 
    const handleGoLogin = () => {
       navigate(ROUTES.LOGIN);
    };
 
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: true,
-         margin: '140px',
-         rounded: true,
-      });
-   });
    return (
-      <div className='w-full mt-[120px]'>
-         <div className='flex flex-col items-center justify-center gap-3'>
-            <SvgIcon id='success' width={38} height={38} />
-            <h2 className='font-bold text-xl'>회원가입 완료</h2>
-            <p className='text-xl mb-4'>회원가입이 완료되었습니다.</p>
-            <Button
-               variant='default'
-               asChild={true}
-               size='md'
-               className='rounded-[20px]'
-               onClick={handleGoLogin}
-            >
-               로그인하러 가기
-            </Button>
-         </div>
-      </div>
+      <>
+         <HeaderSection className='pt-[45px] ml-[29px] pb-[53px]'>.</HeaderSection>
+         <ContentSection>
+            <div className='w-full mt-[120px]'>
+               <div className='flex flex-col items-center justify-center gap-3'>
+                  <SvgIcon id='success' width={38} height={38} />
+                  <h2 className='font-bold text-xl'>회원가입 완료</h2>
+                  <p className='text-xl mb-4'>회원가입이 완료되었습니다.</p>
+                  <Button className='rounded-[20px]' size='md' onClick={handleGoLogin}>
+                     로그인하러 가기
+                  </Button>
+               </div>
+            </div>
+         </ContentSection>
+      </>
    );
 }
diff --git a/src/pages/signup/terms.tsx b/src/pages/signup/terms.tsx
index 3ebd06a..f7b9a2f 100644
--- a/src/pages/signup/terms.tsx
+++ b/src/pages/signup/terms.tsx
@@ -1,28 +1,23 @@
+import { Gnb, GnbGoBack } from '@components/common/gnb';
+import { ContentSection } from '@components/layouts';
 import Term from '@components/signup/term';
-import { useEffectOnce } from '@hooks/useEffectOnce';
-import { useLayout } from '@hooks/useLayout';
 import React from 'react';
 
-export default function SignupTerms() {
-   const { setLayout } = useLayout();
-
-   useEffectOnce(() => {
-      setLayout({
-         title: null,
-         backButton: true,
-         isMain: false,
-         fullscreen: true,
-         margin: '30px',
-         rounded: true,
-      });
-   });
 
+export default function SignupTerms() {
    return (
-      <div className='px-10'>
-         <h1 className='text-2xl font-extrabold mb-[14px] mt-[53px]'>Sign up</h1>
-         <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
-         <h3 className="text-sm before:content-['●'] flex items-center gap-1">이용약관동의</h3>
-         <Term />
-      </div>
+      <React.Fragment>
+         <Gnb>
+            <GnbGoBack />
+         </Gnb>
+         <ContentSection className="mt-[30px] mb-5">
+            <div className='px-10 pt-[60px]'>
+               <h1 className='text-2xl font-extrabold mb-[14px]'>Sign up</h1>
+               <h2 className='text-base font-extrabold mb-6'>단국대학교 총학생회 회원가입</h2>
+               <h3 className="text-sm before:content-['●'] flex items-center gap-1">이용약관동의</h3>
+               <Term />
+            </div>
+         </ContentSection>
+      </React.Fragment>
    );
 }