[🐛BUG] QA 시리즈

src/common/CheckList.tsx

@@ -10,7 +10,6 @@ import { useDeleteTodoMutation } from '@hook/todo/useDeleteTodoMutation';
 import { ReactTagManager } from 'react-gtm-ts';
 import { useAddTodoMutation } from '@hook/todo/useAddTodoMutation.ts';
 import Plus from '@assets/icons/plus.svg?react';
-import AddIcon from '@assets/icons/AddIcon.svg?react';
 import BookMarkIcon from '@assets/icons/bookmark.svg?react';
 import { useUpdateTodoMutation } from '@hook/todo/useUpdateTodoMutation.ts';
 
@@ -84,7 +83,7 @@ const CheckList = ({
         });
         console.log('Amplitude event sent: todo_create_attempt (inpage)');
       }
-      
+
       mutate(
         { todoTitle: trimmedText },
         {
@@ -263,10 +262,6 @@ const CheckList = ({
                     </>
                   ) : (
                     <>
-                      <div className="mr-3 flex items-center gap-1 text-gray-500">
-                        <AddIcon className="h-[18px] w-[18px]" />
-                        <span className="text-sm font-B03-SB">3</span>
-                      </div>
                       <div className="mr-3 flex items-center gap-1 text-gray-500">
                         <BookMarkIcon className="h-[18px] w-[18px]" />
                         <span className="text-sm font-B03-SB">999</span>

src/hook/useHomeQuery.ts

@@ -55,6 +55,7 @@ interface RecruitProps {
   active: number;
   jobName: string;
   postDate: string;
+  url: string;
 }
 const NewRecruit = async (pageNum: number, postDate: string) => {
   const token = localStorage.getItem('accessToken');

src/pages/community/components/CommunityLeftSide.tsx

@@ -5,6 +5,7 @@ import { useGetHotPopularQuery } from '@hook/community/query/useGetHotPopularQue
 import Bookmark from '@assets/icons/bookmark.svg?react';
 import Arrow from '@assets/icons/arrow.svg?react';
 import jobNames, { findJobIdByName } from '@utils/data/community/jobs';
+import BaseImage from '@assets/images/profile.png';
 
 const CommunityLeftSide = () => {
   const navigate = useNavigate();
@@ -27,7 +28,6 @@ const CommunityLeftSide = () => {
         <div
           className="mt-[30px] flex w-full cursor-pointer flex-row items-center justify-end text-gray-500 font-B02-SB"
           onClick={() => {
-            // 하드코딩 매핑된 jobId 사용
             const id = findJobIdByName(selectedJobName);
             navigate(`/others/${id ?? 1}`);
           }}
@@ -46,23 +46,24 @@ const CommunityLeftSide = () => {
           {popularTodos.map((item, idx) => (
             <div
               key={item.id}
-              className="flex w-full flex-row items-start justify-between py-4"
+              className="flex w-full cursor-pointer flex-row items-start justify-between py-4"
+              onClick={() => navigate(`/otherslist/${item.id}`)}
             >
               <div className="flex flex-row items-center gap-[15px]">
                 <div className="text-purple-500 font-T05-SB">{idx + 1}</div>
                 <div className="flex flex-row items-center gap-[15px]">
                   <img
-                    src={item.imageUrl}
+                    src={item.imageUrl || BaseImage}
                     alt="프로필이미지"
                     className="h-[30px] w-[30px] rounded-full bg-gray-50"
                   />
 
                   <div className="flex flex-col">
                     <div className="flex w-full flex-row items-start justify-between gap-[10px]">
-                      <div className="flex-1 break-words text-black font-B01-SB">
+                      <div className="w-[170px] min-w-0 flex-1 truncate text-black font-B01-SB">
                         {item.description}
                       </div>
-                      <div className="mr-2 shrink-0 whitespace-nowrap text-gray-500 font-C01-R">
+                      <div className="shrink-0 whitespace-nowrap text-gray-500 font-C01-R">
                         {item.dDay}
                       </div>
                     </div>

src/pages/home/components/HomeDreamer.tsx

@@ -40,7 +40,7 @@ const HomeDreamer = () => {
         <div className="text-gray-900 font-T02-B">{title}</div>
         <div
           className="flex cursor-pointer flex-row items-center text-gray-500 font-B02-SB"
-          onClick={() => navigate('/jobfound')}
+          onClick={() => navigate('/community')}
         >
           더 보러가기
           <Arrow />

src/pages/home/components/HomeRecruit.tsx

@@ -8,17 +8,77 @@ import { useRecruitQuery } from '@hook/useHomeQuery';
 import LoadingSpinner from '@common/LoadingSpinner';
 import { useFilterStore } from '@store/filterStore';
 import { useNavigate } from 'react-router-dom';
+import CardDetail from '@pages/jobSearch/components/CardDetail';
+import { RecruitItem } from '@validation/recruit/recruitSchema';
+
+interface RecruitData {
+  id: number;
+  title: string;
+  companyName: string;
+  jobName: string;
+  postDate: string;
+  count: number | string;
+  url: string;
+  active: number;
+  locationName?: string | null;
+  jobTypeName?: string;
+  experienceLevel?: string;
+  requiredEducationLevel?: string;
+  closeType?: string;
+  salary?: string;
+  postTimestamp?: string;
+  'expiration-timestamp'?: string;
+  'expiration-date'?: string;
+  deadline?: string;
+}
 
 const HomeRecruit = () => {
   const regionName = useUserStore((state) => state.regionName);
   const setSelection = useFilterStore((state) => state.setSelection);
   const [likedItems, setLikedItems] = useState<{ [key: number]: boolean }>({});
+  const [selectedCard, setSelectedCard] = useState<RecruitItem | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const toggleLike = (id: number) => {
     setLikedItems((prev) => ({
       ...prev,
       [id]: !prev[id],
     }));
   };
+
+  const convertToRecruitItem = (data: RecruitData): RecruitItem => {
+    return {
+      url: data.url || '',
+      active: data.active || 1,
+      title: data.title || '',
+      jobName: data.jobName || '',
+      companyName: data.companyName || '',
+      locationName: data.locationName || null,
+      jobTypeName: data.jobTypeName || '',
+      experienceLevel: data.experienceLevel || '',
+      requiredEducationLevel: data.requiredEducationLevel || '',
+      closeType: data.closeType || '',
+      salary: data.salary || '',
+      id: String(data.id),
+      postTimestamp: data.postTimestamp || '',
+      postDate: data.postDate || '',
+      'expiration-timestamp': data['expiration-timestamp'] || '',
+      'expiration-date': data['expiration-date'] || '',
+      deadline: data.deadline || '',
+      count:
+        typeof data.count === 'string' ? parseInt(data.count) : data.count || 0,
+    };
+  };
+
+  const handleCardClick = (data: RecruitData) => {
+    console.log('Card clicked:', data);
+    const recruitItem = convertToRecruitItem(data);
+    console.log('Converted item:', recruitItem);
+    setSelectedCard(recruitItem);
+    setIsModalOpen(true);
+    console.log('Modal should open');
+  };
+
   const isLoggedIn = localStorage.getItem('accessToken');
   const navigate = useNavigate();
 
@@ -63,10 +123,14 @@ const HomeRecruit = () => {
             <div
               key={data.id}
               className="flex min-h-[312px] w-[384px] cursor-pointer flex-col items-start rounded-[30px] border-[1.2px] border-gray-300 p-[30px] hover:shadow-shadow2"
+              onClick={() => handleCardClick(data)}
             >
               <div
                 className="flex w-full flex-col items-end"
-                onClick={() => toggleLike(data.id)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleLike(data.id);
+                }}
               >
                 {likedItems[data.id] ? <FullLike /> : <Like />}
               </div>
@@ -92,6 +156,18 @@ const HomeRecruit = () => {
             </div>
           ))}
       </div>
+
+      {isModalOpen && selectedCard && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <CardDetail
+            item={selectedCard}
+            onClose={() => {
+              console.log('Closing modal');
+              setIsModalOpen(false);
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };

src/pages/otherTodoList/components/OtherTodoCard.tsx

@@ -3,13 +3,19 @@ import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import LoadingSpinner from '@common/LoadingSpinner';
 import { useMemoQuery } from '@hook/mydream/useGetMemo';
+import BookMarkIcon from '@assets/icons/bookmark.svg?react';
+import { useCommunityAddTodoMutation } from '@hook/community/useCommunityAddTodoMutation';
+import { useDeleteCommunityTodosMutation } from '@hook/community/useDeleteCommunityTodos';
+import ToastModal from '@common/modal/ToastModal';
+import Info from '@assets/icons/info.svg?react';
 
 interface TodoItem {
   todoId: number;
   title: string;
   completed: boolean;
-
   isPublic: boolean;
+  saveCount?: number;
+  isSaved?: boolean;
 }
 
 interface TodoCardProps {
@@ -21,6 +27,47 @@ const OtherTodoCard = ({ todos }: TodoCardProps) => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [selectedTodoId, setSelectedTodoId] = useState<number | null>(null);
+  const [added, setAdded] = useState<Record<number, boolean>>({});
+  const addTodoMutation = useCommunityAddTodoMutation();
+  const deleteTodoMutation = useDeleteCommunityTodosMutation();
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+
+  const toggleAdd = (id: number, isAdded: boolean) => {
+    if (isAdded) {
+      deleteTodoMutation.mutate(
+        { id },
+        {
+          onSuccess: () => {
+            setAdded((prev) => ({ ...prev, [id]: false }));
+            setToastMessage('할일이 취소되었습니다.');
+            setShowToast(true);
+            setTimeout(() => setShowToast(false), 2500);
+          },
+          onError: () => {
+            alert('추가 취소에 실패했어요.');
+          },
+        }
+      );
+    } else {
+      addTodoMutation.mutate(
+        { id },
+        {
+          onSuccess: () => {
+            setShowToast(true);
+            setAdded((prev) => ({ ...prev, [id]: true }));
+            setToastMessage('할일이 추가되었습니다.');
+            setTimeout(() => {
+              setShowToast(false);
+            }, 2500);
+          },
+          onError: () => {
+            alert('내 할일 추가에 실패했어요.');
+          },
+        }
+      );
+    }
+  };
 
   const {
     data,
@@ -54,30 +101,73 @@ const OtherTodoCard = ({ todos }: TodoCardProps) => {
       )}
 
       <ul className="w-full flex-grow space-y-4">
-        {todos.map((item, index) => (
-          <li key={index} className={`flex items-center px-2 py-1`}>
-            <div
-              className={`flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-[8px] border ${
-                item.completed
-                  ? 'border-gray-500 bg-gray-300'
-                  : 'border-gray-300 bg-gray-100'
-              }`}
+        {todos.map((item, index) => {
+          const isAdded =
+            typeof added[item.todoId] === 'boolean'
+              ? added[item.todoId]
+              : item.isSaved || false;
+
+          return (
+            <li
+              key={index}
+              className={`flex items-center justify-between px-2 py-1`}
             >
-              {item.completed && <CheckIcon className="h-4 w-8 text-white" />}
-            </div>
+              <div className="flex items-center gap-3">
+                <div
+                  className={`flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-[8px] border ${
+                    item.completed
+                      ? 'border-gray-500 bg-gray-300'
+                      : 'border-gray-300 bg-gray-100'
+                  }`}
+                >
+                  {item.completed && (
+                    <CheckIcon className="h-4 w-8 text-white" />
+                  )}
+                </div>
+
+                <span
+                  className={`font-B01-M ${
+                    item.completed ? 'text-gray-500' : 'text-gray-900'
+                  }`}
+                >
+                  {item.title}
+                </span>
+              </div>
 
-            <div className="flex flex-1 items-center gap-3 pl-3">
-              <span
-                className={`font-B01-M ${
-                  item.completed ? 'text-gray-500' : 'text-gray-900'
-                }`}
-              >
-                {item.title}
-              </span>
-            </div>
-          </li>
-        ))}
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-1 text-purple-500">
+                  <BookMarkIcon className="h-[18px] w-[18px]" />
+                  <span className="text-sm font-B03-SB">
+                    {item.saveCount || 0}
+                  </span>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => toggleAdd(item.todoId, isAdded)}
+                  className={
+                    isAdded
+                      ? 'p-2 text-purple-500 font-B03-SB'
+                      : 'flex items-center justify-center rounded-[10px] bg-purple-500 p-2 text-purple-50 font-B03-SB'
+                  }
+                >
+                  {isAdded ? '추가 취소하기' : '내 할일에 추가'}
+                </button>
+              </div>
+            </li>
+          );
+        })}
       </ul>
+
+      {showToast && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <ToastModal
+            icon={<Info className="h-[26px] w-[26px] text-white" />}
+            text={toastMessage}
+            width="w-[274px]"
+          />
+        </div>
+      )}
     </div>
   );
 };

src/validation/home/popularSchema.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 export const PopularTodoSchema = z.object({
   todoId: z.number(),
   title: z.string(),
-  profileImage: z.string().url(),
+  profileImage: z.string().url().nullable(),
   memberNickname: z.string(),
   memberLevel: z.string().nullable(),
   jobName: z.string(),