[🐛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/community/query/useGetHotPopularQuery.ts

@@ -11,6 +11,7 @@ export interface HotPopularItem {
   description: string;
   saveCount: number;
   isSaved: boolean;
+  todoGroupId: number;
 }
 
 interface HotPopularApiResponse {
@@ -29,7 +30,6 @@ export const useGetHotPopularQuery = () => {
       const res = await api.get('/v1/community/todos/popular', {
         params: { jobName: selectedJobName },
       });
-      console.log(res.data);
       const body = res.data as HotPopularApiResponse;
       return Array.isArray(body?.data) ? body.data : [];
     },

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/CommunityContents.tsx

@@ -5,6 +5,7 @@ import { useCommunityAddTodoMutation } from '@hook/community/useCommunityAddTodo
 import { useDeleteCommunityTodosMutation } from '@hook/community/useDeleteCommunityTodos';
 import ToastModal from '@common/modal/ToastModal';
 import Info from '@assets/icons/info.svg?react';
+import { trackTodoImport } from '@utils/amplitude';
 
 type CommunityItem = {
   id: number;
@@ -48,7 +49,7 @@ const CommunityContents = ({
     return base;
   }, [filtered, sort]);
 
-  const toggleAdd = (id: number, isAdded: boolean) => {
+  const toggleAdd = (id: number, isAdded: boolean, todoTitle: string) => {
     if (isAdded) {
       deleteTodoMutation.mutate(
         { id },
@@ -65,6 +66,7 @@ const CommunityContents = ({
         }
       );
     } else {
+      trackTodoImport(todoTitle); // Amplitude 이벤트 트래킹
       addTodoMutation.mutate(
         { id },
         {
@@ -131,7 +133,7 @@ const CommunityContents = ({
 
               <button
                 type="button"
-                onClick={() => toggleAdd(post.id, isAdded)}
+                onClick={() => toggleAdd(post.id, isAdded, post.description)}
                 className={
                   isAdded
                     ? 'p-2 text-purple-500 font-B03-SB'

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/jobDetail/components/TabContent/SproutContent.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import ToastModal from '@common/modal/ToastModal';
 import Info from '@assets/icons/info.svg?react';
 import { useAddMyTodoMutation } from '@hook/jobinfo/useAddMyTodoMutation.ts';
+import { trackTodoImport } from '@utils/amplitude';
 
 interface SproutContentProps {
   jobId: number;
@@ -17,10 +18,11 @@ const SproutContent = ({ data }: SproutContentProps) => {
   const [completedId, setCompletedId] = useState<Set<number>>(new Set());
   const [showToast, setShowToast] = useState(false);
 
-  const handleAdd = (jobTodoId: number) => {
+  const handleAdd = (jobTodoId: number, title: string) => {
     if (completedId.has(jobTodoId)) return;
 
     setClickedId(jobTodoId);
+    trackTodoImport(title); // Amplitude 이벤트 트래킹
     mutate(jobTodoId, {
       onSuccess: () => {
         setCompletedId((prev) => new Set(prev).add(jobTodoId));
@@ -63,7 +65,7 @@ const SproutContent = ({ data }: SproutContentProps) => {
                     : 'bg-purple-500 text-purple-100 hover:bg-purple-600'
               }`}
               disabled={isLoading || isCompleted}
-              onClick={() => handleAdd(sprout.JobTodoId)}
+              onClick={() => handleAdd(sprout.JobTodoId, sprout.title)}
             >
               {isCompleted
                 ? '할일 추가 완료'

src/pages/jobDetail/components/TabContent/TreeContents.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import ToastModal from '@common/modal/ToastModal';
 import Info from '@assets/icons/info.svg?react';
 import { useAddMyTodoMutation } from '@hook/jobinfo/useAddMyTodoMutation.ts';
+import { trackTodoImport } from '@utils/amplitude';
 
 interface TreeContentsProps {
   jobId: number;
@@ -17,10 +18,11 @@ const TreeContents = ({ data }: TreeContentsProps) => {
   const [completedId, setCompletedId] = useState<Set<number>>(new Set());
   const [showToast, setShowToast] = useState(false);
 
-  const handleAdd = (jobTodoId: number) => {
+  const handleAdd = (jobTodoId: number, title: string) => {
     if (completedId.has(jobTodoId)) return;
 
     setClickedId(jobTodoId);
+    trackTodoImport(title); // Amplitude 이벤트 트래킹
     mutate(jobTodoId, {
       onSuccess: () => {
         setCompletedId((prev) => new Set(prev).add(jobTodoId));
@@ -63,7 +65,7 @@ const TreeContents = ({ data }: TreeContentsProps) => {
                     : 'bg-purple-500 text-purple-100 hover:bg-purple-600'
               }`}
               disabled={isLoading || isCompleted}
-              onClick={() => handleAdd(tree.JobTodoId)}
+              onClick={() => handleAdd(tree.JobTodoId, tree.title)}
             >
               {isCompleted
                 ? '할일 추가 완료'