Merge pull request #119 from GDSC-PKNU-21-22/feat/#117

Feat/#117: 공지사항 고정, 일반 구분 UI 구현
GDSC-PKNU-Official · Aug 1, 2023 · 6bb6ed9 · 6bb6ed9
2 parents 322854f + d23ac6e
commit 6bb6ed9
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 53 deletions.
diff --git a/src/@types/announcement.ts b/src/@types/announcement.ts
@@ -1,9 +1,13 @@
+type AnnounceItemType = '고정' | '일반';
+
 export interface AnnounceItem {
   id: number;
-  major: string;
   title: string;
   link: string;
   content: string;
   uploadDate: string;
-  graduate: string | null;
 }
+
+export type AnnounceItemList = {
+  [key in AnnounceItemType]: AnnounceItem[];
+};
diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts
@@ -12,4 +12,5 @@ export type IconKind =
   | 'right'
   | 'checkedRadio'
   | 'uncheckedRadio'
-  | 'cancel';
+  | 'cancel'
+  | 'speaker';
diff --git a/src/components/Card/AnnounceCard/AnnounceList/index.tsx b/src/components/Card/AnnounceCard/AnnounceList/index.tsx
@@ -1,9 +1,13 @@
-import { AnnounceItem } from '@type/announcement';
+import { AnnounceItemList } from '@type/announcement';
 import { AxiosError, AxiosResponse } from 'axios';
 
 import AnnounceCard from '..';
 
-type Resource = AxiosResponse<AnnounceItem[]> | AxiosError | null;
+type Resource =
+  | AxiosResponse<AnnounceItemList>
+  | AnnounceItemList
+  | AxiosError
+  | null;
 
 interface AnnounceListProps {
   resource: {
@@ -14,15 +18,23 @@ interface AnnounceListProps {
 const AnnounceList = ({ resource }: AnnounceListProps) => {
   const announceList: Resource = resource.read();
 
+  if (announceList === null || announceList instanceof Error) {
+    return null;
+  }
+  const { 고정: pinned, 일반: normal } = announceList as AnnounceItemList;
+
   return (
     <>
-      {Array.isArray(announceList)
-        ? announceList.map((announce, idx) => (
-            <div key={idx}>
-              <AnnounceCard {...announce} />
-            </div>
-          ))
-        : null}
+      {pinned.map((announce, idx) => (
+        <div key={idx}>
+          <AnnounceCard {...announce} pinned={true} />
+        </div>
+      ))}
+      {normal.map((announce, idx) => (
+        <div key={idx}>
+          <AnnounceCard {...announce} />
+        </div>
+      ))}
     </>
   );
 };

diff --git a/src/components/Card/AnnounceCard/index.test.tsx b/src/components/Card/AnnounceCard/index.test.tsx
@@ -1,7 +1,7 @@
 import http from '@apis/http';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { AnnounceItem } from '@type/announcement';
+import { AnnounceItemList } from '@type/announcement';
 import { MemoryRouter } from 'react-router-dom';
 
 import AnnounceCard from '.';
@@ -29,16 +29,18 @@ describe('공지사항 카드 컴포넌트 테스트', () => {
     const axiosResult = await http.get(
       '/api/announcement?major=컴퓨터인공지능학부',
     );
-    const announceList: AnnounceItem[] = axiosResult.data;
+    const announceList: AnnounceItemList = axiosResult.data;
 
-    announceList.forEach(async (annouce) => {
+    const { 고정, 일반 } = announceList;
+
+    일반.forEach(async (annouce) => {
       render(<AnnounceCard {...annouce} />, { wrapper: MemoryRouter });
     });
 
     const annouceCards = screen.getAllByTestId('card');
     annouceCards.forEach(async (card, idx) => {
       await userEvent.click(card);
-      expect(window.location.href).toBe(announceList[idx].link);
+      expect(window.location.href).toBe(일반[idx].link);
     });
   });
 });
diff --git a/src/components/Card/AnnounceCard/index.tsx b/src/components/Card/AnnounceCard/index.tsx
@@ -1,9 +1,19 @@
+import Icon from '@components/Icon';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { AnnounceItem } from '@type/announcement';
 
-const AnnounceCard = ({ title, link, uploadDate }: AnnounceItem) => {
+interface AnnounceCardProps extends AnnounceItem {
+  pinned?: boolean;
+}
+
+const AnnounceCard = ({
+  title,
+  link,
+  uploadDate,
+  pinned = false,
+}: AnnounceCardProps) => {
   const onClick = () => {
     window.location.href = link;
   };
@@ -15,6 +25,7 @@ const AnnounceCard = ({ title, link, uploadDate }: AnnounceItem) => {
           align-items: center;
         `}
       >
+        {pinned && <Icon kind="speaker" color={THEME.PRIMARY} />}
         <span>{title}</span>
         <div
           css={css`

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -15,6 +15,7 @@ import {
   MdRadioButtonUnchecked,
   MdRadioButtonChecked,
   MdOutlineCancel,
+  MdCampaign,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -32,6 +33,7 @@ const ICON: { [key in IconKind]: IconType } = {
   checkedRadio: MdRadioButtonChecked,
   uncheckedRadio: MdRadioButtonUnchecked,
   cancel: MdOutlineCancel,
+  speaker: MdCampaign,
 };
 
 interface IconProps {

diff --git a/src/mocks/handlers/announceHandlers.ts b/src/mocks/handlers/announceHandlers.ts
@@ -7,46 +7,85 @@ export const announceHandlers: RequestHandler[] = [
     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',
-          },
-        ]),
+        ctx.json({
+          고정: [
+            {
+              title: '2023-2학기 국가근로장학금 대학신청 일정 안내',
+              link: 'https://www.pknu.ac.kr/main/163?action=view&no=711641',
+              uploadDate: '2023-08-01',
+            },
+            {
+              title: '2023-2학기 재(복)학생, 재입학생 등록금 납부 안내',
+              link: 'https://www.pknu.ac.kr/main/163?action=view&no=711433',
+              uploadDate: '2023-07-14	',
+            },
+            {
+              title: '2023-2학기 재(복)학생 등록금 분할납부 신청 안내',
+              link: 'https://www.pknu.ac.kr/main/163?action=view&no=711431',
+              uploadDate: '2023-07-14',
+            },
+          ],
+          일반: [
+            {
+              title: '2023 정보융합대학 프로그래밍 경진대회 개최 (5/17)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
+              uploadDate: '2023-04-27',
+            },
+            {
+              title: '★ (05/01부터 적용) 출석 인정 신청 방법 안내 ★',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
+              uploadDate: '2023-04-26	',
+            },
+            {
+              title:
+                '2023-1학기 (재)부경대학교발전기금재단 정효택장학생 선발 안내(5/8~5/11)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
+              uploadDate: '2023-04-20',
+            },
+          ],
+        }),
       );
     } else if (query.get('major') === '컴퓨터인공지능학부') {
       return res(
         ctx.status(200),
-        ctx.json([
-          {
-            title: '2023 정보융합대학 프로그래밍 경진대회 개최 (5/17)',
-            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
-            uploadDate: '2023-04-27',
-          },
-          {
-            title: '★ (05/01부터 적용) 출석 인정 신청 방법 안내 ★',
-            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
-            uploadDate: '2023-04-26	',
-          },
-          {
-            title:
-              '2023-1학기 (재)부경대학교발전기금재단 정효택장학생 선발 안내(5/8~5/11)',
-            link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
-            uploadDate: '2023-04-20',
-          },
-        ]),
+        ctx.json({
+          고정: [
+            {
+              title: '2023 정보융합대학 프로그래밍 경진대회 개최 (5/17)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
+              uploadDate: '2023-04-27',
+            },
+            {
+              title: '★ (05/01부터 적용) 출석 인정 신청 방법 안내 ★',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
+              uploadDate: '2023-04-26	',
+            },
+            {
+              title:
+                '2023-1학기 (재)부경대학교발전기금재단 정효택장학생 선발 안내(5/8~5/11)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
+              uploadDate: '2023-04-20',
+            },
+          ],
+          일반: [
+            {
+              title: '2023 정보융합대학 프로그래밍 경진대회 개최 (5/17)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934358',
+              uploadDate: '2023-04-27',
+            },
+            {
+              title: '★ (05/01부터 적용) 출석 인정 신청 방법 안내 ★',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934257',
+              uploadDate: '2023-04-26	',
+            },
+            {
+              title:
+                '2023-1학기 (재)부경대학교발전기금재단 정효택장학생 선발 안내(5/8~5/11)',
+              link: 'https://ce.pknu.ac.kr/ce/1814?action=view&no=9934104',
+              uploadDate: '2023-04-20',
+            },
+          ],
+        }),
       );
     }
   }),