diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 55df3af7..47e41c91 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -11,6 +11,14 @@
   "rules": {
     "react/react-in-jsx-scope": "off",
     "import/no-extraneous-dependencies": "off",
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }
+    ]
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 032eac79..58c58c2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,9 +13,6 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.421.0",
     "@hookform/resolvers": "^3.3.1",
-    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
-    "@toast-ui/editor-plugin-color-syntax": "^3.1.0",
-    "@toast-ui/react-editor": "^3.2.3",
     "@tanstack/react-query": "^4.35.3",
     "@testing-library/react": "^14.0.0",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
@@ -41,11 +38,13 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
+    "react-icons": "^4.11.0",
     "react-quill": "^2.0.0",
+    "react-select": "^5.8.0",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
-    "short-uuid": "^4.2.2",
     "sass": "^1.68.0",
+    "short-uuid": "^4.2.2",
     "swiper": "^10.3.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
diff --git a/frontend/public/images/svg/tag_x.svg b/frontend/public/images/svg/tag_x.svg
new file mode 100644
index 00000000..085a745a
--- /dev/null
+++ b/frontend/public/images/svg/tag_x.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 1L13 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M13 1L1 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 00000000..71f4809b
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div className="flex justify-center">OnBoarding Page</div>
+}
diff --git a/frontend/src/app/project/(read)/post/[postId]/page.tsx b/frontend/src/app/project/(read)/post/[postId]/page.tsx
index 45c0a546..32dca1e8 100644
--- a/frontend/src/app/project/(read)/post/[postId]/page.tsx
+++ b/frontend/src/app/project/(read)/post/[postId]/page.tsx
@@ -60,6 +60,7 @@ export default function ReadingPage({ params }: ParamsType) {
   function toModify() {
     router.push('/project/modification')
   }
+
   // GET요청 보내서 데이터 가져오고 받은 데이터 변수에 넣어주는 함수
   async function getData() {
     const res = await fetch(
@@ -108,8 +109,6 @@ export default function ReadingPage({ params }: ParamsType) {
         },
       )
 
-      router.push('/')
-
       if (!res.ok) {
         const error = await res.json()
 
diff --git a/frontend/src/app/project/page.tsx b/frontend/src/app/project/page.tsx
index ef0c4b94..69849bd3 100644
--- a/frontend/src/app/project/page.tsx
+++ b/frontend/src/app/project/page.tsx
@@ -110,7 +110,7 @@ export default function ProjectMain() {
         <div>
           {data.pages.map((group, i) => (
             <div
-              className="relative mx-8 flex flex-wrap justify-center pt-6 sm:pt-8"
+              className="mx-8 flex justify-center pt-6 sm:pt-8"
               key={group[i]?.id}
             >
               {group.map((item: DataObject) => (
diff --git a/frontend/src/app/recruitment/page.tsx b/frontend/src/app/recruitment/page.tsx
index e69de29b..14494be1 100644
--- a/frontend/src/app/recruitment/page.tsx
+++ b/frontend/src/app/recruitment/page.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import MultipleFilter from '../../components/recruitment/main/MultipleFilter'
+import { PositionType } from '../../utils/types'
+import {
+  multiplefilterState,
+  keywordfilterState,
+  recruitfilterState,
+  directionState,
+} from '../../utils/atoms'
+import Filter from '../../components/recruitment/main/Filter'
+import RecruitmentCard from '../../components/recruitment/main/RecruitmentCard'
+import WriteIcon from '../../../public/images/svg/pencil-square.svg'
+
+export type RecruitmentDataType = {
+  id: number
+  nickname: string
+  title: string
+  position: PositionType
+  techTags: string[]
+  recruiting: boolean
+}
+
+export default function Recruitment() {
+  const multipleFilter = useRecoilValue(multiplefilterState)
+  const keywordFilter = useRecoilValue(keywordfilterState)
+  const recruitFilter = useRecoilValue(recruitfilterState)
+  const direction = useRecoilValue(directionState)
+
+  const [postCount, setPostCount] = useState(0)
+  const router = useRouter()
+
+  function toWrite() {
+    router.push('/project/write')
+  }
+
+  const getData = async ({ pageParam = 1 }) => {
+    const params = new URLSearchParams()
+    params.set('page', String(pageParam))
+    params.set('size', '12')
+    params.set('direction', direction)
+
+    const positions = multipleFilter
+      .filter((v) => v.category === 'position')
+      .map((v) => v.name)
+    const skills = multipleFilter
+      .filter((v) => v.category === 'skill')
+      .map((v) => v.name)
+
+    positions.forEach((position) => {
+      params.append('positions', position)
+    })
+
+    skills.forEach((skill) => {
+      params.append('tags', skill)
+    })
+
+    if (keywordFilter) {
+      params.append('keyword', keywordFilter)
+    }
+
+    if (recruitFilter) {
+      params.append('isRecruiting', String(recruitFilter))
+    }
+
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/recruitments?${params.toString()}`,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    if (!res.ok) {
+      const data = await res.json()
+      throw new Error(data.message)
+    }
+
+    const data = await res.json()
+    setPostCount(data.data.length)
+    return data.data
+  }
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
+    useInfiniteQuery(
+      ['recruitments', multipleFilter, keywordFilter, recruitFilter, direction],
+      getData,
+      {
+        getNextPageParam: (lastPage, pages) =>
+          lastPage.length < 12 ? undefined : pages.length + 1,
+      },
+    )
+
+  useEffect(() => {
+    if (!isFetchingNextPage) {
+      const handleScroll = () => {
+        if (
+          document.documentElement.scrollHeight -
+            document.documentElement.scrollTop ===
+          document.documentElement.clientHeight
+        ) {
+          fetchNextPage()
+        }
+      }
+      window.addEventListener('scroll', handleScroll)
+    }
+  }, [fetchNextPage, isFetchingNextPage, multipleFilter])
+
+  if (status === 'loading') {
+    return <span>Loading...</span>
+  }
+
+  if (status === 'error') {
+    return <span>Error fetching data</span>
+  }
+
+  return (
+    <div className="relative flex flex-col items-center w-screen h-auto min-h-screen pb-12 pt-28 ">
+      <MultipleFilter />
+      {/* 프로젝트 공유 버튼 */}
+      <button
+        className="fixed z-10 flex flex-row items-center px-4 py-1 pt-3 pb-3 my-auto mb-2 font-semibold rounded-full bottom-10 right-10 shrink-0 bg-graphyblue text-slate-50 drop-shadow-md sm:invisible"
+        onClick={() => toWrite()}
+        aria-label="toWritePage"
+        type="button"
+      >
+        <Image
+          className="w-5 h-5 mr-2"
+          src={WriteIcon}
+          alt="WriteIcon"
+          quality={50}
+        />
+        <span className="font-semibold shrink-0">프로젝트 공유</span>
+      </button>
+      <Filter postCount={postCount} />
+      {data.pages.map((group, i) => (
+        <div
+          className="relative flex flex-wrap justify-center mx-8"
+          key={group[i]?.id}
+        >
+          {group.map((item: RecruitmentDataType) => (
+            <div className="mx-8" key={item.id}>
+              <RecruitmentCard item={item} />
+            </div>
+          ))}
+        </div>
+      ))}
+      {hasNextPage && isFetchingNextPage && <span>Loading more...</span>}
+    </div>
+  )
+}
diff --git a/frontend/src/components/general/ProjectNavBar.tsx b/frontend/src/components/general/ProjectNavBar.tsx
index 5e518af5..252bfa17 100644
--- a/frontend/src/components/general/ProjectNavBar.tsx
+++ b/frontend/src/components/general/ProjectNavBar.tsx
@@ -10,7 +10,11 @@ import ProfileIcon from '../../../public/images/svg/profileIcon.svg'
 import SearchIcon from '../../../public/images/png/searchIcon.png'
 import { searchTextState, usernameState } from '../../utils/atoms'
 
-export default function NavBar({ children }: { children: React.ReactNode }) {
+export default function ProjectNavBar({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   const accessToken =
     typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
   const persistToken =
diff --git a/frontend/src/components/general/RecruitmentNavBar.tsx b/frontend/src/components/general/RecruitmentNavBar.tsx
index caae1ea9..af6194e7 100644
--- a/frontend/src/components/general/RecruitmentNavBar.tsx
+++ b/frontend/src/components/general/RecruitmentNavBar.tsx
@@ -1,7 +1,137 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
+import { PiPaperPlaneTilt } from 'react-icons/pi'
+import { TfiBell } from 'react-icons/tfi'
+
+import WriteIcon from '../../../public/images/svg/pencil-square.svg'
+import ProfileIcon from '../../../public/images/svg/profileIcon.svg'
+import { usernameState } from '../../utils/atoms'
+import NoticeModal from '../recruitment/noticification/NoticeModal'
+
 export default function RecruitmentNavBar({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <div>{children}</div>
+  const accessToken =
+    typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+  const persistToken =
+    typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+  const [username, setUsername] = useRecoilState(usernameState)
+  const [btnText, setBtnText] = useState<string>('로그인')
+
+  const [isOpenModal, setOpenModal] = useState<boolean>(false)
+
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const onClickToggleModal = useCallback(() => {
+    setOpenModal(!isOpenModal)
+  }, [isOpenModal])
+
+  function signOut() {
+    setUsername('')
+    if (accessToken) {
+      sessionStorage.removeItem('accessToken')
+    } else {
+      localStorage.removeItem('persistToken')
+    }
+  }
+
+  const handleLogin = () => {
+    if (accessToken || persistToken) {
+      signOut()
+      setBtnText('로그인')
+    } else {
+      router.push('/project/login')
+    }
+  }
+
+  useEffect(() => {
+    if (accessToken || persistToken) {
+      setBtnText('로그아웃')
+    } else {
+      setBtnText('로그인')
+    }
+  }, [pathname])
+
+  if (pathname === '/project/login' || pathname === '/project/registration') {
+    return children
+  }
+
+  return (
+    <div>
+      <div className="fixed z-20 mb-5 w-screen flex justify-between content-center overflow-hidden border-b border-zinc-400 bg-white pt-3 pb-3 px-8 align-middle font-ng-eb">
+        {/* 로고 */}
+        <button
+          onClick={() => router.push('/')}
+          className="hidden font-lato-b text-4xl text-graphyblue sm:block"
+          type="button"
+        >
+          Graphy
+        </button>
+        <button
+          onClick={() => router.push('/')}
+          className="font-lato-b text-4xl text-graphyblue sm:hidden"
+          type="button"
+        >
+          G
+        </button>
+        <div className="flex">
+          <button
+            className=" mr-4 whitespace-nowrap rounded-full bg-graphyblue px-4 text-white"
+            type="button"
+            onClick={() => handleLogin()}
+          >
+            {btnText}
+          </button>
+
+          {/* 프로젝트 작성 버튼 */}
+          <button
+            className="invisible mx-auto mr-4 flex h-0 w-0 shrink-0 flex-row flex-nowrap items-center rounded-full bg-graphyblue text-white sm:visible sm:mr-5
+        sm:h-auto sm:w-auto sm:px-4 sm:py-1"
+            onClick={() => router.push('/project/new-post')}
+            aria-label="toWritePage"
+            type="button"
+          >
+            <Image className="mr-2 h-5 w-5" src={WriteIcon} alt="WriteIcon" />
+            <span className="font-semibold">프로젝트 공유</span>
+          </button>
+
+          <div className="flex h-full items-between relative gap-4">
+            <button type="button" className="text-[10px] font-light">
+              <PiPaperPlaneTilt size="28" />
+            </button>
+            <button
+              onClick={onClickToggleModal}
+              type="button"
+              className="text-[10px] font-light"
+            >
+              <TfiBell size="28" />
+            </button>
+            {/* 마이페이지 아이콘 */}
+            <button
+              style={{ display: btnText === '로그인' ? 'none' : 'block' }}
+              type="button"
+              onClick={() => router.push(`/project/profile/${username}`)}
+            >
+              <Image
+                className="h-8 w-8 appearance-none"
+                src={ProfileIcon}
+                alt="ProfileIcon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      {isOpenModal ? (
+        <NoticeModal onClickToggleModal={onClickToggleModal} />
+      ) : null}
+      {children}
+    </div>
+  )
 }
diff --git a/frontend/src/components/recruitment/main/Filter.tsx b/frontend/src/components/recruitment/main/Filter.tsx
new file mode 100644
index 00000000..66f066f8
--- /dev/null
+++ b/frontend/src/components/recruitment/main/Filter.tsx
@@ -0,0 +1,21 @@
+import SortToggleButton from './SortToggleButton'
+import ToggleButton from './ToggleButton'
+
+export type FilterPropsType = {
+  postCount: number
+}
+
+export default function Filter({ postCount }: FilterPropsType) {
+  return (
+    <div className="flex items-center h-[30px] w-[900px] px-4 justify-between text-[13px] pb-4 border-b-[1px]">
+      <div className="flex">
+        <span className="w-[73px] border-r-2 mr-3">게시글 {postCount}개</span>
+        <SortToggleButton />
+      </div>
+      <div className="flex items-center">
+        <span className="mr-2">모집 중인 프로젝트만 보기</span>
+        <ToggleButton />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/recruitment/main/MultipleFilter.tsx b/frontend/src/components/recruitment/main/MultipleFilter.tsx
new file mode 100644
index 00000000..3fea182a
--- /dev/null
+++ b/frontend/src/components/recruitment/main/MultipleFilter.tsx
@@ -0,0 +1,180 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import Select, { StylesConfig } from 'react-select'
+import Image from 'next/image'
+import { multiplefilterState, keywordfilterState } from '../../../utils/atoms'
+import x from '../../../../public/images/svg/tag_x.svg'
+import {
+  Position,
+  Skill,
+  PositionType,
+  SkillType,
+  MultipleFilterType,
+} from '../../../utils/types'
+
+const positionOptions = Object.values(Position).map((position) => ({
+  value: position,
+  label: position,
+}))
+
+const skillOptions = Object.values(Skill).map((skill) => ({
+  value: skill,
+  label: skill,
+}))
+
+type OptionType = {
+  value: string
+  label: string
+}
+
+const styles: StylesConfig<OptionType, false> = {
+  control: (provided) => ({
+    ...provided,
+    height: '40px',
+    border: 'none',
+    boxShadow: 'none',
+    flex: 1,
+    alignItems: 'center',
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    fontWeight: 'normal',
+    color: '#3e3d3d',
+    backgroundColor: state.isFocused ? '#e9eaedc5' : 'white', // 마우스 hover 시 배경색 변경
+  }),
+}
+
+export default function MultipleFilter() {
+  const [multipleFilter, setMultipleFilter] =
+    useRecoilState(multiplefilterState)
+  const [, setKeywordFilter] = useRecoilState(keywordfilterState)
+  const [keyword, setKeyword] = useState('')
+
+  const handleKeywordChange = (e: any) => {
+    setKeyword(e.target.value)
+  }
+
+  const handleKeywordSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setKeywordFilter(keyword)
+    sessionStorage.setItem('keywordFilter', keyword)
+  }
+
+  const removeFilterItem = (itemToRemove: MultipleFilterType) => {
+    setMultipleFilter((prevFilter) =>
+      prevFilter.filter((item) => item !== itemToRemove),
+    )
+  }
+
+  useEffect(() => {
+    const searchText = sessionStorage.getItem('keywordFilter')
+    if (searchText) {
+      setKeyword(searchText)
+    }
+  }, [])
+
+  return (
+    <div className="w-[900px] h-[80px] mb-8 flex flex-col border-solid  border-gray-400 text-lightgray">
+      <div className="flex w-full text-sm h-1/2">
+        {/* 포지션 선택 드롭다운 메뉴 */}
+        <div className="flex-1">
+          <Select
+            options={positionOptions}
+            value={positionOptions.find(
+              (option) =>
+                option.value ===
+                multipleFilter
+                  .slice()
+                  .reverse()
+                  .find((f) => f.category === 'position')?.name,
+            )}
+            onChange={(selectedOption) => {
+              setMultipleFilter((prevFilter) => [
+                ...prevFilter,
+                {
+                  category: 'position',
+                  name: selectedOption?.value as PositionType,
+                },
+              ])
+            }}
+            placeholder="포지션을 선택해주세요"
+            styles={styles}
+            components={{
+              IndicatorSeparator: () => null,
+            }}
+          />
+        </div>
+        {/* 스킬 선택 드롭다운 메뉴 */}
+        <div className="flex-1">
+          <Select
+            options={skillOptions}
+            value={skillOptions.find(
+              (option) =>
+                option.value ===
+                multipleFilter
+                  .slice()
+                  .reverse()
+                  .find((f) => f.category === 'skill')?.name,
+            )}
+            onChange={(selectedOption) => {
+              setMultipleFilter((prevFilter) => [
+                ...prevFilter,
+                { category: 'skill', name: selectedOption?.value as SkillType },
+              ])
+            }}
+            placeholder="스킬을 선택해주세요"
+            styles={styles}
+            components={{
+              IndicatorSeparator: () => null,
+            }}
+          />
+        </div>
+        {/* 검색창 */}
+        <div className="flex-1">
+          <form onSubmit={handleKeywordSubmit} className="w-full">
+            <div className="relative flex items-center justify-center w-full h-full bg-white rounded-lg">
+              <input
+                onChange={handleKeywordChange}
+                value={keyword}
+                type="text"
+                placeholder="검색어 입력"
+                className="w-full h-[40px] ml-[0.5px] px-4 flex justify-between items-center rounded-sm"
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  sessionStorage.removeItem('keywordFilter')
+                  setKeyword('')
+                  setKeywordFilter('')
+                }}
+                className="absolute mr-2 text-black right-2"
+              >
+                <Image src={x} alt="x" className="w-2 h-2" />
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      {/* 필터 태그 항목들 */}
+      <div className="flex items-center w-full h-1/2 bg-slate-100">
+        {multipleFilter.map((item) => (
+          <div
+            key={item.name}
+            className="flex items-center justify-center h-[25px] px-2 ml-2.5 rounded-md bg-white text-[10px]"
+          >
+            {item.name}
+            <button
+              type="button"
+              onClick={() => removeFilterItem(item)}
+              className="ml-2 text-black"
+            >
+              <Image src={x} alt="x" className="w-1.5 h-1.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/recruitment/main/RecruitmentCard.tsx b/frontend/src/components/recruitment/main/RecruitmentCard.tsx
new file mode 100644
index 00000000..88fffa0a
--- /dev/null
+++ b/frontend/src/components/recruitment/main/RecruitmentCard.tsx
@@ -0,0 +1,67 @@
+import { HiOutlineUserCircle } from 'react-icons/hi2'
+import { TfiComment } from 'react-icons/tfi'
+import { PositionType } from '../../../utils/types'
+
+type RecruitmentCardProps = {
+  item: {
+    id: number
+    nickname: string
+    title: string
+    position: PositionType
+    techTags: string[]
+    recruiting: boolean
+  }
+}
+
+export enum PositionColorClass {
+  FRONTEND = 'bg-frontendtag',
+  BACKEND = 'bg-backendtag',
+  DESIGNER = 'bg-designertag',
+  PM = 'bg-pmtag',
+  DEVOPS = 'bg-devopstag',
+  AI = 'bg-aitag',
+}
+
+export default function RecruitmentCard({ item }: RecruitmentCardProps) {
+  return (
+    <div className="flex h-[150px] w-[900px] flex-col justify-between pt-6 pb-4 px-12 bg-white border-solid border-b-[1px]">
+      <div className="flex">
+        <p className="text-[16px] font-semibold max-w-[600px] truncate">
+          {item.title}
+        </p>
+        <div className="flex items-center ml-4 px-2 rounded-3xl border-2 border-solid border-recruitmentpink text-[11px] font-semibold text-recruitmentpink">
+          {item.recruiting ? '모집중' : '마감'}
+        </div>
+        <div
+          className={`flex items-center max-w-fit ml-4 px-2.5 rounded-3xl ${
+            PositionColorClass[item.position]
+          } text-white text-[11px]`}
+        >
+          {item.position}
+        </div>
+      </div>
+
+      <div className="mb-2 mt-2 flex font-ng">
+        {item.techTags.map((x: string) => (
+          <div key={x}>
+            <div className="flex items-center mr-2.5 py-1 px-2 rounded-md bg-gray-200 opacity-70 text-black text-[11px]">
+              <span className="">{x}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <hr className="ml-0.5 border-gray-200" />
+      <div className="flex justify-between text-lightgray text-[11px]">
+        <div className="flex items-center">
+          <HiOutlineUserCircle size="20" strokeWidth="1" />
+          <span className="ml-2">{item.nickname}</span>
+        </div>
+        <div className="flex items-center">
+          <TfiComment size="13" strokeWidth="0.1" />
+          <span className="ml-2.5 mb-0.5">27</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/recruitment/main/SortToggleButton.tsx b/frontend/src/components/recruitment/main/SortToggleButton.tsx
new file mode 100644
index 00000000..3c62747d
--- /dev/null
+++ b/frontend/src/components/recruitment/main/SortToggleButton.tsx
@@ -0,0 +1,21 @@
+import { useRecoilState } from 'recoil'
+import { directionState } from '../../../utils/atoms'
+
+export default function SortToggleButton() {
+  const [direction, setDirection] = useRecoilState(directionState)
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        if (direction === 'ASC') {
+          setDirection('DESC')
+        } else {
+          setDirection('ASC')
+        }
+      }}
+    >
+      {direction === 'ASC' ? '오래된 순 ▲' : '최신 순 ▼'}
+    </button>
+  )
+}
diff --git a/frontend/src/components/recruitment/main/ToggleButton.tsx b/frontend/src/components/recruitment/main/ToggleButton.tsx
new file mode 100644
index 00000000..bdf0ad8d
--- /dev/null
+++ b/frontend/src/components/recruitment/main/ToggleButton.tsx
@@ -0,0 +1,24 @@
+import { useRecoilState } from 'recoil'
+import { recruitfilterState } from '../../../utils/atoms'
+
+export default function ToggleButton() {
+  const [recruitFilter, setRecruitFilter] = useRecoilState(recruitfilterState)
+
+  const handleToggle = () => {
+    setRecruitFilter(!recruitFilter)
+  }
+
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input
+        type="checkbox"
+        checked={recruitFilter}
+        onChange={handleToggle}
+        className="sr-only peer"
+      />
+      <div className="w-12 h-[18px] bg-gray-200 rounded-full peer-checked:after:translate-x-7 after:absolute after:top-[2px] after:start-[3px] after:bg-white after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-graphyblue">
+        {' '}
+      </div>
+    </label>
+  )
+}
diff --git a/frontend/src/components/recruitment/noticification/NoticeModal.tsx b/frontend/src/components/recruitment/noticification/NoticeModal.tsx
new file mode 100644
index 00000000..5571bc3a
--- /dev/null
+++ b/frontend/src/components/recruitment/noticification/NoticeModal.tsx
@@ -0,0 +1,73 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import Noticification from './Noticification'
+
+type PropsType = {
+  onClickToggleModal: () => void
+}
+
+type NotificationDataType = {
+  id: number
+  type: string
+  content: string
+  read: boolean
+}
+
+export default function NoticeModal({
+  onClickToggleModal,
+}: PropsWithChildren<PropsType>) {
+  const accessToken =
+    typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+  const persistToken =
+    typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+
+  const [data, setData] = useState<NotificationDataType[]>([])
+
+  const getData = async ({ pageParam = 1 }) => {
+    const params = new URLSearchParams()
+    params.set('page', String(pageParam))
+    params.set('size', '12')
+
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/notifications?${params.toString()}`,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken || persistToken}`,
+        },
+      },
+    )
+
+    if (!res.ok) {
+      const resData = await res.json()
+      throw new Error(resData.message)
+    }
+
+    const resData = await res.json()
+    setData(resData.data)
+  }
+
+  useEffect(() => {
+    getData({ pageParam: 1 })
+  }, [])
+
+  const sortedData = [...data].sort((a, b) => Number(a.read) - Number(b.read))
+
+  return (
+    <div className="relative w-full h-full">
+      <div className="overflow-y-auto fixed z-50 w-[300px] h-[350px] rounded-[15px] bg-white shadow-md top-[70px] right-0">
+        {sortedData.map((item: NotificationDataType) => (
+          <Noticification key={item.id} item={item} />
+        ))}
+      </div>
+      <button
+        aria-label="Toggle modal"
+        className="fixed top-0 bottom-0 left-0 right-0 z-40 w-screen h-full"
+        onClick={(e: React.MouseEvent) => {
+          e.preventDefault()
+          onClickToggleModal?.()
+        }}
+        type="button"
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/components/recruitment/noticification/Noticification.tsx b/frontend/src/components/recruitment/noticification/Noticification.tsx
new file mode 100644
index 00000000..66ec9eba
--- /dev/null
+++ b/frontend/src/components/recruitment/noticification/Noticification.tsx
@@ -0,0 +1,21 @@
+import { HiOutlineUserCircle } from 'react-icons/hi2'
+
+type NotificationType = {
+  item: {
+    id: number
+    type: string
+    content: string
+    read: boolean
+  }
+}
+
+export default function RecruitmentCard({ item }: NotificationType) {
+  return (
+    <div className="border-b-[1px] border-gray-200 flex items-center w-[285px] h-[50px] text-lightgray text-[11px] py-2 px-4 bg-white border-solid">
+      <div>
+        <HiOutlineUserCircle strokeWidth="1" size="30" />
+      </div>
+      <span className="ml-2">{item.content}</span>
+    </div>
+  )
+}
diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts
index 24ae1d6a..5c4b8497 100644
--- a/frontend/src/utils/atoms.ts
+++ b/frontend/src/utils/atoms.ts
@@ -1,5 +1,6 @@
 import { atom } from 'recoil'
 import { recoilPersist } from 'recoil-persist'
+import { DirectionType, MultipleFilterType } from './types'
 
 const { persistAtom } = recoilPersist()
 
@@ -99,6 +100,26 @@ const usernameState = atom<string>({
   default: '',
 })
 
+const multiplefilterState = atom<MultipleFilterType[]>({
+  key: 'FilterState',
+  default: [],
+})
+
+const keywordfilterState = atom<string>({
+  key: 'keywordfilterState',
+  default: '',
+})
+
+const recruitfilterState = atom<boolean>({
+  key: 'recruitfilterState',
+  default: false,
+})
+
+const directionState = atom<DirectionType>({
+  key: 'directionState',
+  default: 'ASC',
+})
+
 export {
   titleState,
   tldrState,
@@ -118,4 +139,8 @@ export {
   projectIdState,
   searchTextState,
   usernameState,
+  multiplefilterState,
+  keywordfilterState,
+  recruitfilterState,
+  directionState,
 }
diff --git a/frontend/src/utils/stacks.ts b/frontend/src/utils/stacks.ts
index bcdc35d4..01afed2f 100644
--- a/frontend/src/utils/stacks.ts
+++ b/frontend/src/utils/stacks.ts
@@ -80,7 +80,7 @@ const AllStacks = [
   new AllStack('Kotlin', Kotlin),
   new AllStack('Kubernetes', Kubernetes),
   new AllStack('MongoDB', Mongodb),
-  new AllStack('MYSQL', Mysql),
+  new AllStack('MySQL', Mysql),
   new AllStack('Nextjs', Nextjs),
   new AllStack('Nodejs', Nodejs),
   new AllStack('Nestjs', Nestjs),
diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
new file mode 100644
index 00000000..190de1dc
--- /dev/null
+++ b/frontend/src/utils/types.ts
@@ -0,0 +1,20 @@
+export const Position = [
+  'FRONTEND',
+  'BACKEND',
+  'DESIGNER',
+  'PM',
+  'DEVOPS',
+  'AI',
+] as const
+
+export const Skill = ['React', 'Spring', 'MongoDB', 'Redis', 'MySQL'] as const
+
+export type PositionType = (typeof Position)[number]
+export type SkillType = (typeof Skill)[number]
+
+export type MultipleFilterType = {
+  category: 'position' | 'skill'
+  name: PositionType | SkillType
+}
+
+export type DirectionType = 'ASC' | 'DESC'
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 2dea46e5..7485c38e 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -20,6 +20,15 @@ module.exports = {
         subbanner: '#C1D0EF',
         gptbutton: '#7082CA',
         button: '#364A9A',
+        backendtag: '#1A287B',
+        frontendtag: '#EC6091',
+        designertag: '#F19E38',
+        pmtag: '#62C554',
+        devopstag: '#5F3BB4',
+        aitag: '#ED7547',
+        lightgray: '#717171',
+        recruitmentbg: '#f7f8fa',
+        recruitmentpink: '#EBBFF3',
       },
       width: {
         284: '17.75rem',
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 5a90d522..7d6b8b66 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -20,7 +20,9 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "strictNullChecks": true,
+    "noImplicitAny": true
   },
   "include": [
     "next-env.d.ts",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 59c075ab..01d04486 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -568,7 +568,7 @@
   dependencies:
     tslib "^2.5.0"
 
-"@babel/code-frame@^7.10.4":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.22.13"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
   integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
@@ -576,6 +576,18 @@
     "@babel/highlight" "^7.22.13"
     chalk "^2.4.2"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
@@ -590,6 +602,13 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.12.5":
   version "7.23.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
@@ -604,6 +623,103 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/types@^7.22.15":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.3.tgz#d5ea892c07f2ec371ac704420f4dcdb07b5f9598"
+  integrity sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/react@^11.8.1":
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
+  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
+  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -636,6 +752,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
   integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@hookform/resolvers@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.1.tgz#b7cbfe767434f52cba6b99b0a9a0b73eb8895188"
@@ -1309,6 +1445,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.3.tgz#5b763b321cd3b80f6b8dde7a37e1a77ff9358dd9"
   integrity sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prismjs@^1.26.1":
   version "1.26.1"
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.1.tgz#aae6739d8f0d14a3bc9e6dd83e6d791ad75d4d76"
@@ -1340,6 +1481,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.9"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
+  integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@18.2.22":
   version "18.2.22"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.22.tgz#abe778a1c95a07fa70df40a52d7300a40b949ccb"
@@ -1655,6 +1803,15 @@ axobject-query@^3.1.1:
   dependencies:
     dequal "^2.0.3"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1806,6 +1963,22 @@ confusing-browser-globals@^1.0.10:
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
   integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1944,6 +2117,14 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dompurify@^2.3.3:
   version "2.4.7"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
@@ -1967,6 +2148,13 @@ enhanced-resolve@^5.12.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.22.1:
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.2.tgz#90f7282d91d0ad577f505e423e52d4c1d93c1b8a"
@@ -2392,6 +2580,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -2630,6 +2823,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -2692,6 +2892,11 @@ is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
     get-intrinsic "^1.2.0"
     is-typed-array "^1.1.10"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -2897,6 +3102,11 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -3009,6 +3219,11 @@ lz-string@^1.5.0:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -3235,6 +3450,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -3366,7 +3591,7 @@ prismjs@^1.23.0, prismjs@^1.29.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
-prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3491,7 +3716,12 @@ react-hook-form@^7.46.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.46.2.tgz#051e3cb2a73f3e86de739f2198c6042902158c43"
   integrity sha512-x1DWmHQchV7x2Rq9l99M/cQHC8JGchAnw9Z0uTz5KrPa0bTl/Inm1NR7ceOARfIrkNuQNAhuSuZPYa6k7QYn3Q==
 
-react-is@^16.13.1:
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -3510,6 +3740,31 @@ react-quill@^2.0.0:
     lodash "^4.17.4"
     quill "^1.3.7"
 
+react-select@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3588,6 +3843,15 @@ resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.19.0:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
@@ -3716,6 +3980,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -3799,6 +4068,11 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
@@ -3893,6 +4167,11 @@ tiny-case@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
   integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -4026,6 +4305,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@@ -4126,6 +4410,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yaml@^2.1.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"