diff --git a/src/App.tsx b/src/App.tsx index 3323c1e5..95221ab2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ const App = () => {
} /> - } /> + } /> } /> } /> } /> diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index b4ba9351..77db1bb8 100644 --- a/src/components/Button/index.tsx +++ b/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 { children?: ReactNode; onClick?: React.MouseEventHandler; disabled?: boolean; diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx index 5fa1ccea..7e31664b 100644 --- a/src/components/Card/InformCard/index.test.tsx +++ b/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} /> , @@ -121,6 +122,7 @@ describe('InformCard 컴포넌트 테스트', () => { icon={INFORM_CARD['ANNOUNCEMENT'].icon} title={INFORM_CARD['ANNOUNCEMENT'].title} onClick={INFORM_CARD['ANNOUNCEMENT'].onClick} + majorRequired={true} /> , @@ -151,6 +153,7 @@ describe('InformCard 컴포넌트 테스트', () => { icon={INFORM_CARD['GRADUATION'].icon} title={INFORM_CARD['GRADUATION'].title} onClick={INFORM_CARD['GRADUATION'].onClick} + majorRequired={true} /> , diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx index 1565407d..af68990b 100644 --- a/src/components/Card/InformCard/index.tsx +++ b/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; } diff --git a/src/mocks/handlers/announceHandlers.ts b/src/mocks/handlers/announceHandlers.ts index 93428cbe..9933a6db 100644 --- a/src/mocks/handlers/announceHandlers.ts +++ b/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', }, ]), ); diff --git a/src/pages/Announcement/index.tsx b/src/pages/Announcement/index.tsx index 09ef7214..cffd7664 100644 --- a/src/pages/Announcement/index.tsx +++ b/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 ( <> +
+ + +
}> - + ); diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 70ecabc3..b0658636 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -34,11 +34,13 @@ const Home = () => { routerTo('/announcement')} /> routerToGraduationRequired()} />