Feat/#112: 공지사항 페이지에서 학교, 학과 공지사항을 분리해서 보여줄 수 있는 UI 구현

src/App.tsx

@@ -13,7 +13,7 @@ const App = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/announcement" element={<Announcement />} />
+        <Route path="/announcement/*" element={<Announcement />} />
         <Route path="/my" element={<My />} />
         <Route path="/map" element={<Map />} />
         <Route path="/major-decision/*" element={<MajorDecision />} />

src/components/Button/index.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;
   onClick?: React.MouseEventHandler<HTMLElement>;
   disabled?: boolean;

src/components/Card/InformCard/index.test.tsx

@@ -97,6 +97,7 @@ describe('InformCard 컴포넌트 테스트', () => {
             icon={INFORM_CARD['ANNOUNCEMENT'].icon}
             title={INFORM_CARD['ANNOUNCEMENT'].title}
             onClick={INFORM_CARD['ANNOUNCEMENT'].onClick}
+            majorRequired={true}
           />
         </ModalsProvider>
       </MajorContext.Provider>,
@@ -121,6 +122,7 @@ describe('InformCard 컴포넌트 테스트', () => {
             icon={INFORM_CARD['ANNOUNCEMENT'].icon}
             title={INFORM_CARD['ANNOUNCEMENT'].title}
             onClick={INFORM_CARD['ANNOUNCEMENT'].onClick}
+            majorRequired={true}
           />
         </ModalsProvider>
       </MajorContext.Provider>,
@@ -151,6 +153,7 @@ describe('InformCard 컴포넌트 테스트', () => {
             icon={INFORM_CARD['GRADUATION'].icon}
             title={INFORM_CARD['GRADUATION'].title}
             onClick={INFORM_CARD['GRADUATION'].onClick}
+            majorRequired={true}
           />
         </ModalsProvider>
       </MajorContext.Provider>,

src/components/Card/InformCard/index.tsx

@@ -15,17 +15,23 @@ import { setSize } from '@utils/styles/size';
 interface InformCardProps {
   icon: IconKind & ('school' | 'notification');
   title: string;
+  majorRequired: boolean;
   onClick: () => void;
 }
 
-const InformCard = ({ icon, title, onClick }: InformCardProps) => {
+const InformCard = ({
+  icon,
+  title,
+  majorRequired,
+  onClick,
+}: InformCardProps) => {
   const { major } = useMajor();
   const { routerTo } = useRouter();
   const routerToMajorDecision = () => routerTo('/major-decision');
   const { openModal, closeModal } = useModals();
 
   const handleMajorModal = () => {
-    if (major) {
+    if (!majorRequired || major) {
       onClick();
       return;
     }

src/mocks/handlers/announceHandlers.ts

@@ -4,25 +4,47 @@ import { RequestHandler, rest } from 'msw';
 export const announceHandlers: RequestHandler[] = [
   rest.get(`${SERVER_URL}/api/announcement`, (req, res, ctx) => {
     const query = req.url.searchParams;
-    if (query.get('major') === '컴퓨터인공지능학부') {
+    if (query.get('major') === 'undefined') {
+      return res(
+        ctx.status(200),
+        ctx.json([
+          {
+            title:
+              '★대학원생 취·창업 역량 강화 프로그램★ 4단계 BK21 대학원혁신지원사업',
+            link: 'https://www.pknu.ac.kr/main/163?action=view&no=711472&cd=10001',
+            uploadDate: '2023-07-17',
+          },
+          {
+            title: '2023-2학기 재(복)학생, 재입학생 등록금 납부 안내',
+            link: 'https://www.pknu.ac.kr/main/163?action=view&no=711433&cd=10001',
+            uploadDate: '2023-07-14',
+          },
+          {
+            title: '2023-2학기 재(복)학생 등록금 분할납부 신청 안내',
+            link: 'https://www.pknu.ac.kr/main/163?action=view&no=711431&cd=10001',
+            uploadDate: '2023-07-14',
+          },
+        ]),
+      );
+    } else if (query.get('major') === '컴퓨터인공지능학부') {
       return res(
         ctx.status(200),
         ctx.json([
           {
             title: '2023 정보융합대학 프로그래밍 경진대회 개최 (5/17)',
-            path: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
-            date: '2023-04-27',
+            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
+            uploadDate: '2023-04-27',
           },
           {
             title: '★ (05/01부터 적용) 출석 인정 신청 방법 안내 ★',
-            path: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
-            date: '2023-04-26	',
+            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
+            uploadDate: '2023-04-26	',
           },
           {
             title:
               '2023-1학기 (재)부경대학교발전기금재단 정효택장학생 선발 안내(5/8~5/11)',
-            path: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
-            date: '2023-04-20',
+            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
+            uploadDate: '2023-04-20',
           },
         ]),
       );

src/pages/Announcement/index.tsx

@@ -1,16 +1,76 @@
 import fetchAnnounceList from '@apis/Suspense/fetch-announce-list';
+import Button from '@components/Button';
 import AnnounceList from '@components/Card/AnnounceCard/AnnounceList';
 import AnnounceCardSkeleton from '@components/Card/AnnounceCard/Skeleton';
+import AlertModal from '@components/Modal/AlertModal';
+import { MODAL_MESSAGE } from '@constants/modal-messages';
+import { css } from '@emotion/react';
 import useMajor from '@hooks/useMajor';
+import useModals from '@hooks/useModals';
+import useRouter from '@hooks/useRouter';
+import { THEME } from '@styles/ThemeProvider/theme';
 import { Suspense } from 'react';
 
 const Announcement = () => {
   const { major } = useMajor();
+  const { routerTo } = useRouter();
+  const { openModal, closeModal } = useModals();
+  const routerToMajorDecision = () => routerTo('/major-decision');
+  const announceKeyword = decodeURI(window.location.pathname.split('/')[2]);
+
+  const handleMajorAnnouncements = () => {
+    if (!major) {
+      openModal(AlertModal, {
+        message: MODAL_MESSAGE.ALERT.SET_MAJOR,
+        buttonMessage: '전공선택하러 가기',
+        iconKind: 'plus',
+        onClose: () => closeModal(AlertModal),
+        routerTo: () => {
+          closeModal(AlertModal);
+          routerToMajorDecision();
+        },
+      });
+      return;
+    }
+    routerTo(`${major}`);
+  };
+
+  const isKeywordUndefined = () => announceKeyword === 'undefined';
 
   return (
     <>
+      <div
+        css={css`
+          display: flex;
+        `}
+      >
+        <Button
+          onClick={() => routerTo('')}
+          css={css`
+            border-bottom: ${isKeywordUndefined() &&
+            `3px solid ${THEME.PRIMARY}`};
+            border-radius: 0px;
+            background-color: ${THEME.TEXT.WHITE};
+            color: ${isKeywordUndefined() ? THEME.PRIMARY : THEME.TEXT.BLACK};
+          `}
+        >
+          학교 공지사항
+        </Button>
+        <Button
+          onClick={() => handleMajorAnnouncements()}
+          css={css`
+            border-bottom: ${!isKeywordUndefined() &&
+            `3px solid ${THEME.PRIMARY}`};
+            border-radius: 0px;
+            background-color: ${THEME.TEXT.WHITE};
+            color: ${isKeywordUndefined() ? THEME.TEXT.BLACK : THEME.PRIMARY};
+          `}
+        >
+          학과 공지사항
+        </Button>
+      </div>
       <Suspense fallback={<AnnounceCardSkeleton length={30} />}>
-        <AnnounceList resource={fetchAnnounceList(major)} />
+        <AnnounceList resource={fetchAnnounceList(announceKeyword)} />
       </Suspense>
     </>
   );

src/pages/Home/index.tsx

@@ -34,11 +34,13 @@ const Home = () => {
         <InformCard
           icon="notification"
           title="공지사항"
+          majorRequired={false}
           onClick={() => routerTo('/announcement')}
         />
         <InformCard
           icon="school"
           title="졸업요건"
+          majorRequired={true}
           onClick={() => routerToGraduationRequired()}
         />
       </div>