제안 사안 반영

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

@@ -14,9 +14,10 @@ import { usePostCardInRecruit } from '../api/usePostCardInRecurit';
 
 interface AddRecruitCardDialogProps {
   recruitId: string;
+  category: RecruitType;
 }
 
-export function AddRecruitCardDialog({ children, recruitId }: PropsWithChildren<AddRecruitCardDialogProps>) {
+export function AddRecruitCardDialog({ children, recruitId, category }: PropsWithChildren<AddRecruitCardDialogProps>) {
   const router = useRouter();
 
   const [selectedTagList, setSelectedTagList] = useState<TagType[]>([]);
@@ -46,9 +47,9 @@ export function AddRecruitCardDialog({ children, recruitId }: PropsWithChildren<
   return (
     <Dialog
       onOpenChange={(open) => {
+        setSelectedType(open && category !== '내_정보_복사' ? category : null);
         if (!open) {
           setSelectedTagList([]);
-          setSelectedType(null);
         }
       }}>
       <DialogTrigger asChild>{children}</DialogTrigger>

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

@@ -3,7 +3,7 @@
 import { InfoCard } from '@/components/InfoCard';
 import { TouchButton } from '@/components/TouchButton';
 import { Droppable } from '@/lib/dnd-kit/Droppable';
-import { Icon, Text } from '@/system/components';
+import { Icon } from '@/system/components';
 import { If } from '@/system/utils/If';
 import { InfoCardType } from '@/types';
 import { RECRUIT_TYPES, RecruitType } from '@/types/recruit';
@@ -52,6 +52,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
       }
     };
   }, []);
+
   const scrollToTop = () => {
     if (contentRef.current) {
       contentRef.current.scrollTop = 0;
@@ -96,7 +97,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
           })}
         </div>
 
-        <AddRecruitCardDialog recruitId={recruitId}>
+        <AddRecruitCardDialog recruitId={recruitId} category={currentOption}>
           <TouchButton layout>
             <motion.div
               initial={{ padding: '8px 16px' }}
@@ -139,14 +140,6 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
                     <Icon name="arrowUp" size={24} />
                     <span className="text-neutral-1 text-caption1">TOP</span>
                   </motion.div>
-                  <motion.div
-                    className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
-                    initial={{ opacity: 0 }}
-                    variants={{ hover: { opacity: 1 } }}>
-                    <Text typography="label1" color="white">
-                      내 정보 가져오기
-                    </Text>
-                  </motion.div>
                 </TouchButton>
               )}
             </ul>

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

@@ -6,7 +6,8 @@ import { ComponentProps } from 'react';
 export function DraggableInfoCard(props: ComponentProps<typeof InfoCard>) {
   const { over } = useDndContext();
 
-  const overTitle = over?.data.current?.title;
+  const title = over?.data.current?.title;
+  const overTitle = title?.length > 12 ? `${title.slice(0, 12)}...` : title;
 
   return (
     <div className="relative">

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

@@ -1,19 +1,17 @@
-import { Spacing } from '@/system/utils/Spacing';
+import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
 import { TouchButton } from '@/components/TouchButton';
+import { Dropdown, Icon } from '@/system/components';
+import { Calendar } from '@/system/components/Calendar/Calendar';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
 import { color } from '@/system/token/color';
-import { InputField } from './InputField';
-import { useEffect, useState } from 'react';
-import { Icon } from '@/system/components';
-import { Dropdown } from '@/system/components';
+import { Spacing } from '@/system/utils/Spacing';
 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 { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 import { useGetSeasons } from '../../api/useGetSeasons';
-import { recruitStatusList } from '../../constant';
-import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
+import { InputField } from './InputField';
 
 export interface CardData {
   season: string;
@@ -34,11 +32,16 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro
   const [siteUrl, setSiteUrl] = useState('');
   const [selectedDate, setSelectedDate] = useState<Date>();
   const [currentRecruitStage, setCurrentRecruitStage] = useState<string>(recruitScheduleStageList[0]);
+  const [isOpen, setIsOpen] = useState(false);
 
   const [selectedSeason, setSelectedSeason] = useState<string>();
   const seasonList = useGetSeasons()?.data ?? [];
   const isDateSelected = selectedDate != null;
 
+  useEffect(() => {
+    setIsOpen(false);
+  }, [selectedDate]);
+
   useEffect(() => {
     if (selectedSeason == null) {
       setSelectedSeason(seasonList[0]?.name);
@@ -110,7 +113,7 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro
             ))}
           </Dropdown.Content>
         </Dropdown>
-        <Popover>
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
           <PopoverTrigger>
             <motion.div
               initial="initial"

src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx

@@ -40,10 +40,10 @@ export function AllRecruitList({ selectedSeason }: Props) {
               {allRecruits.map((cardInfo) => (
                 <Droppable
                   key={`${cardInfo.id}-${cardInfo.season}-${cardInfo.title}`}
-                  id={cardInfo.id}
+                  id={`row-${cardInfo.id}`}
                   dataForOverlay={{ title: cardInfo.title }}>
                   <RowCard
-                    highlighted={cardInfo.id === over?.id}
+                    highlighted={`row-${cardInfo.id}` === over?.id}
                     {...cardInfo}
                     onRecruitDelete={deleteRecruit}
                     onRecruitStatusChange={(id, status) => {

src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx

@@ -1,17 +1,19 @@
-import { BoxCard, MIN_CARD_WIDTH } from '@/app/(sidebar)/my-recruit/containers/components/Card/BoxCard';
 import { useGetProgressingRecruits } from '@/app/(sidebar)/my-recruit/api/useGetProgressingRecruits';
+import { BoxCard, MIN_CARD_WIDTH } from '@/app/(sidebar)/my-recruit/containers/components/Card/BoxCard';
+import { TouchButton } from '@/components/TouchButton';
+import { useResizeObserver } from '@/hooks/useResizeObserver';
+import { Droppable } from '@/lib/dnd-kit/Droppable';
+import { useDndContext } from '@/lib/dnd-kit/dnd-kit';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
-import { motion } from 'framer-motion';
 import { color } from '@/system/token/color';
-import { Spacing } from '@/system/utils/Spacing';
-import { TouchButton } from '@/components/TouchButton';
-import { useState } from 'react';
+import { AnimateHeight } from '@/system/utils/AnimateHeight';
 import { If } from '@/system/utils/If';
+import { Spacing } from '@/system/utils/Spacing';
 import { SwitchCase } from '@/system/utils/SwitchCase';
-import { usePatchRecruitStatus } from '../../api/usePatchRecruitStatus';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
 import { useDeleteRecruit } from '../../api/useDeleteRecruit';
-import { useResizeObserver } from '@/hooks/useResizeObserver';
-import { AnimateHeight } from '@/system/utils/AnimateHeight';
+import { usePatchRecruitStatus } from '../../api/usePatchRecruitStatus';
 
 const 최초_노출_카드_갯수 = 1;
 const CARD_GAP = 16;
@@ -20,6 +22,7 @@ export function ProgressingRecruitList() {
   const recruitCards = useGetProgressingRecruits().data;
   const [shouldShowMore, setShouldShowMore] = useState(false);
 
+  const { over } = useDndContext();
   const { mutate: patchRecruitStatus } = usePatchRecruitStatus();
   const { mutate: deleteRecruit } = useDeleteRecruit();
 
@@ -53,14 +56,19 @@ export function ProgressingRecruitList() {
               <AnimateHeight>
                 <div ref={resizeRef} className="grid flex-wrap" style={{ gridTemplateColumns, gap: CARD_GAP }}>
                   {recruitCardForShow.map((cardInfo) => (
-                    <BoxCard
+                    <Droppable
                       key={`${cardInfo.id}-${cardInfo.season}-${cardInfo.title}`}
-                      {...cardInfo}
-                      onRecruitDelete={deleteRecruit}
-                      onRecruitStatusChange={(id, status) => {
-                        patchRecruitStatus({ id, recruitStatus: status });
-                      }}
-                    />
+                      id={`box-${cardInfo.id}`}
+                      dataForOverlay={{ title: cardInfo.title }}>
+                      <BoxCard
+                        highlighted={`box-${cardInfo.id}` === over?.id}
+                        {...cardInfo}
+                        onRecruitDelete={deleteRecruit}
+                        onRecruitStatusChange={(id, status) => {
+                          patchRecruitStatus({ id, recruitStatus: status });
+                        }}
+                      />
+                    </Droppable>
                   ))}
                 </div>
               </AnimateHeight>

src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx

@@ -6,11 +6,13 @@ import { Icon } from '@/system/components';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { color } from '@/system/token/color';
 import { Spacing } from '@/system/utils/Spacing';
+import { cn } from '@/utils';
 import { dday } from '@/utils/date';
 import { useRouter } from 'next/navigation';
 import { DueDateDialog } from '../DueDateDialog/DueDateDialog';
 
 interface BoxCardProps extends RecruitCard {
+  highlighted?: boolean;
   onRecruitDelete: (id: number) => void;
   onRecruitStatusChange: (id: number, status: string) => void;
 }
@@ -23,6 +25,7 @@ export function BoxCard({
   recruitStatus,
   season,
   nearestSchedule,
+  highlighted = false,
   onRecruitStatusChange,
   onRecruitDelete,
 }: BoxCardProps) {
@@ -31,7 +34,11 @@ export function BoxCard({
 
   return (
     <div className="flex-1 rounded-[10px] overflow-hidden cursor-pointer" style={{ minWidth, maxWidth: 350 }}>
-      <div className="h-38 pr-12 pl-20 bg-neutral-95 flex justify-between items-center">
+      <div
+        className={cn(
+          'h-38 pr-12 pl-20 flex justify-between items-center',
+          highlighted ? 'bg-mint-40' : 'bg-neutral-95',
+        )}>
         {nearestSchedule == null ? (
           <Dialog>
             <Dialog.Trigger className="flex justify-between items-center w-full">
@@ -47,17 +54,20 @@ export function BoxCard({
         ) : (
           <>
             <div className="flex items-center gap-[4px]">
-              <Icon name="clover" size={20} color={color.mint30} />
+              <Icon name="clover" size={20} color={highlighted ? color.mint10 : color.mint30} />
               <span className="text-white text-label2 ">
                 {nearestSchedule.recruitScheduleStage} D-{dday(nearestSchedule.deadLine) || 'DAY'}
               </span>
             </div>
-            <MoreButton onDeleteClick={() => onRecruitDelete(id)} />
+            <MoreButton highlighted={highlighted} onDeleteClick={() => onRecruitDelete(id)} />
           </>
         )}
       </div>
       <div
-        className="p-20 pt-16 bg-white border-neutral-5 border-1 rounded-b-[10px] hover:border-neutral-95"
+        className={cn(
+          'p-20 pt-16 bg-white border-neutral-5 border-1 rounded-b-[10px] hover:border-neutral-95',
+          highlighted ? 'border-mint-10 bg-[rgba(221,243,235,0.50)]' : 'border-neutral-5 bg-[white]',
+        )}
         onClick={() => router.push(`/my-recruit/${id}`)}>
         <div className="flex justify-between items-center">
           <div className="bg-mint-1 text-mint-50 text-label1 px-8 py-4 rounded-4">{season}</div>

src/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton.tsx

@@ -1,16 +1,16 @@
-import { Icon } from '@/system/components';
-import { Dropdown } from '@/system/components';
+import { Dropdown, Icon } from '@/system/components';
 import { color } from '@/system/token/color';
 
 interface MoreButtonProps {
   onDeleteClick: () => void;
+  highlighted?: boolean;
 }
 
-export function MoreButton({ onDeleteClick }: MoreButtonProps) {
+export function MoreButton({ onDeleteClick, highlighted }: MoreButtonProps) {
   return (
     <Dropdown>
       <Dropdown.Trigger className="outline-none">
-        <Icon name="more" size={24} color={color.neutral40} />
+        <Icon name="more" size={24} color={highlighted ? color.white : color.neutral40} />
       </Dropdown.Trigger>
       <Dropdown.Content className="mr-[100px]">
         <Dropdown.CheckedItem className="gap-[8px]" onClick={onDeleteClick}>

src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx

@@ -1,13 +1,13 @@
+import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
 import { Dropdown, Icon } from '@/system/components';
 import { Calendar } from '@/system/components/Calendar/Calendar';
 import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
 import { color } from '@/system/token/color';
+import { If } from '@/system/utils/If';
 import clsx from 'clsx';
 import { format } from 'date-fns/format';
 import { motion } from 'framer-motion';
-import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
-import { useState } from 'react';
-import { If } from '@/system/utils/If';
+import { useEffect, useState } from 'react';
 
 interface Props {
   selectedDate?: Date;
@@ -29,8 +29,13 @@ export function Form({
   onDeadLineClick,
   onDeleteClick,
 }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
   const isDateSelected = selectedDate != null;
 
+  useEffect(() => {
+    setIsOpen(false);
+  }, [selectedDate]);
+
   return (
     <div className="w-full flex justify-between items-center p-8 bg-neutral-1 rounded-[8px]">
       <Dropdown>
@@ -53,7 +58,7 @@ export function Form({
         </Dropdown.Content>
       </Dropdown>
       <div className="flex items-center">
-        <Popover>
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
           <PopoverTrigger>
             <motion.div
               initial="initial"