활동 현황
- {year}
+
+ {year}
+
- 
-
+
+
+
{activityData.map((section, index) => (
@@ -98,15 +106,25 @@ const ActivityStatus: React.FC<{ year: string }> = ({ year }) => {
-
{section.items.map((activity, idx) => (
-
- +
- {activity.title && ( - {activity.title} + + {activity.title} + )} {activity.award && ( - {activity.award} + + {activity.award} + )} {activity.subtitle && ( - {' '}{activity.subtitle} + + {' '} + {activity.subtitle} + )} ))} @@ -121,4 +139,4 @@ const ActivityStatus: React.FC<{ year: string }> = ({ year }) => { ) } -export default ActivityStatus \ No newline at end of file +export default ActivityStatus diff --git a/src/components/UI/AdminPagination.tsx b/src/components/UI/AdminPagination.tsx index 9a2faa6..1c91d01 100644 --- a/src/components/UI/AdminPagination.tsx +++ b/src/components/UI/AdminPagination.tsx @@ -1,48 +1,63 @@ import React from 'react' interface PaginationProps { - currentPage: number - totalPages: number - setCurrentPage: React.Dispatch
-
- {currentPage} / {totalPages}
-
-
- )
+const AdminPagination: React.FC
+
+
+ {currentPage} / {totalPages}
+
+
+
+ )
}
-export default AdminPagination
\ No newline at end of file
+export default AdminPagination
diff --git a/src/components/UI/FAQ_Section.tsx b/src/components/UI/FAQ_Section.tsx
index 1fe84b1..86228f6 100644
--- a/src/components/UI/FAQ_Section.tsx
+++ b/src/components/UI/FAQ_Section.tsx
@@ -21,8 +21,12 @@ const FAQItem: React.FC{question}
-{answer}
++ {question} +
++ {answer} +
) } @@ -34,42 +38,42 @@ const containerVariants = { transition: { staggerChildren: 0.1, ease: 'easeOut', - } - } + }, + }, } const FAQSection: React.FC = () => { return (
+
{
)
}
-export default FAQSection
\ No newline at end of file
+export default FAQSection
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index c7eb173..5f1b002 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -12,18 +12,24 @@ export const Header = (): JSX.Element => {
const alertShown = useRef(false)
const toggleMenu = () => {
- setIsMenuOpen((prev) => !prev)
+ setIsMenuOpen(prev => !prev)
}
// 모집 기간 확인
useEffect(() => {
const checkRecruitmentPeriod = async () => {
try {
- const response = await axios.get('https://dmu-dasom-api.or.kr/api/recruit')
+ const response = await axios.get(
+ 'https://dmu-dasom-api.or.kr/api/recruit'
+ )
const data = response.data
- const recruitmentStart = data.find((item: any) => item.key === 'RECRUITMENT_PERIOD_START')?.value
- const recruitmentEnd = data.find((item: any) => item.key === 'RECRUITMENT_PERIOD_END')?.value
+ const recruitmentStart = data.find(
+ (item: any) => item.key === 'RECRUITMENT_PERIOD_START'
+ )?.value
+ const recruitmentEnd = data.find(
+ (item: any) => item.key === 'RECRUITMENT_PERIOD_END'
+ )?.value
const startDate = new Date(recruitmentStart)
const endDate = new Date(recruitmentEnd)
@@ -67,10 +73,13 @@ export const Header = (): JSX.Element => {
margin: '0 auto',
}}
>
-
{
- navigate('/')
- isMenuOpen ? toggleMenu() : null
- }}>
+ ('')
- const [meetingDates, setMeetingDates] = useState([])
-
- // 날짜 사이에 일 수 계산
- const getDateDiff = (d1: string, d2: string) => {
- const date1 = new Date(d1)
- const date2 = new Date(d2)
+ const [selectedDate, setSelectedDate] = useState('')
+ const [meetingDates, setMeetingDates] = useState([])
- const diffDate = date1.getTime() - date2.getTime()
+ // 날짜 사이에 일 수 계산
+ const getDateDiff = (d1: string, d2: string) => {
+ const date1 = new Date(d1)
+ const date2 = new Date(d2)
- return Math.abs(diffDate / (1000 * 60 * 60 * 24))
- }
-
- const getFormattedDate = (date: Date) => {
- return date.toISOString().split('T')[0]
- }
+ const diffDate = date1.getTime() - date2.getTime()
- // 면접 예약 일자 목록 가져오기
- useEffect(() => {
- const startDate = new Date(period.periodStart)
- const dateArray: string[] = []
+ return Math.abs(diffDate / (1000 * 60 * 60 * 24))
+ }
- for (let i = 0; i <= getDateDiff(period.periodStart, period.periodEnd); i++) {
- const date = new Date(startDate)
- date.setDate(startDate.getDate() + i)
+ const getFormattedDate = (date: Date) => {
+ return date.toISOString().split('T')[0]
+ }
- dateArray.push(getFormattedDate(date))
- /* meetingDates[
+ // 면접 예약 일자 목록 가져오기
+ useEffect(() => {
+ const startDate = new Date(period.periodStart)
+ const dateArray: string[] = []
+
+ for (
+ let i = 0;
+ i <= getDateDiff(period.periodStart, period.periodEnd);
+ i++
+ ) {
+ const date = new Date(startDate)
+ date.setDate(startDate.getDate() + i)
+
+ dateArray.push(getFormattedDate(date))
+ /* meetingDates[
{date: '2025-03-12'},
...
]
*/
- }
- setMeetingDates(dateArray)
- }, [period])
-
-
+ }
+ setMeetingDates(dateArray)
+ }, [period])
- // 날짜 클릭 핸들러 (상태값 반환용)
- const handleDateClick = (date: string) => {
- setSelectedDate(date)
- onSelect(date)
- }
+ // 날짜 클릭 핸들러 (상태값 반환용)
+ const handleDateClick = (date: string) => {
+ setSelectedDate(date)
+ onSelect(date)
+ }
- return (
- ('')
- const [meetingTimes, setMeetingTimes] = useState([])
+const MeetingTimeSelector = ({
+ onSelect,
+ time,
+ disabledSelectTime,
+ slotsForDate,
+}: props): JSX.Element => {
+ const [selectedTime, setSelectedTime] = useState('')
+ const [meetingTimes, setMeetingTimes] = useState([])
- // 면접 예약 시간 목록 가져오기
- useEffect(() => {
- //time -> 분으로 변환
- const parseTime = (timeStr: string): number => {
- const [hours, minutes] = timeStr.split(':').map(Number)
- return hours * 60 + minutes
- }
- // 분(totalMinutes)을 08:00 형식으로 변환
- const formatTime = (totalMinutes: number): string => {
- const hours = Math.floor(totalMinutes / 60)
- const minutes = totalMinutes % 60
- return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
- }
+ // 면접 예약 시간 목록 가져오기
+ useEffect(() => {
+ //time -> 분으로 변환
+ const parseTime = (timeStr: string): number => {
+ const [hours, minutes] = timeStr.split(':').map(Number)
+ return hours * 60 + minutes
+ }
+ // 분(totalMinutes)을 08:00 형식으로 변환
+ const formatTime = (totalMinutes: number): string => {
+ const hours = Math.floor(totalMinutes / 60)
+ const minutes = totalMinutes % 60
+ return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
+ }
- const startMinutes = parseTime(time.timeStart)
- const endMinutes = parseTime(time.timeEnd)
- const timeArray: timeInfo[] = []
+ const startMinutes = parseTime(time.timeStart)
+ const endMinutes = parseTime(time.timeEnd)
+ const timeArray: timeInfo[] = []
- // endMinutes 이전까지 20분 간격으로 time 추가
- for (let minutes = startMinutes; minutes < endMinutes; minutes += 20) {
- timeArray.push({ time: formatTime(minutes) })
- /*
+ // endMinutes 이전까지 20분 간격으로 time 추가
+ for (let minutes = startMinutes; minutes < endMinutes; minutes += 20) {
+ timeArray.push({ time: formatTime(minutes) })
+ /*
meetingTimes[
{time: '12:00'},
{time: '12:20'},
...
]
*/
- }
+ }
- setMeetingTimes(timeArray)
- }, [time])
+ setMeetingTimes(timeArray)
+ }, [time])
- // 시간 클릭 핸들러 (부모컴포넌트에 state값 반환)
- const handleTimeClick = (meetingTime: timeInfo) => {
- setSelectedTime(meetingTime.time)
- onSelect(meetingTime.time)
- }
+ // 시간 클릭 핸들러 (부모컴포넌트에 state값 반환)
+ const handleTimeClick = (meetingTime: timeInfo) => {
+ setSelectedTime(meetingTime.time)
+ onSelect(meetingTime.time)
+ }
- return (
- = React.memo(
- ({ id, title, image, images, createdAt, onClick, isDetail = false }) => {
- const [loading, setLoading] = useState(true)
+ ({ id, title, image, images, createdAt, onClick, isDetail = false }) => {
+ const [loading, setLoading] = useState(true)
- const formattedDate = useMemo(
- () => new Date(createdAt).toISOString().split('T')[0].replace(/-/g, '.'),
- [createdAt]
- )
+ const formattedDate = useMemo(
+ () => new Date(createdAt).toISOString().split('T')[0].replace(/-/g, '.'),
+ [createdAt]
+ )
- // Base64 → 이미지 URL 변환 (useMemo로 캐싱)
- const imageUrls = useMemo(() => {
- if (!images || images.length === 0) return null
- return images.map((img) =>
- img?.encodedData ? `data:${img.fileFormat};base64,${img.encodedData}` : null
- )
- }, [images])
+ // Base64 → 이미지 URL 변환 (useMemo로 캐싱)
+ const imageUrls = useMemo(() => {
+ if (!images || images.length === 0) return null
+ return images.map(img =>
+ img?.encodedData
+ ? `data:${img.fileFormat};base64,${img.encodedData}`
+ : null
+ )
+ }, [images])
- return (
- >
+ files: File[]
+ setFiles: React.Dispatch>
}
const NewsFileUpload: React.FC = ({ files, setFiles }) => {
- const handleImageChange = (e: React.ChangeEvent) => {
- if (e.target.files) {
- const selectedFiles = Array.from(e.target.files)
- setFiles((prevFiles) => [...prevFiles, ...selectedFiles])
- }
+ const handleImageChange = (e: React.ChangeEvent) => {
+ if (e.target.files) {
+ const selectedFiles = Array.from(e.target.files)
+ setFiles(prevFiles => [...prevFiles, ...selectedFiles])
}
+ }
- const handleFileRemove = (index: number) => {
- setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index))
- }
+ const handleFileRemove = (index: number) => {
+ setFiles(prevFiles => prevFiles.filter((_, i) => i !== index))
+ }
- return (
-
{
+ navigate('/')
+ isMenuOpen ? toggleMenu() : null
+ }}
+ >
DASOM
@@ -146,4 +155,4 @@ export const Header = (): JSX.Element => {
)}
)
-}
\ No newline at end of file
+}
diff --git a/src/components/UI/MailButtons.tsx b/src/components/UI/MailButtons.tsx
index 6161a04..059e45e 100644
--- a/src/components/UI/MailButtons.tsx
+++ b/src/components/UI/MailButtons.tsx
@@ -2,41 +2,49 @@ import React from 'react'
import axios from 'axios'
import { toast } from 'react-toastify'
-const sendResultMail = async (mailType : any) => {
- const confirmation = window.confirm(`${mailType === 'DOCUMENT_RESULT' ? '서류' : '면접'} 합격자에게 메일을 보낼까요?`)
- if (!confirmation) return
- const accessToken = localStorage.getItem('accessToken')
+const sendResultMail = async (mailType: any) => {
+ const confirmation = window.confirm(
+ `${mailType === 'DOCUMENT_RESULT' ? '서류' : '면접'} 합격자에게 메일을 보낼까요?`
+ )
+ if (!confirmation) return
+ const accessToken = localStorage.getItem('accessToken')
- try {
- await axios.post('https://dmu-dasom-api.or.kr/api/admin/applicants/send-email', { mailType }, {
- headers: {
- Authorization: `Bearer ${accessToken}`
- }
- })
- toast.success(`${mailType === 'DOCUMENT_RESULT' ? '서류' : '면접'} 합격자에게 메일을 발송했습니다.`)
- } catch (error) {
- toast.error('메일 발송에 실패했습니다.')
- console.error('메일 발송 오류:', error)
- }
+ try {
+ await axios.post(
+ 'https://dmu-dasom-api.or.kr/api/admin/applicants/send-email',
+ { mailType },
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ }
+ )
+ toast.success(
+ `${mailType === 'DOCUMENT_RESULT' ? '서류' : '면접'} 합격자에게 메일을 발송했습니다.`
+ )
+ } catch (error) {
+ toast.error('메일 발송에 실패했습니다.')
+ console.error('메일 발송 오류:', error)
+ }
}
const MailButtons = () => {
- return (
-
-
-
-
- )
+ return (
+
+
+
+
+ )
}
-export default MailButtons
\ No newline at end of file
+export default MailButtons
diff --git a/src/components/UI/MeetingDate.tsx b/src/components/UI/MeetingDate.tsx
index 614e46d..74b4094 100644
--- a/src/components/UI/MeetingDate.tsx
+++ b/src/components/UI/MeetingDate.tsx
@@ -1,26 +1,37 @@
import React, { JSX } from 'react'
interface props {
- date: string
- onClick?: () => void
- isSelected?: boolean // 선택 여부
+ date: string
+ onClick?: () => void
+ isSelected?: boolean // 선택 여부
}
-const getDisplatyDate = (date:string) => {
- const d = new Date(date)
- const month = (d.getMonth() + 1).toString()
- const day = d.getDate().toString()
- const week = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'][d.getDay()]
- return `${month}.${day} ${week}`
+const getDisplatyDate = (date: string) => {
+ const d = new Date(date)
+ const month = (d.getMonth() + 1).toString()
+ const day = d.getDate().toString()
+ const week = [
+ '일요일',
+ '월요일',
+ '화요일',
+ '수요일',
+ '목요일',
+ '금요일',
+ '토요일',
+ ][d.getDay()]
+ return `${month}.${day} ${week}`
}
-// 면접 날짜 선택 여부 컴포넌트
+// 면접 날짜 선택 여부 컴포넌트
const MeetingDate = ({ date, onClick, isSelected }: props): JSX.Element => {
- return (
-
- )
+ return (
+
+ )
}
-export default MeetingDate
\ No newline at end of file
+export default MeetingDate
diff --git a/src/components/UI/MeetingDateSelector.tsx b/src/components/UI/MeetingDateSelector.tsx
index cdf401e..bbacc5c 100644
--- a/src/components/UI/MeetingDateSelector.tsx
+++ b/src/components/UI/MeetingDateSelector.tsx
@@ -2,68 +2,75 @@ import React, { JSX, useEffect, useState } from 'react'
import MeetingDate from './MeetingDate'
interface interviewPeriod {
- periodStart: string
- periodEnd: string
+ periodStart: string
+ periodEnd: string
}
interface props {
- onSelect: (date: string) => void
- period: interviewPeriod // 면접 기간
+ onSelect: (date: string) => void
+ period: interviewPeriod // 면접 기간
}
-// 면접 날짜 선택 레이아웃
+// 면접 날짜 선택 레이아웃
const MeetingDateSelector = ({ onSelect, period }: props): JSX.Element => {
- const [selectedDate, setSelectedDate] = useState
- {meetingDates.map((date, index) => (
- handleDateClick(date)} isSelected={selectedDate === date} date={date} />
- ))}
-
- )
+ return (
+
+ {meetingDates.map((date, index) => (
+ handleDateClick(date)}
+ isSelected={selectedDate === date}
+ date={date}
+ />
+ ))}
+
+ )
}
-export default MeetingDateSelector
\ No newline at end of file
+export default MeetingDateSelector
diff --git a/src/components/UI/MeetingTime.tsx b/src/components/UI/MeetingTime.tsx
index 32b2df6..0f56cd5 100644
--- a/src/components/UI/MeetingTime.tsx
+++ b/src/components/UI/MeetingTime.tsx
@@ -1,24 +1,32 @@
import React, { JSX } from 'react'
interface props {
- time: string
- onClick?: () => void // 시간 선택 핸들러
- isSelected?: boolean
- disabled: boolean
+ time: string
+ onClick?: () => void // 시간 선택 핸들러
+ isSelected?: boolean
+ disabled: boolean
}
// 면접 시간 선택 버튼 컴포넌트
-const MeetingTime = ({ time, onClick, isSelected, disabled }: props): JSX.Element => {
- return (
-
- )
+const MeetingTime = ({
+ time,
+ onClick,
+ isSelected,
+ disabled,
+}: props): JSX.Element => {
+ return (
+
+ )
}
-export default MeetingTime
\ No newline at end of file
+export default MeetingTime
diff --git a/src/components/UI/MeetingTimeSelector.tsx b/src/components/UI/MeetingTimeSelector.tsx
index fc6923c..31ef1f6 100644
--- a/src/components/UI/MeetingTimeSelector.tsx
+++ b/src/components/UI/MeetingTimeSelector.tsx
@@ -2,82 +2,89 @@ import React, { JSX, useEffect, useState } from 'react'
import MeetingTime from './MeetingTime'
interface timeInfo {
- time: string
+ time: string
}
interface interviewTime {
- timeStart: string
- timeEnd: string
+ timeStart: string
+ timeEnd: string
}
interface props {
- onSelect: (time: string) => void
- time: interviewTime // 면접 시간
- disabledSelectTime: boolean
- slotsForDate: any[]
+ onSelect: (time: string) => void
+ time: interviewTime // 면접 시간
+ disabledSelectTime: boolean
+ slotsForDate: any[]
}
-const MeetingTimeSelector = ({ onSelect, time, disabledSelectTime, slotsForDate }: props): JSX.Element => {
- const [selectedTime, setSelectedTime] = useState
- {meetingTimes.map((meetingTime, index) => {
- const matchingSlot = slotsForDate.find(slot => slot.startTime.startsWith(meetingTime.time))
- const isActive = matchingSlot?.interviewStatus === 'ACTIVE'
+ return (
+ handleTimeClick(meetingTime)}
+ isSelected={selectedTime === `${meetingTime.time}`}
+ disabled={!isActive || disabledSelectTime}
+ />
+ )
+ })}
+
+ )
}
-export default MeetingTimeSelector
\ No newline at end of file
+export default MeetingTimeSelector
diff --git a/src/components/UI/NewsContent.tsx b/src/components/UI/NewsContent.tsx
index 9694a39..e8ad221 100644
--- a/src/components/UI/NewsContent.tsx
+++ b/src/components/UI/NewsContent.tsx
@@ -5,80 +5,88 @@ import 'swiper/css'
import 'swiper/css/pagination'
interface NewsProps {
- id: number
- title: string
- image?: string | null
- images?: { encodedData: string; fileFormat: string }[] | null
- createdAt: string
- onClick: () => void
- isDetail?: boolean
+ id: number
+ title: string
+ image?: string | null
+ images?: { encodedData: string; fileFormat: string }[] | null
+ createdAt: string
+ onClick: () => void
+ isDetail?: boolean
}
const NewsContent: React.FC
+ {meetingTimes.map((meetingTime, index) => {
+ const matchingSlot = slotsForDate.find(slot =>
+ slot.startTime.startsWith(meetingTime.time)
+ )
+ const isActive = matchingSlot?.interviewStatus === 'ACTIVE'
- return (
- handleTimeClick(meetingTime)}
- isSelected={selectedTime === `${meetingTime.time}`}
- disabled={!isActive || disabledSelectTime}
- />
- )
- })}
-
- )
+ return (
+
- {loading && (
-
- )}
+ return (
+
+ {imageUrls.map(
+ (imageUrl, index) =>
+ imageUrl && (
+
+ 
setLoading(false)}
+ loading='lazy'
+ />
+
+ )
+ )}
+
+ ) : (
+ image && (
+ 
setLoading(false)}
+ loading='lazy'
+ />
+ )
+ )}
+
+ )
+ }
)
-export default NewsContent
\ No newline at end of file
+export default NewsContent
diff --git a/src/components/UI/NewsFileUpload.tsx b/src/components/UI/NewsFileUpload.tsx
index 9eeace5..687c29d 100644
--- a/src/components/UI/NewsFileUpload.tsx
+++ b/src/components/UI/NewsFileUpload.tsx
@@ -1,46 +1,50 @@
import React from 'react'
interface FileUploadProps {
- files: File[]
- setFiles: React.Dispatch
+ {loading && (
+
+ )}
- {isDetail && imageUrls ? (
-
- {imageUrls.map((imageUrl, index) =>
- imageUrl && (
-
- setLoading(false)}
- loading='lazy'
- />
-
- )
- )}
-
- ) : (
- image && (
- setLoading(false)}
- loading='lazy'
- />
- )
- )}
-
- )
- }
+ {isDetail && imageUrls ? (
+ {title}
-작성일: {formattedDate}
-+ {title} +
+작성일: {formattedDate}
+
-
-
+ return (
+ >
- setContent: React.Dispatch>
+ title: string
+ content: string
+ setTitle: React.Dispatch>
+ setContent: React.Dispatch>
}
-const NewsTextEditor: React.FC = ({ title, content, setTitle, setContent }) => {
- const autoResizeTextarea = (e: React.FormEvent) => {
- const textarea = e.target as HTMLTextAreaElement
- textarea.style.height = 'auto'
- textarea.style.height = `${textarea.scrollHeight}px`
- }
+const NewsTextEditor: React.FC = ({
+ title,
+ content,
+ setTitle,
+ setContent,
+}) => {
+ const autoResizeTextarea = (e: React.FormEvent) => {
+ const textarea = e.target as HTMLTextAreaElement
+ textarea.style.height = 'auto'
+ textarea.style.height = `${textarea.scrollHeight}px`
+ }
- const applyFormat = (tag: string, style?: string) => {
- const formattedText = style
- ? ``
- : `<${tag}>`
+ const applyFormat = (tag: string, style?: string) => {
+ const formattedText = style
+ ? ``
+ : `<${tag}>`
- setContent((prev) => prev + formattedText)
- }
+ setContent(prev => prev + formattedText)
+ }
- return (
-
+
+
-
+ )
}
-export default NewsFileUpload
\ No newline at end of file
+export default NewsFileUpload
diff --git a/src/components/UI/NewsNotice.tsx b/src/components/UI/NewsNotice.tsx
index 052cd9d..41876bf 100644
--- a/src/components/UI/NewsNotice.tsx
+++ b/src/components/UI/NewsNotice.tsx
@@ -1,15 +1,18 @@
import React, { JSX } from 'react'
interface notice {
- text: string
+ text: string
}
const NewsNotice = ({ text }: notice): JSX.Element => {
- return (
-
-
+ 업로드 된 파일 목록
- {Array.isArray(files) && files.length > 0 ? (
- files.map((file, index) => (
- handleFileRemove(index)}>
- {file.name}
-
- ))
- ) : (
- 새로 업로드된 파일이 없습니다.
- )}
+
+
- )
+ ))
+ ) : (
+ 업로드 된 파일 목록
+ {Array.isArray(files) && files.length > 0 ? (
+ files.map((file, index) => (
+ handleFileRemove(index)}
+ >
+ {file.name}
- 새로 업로드된 파일이 없습니다.
+ )}
+
-
-
- )
+ return (
+
+
+
+ )
}
-export default NewsNotice
\ No newline at end of file
+export default NewsNotice
diff --git a/src/components/UI/NewsTextEditor.tsx b/src/components/UI/NewsTextEditor.tsx
index a11765c..3593c7b 100644
--- a/src/components/UI/NewsTextEditor.tsx
+++ b/src/components/UI/NewsTextEditor.tsx
@@ -1,67 +1,81 @@
import React from 'react'
interface TextEditorProps {
- title: string
- content: string
- setTitle: React.Dispatch
+ return (
+
+
+