hom-add-func-56 <- hom-add-func#56

src/components/home/ProjectsSection.tsx

@@ -1,7 +1,7 @@
 import type { ViewMode } from '@/types/home';
 import type { ProjectItem } from '@/types/project';
 
 import { CardView, ListView } from '../common';
 import ProjectCard from '../projects/ProjectCard';
 import { ProjectCardSkeleton } from '../projects/ProjectCardSkeleton';
 import ProjectHeader from '../projects/ProjectHeader';
@@ -28,6 +28,7 @@
   onChangeViewMode,
 }: Props) {
   const hasProjects = projects.length > 0;
+  const [deleteTarget, setDeleteTarget] = useState<ProjectItem | null>(null);
 
   if (!isLoading && !hasProjects) return null;
 

src/components/projects/ProjectCard.tsx

@@ -46,19 +46,26 @@
             ariaLabel="더보기"
             className="border border-gray-200 w-32 overflow-hidden"
           >
-            <div className="text-sm">
-              <button className="w-full px-3 py-2 text-left hover:bg-gray-100" type="button">
-                이름 변경
-              </button>
-              <button
-                className="w-full px-3 py-2 text-left text-red-500 hover:bg-gray-100"
-                type="button"
-              >
-                삭제
-              </button>
-            </div>
+            {({ close }) => (
+              <div className="text-sm">
+                <button className="w-full px-3 py-2 text-left hover:bg-gray-100" type="button">
+                  이름 변경
+                </button>
+                <button
+                  className="w-full px-3 py-2 text-left text-red-500 hover:bg-gray-100"
+                  type="button"
+                  onClick={() => {
+                    close();
+                    onDeleteClick?.(item);
+                  }}
+                >
+                  삭제
+                </button>
+              </div>
+            )}
           </Popover>
         </div>
+
         <p className="mt-1 text-body-s text-gray-500">{updatedAt}</p>
 
         <div className="mt-5 flex items-center justify-between gap-3 text-caption text-gray-500">
@@ -68,18 +75,18 @@
           </div>
 
           {/* 반응 모음 */}
-          <div className="flex gap-3">
-            <div className="flex gap-1">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
               <CommentCountIcon />
-              <span>{commentCount}</span>
+              {commentCount}
             </div>
-            <div className="flex gap-1">
+            <div className="flex items-center gap-1">
               <ReactionCountIcon />
-              <span>{reactionCount}</span>
+              {reactionCount}
             </div>
-            <div className="flex gap-1">
+            <div className="flex items-center gap-1">
               <ViewCountIcon />
-              <span>{viewCount}</span>
+              {viewCount}
             </div>
           </div>
         </div>

src/hooks/useProjectList.ts

@@ -1,16 +1,16 @@
 import { useMemo } from 'react';
 
 import type { SortMode } from '@/types/home';
-import type { CardItems } from '@/types/project';
+import type { ProjectItem } from '@/types/project';
 
 type Options = {
   query?: string;
   sort?: SortMode;
   // 필터 조건이 확정되기 전까지는 predicate 형태로 열어두면
   // UI/요구사항이 바뀌어도 훅은 그대로 재사용 가능...
-  filterFn?: (project: CardItems) => boolean;
+  filterFn?: (project: ProjectItem) => boolean;
 };
-export function useProjectList(projects: CardItems[], options?: Options) {
+export function useProjectList(projects: ProjectItem[], options?: Options) {
   return useMemo(() => {
     const query = options?.query ?? '';
     const sort = options?.sort ?? 'recent';