diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts index f6c4c757..364cad69 100644 --- a/src/@types/styles/icon.ts +++ b/src/@types/styles/icon.ts @@ -25,4 +25,6 @@ export type IconKind = | 'checkedRadio' | 'uncheckedRadio' | 'location' - | 'warning'; + | 'warning' + | 'account' + | 'language'; diff --git a/src/apis/Suspense/fetch-announce-list.ts b/src/apis/Suspense/fetch-announce-list.ts index 3a2ec00e..d7a8f4a7 100644 --- a/src/apis/Suspense/fetch-announce-list.ts +++ b/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 = (major: Major) => { +const fetchAnnounceList = (endPoint: string) => { const promise: Promise> = http - .get(major ? `/api/announcement?major=${major}` : `/api/announcement`) + .get(`/api/announcement` + endPoint) .then((res) => res.data); return wrapPromise(promise); diff --git a/src/components/Common/Icon/index.tsx b/src/components/Common/Icon/index.tsx index 8e54dcd8..06c0a05e 100644 --- a/src/components/Common/Icon/index.tsx +++ b/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 { diff --git a/src/components/InformUpperLayout/InformSearchForm.tsx b/src/components/InformUpperLayout/InformSearchForm.tsx index 6fdf920a..4f71707b 100644 --- a/src/components/InformUpperLayout/InformSearchForm.tsx +++ b/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) => { diff --git a/src/constants/announcement.ts b/src/constants/announcement.ts index 0b8e547a..7559ee43 100644 --- a/src/constants/announcement.ts +++ b/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 = { diff --git a/src/constants/path.ts b/src/constants/path.ts index eb5fa20b..acef2cbf 100644 --- a/src/constants/path.ts +++ b/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) => diff --git a/src/constants/tip.ts b/src/constants/tip.ts index 190518ec..f0d76de2 100644 --- a/src/constants/tip.ts +++ b/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·진로적성검사', diff --git a/src/pages/Announcement/components/AnnounceContainer.tsx b/src/pages/Announcement/components/AnnounceContainer.tsx index 426787f1..dea39550 100644 --- a/src/pages/Announcement/components/AnnounceContainer.tsx +++ b/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 = ({ diff --git a/src/pages/Announcement/index.tsx b/src/pages/Announcement/index.tsx index 4044c138..1bc072b1 100644 --- a/src/pages/Announcement/index.tsx +++ b/src/pages/Announcement/index.tsx @@ -30,7 +30,17 @@ const Announcement = () => { + } + /> + } /> diff --git a/src/pages/Home/components/InformHalfCard.tsx b/src/pages/Home/components/InformHalfCard.tsx new file mode 100644 index 00000000..76b59243 --- /dev/null +++ b/src/pages/Home/components/InformHalfCard.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 InformHalfCardProps { + iconKind: IconKind; + title: string; + subTitle: string; + link: string; +} + +const InformHalfCard = ({ + iconKind, + title, + subTitle, + link, +}: InformHalfCardProps) => { + const { routerTo } = useRouter(); + + return ( + routerTo(link)}> + + + {subTitle} + {title} + + + ); +}; + +export default InformHalfCard; + +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; +`; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 5bbe61b6..ac3e3ee7 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,5 +1,6 @@ import Carousel from '@components/Carousel'; import styled from '@emotion/styled'; +import InformHalfCard from '@pages/Home/components/InformHalfCard'; import { THEME } from '@styles/ThemeProvider/theme'; import InformCardList from './components/InformCardList'; @@ -11,6 +12,20 @@ const Home = () => { 학교 + + + + 비교과 @@ -38,6 +53,12 @@ const InformCardWrapper = styled.div` box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; `; +const InformHalfCardList = styled.div` + display: flex; + justify-content: space-between; + margin-top: 5%; +`; + const InformTitle = styled.div` font-size: 20px; font-weight: bold; diff --git a/src/styles/ThemeProvider/theme.ts b/src/styles/ThemeProvider/theme.ts index e8f6f8fd..24226f17 100644 --- a/src/styles/ThemeProvider/theme.ts +++ b/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', }, diff --git a/src/styles/emotion.d.ts b/src/styles/emotion.d.ts index 1e36703d..faaddaeb 100644 --- a/src/styles/emotion.d.ts +++ b/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; };