diff --git a/src/@types/announcement.ts b/src/@types/announcement.ts index 0834ac7a..db26c25f 100644 --- 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 index feea7006..ea8b12f3 100644 --- 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 index b839a305..d6f28700 100644 --- 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 | AxiosError | null; +type Resource = + | AxiosResponse + | 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) => ( -
- -
- )) - : null} + {pinned.map((announce, idx) => ( +
+ +
+ ))} + {normal.map((announce, idx) => ( +
+ +
+ ))} ); }; diff --git a/src/components/Card/AnnounceCard/index.test.tsx b/src/components/Card/AnnounceCard/index.test.tsx index 201e4db5..6558704d 100644 --- 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(, { 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 index a5326084..cab19336 100644 --- 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 && } {title}