diff --git a/src/components/index.ts b/src/components/index.ts
index 72780d52..c18fe520 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -94,6 +94,7 @@ import SearchBar from './recruit/recruitBoard/searchBar/SearchBar';
import FieldPopup from './recruit/recruitBoard/fieldPopup/FieldPopup';
import LoadingBackground from './loading/LoadingBackground';
import TextBox from './dropdown/textBox/TextBox';
+import CampusToggle from './recruit/recruitBoard/toggle/CampusToggle';
export {
Header,
@@ -192,4 +193,5 @@ export {
FieldPopup,
LoadingBackground,
TextBox,
+ CampusToggle,
};
diff --git a/src/components/recruit/recruitBoard/toggle/CampusToggle.styled.ts b/src/components/recruit/recruitBoard/toggle/CampusToggle.styled.ts
new file mode 100644
index 00000000..b317096e
--- /dev/null
+++ b/src/components/recruit/recruitBoard/toggle/CampusToggle.styled.ts
@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+const CampusToggle = styled.section`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 21.8rem;
+ height: 6rem;
+ border-radius: 99.9rem;
+ border: 0.075rem solid #f6f6f6;
+ background: #f8fafb;
+ margin-top: 2rem;
+ gap: 1rem;
+
+ .wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 8.8rem;
+ height: 4rem;
+ border-radius: 9999.9rem;
+ }
+
+ .selected {
+ background-color: #e0e6ff;
+ color: #2f4fd9;
+
+ &:hover {
+ background-color: #e0e6ff;
+ cursor: pointer;
+ }
+ }
+
+ .notSelected {
+ background-color: #f8fafb;
+ color: #747b7f;
+
+ &:hover {
+ background-color: #ededed;
+ cursor: pointer;
+ }
+ }
+
+ @media (max-width: 900px) {
+ width: 18rem;
+ height: 5rem;
+
+ .wrapper {
+ width: 7rem;
+ height: 3.2rem;
+ border-radius: 9999.9rem;
+ }
+
+ .option {
+ font-size: 1.8rem;
+ }
+ }
+
+ @media (max-width: 600px) {
+ margin: 2rem auto 0rem;
+ width: 16rem;
+ height: 4.4rem;
+
+ .wrapper {
+ width: 6rem;
+ height: 3rem;
+ border-radius: 9999.9rem;
+ }
+
+ .option {
+ font-size: 1.6rem;
+ }
+ }
+`;
+
+const S = { CampusToggle };
+
+export default S;
diff --git a/src/components/recruit/recruitBoard/toggle/CampusToggle.tsx b/src/components/recruit/recruitBoard/toggle/CampusToggle.tsx
new file mode 100644
index 00000000..a307af45
--- /dev/null
+++ b/src/components/recruit/recruitBoard/toggle/CampusToggle.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import S from './CampusToggle.styled';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import { needLoginModalState, recruitFilterState, recruitFilterStateAuth } from '../../../../atom';
+import { useLogin } from '../../../../hooks';
+import ModalBackground from '../../../modalBackground/ModalBackground';
+import NeedLogin from '../../recruitDetail/modal/needLogin/NeedLogin';
+
+const CampusToggle = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { isLogin } = useLogin();
+
+ const [isCampus, setIsCampus] = useState
(false);
+ const [needLoginModal, setNeedLoginModal] = useRecoilState(needLoginModalState);
+
+ const setFilterState = useSetRecoilState(recruitFilterState);
+ const setFilterStateAuth = useSetRecoilState(recruitFilterStateAuth);
+
+ const handleCampusOutClick = () => {
+ navigate('/');
+ setFilterStateAuth({
+ scope: 1,
+ category: null,
+ field: null,
+ skill: [],
+ role: [],
+ tag: [],
+ keyword: '',
+ course: null,
+ professor: null,
+ });
+ setIsCampus(false);
+ };
+
+ const handleCampusInClick = () => {
+ if (!isLogin) {
+ setNeedLoginModal({ isOpen: true, type: 'SCHOOL_RECRUIT' });
+ return;
+ }
+
+ navigate('/campus');
+ setFilterState({
+ scope: 2,
+ category: null,
+ field: null,
+ skill: [],
+ role: [],
+ tag: [],
+ keyword: '',
+ course: null,
+ professor: null,
+ });
+ setIsCampus(true);
+ };
+
+ useEffect(() => {
+ if (location.pathname === '/campus') {
+ setIsCampus(true);
+ } else {
+ setIsCampus(false);
+ }
+ }, [location.pathname]);
+
+ return (
+ <>
+
+
+ 교외
+
+
+ 교내
+
+
+ {needLoginModal.isOpen && (
+
+
+
+ )}
+
+ );
+};
+
+export default CampusToggle;
diff --git a/src/globalStyle.css b/src/globalStyle.css
index eb02c5d1..85e80cbd 100644
--- a/src/globalStyle.css
+++ b/src/globalStyle.css
@@ -1,3 +1,5 @@
+@import url('/src/styles/fonts/font.css');
+
html {
font-size: 62.5%;
font-family: Pretendard;
@@ -194,3 +196,47 @@ button {
line-height: 2.4rem;
letter-spacing: 0.004rem;
}
+
+@font-face {
+ font-family: 'Noto Sans CJK KR';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src:
+ url('styles/fonts/NotoSansKR-Light.woff2') format('woff2'),
+ url('styles/fonts/NotoSansKR-Light.woff') format('woff'),
+ url('styles/fonts/NotoSansKR-Light.otf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Noto Sans CJK KR';
+ font-style: normal;
+ font-weight: normal;
+ font-display: swap;
+ src:
+ url('styles/fonts/NotoSansKR-Regular.woff2') format('woff2'),
+ url('styles/fonts/NotoSansKR-Regular.woff') format('woff'),
+ url('styles/fonts/NotoSansKR-Regular.otf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Noto Sans CJK KR';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src:
+ url('styles/fonts/NotoSansKR-Medium.woff2') format('woff2'),
+ url('styles/fonts/NotoSansKR-Medium.woff') format('woff'),
+ url('styles/fonts/NotoSansKR-Medium.otf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Noto Sans CJK KR';
+ font-style: normal;
+ font-weight: bold;
+ font-display: swap;
+ src:
+ url('styles/fonts/NotoSansKR-Bold.woff2') format('woff2'),
+ url('styles/fonts/NotoSansKR-Bold.woff') format('woff'),
+ url('styles/fonts/NotoSansKR-Bold.otf') format('truetype');
+}
diff --git a/src/main.tsx b/src/main.tsx
index b79ab89c..5faa5ac1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,6 +5,7 @@ import App from './App.tsx';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { RecruitPage, SignInPage } from './pages/index.ts';
import './globalStyle.css';
+import './styles/fonts/font.css';
import { LoadingBackground } from './components/index.ts';
diff --git a/src/pages/recruit/recruitPage/RecruitPage.tsx b/src/pages/recruit/recruitPage/RecruitPage.tsx
index c9ef4ffe..373c8db6 100644
--- a/src/pages/recruit/recruitPage/RecruitPage.tsx
+++ b/src/pages/recruit/recruitPage/RecruitPage.tsx
@@ -12,8 +12,8 @@ import {
DropdownDetail,
ClearConditions,
SearchBar,
- FieldPopup,
RecruitCard,
+ CampusToggle,
} from '../../../components';
import S from './RecruitPage.styled';
import { FilledBookmark } from '../../../assets';
@@ -63,13 +63,6 @@ const RecruitPage = () => {
const [isDetailSelected, setIsDetailSelected] = useState(false);
const [isFloatingOpen, setIsFloatingOpen] = useState(false);
const [placeholderText, setPlaceholderText] = useState('제목을 검색해보세요.');
- const [fieldValue, setFieldValue] = useState({
- applied: false,
- value: {
- id: null as number | null,
- value: '분야를 선택해주세요',
- },
- });
const [isOpenDetail, setIsOpenDetail] = useState({
skill: true,
role: false,
@@ -105,22 +98,6 @@ const RecruitPage = () => {
setIsOpen(prev => !prev);
};
- const handleFieldMenu = (event: React.MouseEvent) => {
- const { innerText } = event.target as HTMLElement;
- setFieldValue({
- applied: false,
- value: { id: Number(event.currentTarget.id), value: innerText },
- });
- searchParams.set('field', event.currentTarget.id);
- };
-
- const submitField = () => {
- setFieldValue(prev => ({ ...prev, applied: true }));
- setFilterState(prev => ({ ...prev, field: fieldValue.value.id }));
- setIsFieldOpen(false);
- setSearchParams(searchParams);
- };
-
const onClickClear = useCallback(() => {
if (location.pathname === '/') {
setFilterState({
@@ -161,10 +138,6 @@ const RecruitPage = () => {
setIsOpen(false);
};
- const handleFieldPopup = () => {
- setIsFieldOpen(prev => !prev);
- };
-
const onClickDetails = (event: React.MouseEvent) => {
event.stopPropagation();
const { innerText } = event.target as HTMLElement;
@@ -195,13 +168,6 @@ const RecruitPage = () => {
}
};
- const handleFieldClear = () => {
- setFilterState(prev => ({ ...prev, field: null }));
- setFieldValue({ applied: false, value: { id: null, value: '분야를 선택해주세요' } });
- searchParams.delete('field');
- setSearchParams(searchParams);
- };
-
const onClickDeleteKeyword = () => {
setFilterState(prev => ({ ...prev, keyword: '' }));
setSearchKeyword('');
@@ -358,16 +324,7 @@ const RecruitPage = () => {