diff --git a/src/app/(sidebar)/my-recruit/containers/AllRecruitment.tsx b/src/app/(sidebar)/my-recruit/containers/AllRecruitment.tsx
index 7f456cfc..e6959e93 100644
--- a/src/app/(sidebar)/my-recruit/containers/AllRecruitment.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/AllRecruitment.tsx
@@ -12,6 +12,8 @@ import {
import { motion } from 'framer-motion';
import { color } from '@/system/token/color';
import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
+import { cardList } from '../mock';
+import { RowCard } from './components/Card/RowCard';
export function AllRecruitment() {
return (
@@ -43,6 +45,12 @@ export function AllRecruitment() {
등록된 공고가 없어요
+
+
+ {cardList.map((cardInfo) => (
+
+ ))}
+
);
}
diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment.tsx
index 9098eb5b..3d31fd3d 100644
--- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment.tsx
@@ -3,6 +3,9 @@ import { ShoeIcon } from './components/ShoeIcon';
import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
import { motion } from 'framer-motion';
import { color } from '@/system/token/color';
+import { cardList } from '../mock';
+import { BoxCard } from './components/Card/BoxCard';
+import { TouchButton } from '@/components/TouchButton';
export function ProgressingRecruitment() {
return (
@@ -21,6 +24,22 @@ export function ProgressingRecruitment() {
진행중인 공고가 없어요
+
+
+ {cardList.map((cardInfo) => (
+
+ ))}
+
+
+
+
+
+ 더보기
+
+
+ 간략히 보기
+
+
);
}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
new file mode 100644
index 00000000..b3924ead
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
@@ -0,0 +1,68 @@
+import { Spacing } from '@/components/Spacing';
+import { Icon } from '@/system/components';
+import { color } from '@/system/token/color';
+import { dday } from '@/utils/date';
+import { MoreButton } from '@/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton';
+import { StatusButton } from '@/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton';
+import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
+import { DueDateDialog } from '../DueDateDialog';
+
+export type ProgressingCardType = {
+ type: '서류 마감' | '1차 면접' | '2차 면접';
+ status: '지원 완료' | '서류 통과' | '서류 탈락';
+ dueDate: Date | null;
+ period: string;
+ title: string;
+};
+
+export function BoxCard({ type, title, status, dueDate, period }: ProgressingCardType) {
+ return (
+
+
+ {dueDate == null ? (
+
+ ) : (
+ <>
+
+
+
+ {type} D-{dday(dueDate)}
+
+
+
+
+ )}
+
+
+
+
+
+
+
{period}
+
+
+
+
+
+ {type} D-{dday(dueDate!)}
+
+
+
+
+
{title}
+
+
+
+
+
+
+
+
삭제하기
+
+
+
+ );
+}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx
new file mode 100644
index 00000000..e643f4cd
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx
@@ -0,0 +1,58 @@
+import { SwitchCase } from '@/components/SwitchCase';
+import { Icon } from '@/system/components';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ DropdownMenuSeparator,
+} from '@/system/components/DropdownMenu/DropdownMenu';
+import { color } from '@/system/token/color';
+import { cn } from '@/utils';
+
+interface Props {
+ currentStatus: string;
+}
+
+export function StatusButton({ currentStatus }: Props) {
+ return (
+
+
+
+ {currentStatus}
+
+
+
+
+ {statusList.map((item) => (
+
+ {item.text}
+
+ ) : null,
+ border: ,
+ }}
+ />
+ ))}
+
+
+ );
+}
+
+const statusList = [
+ { variant: 'text', text: '지원 준비' },
+ { variant: 'text', text: '지원 완료' },
+ { variant: 'border' },
+ { variant: 'text', text: '서류 통과' },
+ { variant: 'text', text: '서류 탈락' },
+ { variant: 'border' },
+ { variant: 'text', text: '면접 통과' },
+ { variant: 'text', text: '면접 탈락' },
+ { variant: 'border' },
+ { variant: 'text', text: '최종 합격' },
+ { variant: 'text', text: '최종 탈락' },
+] as const;
diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx
new file mode 100644
index 00000000..50b110a4
--- /dev/null
+++ b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx
@@ -0,0 +1,64 @@
+import { Spacing } from '@/components/Spacing';
+import { Button, Icon } from '@/system/components';
+import { color } from '@/system/token/color';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
+import { Calendar } from '@/system/components/Calendar/Calendar';
+import { format } from 'date-fns/format';
+import { useState } from 'react';
+
+interface DueDateDialogProps {
+ title: string;
+}
+
+export function DueDateDialog({ title }: DueDateDialogProps) {
+ const [selectedDate, setSelectedDate] = useState();
+
+ const isDateSelected = selectedDate != null;
+
+ return (
+
+
+
+
+ {title}
+ 의 공고 일정 등록하기
+
+
+
일정을 등록하면 잊지 않도록 알려드릴게요!
+
+ {/* 마감일 입력 */}
+
+
서류마감
+
+
+
+
+
+ {isDateSelected ? format(selectedDate, 'yyyy.mm.dd') : '마감일을 선택해주세요'}
+
+
+
+
+
+
+
+
+
+
+