) => {
+ if (!inputRef.current) return;
+ e.preventDefault();
+ if (inputRef.current.value.length === 0) {
+ addToast(TOAST_MESSAGES.SEARCH_KEYWORD);
+ return;
+ }
+
+ routerTo(PATH.SEARCH_ANNOUNCEMENT(category, inputRef.current.value));
+ inputRef.current.value = '';
+ inputRef.current.blur();
+ };
+
+ return (
+
+
+
+ handleSubmit}>
+
+
+
+
+ );
+};
+
+export default AnnounceSearch;
+
+const StyledForm = styled.form`
+ display: flex;
+ position: relative;
+`;
+
+const StyledInput = styled.input`
+ -webkit-appearance: none;
+ appearance: none;
+
+ width: 100%;
+ padding: 10px;
+ border: 0;
+ border-radius: 15px;
+ background-color: #7a9dd30f;
+ color: #7a9dd366;
+ font-size: 14px;
+ text-indent: 5px;
+
+ &::placeholder {
+ color: #7a9dd366;
+ font-size: 14px;
+ }
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
+ &:focus {
+ outline: none;
+ box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+ }
+`;
+
+const StyledIconWrapper = styled.button`
+ position: absolute;
+ right: 0.5rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: transparent;
+`;
diff --git a/src/pages/Announcement/components/AnnounceSearchList.tsx b/src/pages/Announcement/components/AnnounceSearchList.tsx
new file mode 100644
index 00000000..8788bf2c
--- /dev/null
+++ b/src/pages/Announcement/components/AnnounceSearchList.tsx
@@ -0,0 +1,36 @@
+import AnnounceCard from '@components/Card/AnnounceCard';
+import { AnnounceItem } from '@type/announcement';
+import React, { Fragment } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import AnnounceNotFound from './AnnounceNotFound';
+
+interface AnnounceSearchProps {
+ announceList: AnnounceItem[];
+}
+
+const AnnounceSearchList = ({ announceList }: AnnounceSearchProps) => {
+ const { search } = useLocation();
+
+ const searchKeyword = decodeURI(search.split('=')[1]);
+ const searchResult = announceList.filter((announceItem) =>
+ announceItem.title.includes(searchKeyword),
+ );
+ const hasSearchResult = () => searchResult.length !== 0;
+
+ return (
+
+ {hasSearchResult() ? (
+ searchResult.map((announce, idx) => (
+
+
+
+ ))
+ ) : (
+
+ )}
+
+ );
+};
+
+export default AnnounceSearchList;
diff --git a/src/pages/Announcement/components/AnnounceTypeButtons.tsx b/src/pages/Announcement/components/AnnounceTypeButtons.tsx
new file mode 100644
index 00000000..1b309767
--- /dev/null
+++ b/src/pages/Announcement/components/AnnounceTypeButtons.tsx
@@ -0,0 +1,35 @@
+import Button from '@components/Button';
+import { css } from '@emotion/react';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+interface AnnounceTypeButtonsProps {
+ type: '일반' | '고정';
+ isActive: boolean;
+ onClick: () => void;
+}
+
+const AnnounceTypeButtons = ({
+ type,
+ isActive,
+ onClick,
+}: AnnounceTypeButtonsProps) => {
+ return (
+
+ );
+};
+
+export default AnnounceTypeButtons;
diff --git a/src/pages/Announcement/components/index.ts b/src/pages/Announcement/components/index.ts
new file mode 100644
index 00000000..2bce755e
--- /dev/null
+++ b/src/pages/Announcement/components/index.ts
@@ -0,0 +1,4 @@
+export { default as AnnounceContainer } from './AnnounceContainer';
+export { default as AnnounceSearch } from './AnnounceSearch';
+export { default as AnnounceSearchList } from './AnnounceSearchList';
+export { default as AnnounceTypeButtons } from './AnnounceTypeButtons';
diff --git a/src/pages/Announcement/index.tsx b/src/pages/Announcement/index.tsx
index 69c17be7..4044c138 100644
--- a/src/pages/Announcement/index.tsx
+++ b/src/pages/Announcement/index.tsx
@@ -1,136 +1,41 @@
-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 { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
-import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
+import {
+ ANNOUNCEMENT_CATEGORY,
+ ANNOUNCEMENT_TITLE,
+} from '@constants/announcement';
+import PATH from '@constants/path';
import useMajor from '@hooks/useMajor';
-import useModals, { modals } from '@hooks/useModals';
-import useRouter from '@hooks/useRouter';
-import { THEME } from '@styles/ThemeProvider/theme';
-import { Suspense } from 'react';
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { AnnounceContainer } from './components';
const Announcement = () => {
const { major } = useMajor();
- const { routerTo } = useRouter();
- const { openModal, closeModal } = useModals();
-
- const announceKeyword = decodeURI(window.location.pathname.split('/')[2]);
- const isActiveSchoolAnnouncement = () => announceKeyword === 'undefined';
-
- const routerToMajorDecision = () => routerTo('/major-decision');
- const routerToSchoolAnnouncement = () => routerTo('');
- const routerToMajorAnnouncement = () => {
- if (!major) {
- openModal(modals.alert, {
- message: MODAL_MESSAGE.ALERT.SET_MAJOR,
- buttonMessage: MODAL_BUTTON_MESSAGE.SET_MAJOR,
- iconKind: 'plus',
- onClose: () => closeModal(modals.alert),
- routerTo: () => {
- closeModal(modals.alert);
- routerToMajorDecision();
- },
- });
- }
- routerTo(`${major}`);
- };
return (
-
-
-
-
-
-
-
- }>
-
+
-
-
-
+ }
+ />
+
+ }
+ />
+
);
};
export default Announcement;
-
-const Container = styled.div`
- overflow-x: hidden;
-`;
-
-const ButtonContainer = styled.div`
- width: 100%;
- display: flex;
- position: relative;
- overflow-x: none;
-`;
-
-const ButtonBottomBar = styled.span<{ isActiveSchool: boolean }>`
- &:before {
- content: '';
- position: absolute;
- bottom: 0;
- left: ${({ isActiveSchool }) => (isActiveSchool ? '0' : '50%')};
- width: 50%;
- height: 3px;
- background-color: ${THEME.PRIMARY};
- transition: left 0.3s ease-in-out;
- }
-`;
-
-const AnnounceContainer = styled.div<{ isActiveSchool: boolean }>`
- width: 100%;
- overflow: hidden;
- animation: ${({ isActiveSchool }) =>
- isActiveSchool ? AnnounceSlideLeft : AnnounceSlideRight}
- 0.3s forwards;
-`;
-
-const AnnounceSlideRight = keyframes`
- from {
- transform: translateX(-100%);
- }
- to {
- transform: translateX(0%);
- }
-`;
-
-const AnnounceSlideLeft = keyframes`
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0%);
- }
-`;
diff --git a/src/pages/Home/Home.test.tsx b/src/pages/Home/Home.test.tsx
index 4a962a09..1cc65f48 100644
--- a/src/pages/Home/Home.test.tsx
+++ b/src/pages/Home/Home.test.tsx
@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
import Home from './index';
-describe('App 컴포넌트 테스트', () => {
+describe('Home Page 컴포넌트 테스트', () => {
it('페이지에 공지사항 및 졸업요건 컴포넌트가 렌더링된다.', () => {
render(
@@ -18,7 +18,7 @@ describe('App 컴포넌트 테스트', () => {
wrapper: MemoryRouter,
},
);
- const notificationText = screen.getByText('공지사항');
+ const notificationText = screen.getByText('학교 공지사항');
expect(notificationText).toBeInTheDocument();
const requirementText = screen.getByText('졸업요건');
diff --git a/src/pages/Home/components/InformCardList.tsx b/src/pages/Home/components/InformCardList.tsx
new file mode 100644
index 00000000..e7102cba
--- /dev/null
+++ b/src/pages/Home/components/InformCardList.tsx
@@ -0,0 +1,37 @@
+import InformCard from '@components/Card/InformCard';
+import { ANNOUNCEMENT_TITLE } from '@constants/announcement';
+import PATH from '@constants/path';
+import useMajor from '@hooks/useMajor';
+import useRouter from '@hooks/useRouter';
+import openLink from '@utils/router/openLink';
+import React from 'react';
+
+const InformCardList = () => {
+ const { graduationLink } = useMajor();
+ const { routerTo } = useRouter();
+
+ return (
+ <>
+ routerTo(PATH.NORMAL_ANNOUNCEMENT('school'))}
+ />
+ routerTo(PATH.NORMAL_ANNOUNCEMENT('major'))}
+ />
+ openLink(graduationLink)}
+ />
+
+ );
+};
+
+export default InformCardList;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index e4eff870..5bbe61b6 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,49 +1,15 @@
-import http from '@apis/http';
-import InformCard from '@components/Card/InformCard';
import Carousel from '@components/Carousel';
import styled from '@emotion/styled';
-import useMajor from '@hooks/useMajor';
-import useRouter from '@hooks/useRouter';
import { THEME } from '@styles/ThemeProvider/theme';
-import { AxiosResponse } from 'axios';
-import { useEffect, useState } from 'react';
-const Home = () => {
- const [graduationLink, setGraduationLink] = useState('');
- const { routerTo } = useRouter();
- const { major } = useMajor();
-
- const routerToGraduationRequiredPage = (graduationLink: string | null) => {
- graduationLink && window.open(graduationLink, '_blank');
- };
-
- useEffect(() => {
- if (!major) return;
- const getGraduationLink = async () => {
- const response: AxiosResponse = await http.get(
- `/api/graduation?major=${major}`,
- );
- setGraduationLink(response.data.link);
- };
- getGraduationLink();
- }, [major]);
+import InformCardList from './components/InformCardList';
+const Home = () => {
return (
학교
- routerTo('/announcement')}
- />
- routerToGraduationRequiredPage(graduationLink)}
- />
+
비교과
@@ -76,8 +42,3 @@ const InformTitle = styled.div`
font-size: 20px;
font-weight: bold;
`;
-
-interface GraduationLink {
- department: string;
- link: string | null;
-}
diff --git a/src/pages/MajorDecision/index.test.tsx b/src/pages/MajorDecision/index.test.tsx
index 9793ddf2..301c8177 100644
--- a/src/pages/MajorDecision/index.test.tsx
+++ b/src/pages/MajorDecision/index.test.tsx
@@ -15,7 +15,9 @@ jest.mock('react-router-dom', () => ({
}));
describe.skip('학과선택 페이지 로직 테스트', () => {
+ const mockGraduationLink = 'https://ce.pknu.ac.kr/ce/2889';
const mockSetMajor = jest.fn();
+
beforeEach(() => {
jest.mock('react', () => ({
...jest.requireActual('react'),
@@ -30,7 +32,13 @@ describe.skip('학과선택 페이지 로직 테스트', () => {
it('전공 선택 버튼 클릭 후, 상태 변경 테스트', async () => {
render(
-
+
,
diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/utils/router/openLink.ts b/src/utils/router/openLink.ts
new file mode 100644
index 00000000..0a0bd152
--- /dev/null
+++ b/src/utils/router/openLink.ts
@@ -0,0 +1,5 @@
+export default function openLink(link: string | null) {
+ if (!link) return;
+
+ window.open(link, '_blank');
+}