Skip to content

Commit 523ada4

Browse files
limtjdghkslimtjdghks
committed
hotfix: recruit API 무한 요청 수정
1 parent 46a09d9 commit 523ada4

File tree

4 files changed

+95
-72
lines changed

4 files changed

+95
-72
lines changed

‎src/components/UI/RecruitUI.tsx‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import React, { useEffect, useState } from 'react'
2-
import { formatKoreanDate, useRecruitSchedule } from '../../pages/recruit/useRecruitSchedule'
3-
import { RecruitScheduleData } from '@/pages/recruit/Recruittype'
1+
import React, { useEffect, useState, useCallback } from 'react'
2+
import {
3+
formatKoreanDate,
4+
useRecruitSchedule,
5+
RecruitScheduleData,
6+
} from '../../pages/recruit/useRecruitSchedule'
47

58
interface RecruitUIProps {
69
name?: string
@@ -20,20 +23,23 @@ export const RecruitHeader: React.FC<RecruitHeaderProps> = ({ title }) => {
2023

2124
export const RecruitUI: React.FC = () => {
2225
const { loadSchedule } = useRecruitSchedule()
23-
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(null)
26+
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(
27+
null
28+
)
2429

25-
useEffect(() => {
26-
const fetchRecruit = async () => {
27-
try {
28-
const { scheduleData } = await loadSchedule()
29-
setScheduleData(scheduleData)
30-
} catch (error) {
31-
console.error('모집 기간 확인 중 오류 발생:', error)
32-
}
30+
const fetchRecruit = useCallback(async () => {
31+
try {
32+
const { scheduleData } = await loadSchedule()
33+
setScheduleData(scheduleData)
34+
} catch (error) {
35+
console.error('모집 기간 확인 중 오류 발생:', error)
3336
}
34-
fetchRecruit()
3537
}, [loadSchedule])
3638

39+
useEffect(() => {
40+
fetchRecruit()
41+
}, [fetchRecruit])
42+
3743
const formatDate = (isoString: string) => {
3844
const date = new Date(isoString)
3945
const options: Intl.DateTimeFormatOptions = {
@@ -109,20 +115,23 @@ export const RecruitUI: React.FC = () => {
109115

110116
export const RecruitUI_SUB: React.FC<RecruitUIProps> = ({ name }) => {
111117
const { loadSchedule } = useRecruitSchedule()
112-
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(null)
118+
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(
119+
null
120+
)
113121

114-
useEffect(() => {
115-
const fetchRecruit = async () => {
116-
try {
117-
const { scheduleData } = await loadSchedule()
118-
setScheduleData(scheduleData)
119-
} catch (error) {
120-
console.error('모집 기간 확인 중 오류 발생:', error)
121-
}
122+
const fetchRecruit = useCallback(async () => {
123+
try {
124+
const { scheduleData } = await loadSchedule()
125+
setScheduleData(scheduleData)
126+
} catch (error) {
127+
console.error('모집 기간 확인 중 오류 발생:', error)
122128
}
123-
fetchRecruit()
124129
}, [loadSchedule])
125130

131+
useEffect(() => {
132+
fetchRecruit()
133+
}, [fetchRecruit])
134+
126135
return (
127136
<div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] md:text-sm'>
128137
<p className='pt-3 '>
@@ -137,10 +146,16 @@ export const RecruitUI_SUB: React.FC<RecruitUIProps> = ({ name }) => {
137146
</p>
138147

139148
<p>
140-
{'다음 전형인 대면 인터뷰에서 뵐 수 있게 되어 기쁜 마음을 담아 안내드립니다.'}
149+
{
150+
'다음 전형인 대면 인터뷰에서 뵐 수 있게 되어 기쁜 마음을 담아 안내드립니다.'
151+
}
141152
</p>
142153

143-
<p className='mb-3'>대면 인터뷰는 {formatKoreanDate(scheduleData?.interviewPeriodStart)} ~ {formatKoreanDate(scheduleData?.interviewPeriodEnd)} 중에 진행 될 예정이며 편한 시간대로 폼을 작성해주시면 감사하겠습니다.</p>
154+
<p className='mb-3'>
155+
대면 인터뷰는 {formatKoreanDate(scheduleData?.interviewPeriodStart)} ~{' '}
156+
{formatKoreanDate(scheduleData?.interviewPeriodEnd)} 중에 진행 될
157+
예정이며 편한 시간대로 폼을 작성해주시면 감사하겠습니다.
158+
</p>
144159
</div>
145160
)
146161
}
@@ -170,7 +185,10 @@ export const RecruitUI_FINAL: React.FC<RecruitUIProps> = ({ name }) => {
170185
<div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] md:text-sm'>
171186
<p className='pt-3 font-pretendardBold '>
172187
안녕하세요 {`${name}`}님, <br /> 다솜 34기에
173-
<span className='text-mainColor font-pretendardBold'> 최종합격</span>{' '}
188+
<span className='text-mainColor font-pretendardBold'>
189+
{' '}
190+
최종합격
191+
</span>{' '}
174192
되신 점 축하드립니다!
175193
</p>
176194

‎src/pages/recruit/Recruit.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect, useRef } from 'react'
1+
import React, { useState, useEffect, useRef, useCallback } from 'react'
22
import MobileLayout from '../../components/layout/MobileLayout'
33
import { useNavigate } from 'react-router-dom'
44
import { RecruitUI, RecruitHeader } from '../../components/UI/RecruitUI'
@@ -21,33 +21,33 @@ const Recruit: React.FC = () => {
2121
interviewPeriodEnd: '',
2222
})
2323

24-
useEffect(() => {
25-
const checkRecruitmentPeriod = async () => {
26-
try {
27-
const { scheduleData } = await loadSchedule()
24+
const checkRecruitmentPeriod = useCallback(async () => {
25+
try {
26+
const { scheduleData } = await loadSchedule()
2827

29-
// 면접 일정 데이터 포맷
30-
setInterviewData({
31-
documentPassAnnouncement: formatKoreanDate(
32-
scheduleData.documentPassAnnouncement
33-
),
34-
interviewPeriodStart: formatKoreanDate(
35-
scheduleData.interviewPeriodStart
36-
),
37-
interviewPeriodEnd: formatKoreanDate(scheduleData.interviewPeriodEnd),
38-
})
39-
} catch (error) {
40-
console.error('모집 기간 확인 중 오류 발생:', error)
41-
if (!alertShown.current) {
42-
alertShown.current = true
43-
alert('네트워크 오류가 발생했습니다.')
44-
navigate('/')
45-
}
28+
// 면접 일정 데이터 포맷
29+
setInterviewData({
30+
documentPassAnnouncement: formatKoreanDate(
31+
scheduleData.documentPassAnnouncement
32+
),
33+
interviewPeriodStart: formatKoreanDate(
34+
scheduleData.interviewPeriodStart
35+
),
36+
interviewPeriodEnd: formatKoreanDate(scheduleData.interviewPeriodEnd),
37+
})
38+
} catch (error) {
39+
console.error('모집 기간 확인 중 오류 발생:', error)
40+
if (!alertShown.current) {
41+
alertShown.current = true
42+
alert('네트워크 오류가 발생했습니다.')
43+
navigate('/')
4644
}
4745
}
46+
}, [loadSchedule, navigate])
4847

48+
useEffect(() => {
4949
checkRecruitmentPeriod()
50-
}, [navigate, loadSchedule])
50+
}, [checkRecruitmentPeriod])
5151

5252
/*
5353
useEffect(() => {

‎src/pages/recruit/Recruittype.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,15 +79,4 @@ export interface RecruitPeriodData {
7979
interviewPeriodStart: string
8080
interviewPeriodEnd: string
8181
interviewPassAnnouncement: string
82-
}
83-
84-
export interface RecruitScheduleData {
85-
recruitmentPeriodStart: string // YYYY-MM-DD
86-
recruitmentPeriodEnd: string // YYYY-MM-DD
87-
documentPassAnnouncement: string // YYYY-MM-DD
88-
interviewPeriodStart: string // YYYY-MM-DD
89-
interviewPeriodEnd: string // YYYY-MM-DD
90-
interviewTimeStart: string // HH:MM:SS
91-
interviewTimeEnd: string // HH:MM:SS
92-
interviewPassAnnouncement: string // YYYY-MM-DD
9382
}

‎src/pages/recruit/useRecruitSchedule.ts‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useState } from 'react'
1+
import { useState, useCallback } from 'react'
22
import { fetchRecruitConfigs } from './RecruitService'
3-
import { RecruitConfigItem, RecruitScheduleData } from './Recruittype'
3+
import { RecruitConfigItem } from './Recruittype'
44

55
// 날짜를 'M월 D일(요일)'로 포맷하는 유틸 함수
66
export const formatKoreanDate = (dateStr?: string): string => {
@@ -39,15 +39,29 @@ export const formatDate = (dateStr?: string): string => {
3939
return `${year}-${month}-${day}`
4040
}
4141

42+
// 모집 일정 데이터 타입 정의
43+
export interface RecruitScheduleData {
44+
recruitmentPeriodStart: string // YYYY-MM-DD
45+
recruitmentPeriodEnd: string // YYYY-MM-DD
46+
documentPassAnnouncement: string // YYYY-MM-DD
47+
interviewPeriodStart: string // YYYY-MM-DD
48+
interviewPeriodEnd: string // YYYY-MM-DD
49+
interviewTimeStart: string // HH:MM:SS
50+
interviewTimeEnd: string // HH:MM:SS
51+
interviewPassAnnouncement: string // YYYY-MM-DD
52+
}
53+
4254
// 모집 일정 조회 및 처리를 담당하는 훅
4355
export const useRecruitSchedule = () => {
4456
const [isRecruiting, setIsRecruiting] = useState<boolean | null>(null)
45-
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(null)
46-
47-
const loadSchedule = async (): Promise<{
48-
isRecruiting: boolean;
49-
data: RecruitConfigItem[];
50-
scheduleData: RecruitScheduleData;
57+
const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(
58+
null
59+
)
60+
61+
const loadSchedule = useCallback(async (): Promise<{
62+
isRecruiting: boolean
63+
data: RecruitConfigItem[]
64+
scheduleData: RecruitScheduleData
5165
}> => {
5266
try {
5367
const data = await fetchRecruitConfigs()
@@ -89,8 +103,10 @@ export const useRecruitSchedule = () => {
89103
interviewPeriodEnd: formatDate(
90104
data.find(item => item.key === 'INTERVIEW_PERIOD_END')?.value
91105
),
92-
interviewTimeStart: data.find(item => item.key === 'INTERVIEW_TIME_START')?.value || '',
93-
interviewTimeEnd: data.find(item => item.key === 'INTERVIEW_TIME_END')?.value || '',
106+
interviewTimeStart:
107+
data.find(item => item.key === 'INTERVIEW_TIME_START')?.value || '',
108+
interviewTimeEnd:
109+
data.find(item => item.key === 'INTERVIEW_TIME_END')?.value || '',
94110
interviewPassAnnouncement: formatDate(
95111
data.find(item => item.key === 'INTERVIEW_PASS_ANNOUNCEMENT')?.value
96112
),
@@ -100,11 +116,11 @@ export const useRecruitSchedule = () => {
100116

101117
return { isRecruiting: isRecruitingNow, data, scheduleData }
102118
} catch (error) {
103-
//console.error('모집 일정 조회 중 오류 발생:', error)
119+
console.error('모집 일정 조회 중 오류 발생:', error)
104120
setIsRecruiting(false)
105121
throw error
106122
}
107-
}
123+
}, [])
108124

109125
return {
110126
isRecruiting,

0 commit comments

Comments
 (0)