Feat/#264: 어학 공지사항 기능 추가

src/@types/styles/icon.ts

@@ -25,4 +25,6 @@ export type IconKind =
   | 'checkedRadio'
   | 'uncheckedRadio'
   | 'location'
-  | 'warning';
+  | 'warning'
+  | 'account'
+  | 'language';

src/apis/Suspense/fetch-announce-list.ts

@@ -1,12 +1,11 @@
-import Major from '@type/major';
 import { AxiosResponse } from 'axios';
 
 import wrapPromise from './wrap-promise';
 import http from '../http';
 
-const fetchAnnounceList = <T>(major: Major) => {
+const fetchAnnounceList = <T>(endPoint: string) => {
   const promise: Promise<AxiosResponse<T>> = http
-    .get(major ? `/api/announcement?major=${major}` : `/api/announcement`)
+    .get(`/api/announcement` + endPoint)
     .then((res) => res.data);
 
   return wrapPromise<T>(promise);

src/components/Common/Icon/index.tsx

@@ -28,6 +28,8 @@ import {
   MdOutlineError,
   MdOutlineKeyboardArrowRight,
   MdOutlineKeyboardArrowDown,
+  MdAssignmentInd,
+  MdLanguage,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -58,6 +60,8 @@ const ICON: { [key in IconKind]: IconType } = {
   checkedRadio: MdRadioButtonChecked,
   location: MdOutlineMyLocation,
   warning: MdOutlineError,
+  account: MdAssignmentInd,
+  language: MdLanguage,
 };
 
 interface IconProps {

src/components/InformUpperLayout/InformSearchForm.tsx

@@ -8,7 +8,7 @@ import useToasts from '@hooks/useToast';
 import React, { useRef } from 'react';
 
 interface InformSearchForm {
-  category: 'school' | 'major';
+  category: 'school' | 'major' | 'language' | 'recruit';
 }
 
 const InformSearchForm = ({ category }: InformSearchForm) => {

src/constants/announcement.ts

@@ -1,11 +1,15 @@
 export const ANNOUNCEMENT_TITLE = {
   SCHOOL: '학교 공지사항',
   MAROR: '학과 공지사항',
+  LANGUAGE: '어학 공지사항',
+  RECRUIT: '채용 공지사항',
 };
 
 export const ANNOUNCEMENT_CATEGORY = {
   SCHOOL: 'school',
   MAJOR: 'major',
+  LANGUAGE: 'language',
+  RECRUIT: 'recruit',
 } as const;
 
 export const ANNOUNCEMENT_TYPE = {

src/constants/path.ts

@@ -1,8 +1,10 @@
-type Category = 'school' | 'major';
+type Category = 'school' | 'major' | 'language' | 'recruit';
 
 const PATH = {
   SCHOOL_ANNOUNCEMENT: '/school/:type',
   MAJOR_ANNOUNCEMENT: '/major/:type',
+  LANGUAGE_ANNOUNCEMENT: '/language/:type',
+  RECRUIT_ANNOUNCEMENT: '/recruit/:type',
   NORMAL_ANNOUNCEMENT: (category: Category) =>
     `/announcement/${category}/normal`,
   PINNED_ANNOUNCEMENT: (category: Category) =>

src/constants/tip.ts

@@ -6,7 +6,7 @@ export interface TipData {
   link: string;
 }
 
-export const SHORTCUT_DATA: readonly TipData[] = [
+export const SHORTCUT_DATA: TipData[] = [
   {
     title: '부경대학교',
     subTitle: '부경대학교\n홈페이지로 이동',
@@ -58,7 +58,7 @@ export const SHORTCUT_DATA: readonly TipData[] = [
   },
 ] as const;
 
-export const HONEY_TIP_DATA: readonly TipData[] = [
+export const HONEY_TIP_DATA: TipData[] = [
   {
     title: '아우란트검사',
     subTitle: '인성·역량·취업준비도\n·진로적성검사',

src/pages/Announcement/components/AnnounceContainer.tsx

@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom';
 interface AnnounceContainerProps {
   title: string;
   category: AnnouncementCategory;
-  endPoint: string | null;
+  endPoint: string;
 }
 
 const AnnounceContainer = ({

src/pages/Announcement/index.tsx

@@ -30,7 +30,17 @@ const Announcement = () => {
           <AnnounceContainer
             title={ANNOUNCEMENT_TITLE.MAROR}
             category={ANNOUNCEMENT_CATEGORY.MAJOR}
-            endPoint={major}
+            endPoint={'?major=' + major}
+          />
+        }
+      />
+      <Route
+        path={PATH.LANGUAGE_ANNOUNCEMENT}
+        element={
+          <AnnounceContainer
+            title={ANNOUNCEMENT_TITLE.LANGUAGE}
+            category={ANNOUNCEMENT_CATEGORY.LANGUAGE}
+            endPoint={'/language'}
           />
         }
       />

src/pages/Home/components/InformHalfCardList.tsx

@@ -0,0 +1,64 @@
+import Icon from '@components/Common/Icon';
+import styled from '@emotion/styled';
+import useRouter from '@hooks/useRouter';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { IconKind } from '@type/styles/icon';
+
+interface InformHalfCardListProps {
+  iconKind: IconKind;
+  title: string;
+  subTitle: string;
+  link: string;
+}
+
+const InformHalfCardList = ({
+  iconKind,
+  title,
+  subTitle,
+  link,
+}: InformHalfCardListProps) => {
+  const { routerTo } = useRouter();
+
+  return (
+    <Container onClick={() => routerTo(link)}>
+      <Icon kind={iconKind} size="45" color={THEME.PRIMARY} />
+      <TitleWrapper>
+        <SubTitle>{subTitle}</SubTitle>
+        <Title>{title}</Title>
+      </TitleWrapper>
+    </Container>
+  );
+};
+
+export default InformHalfCardList;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 39%;
+  background-color: ${THEME.IVORY};
+  padding: 3% 5% 3% 4%;
+  border-radius: 15px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  height: 55px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 7px;
+`;
+
+const Title = styled.h2`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const SubTitle = styled.h3`
+  color: ${THEME.TEXT.SEMIBLACK};
+  display: flex;
+  justify-content: flex-end;
+  font-size: 13px;
+  padding-bottom: 6px;
+`;

src/pages/Home/index.tsx

@@ -1,5 +1,6 @@
 import Carousel from '@components/Carousel';
 import styled from '@emotion/styled';
+import InformHalfCardList from '@pages/Home/components/InformHalfCardList';
 import { THEME } from '@styles/ThemeProvider/theme';
 
 import InformCardList from './components/InformCardList';
@@ -11,6 +12,20 @@ const Home = () => {
         <InformTitle>학교</InformTitle>
         <InformCardList />
       </InformCardWrapper>
+      <HalfCardWrapper>
+        <InformHalfCardList
+          iconKind="account"
+          title="취업 길라잡이"
+          subTitle="채용 정보 확인"
+          link="/announcement/recruit/normal"
+        />
+        <InformHalfCardList
+          iconKind="language"
+          title="어학 공지사항"
+          subTitle="어학 정보 확인"
+          link="/announcement/language/normal"
+        />
+      </HalfCardWrapper>
       <InformCardWrapper>
         <InformTitle>비교과</InformTitle>
         <Carousel />
@@ -38,6 +53,12 @@ const InformCardWrapper = styled.div`
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 `;
 
+const HalfCardWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5%;
+`;
+
 const InformTitle = styled.div`
   font-size: 20px;
   font-weight: bold;

src/styles/ThemeProvider/theme.ts

@@ -5,14 +5,15 @@ export const THEME: Theme = {
 
   TEXT: {
     BLACK: '#000000',
+    SEMIBLACK: '#444444',
     GRAY: '#808080',
     WHITE: '#FFFFFF',
   },
 
-  PRIMARY: '#95B1DC',
+  PRIMARY: '#7A9DD3',
 
   BUTTON: {
-    BLUE: '#95B1DC',
+    BLUE: '#7A9DD3',
     GRAY: '#E7E7E7',
   },
 

src/styles/emotion.d.ts

@@ -5,6 +5,7 @@ declare module '@emotion/react' {
     BACKGROUND: string; // EAEAEA
     TEXT: {
       BLACK: string;
+      SEMIBLACK: string;
       GRAY: string;
       WHITE: string;
     };