- {
/>
- {
/>
-
>;
+ size?: 'sm' | 'lg';
}
-const CalendarNavigation: React.FC = ({ currentDate, setCurrentDate }) => {
+const CalendarNavigation: React.FC = ({ currentDate, setCurrentDate, size = 'lg' }) => {
return (
-
+
-
- {currentDate.getFullYear()}. {currentDate.getMonth() + 1}
-
+ {size === 'sm' ? (
+
+ {currentDate.getFullYear()}. {currentDate.getMonth() + 1}
+
+ ) : (
+
+ {currentDate.getFullYear()}. {currentDate.getMonth() + 1}
+
+ )}
);
diff --git a/src/components/recruit/calendar/DatePicker.tsx b/src/components/recruit/calendar/DatePicker.tsx
new file mode 100644
index 0000000..3db4d50
--- /dev/null
+++ b/src/components/recruit/calendar/DatePicker.tsx
@@ -0,0 +1,40 @@
+import SmallCalendar from '@/components/recruit/calendar/SmallCalendar';
+import CalendarIcon from '@/components/ui/icons/CalendarIcon';
+import useClickOutsideRef from '@/hooks/useClickOutsideRef';
+import { useState } from 'react';
+
+interface PDatePicker {
+ placeholder: string;
+ value: Date | null;
+ id?: string;
+ setDate?: React.Dispatch>;
+ startDate?: Date | null;
+}
+
+const DatePicker: React.FC = ({ placeholder, value, id, setDate, startDate }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const ref = useClickOutsideRef(() => setIsOpen(false));
+
+ return (
+
+
+ {isOpen && (
+
+
+
+ )}
+
+ );
+};
+
+export default DatePicker;
diff --git a/src/components/recruit/calendar/RecruitCalendar.tsx b/src/components/recruit/calendar/RecruitCalendar.tsx
index e022d54..eca3f04 100644
--- a/src/components/recruit/calendar/RecruitCalendar.tsx
+++ b/src/components/recruit/calendar/RecruitCalendar.tsx
@@ -1,9 +1,9 @@
-import useCalendar from '@/hooks/useCalendar';
import Calendar from '@/components/recruit/calendar/Calendar';
import CalendarNavigation from '@/components/recruit/calendar/CalendarNavigation';
+import useRecruitCalendar from '@/hooks/useRecruitCalendar';
const RecruitCalendar: React.FC = () => {
- const { currentDate, setCurrentDate, weekCalendarList } = useCalendar();
+ const { currentDate, setCurrentDate, weekCalendarList } = useRecruitCalendar();
return (
diff --git a/src/components/recruit/calendar/SmallCalendar.tsx b/src/components/recruit/calendar/SmallCalendar.tsx
new file mode 100644
index 0000000..e932a28
--- /dev/null
+++ b/src/components/recruit/calendar/SmallCalendar.tsx
@@ -0,0 +1,84 @@
+import CalendarNavigation from '@/components/recruit/calendar/CalendarNavigation';
+import useCalendar from '@/hooks/useCalendar';
+import { useEffect } from 'react';
+
+interface PSmallCalendar {
+ selectedDate?: Date | null;
+ setDate?: React.Dispatch>;
+ startDate?: Date | null;
+}
+
+const SmallCalendar: React.FC = ({ selectedDate, setDate, startDate }) => {
+ const { weekCalendarList, currentDate, setCurrentDate } = useCalendar();
+
+ useEffect(() => {
+ if (startDate) {
+ if (startDate > currentDate) setCurrentDate(startDate);
+ } else if (selectedDate) {
+ setCurrentDate(selectedDate);
+ }
+ }, [selectedDate, setCurrentDate, startDate]);
+
+ const isSelectedDate = (date: number) => {
+ if (!selectedDate) return false;
+ return (
+ currentDate.getFullYear() === selectedDate.getFullYear() &&
+ currentDate.getMonth() === selectedDate.getMonth() &&
+ selectedDate.getDate() === date
+ );
+ };
+
+ const canSelect = (date: number) => {
+ if (!startDate) return true;
+ return new Date(currentDate.getFullYear(), currentDate.getMonth(), date) > startDate;
+ };
+
+ const handleDateClick = (clickedDate: number) => {
+ if (!setDate) return;
+ const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), clickedDate);
+ setDate(date);
+ };
+
+ return (
+
+
+
+
+
+ | 일 |
+ 월 |
+ 화 |
+ 수 |
+ 목 |
+ 금 |
+ 토 |
+
+
+
+ {weekCalendarList.map((week, rIdx) => (
+
+ {week.map((date, cIdx) => (
+ |
+ {date === 0 || !canSelect(date) ? (
+
+ ) : (
+
+ )}
+ |
+ ))}
+
+ ))}
+
+
+
+ );
+};
+
+export default SmallCalendar;
diff --git a/src/components/recruit/new/RecruitForm.tsx b/src/components/recruit/new/RecruitForm.tsx
new file mode 100644
index 0000000..6c53234
--- /dev/null
+++ b/src/components/recruit/new/RecruitForm.tsx
@@ -0,0 +1,173 @@
+import DatePicker from '@/components/recruit/calendar/DatePicker';
+import Dropdown from '@/components/ui/dropdown/Dropdown';
+import Button from '@/components/ui/button/Button';
+import TextInput from '@/components/ui/input/TextInput';
+import useTextInput from '@/hooks/useTextInput';
+import { businessScaleList, jobList, recruitTypeList } from '@/lib/recruit';
+import { useId, useState } from 'react';
+
+const FIELDSET_CLASS = 'flex divide-x divide-input';
+const LABEL_CLASS = 'bg-deepgray flex w-36 min-w-36 items-center justify-center text-heading4 font-bold text-deepgray';
+const INPUT_CLASS = 'flex-grow p-6';
+
+const RecruitForm: React.FC = () => {
+ const [title, setTitle] = useTextInput('');
+ const [startDate, setStartDate] = useState(null);
+ const [endDate, setEndDate] = useState(null);
+ const [company, setCompany] = useTextInput('');
+ const [businessScale, setBusinessScale] = useState('');
+ const [job, setJob] = useState([]);
+ const [recruitType, setRecruitType] = useState([]);
+ const [link, setLink] = useTextInput('');
+
+ const titleId = useId();
+ const dateId = useId();
+ const companyId = useId();
+ const businessScaleId = useId();
+ const jobId = useId();
+ const recruitTypeId = useId();
+ const linkId = useId();
+
+ const handleBusinessScale = (businessScale: string) => {
+ setBusinessScale(businessScale);
+ };
+ const handleJob = (clickedJob: string) => {
+ setJob(job.includes(clickedJob) ? job.filter((item) => item !== clickedJob) : [...job, clickedJob]);
+ };
+ const handleRecruitType = (clickedRecruitType: string) => {
+ setRecruitType(
+ recruitType.includes(clickedRecruitType)
+ ? recruitType.filter((item) => item !== clickedRecruitType)
+ : [...recruitType, clickedRecruitType],
+ );
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RecruitForm;
diff --git a/src/components/ui/dropdown/Dropdown.tsx b/src/components/ui/dropdown/Dropdown.tsx
index dca4b57..581382b 100644
--- a/src/components/ui/dropdown/Dropdown.tsx
+++ b/src/components/ui/dropdown/Dropdown.tsx
@@ -1,35 +1,42 @@
import DropdownList from '@/components/ui/dropdown/DropdownList';
+import { DownArrowIcon } from '@/components/ui/icons/ArrowIcon';
import DropdownIcon from '@/components/ui/icons/DropdownIcon';
-import LabeledContent from '@/components/ui/LabeledContent';
+import useClickOutsideRef from '@/hooks/useClickOutsideRef';
+import { useState } from 'react';
interface PDropdown {
- label: string;
placeholder: string;
options: string[];
- selected: string[];
- setSelected: (selected: string) => void;
- isOpen: boolean;
- handleOpen: () => void;
+ selected: string[] | string;
+ setSelected: (value: string) => void;
+ id?: string;
+ color?: 'primary' | 'gray';
}
-const Dropdown: React.FC = ({ label, placeholder, options, selected, setSelected, isOpen, handleOpen }) => {
+const Dropdown: React.FC = ({ placeholder, options, selected, setSelected, id, color = 'primary' }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const ref = useClickOutsideRef(() => setIsOpen(false));
+
+ const isUnselected = (typeof selected === 'string' && selected === '') || selected.length === 0;
+
return (
-
-
- }
- >
-
- {selected.length === 0 ? placeholder : selected.length === options.length ? '전체' : selected.join(', ')}
-
-
+
+
- {isOpen &&
}
+ {isOpen && (
+
+
+
+ )}
);
};
diff --git a/src/components/ui/dropdown/DropdownList.tsx b/src/components/ui/dropdown/DropdownList.tsx
index fae7190..2becded 100644
--- a/src/components/ui/dropdown/DropdownList.tsx
+++ b/src/components/ui/dropdown/DropdownList.tsx
@@ -2,7 +2,7 @@ import CheckboxIcon from '@/components/ui/icons/CheckboxIcon';
interface PDropdownList {
options: string[];
- selected: string[];
+ selected: string[] | string;
setSelected: (selected: string) => void;
}
@@ -16,7 +16,7 @@ const DropdownList: React.FC = ({ options, selected, setSelected
key={idx}
className='flex cursor-pointer items-center gap-1 px-5 py-1.5 hover:bg-black/5'
>
-
+ {typeof selected !== 'string' && }
{option}
))}
diff --git a/src/components/ui/dropdown/LabeledDropdown.tsx b/src/components/ui/dropdown/LabeledDropdown.tsx
new file mode 100644
index 0000000..2eb213f
--- /dev/null
+++ b/src/components/ui/dropdown/LabeledDropdown.tsx
@@ -0,0 +1,45 @@
+import DropdownList from '@/components/ui/dropdown/DropdownList';
+import DropdownIcon from '@/components/ui/icons/DropdownIcon';
+import LabeledContent from '@/components/ui/LabeledContent';
+
+interface PLabeledDropdown {
+ label: string;
+ placeholder: string;
+ options: string[];
+ selected: string[];
+ setSelected: (selected: string) => void;
+ isOpen: boolean;
+ handleOpen: () => void;
+}
+
+const LabeledDropdown: React.FC = ({
+ label,
+ placeholder,
+ options,
+ selected,
+ setSelected,
+ isOpen,
+ handleOpen,
+}) => {
+ return (
+
+
+ }
+ >
+
+ {selected.length === 0 ? placeholder : selected.length === options.length ? '전체' : selected.join(', ')}
+
+
+
+ {isOpen && }
+
+ );
+};
+
+export default LabeledDropdown;
diff --git a/src/components/ui/icons/ArrowIcon.tsx b/src/components/ui/icons/ArrowIcon.tsx
index 684f7a7..8407b11 100644
--- a/src/components/ui/icons/ArrowIcon.tsx
+++ b/src/components/ui/icons/ArrowIcon.tsx
@@ -1,41 +1,43 @@
-const LeftArrowIcon: React.FC
> = () => {
+interface PArrowIcon {
+ size?: number;
+ color?: string;
+}
+
+const LeftArrowIcon: React.FC = ({ size = 32, color = '#6F90F4' }) => {
return (
-