diff --git a/src/app/components/card/cardList/apply/ApplyStatusCard.tsx b/src/app/components/card/cardList/apply/ApplyStatusCard.tsx
new file mode 100644
index 00000000..ed43ec59
--- /dev/null
+++ b/src/app/components/card/cardList/apply/ApplyStatusCard.tsx
@@ -0,0 +1,85 @@
+"use client";
+import React, { useState } from "react";
+import { useApplyStatus } from "@/hooks/queries/form/detail/useApplyStatus";
+import translateStatus from "@/utils/translateStatus";
+import { SkeletonRow } from "./SkeletonRow";
+import { ApplyStatus } from "@/types/application";
+import { Player } from "@lottiefiles/react-lottie-player";
+import TableHeader from "./TableHeader";
+
+interface ApplyStatusCardProps {
+ formId: number;
+}
+
+// 지원현황 카드 컴포넌트
+const ApplyStatusCard = ({ formId }: ApplyStatusCardProps) => {
+ const [experienceSort, setExperienceSort] = useState<"asc" | "desc">("asc");
+ const [statusSort, setStatusSort] = useState<"asc" | "desc">("desc");
+
+ const { applyStatusData, isLoading } = useApplyStatus({
+ formId,
+ limit: 30,
+ cursor: 0,
+ orderByExperience: experienceSort,
+ orderByStatus: statusSort,
+ });
+
+ const toggleExperienceSort = () => setExperienceSort((prev) => (prev === "asc" ? "desc" : "asc"));
+ const toggleStatusSort = () => setStatusSort((prev) => (prev === "asc" ? "desc" : "asc"));
+
+ // 지원 현황 로딩 중
+ if (isLoading) {
+ return (
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
+
+ );
+ }
+
+ // 지원자가 없을 때
+ if (!applyStatusData?.data || applyStatusData.data.length === 0) {
+ return (
+
+ );
+ }
+
+ // 지원자가 있을 때
+ return (
+
+
+ {/* Thead */}
+
+
+ {/* Tbody */}
+
+ {applyStatusData.data.map((application) => (
+
+ {application.name}
+ {application.phoneNumber}
+ {application.experienceMonths}개월
+
+ {translateStatus(application.status as ApplyStatus)}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default ApplyStatusCard;
diff --git a/src/app/components/card/cardList/apply/MyApplicationListItem.tsx b/src/app/components/card/cardList/apply/MyApplicationListItem.tsx
new file mode 100644
index 00000000..0cfb5584
--- /dev/null
+++ b/src/app/components/card/cardList/apply/MyApplicationListItem.tsx
@@ -0,0 +1,106 @@
+import { getRecruitmentStatus } from "@/utils/recruitDateFormatter";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import Chip from "@/app/components/chip/Chip";
+import Image from "next/image";
+import { ApplyStatus } from "@/types/application";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { MyApplicationType } from "@/types/response/user";
+import { MdOutlineImage } from "react-icons/md";
+import translateStatus, { getStatusVariant } from "@/utils/translateStatus";
+
+const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }: MyApplicationType) => {
+ // 이력서 다운로드 핸들러
+ const handleResumeDownload = async () => {
+ try {
+ // API를 통해 이력서 파일을 다운로드
+ const response = await axios.get(`/api/resume/${resumeId}/download`, {
+ responseType: "blob",
+ });
+
+ // Blob 객체 생성 및 다운로드 링크 생성
+ const blob = new Blob([response.data], { type: "application/pdf" });
+ const url = window.URL.createObjectURL(blob);
+
+ // 가상의 링크를 생성하여 다운로드 실행
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = resumeName || `이력서_${resumeId}.pdf`;
+ document.body.appendChild(link);
+ link.click();
+
+ // 메모리 정리
+ window.URL.revokeObjectURL(url);
+ document.body.removeChild(link);
+
+ toast.success("이력서가 다운로드되었습니다.");
+ } catch (error) {
+ console.error("Resume download error:", error);
+ toast.error("이력서 다운로드에 실패했습니다.");
+ }
+ };
+
+ return (
+
+
+ {/* 상단 영역: 지원일시와 이력서 링크 */}
+
+
+ 지원일시
+ |
+ {formatLocalDate(createdAt, true)}
+
+
+
+
+ {/* 중앙 컨텐츠 영역: 가게 정보, 제목, 설명 */}
+
+ {/* 가게 프로필 이미지와 이름 */}
+
+
+ {form.owner.imageUrl ? (
+
+ ) : (
+
+
+
+ )}
+
+
{form.owner.storeName}
+
+
+ {/* 공고 제목 */}
+
{form.title}
+
+ {/* 공고 설명 (2줄 제한) */}
+
{form.description}
+
+
+ {/* 하단 상태 표시 영역: 지원 상태와 모집 상태 */}
+
+
+
+ );
+};
+
+export default MyApplicationListItem;
diff --git a/src/app/components/card/cardList/apply/SkeletonRow.tsx b/src/app/components/card/cardList/apply/SkeletonRow.tsx
new file mode 100644
index 00000000..1c6d6b41
--- /dev/null
+++ b/src/app/components/card/cardList/apply/SkeletonRow.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export const SkeletonRow: React.FC = () => (
+
+ {[1, 2, 3, 4].map((index) => (
+
+ ))}
+
+);
diff --git a/src/app/components/card/cardList/apply/TableHeader.tsx b/src/app/components/card/cardList/apply/TableHeader.tsx
new file mode 100644
index 00000000..c7e45486
--- /dev/null
+++ b/src/app/components/card/cardList/apply/TableHeader.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { FaSortAmountDown } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+
+interface TableHeaderProps {
+ experienceSort: "asc" | "desc";
+ statusSort: "asc" | "desc";
+ toggleExperienceSort: () => void;
+ toggleStatusSort: () => void;
+}
+
+const TableHeader = ({ experienceSort, statusSort, toggleExperienceSort, toggleStatusSort }: TableHeaderProps) => {
+ const theadStyle = "font-semibold text-grayscale-700";
+ const sortIconStyle = "text-primary-orange-300 transition-transform hover:scale-110";
+
+ return (
+
+
이름
+
전화번호
+
+ 경력
+
+
+
+
+ 상태
+
+
+
+
+ );
+};
+
+export default TableHeader;
diff --git a/src/app/components/loading-spinner/NoApplySpinner.tsx b/src/app/components/loading-spinner/NoApplySpinner.tsx
new file mode 100644
index 00000000..48c53e84
--- /dev/null
+++ b/src/app/components/loading-spinner/NoApplySpinner.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function NoApplySpinner() {
+ return (
+
+ );
+}
diff --git a/src/app/components/loading-spinner/SearchSpinner.tsx b/src/app/components/loading-spinner/SearchSpinner.tsx
new file mode 100644
index 00000000..744bed45
--- /dev/null
+++ b/src/app/components/loading-spinner/SearchSpinner.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function SearchSpinner() {
+ return (
+
+
+
+
검색 중 입니다
+
+ 잠시만 기다려주세요...
+
+
+
+ );
+}
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index 3d4f28f1..53172e39 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/tailwindUtil";
import RadioBtn from "@/app/components/button/default/RadioBtn";
import RadioGroup from "@/app/components/button/default/RadioGroup";
import Button from "@/app/components/button/default/Button";
-import { ApplicationStatus, applicationStatus } from "@/types/application";
+import { ApplyStatus, applicationStatus } from "@/types/application";
import { positionOptions } from "@/constants/positionOptions";
import axios from "axios";
import toast from "react-hot-toast";
@@ -12,7 +12,7 @@ import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinne
const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModalProps) => {
const [isSubmitting, setIsSubmitting] = useState(false);
- const [selectedValue, setSelectedValue] = useState
(applicationStatus.INTERVIEW_PENDING);
+ const [selectedValue, setSelectedValue] = useState(applicationStatus.INTERVIEW_PENDING);
if (!isOpen) return null;
@@ -23,7 +23,7 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
{ id: "hired", value: applicationStatus.HIRED, label: "채용 완료" },
] as const;
- const handleValueChange = (value: ApplicationStatus) => {
+ const handleValueChange = (value: ApplyStatus) => {
setSelectedValue(value);
};
diff --git a/src/hooks/queries/form/detail/useApplicationStatus.ts b/src/hooks/queries/form/detail/useApplyStatus.ts
similarity index 71%
rename from src/hooks/queries/form/detail/useApplicationStatus.ts
rename to src/hooks/queries/form/detail/useApplyStatus.ts
index 9f33013f..3d522b62 100644
--- a/src/hooks/queries/form/detail/useApplicationStatus.ts
+++ b/src/hooks/queries/form/detail/useApplyStatus.ts
@@ -4,7 +4,7 @@ import { ApplicationListResponse } from "@/types/response/application";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
-interface UseApplicationStatusProps {
+interface UseApplyStatusProps {
formId: number;
limit: number;
cursor?: number;
@@ -12,16 +12,9 @@ interface UseApplicationStatusProps {
orderByStatus?: string;
}
-export const useApplicationStatus = (props: UseApplicationStatusProps) => {
+export const useApplyStatus = (props: UseApplyStatusProps) => {
const query = useQuery({
- queryKey: [
- "applicationStatus",
- props.formId,
- props.limit,
- props.cursor,
- props.orderByExperience,
- props.orderByStatus,
- ],
+ queryKey: ["applyStatus", props.formId, props.limit, props.cursor, props.orderByExperience, props.orderByStatus],
queryFn: async () => {
const response = await axios.get(`/api/forms/${props.formId}/applications`, {
params: {
@@ -31,7 +24,6 @@ export const useApplicationStatus = (props: UseApplicationStatusProps) => {
orderByStatus: props.orderByStatus,
},
});
-
return response.data;
},
enabled: !!props.formId,
@@ -39,7 +31,7 @@ export const useApplicationStatus = (props: UseApplicationStatusProps) => {
return {
...query,
- applicationStatusData: query.data,
+ applyStatusData: query.data,
isPending: query.isPending,
error: query.error,
};
diff --git a/src/hooks/queries/user/me/useProfileStringValue.ts b/src/hooks/queries/user/me/useProfileStringValue.ts
index 56d68cc6..6fa3985c 100644
--- a/src/hooks/queries/user/me/useProfileStringValue.ts
+++ b/src/hooks/queries/user/me/useProfileStringValue.ts
@@ -2,24 +2,23 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
import toast from "react-hot-toast";
import type { QueryKey, UseQueryOptions } from "@tanstack/react-query";
-const PROFILE_STRING_KEY = "profileStringValue";
+const VALID_USER_INFO_KEY = "isUserInfoValid";
export const useProfileStringValue = () => {
const queryClient = useQueryClient();
- const { data: hasStringValue = false } = useQuery({
- queryKey: [PROFILE_STRING_KEY],
+ const { data: isUserInfoValid = false } = useQuery({
+ queryKey: [VALID_USER_INFO_KEY],
queryFn: async () => {
const userData = queryClient.getQueryData<{ user: any }>(["user"]);
const user = userData?.user;
if (!user) return false;
-
- const hasString = Object.values(user).some(
+ const isProfileComplete = Object.values(user).some(
(value) => value !== null && value !== undefined && value === "string"
);
- if (hasString) {
+ if (isProfileComplete) {
toast.error("내 정보를 수정하세요", {
duration: 3000,
position: "top-center",
@@ -27,7 +26,7 @@ export const useProfileStringValue = () => {
});
}
- return hasString;
+ return isProfileComplete;
},
enabled: !!queryClient.getQueryData(["user"]),
staleTime: 0,
@@ -41,16 +40,16 @@ export const useProfileStringValue = () => {
enabled: false,
onSettled: () => {
// user 데이터가 변경되면 profileStringValue 쿼리 재실행
- queryClient.invalidateQueries({ queryKey: [PROFILE_STRING_KEY] });
+ queryClient.invalidateQueries({ queryKey: [VALID_USER_INFO_KEY] });
},
} as UseQueryOptions);
- const { mutate: setHasStringValue } = useMutation({
+ const { mutate: setIsUserInfoValid } = useMutation({
mutationFn: (newValue: boolean) => Promise.resolve(newValue),
onSuccess: (newValue) => {
- queryClient.setQueryData([PROFILE_STRING_KEY], newValue);
+ queryClient.setQueryData([VALID_USER_INFO_KEY], newValue);
},
});
- return { hasStringValue, setHasStringValue };
+ return { isUserInfoValid, setIsUserInfoValid };
};
diff --git a/src/hooks/useApplyCard.ts b/src/hooks/useApplyCard.ts
new file mode 100644
index 00000000..6185a9aa
--- /dev/null
+++ b/src/hooks/useApplyCard.ts
@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { useApplyStatus } from "@/hooks/queries/form/detail/useApplyStatus";
+
+export const useApplyStatusCard = (formId: number) => {
+ const [experienceSort, setExperienceSort] = useState<"asc" | "desc">("asc");
+ const [statusSort, setStatusSort] = useState<"asc" | "desc">("desc");
+
+ const { applyStatusData, isLoading } = useApplyStatus({
+ formId,
+ limit: 30,
+ cursor: 0,
+ orderByExperience: experienceSort,
+ orderByStatus: statusSort,
+ });
+
+ const toggleExperienceSort = () => {
+ setExperienceSort((prev) => (prev === "asc" ? "desc" : "asc"));
+ };
+
+ const toggleStatusSort = () => {
+ setStatusSort((prev) => (prev === "asc" ? "desc" : "asc"));
+ };
+
+ return {
+ data: applyStatusData?.data || [],
+ isLoading,
+ experienceSort,
+ statusSort,
+ toggleExperienceSort,
+ toggleStatusSort,
+ };
+};
diff --git a/src/types/application.ts b/src/types/application.ts
index e32662d3..aecd2679 100644
--- a/src/types/application.ts
+++ b/src/types/application.ts
@@ -6,4 +6,4 @@ export const applicationStatus = {
HIRED: "HIRED",
} as const;
-export type ApplicationStatus = (typeof applicationStatus)[keyof typeof applicationStatus];
+export type ApplyStatus = (typeof applicationStatus)[keyof typeof applicationStatus];
diff --git a/src/utils/getMetaContentByProperty.ts b/src/utils/getMetaContentByProperty.ts
new file mode 100644
index 00000000..8020a53e
--- /dev/null
+++ b/src/utils/getMetaContentByProperty.ts
@@ -0,0 +1,8 @@
+const getMetaContentByProperty = (property: string) => {
+ const metaTag = document.querySelector(`meta[property='${property}']`) as HTMLMetaElement;
+ console.log("getMetaContentByProperty metaTag 출력", metaTag);
+
+ return metaTag ? metaTag.content : null;
+};
+
+export default getMetaContentByProperty;
diff --git a/src/utils/shareToKakao.ts b/src/utils/shareToKakao.ts
new file mode 100644
index 00000000..43b7c601
--- /dev/null
+++ b/src/utils/shareToKakao.ts
@@ -0,0 +1,27 @@
+import getMetaContentByProperty from "./getMetaContentByProperty";
+
+const shareToKakao = () => {
+ const { Kakao, location } = window;
+
+ const url = String(new URL(location.href));
+
+ const ogTitle = getMetaContentByProperty("og:title") || "WorkRoot";
+ const ogDescription =
+ getMetaContentByProperty("og:description") || `🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트`;
+ const ogImage = getMetaContentByProperty("og:image") || "/logo.svg";
+
+ Kakao.Link.sendDefault({
+ objectType: "feed",
+ content: {
+ title: ogTitle,
+ description: ogDescription,
+ imageUrl: ogImage,
+ link: {
+ mobileWebUrl: url,
+ webUrl: url,
+ },
+ },
+ });
+};
+
+export default shareToKakao;
diff --git a/src/utils/translateStatus.ts b/src/utils/translateStatus.ts
new file mode 100644
index 00000000..1236dd12
--- /dev/null
+++ b/src/utils/translateStatus.ts
@@ -0,0 +1,34 @@
+import { applicationStatus, ApplyStatus } from "@/types/application";
+
+// 지원 상태에 따른 Chip 컴포넌트의 variant를 반환하는 함수
+export const getStatusVariant = (status: ApplyStatus) => {
+ switch (status) {
+ case applicationStatus.HIRED:
+ return "positive";
+ case applicationStatus.REJECTED:
+ return "negative";
+ default:
+ return "positive";
+ }
+};
+
+// 상태를 한글로 변환하는 함수
+const statusMap: { [key: string]: string } = {
+ ALL: "전체",
+ HIRED: "채용 완료",
+ REJECTED: "거절",
+ INTERVIEW_PENDING: "면접 대기",
+ INTERVIEW_COMPLETED: "면접 완료",
+};
+
+// 상태를 변환하는 함수
+export const getStatusMap = (status: ApplyStatus) => {
+ return statusMap[status] || status;
+};
+
+// 기본 내보내기
+const translateStatus = (status: ApplyStatus) => {
+ return getStatusMap(status);
+};
+
+export default translateStatus;