feat(my-recruit): 내 공고 뽀각 페이지 api 연결

package.json

@@ -81,7 +81,8 @@
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

src/app/(sidebar)/my-recruit/api/useDeleteRecruit.ts

@@ -0,0 +1,25 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_PROGRESSING_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetProgressingRecruits';
+import { GET_ALL_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetAllRecruits';
+
+export const DELETE_RECRUIT_KEY = 'delete-recruit';
+
+export const deleteRecruit = (recruitId: number) =>
+  http.delete({
+    url: `/recruits/${recruitId}`,
+  });
+
+export const useDeleteRecruit = () => {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (recruitId: number) => deleteRecruit(recruitId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_PROGRESSING_RECRUITS_KEY] });
+      queryClient.invalidateQueries({ queryKey: [GET_ALL_RECRUITS_KEY] });
+    },
+  });
+
+  return mutate;
+};

src/app/(sidebar)/my-recruit/api/useGetAllRecruits.ts

@@ -0,0 +1,27 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
+import { ALL_RECRUITMENT } from '@/app/(sidebar)/my-recruit/containers/components/SeasonDropdownContent';
+
+type Request = { season: string };
+
+type Response = { data: RecruitCard[] };
+
+export const GET_ALL_RECRUITS_KEY = 'recruits-all';
+
+function getAllRecruits() {
+  return http.get({ url: '/recruits' });
+}
+
+function getRecruitsBySeason({ season }: Request) {
+  return http.get({ url: '/recruits/bySeason', params: { season } });
+}
+
+export function useGetAllRecruits({ season }: Request) {
+  const result = useSuspenseQuery({
+    queryKey: [GET_ALL_RECRUITS_KEY, season],
+    queryFn: season === ALL_RECRUITMENT ? getAllRecruits : () => getRecruitsBySeason({ season }),
+  });
+
+  return result.data as unknown as Response;
+}

src/app/(sidebar)/my-recruit/api/useGetCards.ts

@@ -0,0 +1,28 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TagType } from '@/types/info';
+
+interface Props {
+  type: string;
+}
+
+interface Response {
+  data: Array<{
+    id: number;
+    title: string;
+    updatedDate: string;
+    tagList: Array<TagType>;
+  }>;
+}
+
+export const GET_CARDS = 'cards';
+
+function getCards({ type }: Props) {
+  return http.get({ url: '/cards', params: { type } });
+}
+
+export function useGetCards({ type }: Props) {
+  const result = useSuspenseQuery({ queryKey: [GET_CARDS, type], queryFn: () => getCards({ type }) });
+
+  return result.data as unknown as Response;
+}

src/app/(sidebar)/my-recruit/api/useGetProgressingRecruits.ts

@@ -0,0 +1,20 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
+
+type Response = { data: RecruitCard[] };
+
+export const GET_PROGRESSING_RECRUITS_KEY = 'recruits-progressing';
+
+function getProgressingRecruits() {
+  return http.get({ url: '/recruits/progressing' });
+}
+
+export function useGetProgressingRecruits() {
+  const result = useSuspenseQuery({
+    queryKey: [GET_PROGRESSING_RECRUITS_KEY],
+    queryFn: getProgressingRecruits,
+  });
+
+  return result.data as unknown as Response;
+}

src/app/(sidebar)/my-recruit/api/useGetSeasons.ts

@@ -0,0 +1,20 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { http } from '@/apis/http';
+
+type Response = {
+  data: Array<{
+    name: string;
+  }>;
+};
+
+export const GET_SEASONS_KEY = 'seasons';
+
+function getSeasons() {
+  return http.get({ url: '/seasons' });
+}
+
+export function useGetSeasons() {
+  const result = useSuspenseQuery({ queryKey: [GET_SEASONS_KEY], queryFn: getSeasons });
+
+  return result.data as unknown as Response;
+}

src/app/(sidebar)/my-recruit/api/usePatchRecruitStatus.ts

@@ -0,0 +1,29 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_PROGRESSING_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetProgressingRecruits';
+import { GET_ALL_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetAllRecruits';
+
+interface Request {
+  id: number;
+  recruitStatus: string;
+}
+
+export const PATCH_RECRUIT_STATUS_KEY = 'put-recruit-status';
+
+function patchRecruitStatus({ id, recruitStatus }: Request) {
+  return http.patch({ url: `/recruits/${id}/status`, data: { recruitStatus } });
+}
+
+export function usePatchRecruitStatus() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => patchRecruitStatus(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_PROGRESSING_RECRUITS_KEY] });
+      queryClient.invalidateQueries({ queryKey: [GET_ALL_RECRUITS_KEY] });
+    },
+  });
+
+  return mutate;
+}

src/app/(sidebar)/my-recruit/api/usePostCardToRecruit.ts

@@ -0,0 +1,22 @@
+import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
+
+interface Request {
+  recruitId: number;
+  cardId: number;
+}
+
+export const POST_CARD_TO_RECRUIT_KEY = 'post-card-to-recruit';
+
+function postCardToRecruit({ recruitId, cardId }: Request) {
+  return http.post({ url: `/recruits/${recruitId}/cards/${cardId}` });
+}
+
+export function usePostCardToRecruit() {
+  const mutate = useMutation({
+    mutationKey: [POST_CARD_TO_RECRUIT_KEY],
+    mutationFn: (data: Request) => postCardToRecruit(data),
+  });
+
+  return mutate;
+}

src/app/(sidebar)/my-recruit/api/usePostRecruit.ts

@@ -0,0 +1,32 @@
+import { http } from '@/apis/http';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { GET_PROGRESSING_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetProgressingRecruits';
+import { GET_ALL_RECRUITS_KEY } from '@/app/(sidebar)/my-recruit/api/useGetAllRecruits';
+
+export interface Request {
+  title: string;
+  season: string;
+  siteUrl: string;
+  recruitScheduleStage: string;
+  deadline: string | null;
+}
+
+export const POST_RECRUIT_KEY = 'post-recruit';
+
+function postRecruit(data: Request) {
+  return http.post({ url: '/recruits', data });
+}
+
+export function usePostRecruit() {
+  const queryClient = useQueryClient();
+
+  const mutate = useMutation({
+    mutationFn: (data: Request) => postRecruit(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [GET_PROGRESSING_RECRUITS_KEY] });
+      queryClient.invalidateQueries({ queryKey: [GET_ALL_RECRUITS_KEY] });
+    },
+  });
+
+  return mutate;
+}

src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/InputField.tsx

@@ -9,7 +9,7 @@ interface Props extends ComponentProps<'input'> {
 
 export function InputField({ required = false, right, value, ...inputProps }: Props) {
   return (
-    <div className="w-full flex justify-between items-center p-12 bg-neutral-1 border-neutral-20 rounded-[8px] border-[1px]">
+    <div className="w-full flex justify-between items-center px-16 py-12 bg-neutral-1 border-neutral-20 rounded-[8px] border-[1px]">
       <If condition={required}>
         <div className="text-mint-40 text-label1">*</div>
       </If>