style: style fixed

src/app/(sidebar)/my-recruit/[id]/api/useGetCardCount.ts

@@ -1,10 +1,10 @@
 import { http } from '@/apis/http';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-type getCardCountType = Record<'서류_준비' | '과제_준비' | '인터뷰_준비', number>;
+type GetCardCountType = Record<'서류_준비' | '과제_준비' | '인터뷰_준비', number>;
 
 const getCardCount = (id: string) => {
-  return http.get<getCardCountType>({
+  return http.get<GetCardCountType>({
     url: `/recruits/${id}/cards/type-count`,
   });
 };

src/app/(sidebar)/my-recruit/[id]/api/useGetRecruitById.ts

@@ -1,7 +1,7 @@
 import { http } from '@/apis/http';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-interface recruitByIdType {
+export interface RecruitByIdType {
   id: number;
   title: string;
   season: string;
@@ -10,7 +10,7 @@ interface recruitByIdType {
 }
 
 const getRecruitById = (id: string) => {
-  return http.get<recruitByIdType>({
+  return http.get<RecruitByIdType>({
     url: `/recruits/${id}`,
   });
 };

src/app/(sidebar)/my-recruit/[id]/api/useGetRecruitCards.ts

@@ -9,17 +9,21 @@ export type GetRecruitCardsType = {
   tagList: TagType[];
 };
 
-const getRecruitCards = ({ id, progress }: { id: string; progress: string }) => {
+const getRecruitCards = ({ id, type, tagIds }: { id: string; type: string; tagIds?: number[] }) => {
   return http.get<GetRecruitCardsType[]>({
-    url: `recruits/${id}/cards?type=${progress}`,
+    url: `recruits/${id}/cards`,
+    params: {
+      type: type,
+      'tag-ids': tagIds?.join(','),
+    },
   });
 };
 
-export function useGetRecruitCards({ id, progress }: { id: string; progress: string }) {
+export function useGetRecruitCards({ id, type, tagIds }: { id: string; type: string; tagIds?: number[] }) {
   const result = useSuspenseQuery({
-    queryKey: ['get-recruit-card-id', id, progress],
+    queryKey: ['get-recruit-card-id', id, type, tagIds],
     queryFn: async () => {
-      const res = await getRecruitCards({ id, progress });
+      const res = await getRecruitCards({ id, type, tagIds });
       return res.data;
     },
   });

src/app/(sidebar)/my-recruit/[id]/api/usePatchSiteUrl.ts

@@ -2,12 +2,12 @@ import { http } from '@/apis/http';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ProgressRecruitType } from './useGetProgressRecruit';
 
-interface patchSiteProps {
+interface PatchSiteProps {
   newSiteUrl: string;
   id: string;
 }
 
-const patchSiteUrl = ({ newSiteUrl, id }: patchSiteProps) => {
+const patchSiteUrl = ({ newSiteUrl, id }: PatchSiteProps) => {
   return http.patch<ProgressRecruitType>({
     url: `/recruits/${id}/siteUrl`,
     data: {
@@ -20,7 +20,7 @@ export const usePatchSiteUrl = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ newSiteUrl, id }: patchSiteProps) => {
+    mutationFn: async ({ newSiteUrl, id }: PatchSiteProps) => {
       const res = await patchSiteUrl({ newSiteUrl, id });
 
       return res.data;

src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts

@@ -5,12 +5,12 @@ interface PatchStatusResponse {
   status: string;
 }
 
-interface patchStatusProps {
+interface PatchStatusProps {
   newStatus: string;
   id: string;
 }
 
-const patchStatus = ({ newStatus, id }: patchStatusProps) => {
+const patchStatus = ({ newStatus, id }: PatchStatusProps) => {
   return http.patch<PatchStatusResponse>({
     url: `/recruits/${id}/status`,
     data: {
@@ -23,7 +23,7 @@ export const usePatchStatus = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ newStatus, id }: patchStatusProps) => {
+    mutationFn: async ({ newStatus, id }: PatchStatusProps) => {
       const res = await patchStatus({ newStatus, id });
 
       console.log(res);

src/app/(sidebar)/my-recruit/[id]/api/usePatchTitle.ts

@@ -5,12 +5,12 @@ interface PatchTitleResponse {
   title: string;
 }
 
-interface patchTitleProps {
+interface PatchTitleProps {
   newTitle: string;
   id: string;
 }
 
-const patchTitle = ({ newTitle, id }: patchTitleProps) => {
+const patchTitle = ({ newTitle, id }: PatchTitleProps) => {
   return http.patch<PatchTitleResponse>({
     url: `/recruits/${id}/title`,
     data: {
@@ -23,7 +23,7 @@ export const usePatchTitle = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ newTitle, id }: patchTitleProps) => {
+    mutationFn: async ({ newTitle, id }: PatchTitleProps) => {
       const res = await patchTitle({ newTitle, id });
 
       return res.data;

src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx

@@ -1,32 +1,39 @@
 'use client';
 
+import { AddInfoCardDialog } from '@/app/(sidebar)/(my-info)/components/AddInfoCardDialog';
 import { InfoCard } from '@/components/InfoCard';
+import { TouchButton } from '@/components/TouchButton';
+import { Droppable } from '@/lib/dnd-kit/Droppable';
 import { Icon } from '@/system/components';
-import { color } from '@/system/token/color';
 import { InfoCardType } from '@/types';
 import { cn } from '@/utils/tailwind-util';
-import Link from 'next/link';
+import { useDndContext } from '@dnd-kit/core';
+import { motion } from 'framer-motion';
 import { useState } from 'react';
+import { usePostCardToRecruit } from '../../api/usePostCardToRecruit';
 import { useGetAllTags } from '../api/useGetAllTag';
 import { useGetCardCount } from '../api/useGetCardCount';
 import { useGetRecruitCards } from '../api/useGetRecruitCards';
 import TagList from './TagList';
 
-const PROGRESS_OPTIONS = ['서류_준비', '과제_준비', '인터뷰_준비'] as const;
+export const PROGRESS_OPTIONS = ['서류_준비', '과제_준비', '인터뷰_준비'] as const;
 
 export type ProgressType = (typeof PROGRESS_OPTIONS)[number];
 
 export function DetailContent({ recruitId }: { recruitId: string }) {
   const [currentOption, setCurrentOption] = useState<ProgressType>('서류_준비');
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [selectedTags, setSelectedTags] = useState<number[]>([]);
+
+  const { over } = useDndContext();
 
   const { data: cardCount } = useGetCardCount(recruitId);
   const { data: tagsData } = useGetAllTags();
-  const { data: cardList } = useGetRecruitCards({ id: recruitId, progress: currentOption });
+  const { data: cardList } = useGetRecruitCards({ id: recruitId, type: currentOption, tagIds: selectedTags });
+  const { mutate: mutatePostCardToRecruit } = usePostCardToRecruit();
 
   const filteredCardList =
     selectedTags.length > 0
-      ? cardList?.filter((card) => card.tagList.some((tag) => selectedTags.includes(tag.name)))
+      ? cardList?.filter((card) => card.tagList.some((tag) => selectedTags.includes(tag.id)))
       : cardList;
 
   return (
@@ -37,7 +44,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
             const isActive = currentOption === option;
 
             return (
-              <button
+              <TouchButton
                 key={option}
                 className="flex gap-[6px] items-center cursor-pointer"
                 onClick={() => setCurrentOption(option)}>
@@ -51,17 +58,22 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
                   )}>
                   {cardCount?.[option]}
                 </div>
-              </button>
+              </TouchButton>
             );
           })}
         </div>
 
-        <Link
-          className="flex items-center gap-[8px] bg-neutral-95 py-[0.5rem] px-[1rem] rounded-[6px]"
-          href={`/write/${recruitId}`}>
-          <Icon name="add" color={color.mint30} />
-          <div className="text-white text-[14px] font-semibold">카드 추가</div>
-        </Link>
+        <AddInfoCardDialog>
+          <TouchButton layout>
+            <motion.div
+              initial={{ padding: '8px 16px' }}
+              variants={{ longPadding: { padding: '8px 16px' }, shortPadding: { padding: '8px 8px' } }}
+              className="bg-neutral-95 flex items-center gap-[4px] rounded-[6px]">
+              <Icon name="add" size={20} color="#20E79D" />
+              <span className="text-label1 text-white font-semibold">카드 추가</span>
+            </motion.div>
+          </TouchButton>
+        </AddInfoCardDialog>
       </div>
 
       <TagList tagsData={tagsData || []} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
@@ -70,16 +82,22 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
         {filteredCardList && filteredCardList.length > 0 ? (
           <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
             {filteredCardList.map((info: InfoCardType) => (
-              <li key={info.id} className="min-w-[343px]">
+              <li className="min-w-[343px]">
                 <InfoCard {...info} />
               </li>
             ))}
           </ul>
         ) : (
-          <div className="flex flex-col w-full h-full justify-center items-center">
-            <Icon name="empty" size={280} />
-            <p className="mt-[16px] text-body1 font-neutral-30">아직 생성된 정보 카드가 없어요!</p>
-          </div>
+          <Droppable id={1234}>
+            <div
+              className={cn(
+                'flex flex-col w-full h-full justify-center items-center mb-40',
+                over?.id === 1234 && 'border-mint-20 bg-[rgba(221,243,235,0.50)] rounded-20',
+              )}>
+              <Icon name="empty" size={280} />
+              <p className="my-[16px] text-body1 text-neutral-30">아직 생성된 정보 카드가 없어요!</p>
+            </div>
+          </Droppable>
         )}
       </div>
     </section>

src/app/(sidebar)/my-recruit/[id]/components/DetailHeader.tsx

@@ -3,30 +3,23 @@
 import { useOutsideClick } from '@/hooks/useOutsideClick';
 import { Button, Icon } from '@/system/components';
 import { color } from '@/system/token/color';
-import { cn } from '@/utils';
-import { ChangeEvent, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useGetRecruitById } from '../api/useGetRecruitById';
-import { usePatchTitle } from '../api/usePatchTitle';
 import { ApplicationStatus } from './ApplicationStatus';
 import SemesterSelector from './SemesterSelector';
 import TextBubble from './TextBubble';
+import TitleInput from './TitleInput';
 
 export default function DetailHeader({ recruitId }: { recruitId: string }) {
-  const { mutate: patchTitle } = usePatchTitle();
   const { data: recruitInfoById } = useGetRecruitById(recruitId);
 
   const tooltipRef = useRef<HTMLDivElement>(null);
-  const [title, setTitle] = useState(recruitInfoById?.title || '');
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const [isLinked, setIsLinked] = useState(false);
+  const [isLinked, setIsLinked] = useState(recruitInfoById.siteUrl !== '');
 
   useOutsideClick(tooltipRef, () => setIsLinked(false));
 
-  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value);
-  };
-
   const handleSetLink = () => {
     setIsLinked(true);
     setIsHovered(false);
@@ -47,24 +40,12 @@ export default function DetailHeader({ recruitId }: { recruitId: string }) {
     }, 2000);
   };
 
-  const handleUpdateTitle = () => {
-    setIsFocused(false);
-    patchTitle({ newTitle: title, id: recruitId });
-  };
-
   return (
     <div className="flex gap-[0.75rem] items-center">
       <SemesterSelector recruitId={recruitId} season={recruitInfoById?.season || ''} />
       <ApplicationStatus recruitId={recruitId} status={recruitInfoById?.recruitStatus || ''} />
-      <input
-        className={cn(
-          'pl-[6px] mr-[6px] rounded-[6px] text-neutral-95 text-heading1 font-bold border-none hover:bg-neutral-3 focus:outline-none focus:ring-2 focus:ring-mint-20 focus:ring-offset-2  focus:hover:bg-white',
-        )}
-        onChange={handleTitleChange}
-        value={title}
-        onFocus={() => setIsFocused(true)}
-        onBlur={handleUpdateTitle}
-      />
+
+      <TitleInput recruitInfoById={recruitInfoById} recruitId={recruitId} setIsFocused={setIsFocused} />
 
       <div ref={tooltipRef} className="relative">
         {!isFocused && (