fix : eslint 에러 수정

- dependency cycle detected 에러 수정 - types.ts 파일을 추가, 여러 곳에서 import 하고있는 타입을 따로 분리해 참조 문제 해결
techeer-sv · Nov 23, 2023 · decfa96 · decfa96
1 parent 11d312c
commit decfa96
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 34 deletions.
diff --git a/frontend/src/app/recruitment/page.tsx b/frontend/src/app/recruitment/page.tsx
@@ -3,9 +3,8 @@
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
-import MultipleFilter, {
-  PositionType,
-} from '../../components/recruitment/MultipleFilter'
+import MultipleFilter from '../../components/recruitment/MultipleFilter'
+import { PositionType } from '../../utils/types'
 import { filterState } from '../../utils/atoms'
 import Filter from '../../components/recruitment/Filter'
 import RecruitmentCard from '../../components/recruitment/RecruitmentCard'
@@ -34,9 +33,8 @@ export default function Recruitment() {
     const skills = filter
       .filter((v) => v.category === 'skill')
       .map((v) => v.name)
-    const keywords = filter
-      .filter((v) => v.category === 'keyword')
-      .map((v) => v.name)
+
+    const keyword = filter.find((v) => v.category === 'keyword')
 
     const isRecruiting = filter.find((v) => v.category === 'isRecruiting')
 
@@ -48,9 +46,9 @@ export default function Recruitment() {
       params.append('tags', skill)
     })
 
-    keywords.forEach((keyword) => {
-      params.append('keyword', keyword)
-    })
+    if (keyword) {
+      params.append('keyword', keyword.name)
+    }
 
     if (isRecruiting) {
       params.append('isRecruiting', String(isRecruiting.name))
@@ -115,7 +113,7 @@ export default function Recruitment() {
         >
           {group.map((item: RecruitmentDataType) => (
             <div className="mx-8" key={item.id}>
-              <RecruitmentCard item={item} index={i} />
+              <RecruitmentCard item={item} />
             </div>
           ))}
         </div>

diff --git a/frontend/src/components/recruitment/MultipleFilter.tsx b/frontend/src/components/recruitment/MultipleFilter.tsx
@@ -1,31 +1,18 @@
 'use client'
 
-import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import Select, { StylesConfig } from 'react-select'
 import Image from 'next/image'
 import { filterState } from '../../utils/atoms'
 import x from '../../../public/images/svg/tag_x.svg'
-
-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 FilterType = {
-  category: 'position' | 'skill' | 'keyword' | 'isRecruiting'
-  name: PositionType | SkillType | string
-}
+import {
+  Position,
+  Skill,
+  PositionType,
+  SkillType,
+  FilterType,
+} from '../../utils/types'
 
 const positionOptions = Object.values(Position).map((position) => ({
   value: position,

diff --git a/frontend/src/components/recruitment/RecruitmentCard.tsx b/frontend/src/components/recruitment/RecruitmentCard.tsx
@@ -1,6 +1,6 @@
 import { HiOutlineUserCircle } from 'react-icons/hi2'
 import { TfiComment } from 'react-icons/tfi'
-import { PositionType } from './MultipleFilter'
+import { PositionType } from '../../utils/types'
 
 type RecruitmentCardProps = {
   item: {
@@ -11,7 +11,6 @@ type RecruitmentCardProps = {
     techTags: string[]
     recruiting: boolean
   }
-  index: number
 }
 
 export enum PositionColorClass {
@@ -23,7 +22,7 @@ export enum PositionColorClass {
   AI = 'bg-aitag',
 }
 
-export default function RecruitmentCard({ item, index }: RecruitmentCardProps) {
+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">

diff --git a/frontend/src/utils/atoms.ts b/frontend/src/utils/atoms.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil'
 import { recoilPersist } from 'recoil-persist'
-import { FilterType } from '../components/recruitment/MultipleFilter'
+import { FilterType } from './types'
 
 const { persistAtom } = recoilPersist()
 

diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
@@ -0,0 +1,18 @@
+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 FilterType = {
+  category: 'position' | 'skill' | 'keyword' | 'isRecruiting'
+  name: PositionType | SkillType | string
+}