From f54951081e97e6d8a1d72d7d1d23fbed76a9e6bb Mon Sep 17 00:00:00 2001
From: YeoEunnn <ayeoreunmy3456@naver.com>
Date: Mon, 19 Jan 2026 22:04:39 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20gemini=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=88=98=EC=A0=95=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CardView.tsx        |  6 +++---
 src/components/common/FileDropzone.tsx    |  2 +-
 src/components/common/ListView.tsx        | 14 --------------
 src/components/projects/ProjectHeader.tsx | 10 ++++++++--
 src/hooks/useProjectList.ts               |  6 +++---
 5 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/components/common/CardView.tsx b/src/components/common/CardView.tsx
index 304ed74a..e7053cbf 100644
--- a/src/components/common/CardView.tsx
+++ b/src/components/common/CardView.tsx
@@ -9,7 +9,7 @@ export interface CardViewProps<T> {
   className?: string;
   itemClassName?: string;
   empty?: ReactNode;
-  ariaLabal?: string;
+  ariaLabel?: string;
 }
 
 export function CardView<T>({
@@ -19,14 +19,14 @@ export function CardView<T>({
   className,
   itemClassName,
   empty,
-  ariaLabal,
+  ariaLabel,
 }: CardViewProps<T>) {
   if (items.length === 0) {
     return <div className="cardView__empty">{empty ?? 'No items'}</div>;
   }
 
   return (
-    <div className={clsx('cardView', className)} role="list" aria-label={ariaLabal}>
+    <div className={clsx('cardView', className)} role="list" aria-label={ariaLabel}>
       {items.map((item, index) => (
         <div
           key={getKey(item, index)}
diff --git a/src/components/common/FileDropzone.tsx b/src/components/common/FileDropzone.tsx
index 9f7f9858..0d1b8cf5 100644
--- a/src/components/common/FileDropzone.tsx
+++ b/src/components/common/FileDropzone.tsx
@@ -98,7 +98,7 @@ export default function FileDropzone({
             (showDragOverlay || showUploadOverlay) && 'blur-sm opacity-40',
           )}
         >
-          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-800 not-visited:transition group-hover:bg-gray-900">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-800 transition group-hover:bg-gray-900">
             <UploadIcon className="h-5 w-5 text-white" />
           </div>
           <div className="space-y-2 text-center">
diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx
index 7880a712..d8b39290 100644
--- a/src/components/common/ListView.tsx
+++ b/src/components/common/ListView.tsx
@@ -60,20 +60,6 @@ export function ListView<T>({
           >
             {renderLeading && <div className="listView__leading">{renderLeading(item)}</div>}
 
-            {/* <div className="listView__content">
-              <div className="listView__title">{renderTitle(item)}</div>
-
-              {(renderUpdatedAt || renderMeta) && (
-                <div className="listView__meta">
-                  {renderUpdatedAt && (
-                    <span className="listView__updated">{renderUpdatedAt(item)}</span>
-                  )}
-                  {renderMeta && <span className="listView__metaExtra">{renderMeta(item)}</span>}
-                </div>
-              )}
-
-              {renderStats && <div className="listView__stats">{renderStats(item)}</div>}
-            </div> */}
             <div className="listView__content">{renderInfo(item)}</div>
 
             {renderTrailing && (
diff --git a/src/components/projects/ProjectHeader.tsx b/src/components/projects/ProjectHeader.tsx
index 1c62d9b1..b01f023e 100644
--- a/src/components/projects/ProjectHeader.tsx
+++ b/src/components/projects/ProjectHeader.tsx
@@ -94,7 +94,10 @@ export default function ProjectHeader({
           <button
             aria-label="카드뷰"
             aria-pressed={isCard}
-            className={clsx('rounded-lg p-2', isCard ? 'text-gray-800' : 'text-gray-400')}
+            className={clsx(
+              'rounded-lg p-2 cursor-pointer',
+              isCard ? 'text-gray-800' : 'text-gray-400',
+            )}
             type="button"
             onClick={() => onChangeViewMode('card')}
           >
@@ -103,7 +106,10 @@ export default function ProjectHeader({
           <button
             aria-label="리스트뷰"
             aria-pressed={isList}
-            className={clsx('rounded-lg p-2', isList ? 'text-gray-800' : 'text-gray-400')}
+            className={clsx(
+              'rounded-lg p-2 cursor-pointer',
+              isList ? 'text-gray-800' : 'text-gray-400',
+            )}
             type="button"
             onClick={() => onChangeViewMode('list')}
           >
diff --git a/src/hooks/useProjectList.ts b/src/hooks/useProjectList.ts
index e442512d..3b5e3270 100644
--- a/src/hooks/useProjectList.ts
+++ b/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';

From aedf9aba1e4b9a8824df8221ce7dc6ff1af5e1f1 Mon Sep 17 00:00:00 2001
From: YeoEunnn <ayeoreunmy3456@naver.com>
Date: Mon, 19 Jan 2026 22:35:59 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C=20=EB=AA=A8=EB=8B=AC=20=EB=9D=84?=
 =?UTF-8?q?=EC=9A=B0=EA=B8=B0=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/projects/ProjectCard.tsx | 148 ++++++++++++++++--------
 src/components/projects/ProjectList.tsx |   2 +-
 2 files changed, 98 insertions(+), 52 deletions(-)

diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index ea094e35..a4075d86 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import clsx from 'clsx';
 
 import CommentCountIcon from '@/assets/icons/icon-comment-count.svg?react';
@@ -7,7 +9,7 @@ import ReactionCountIcon from '@/assets/icons/icon-reaction-count.svg?react';
 import ViewCountIcon from '@/assets/icons/icon-view-count.svg?react';
 import type { ProjectItem } from '@/types/project';
 
-import { Popover } from '../common';
+import { Modal, Popover } from '../common';
 
 type ProjectCardProps = {
   item: ProjectItem;
@@ -15,6 +17,8 @@ type ProjectCardProps = {
 };
 
 export default function ProjectCard({ item, className }: ProjectCardProps) {
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
   const {
     title,
     updatedAt,
@@ -26,64 +30,106 @@ export default function ProjectCard({ item, className }: ProjectCardProps) {
   } = item;
 
   return (
-    <article className={clsx('overflow-hidden rounded-2xl border-none bg-white', className)}>
-      <div className="w-full aspect-video bg-gray-200">
-        {thumbnailUrl && (
-          <img className="h-full w-full object-cover outline-none" src={thumbnailUrl} alt={title} />
-        )}
-      </div>
-
-      <div className="p-4">
-        {/* 제목 및 업데이트 날짜 */}
-        <div className="flex justify-between items-center">
-          <h3 className="text-body-m-bold text-gray-800">{title}</h3>
-          <Popover
-            trigger={({ isOpen }) => (
-              <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />
-            )}
-            position="bottom"
-            align="end"
-            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>
-          </Popover>
+    <>
+      <article className={clsx('overflow-hidden rounded-2xl border-none bg-white', className)}>
+        <div className="w-full aspect-video bg-gray-200">
+          {thumbnailUrl && (
+            <img
+              className="h-full w-full object-cover outline-none"
+              src={thumbnailUrl}
+              alt={title}
+            />
+          )}
         </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">
-          <div className="flex gap-1">
-            <PageCountIcon />
-            <span>{pageCount} 페이지</span>
+        <div className="p-4">
+          {/* 제목 및 업데이트 날짜 */}
+          <div className="flex justify-between items-center">
+            <h3 className="text-body-m-bold text-gray-800">{title}</h3>
+            <Popover
+              trigger={({ isOpen }) => (
+                <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />
+              )}
+              position="bottom"
+              align="end"
+              ariaLabel="더보기"
+              className="border border-gray-200 w-32 overflow-hidden"
+            >
+              {({ 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();
+                      setIsDeleteModalOpen(true);
+                    }}
+                  >
+                    삭제
+                  </button>
+                </div>
+              )}
+            </Popover>
           </div>
+          <p className="mt-1 text-body-s text-gray-500">{updatedAt}</p>
 
-          {/* 반응 모음 */}
-          <div className="flex gap-3">
-            <div className="flex gap-1">
-              <CommentCountIcon />
-              <span>{commentCount}</span>
-            </div>
+          <div className="mt-5 flex items-center justify-between gap-3 text-caption text-gray-500">
             <div className="flex gap-1">
-              <ReactionCountIcon />
-              <span>{reactionCount}</span>
+              <PageCountIcon />
+              <span>{pageCount} 페이지</span>
             </div>
-            <div className="flex gap-1">
-              <ViewCountIcon />
-              <span>{viewCount}</span>
+
+            {/* 반응 모음 */}
+            <div className="flex gap-3">
+              <div className="flex gap-1">
+                <CommentCountIcon />
+                <span>{commentCount}</span>
+              </div>
+              <div className="flex gap-1">
+                <ReactionCountIcon />
+                <span>{reactionCount}</span>
+              </div>
+              <div className="flex gap-1">
+                <ViewCountIcon />
+                <span>{viewCount}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </article>
+      </article>
+
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        title="발표 삭제"
+        size="sm"
+      >
+        <div className="flex flex-col gap-1">
+          <p className="text-body-m-bold">{title}</p>
+          <p className="text-body-m">해당 발표를 정말 삭제하시겠습니까?</p>
+        </div>
+        <div className="flex items-center justify-center text-body-s gap-3 mt-7">
+          <button
+            className="border border-none rounded-lg flex-1 py-3 bg-gray-200 text-main cursor-pointer"
+            type="button"
+          >
+            취소
+          </button>
+          <button
+            className="border border-none rounded-lg flex-1 py-3 bg-main text-gray-100 cursor-pointer"
+            type="button"
+            onClick={() => {
+              // TODO : 실제 삭제 호출
+              setIsDeleteModalOpen(false);
+            }}
+          >
+            삭제
+          </button>
+        </div>
+      </Modal>
+    </>
   );
 }
diff --git a/src/components/projects/ProjectList.tsx b/src/components/projects/ProjectList.tsx
index ceba323f..6bb59d0f 100644
--- a/src/components/projects/ProjectList.tsx
+++ b/src/components/projects/ProjectList.tsx
@@ -67,7 +67,7 @@ export default function ProjectList({ items, className, itemClassName }: Project
           </div>
         </div>
       )}
-      renderTrailing={(item) => (
+      renderTrailing={() => (
         <Popover
           trigger={({ isOpen }) => (
             <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />

From 4e38b45aecdac7565d20ea7f79385d6ca1909db0 Mon Sep 17 00:00:00 2001
From: YeoEunnn <ayeoreunmy3456@naver.com>
Date: Mon, 19 Jan 2026 22:58:19 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=B9=B4=EB=93=9C=EB=B7=B0,=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=B7=B0=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=ED=86=B5=EC=9D=BC=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CardView.tsx |  2 ++
 src/components/common/ListView.tsx | 50 +++++++++---------------------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/src/components/common/CardView.tsx b/src/components/common/CardView.tsx
index e7053cbf..36235dfe 100644
--- a/src/components/common/CardView.tsx
+++ b/src/components/common/CardView.tsx
@@ -5,7 +5,9 @@ import clsx from 'clsx';
 export interface CardViewProps<T> {
   items: readonly T[];
   getKey: (item: T, index: number) => Key;
+
   renderCard: (item: T) => ReactNode;
+
   className?: string;
   itemClassName?: string;
   empty?: ReactNode;
diff --git a/src/components/common/ListView.tsx b/src/components/common/ListView.tsx
index d8b39290..a746aa56 100644
--- a/src/components/common/ListView.tsx
+++ b/src/components/common/ListView.tsx
@@ -10,7 +10,6 @@ export interface ListViewProps<T> {
   renderTrailing?: (item: T) => ReactNode;
   renderInfo: (item: T) => ReactNode;
 
-  onItemClick?: (item: T) => void;
   className?: string;
   itemClassName?: string;
   empty?: ReactNode;
@@ -23,7 +22,6 @@ export function ListView<T>({
   renderLeading,
   renderTrailing,
   renderInfo,
-  onItemClick,
   className,
   itemClassName,
   empty,
@@ -33,41 +31,23 @@ export function ListView<T>({
     return <div className="listView__empty">{empty ?? 'No items'}</div>;
   }
 
-  const isClickable = Boolean(onItemClick);
-
   return (
     <div className={clsx('listView', className)} role="list" aria-label={ariaLabel}>
-      {items.map((item, index) => {
-        const key = getKey(item, index);
-
-        return (
-          <div
-            key={key}
-            className={clsx('listView__item', itemClassName, isClickable && 'is-clickable')}
-            role="listitem"
-            tabIndex={isClickable ? 0 : undefined}
-            onClick={isClickable ? () => onItemClick?.(item) : undefined}
-            onKeyDown={
-              isClickable
-                ? (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      onItemClick?.(item);
-                    }
-                  }
-                : undefined
-            }
-          >
-            {renderLeading && <div className="listView__leading">{renderLeading(item)}</div>}
-
-            <div className="listView__content">{renderInfo(item)}</div>
-
-            {renderTrailing && (
-              <div className="listView__trailing ml-auto shrink-0">{renderTrailing(item)}</div>
-            )}
-          </div>
-        );
-      })}
+      {items.map((item, index) => (
+        <div
+          key={getKey(item, index)}
+          className={clsx('listView__item', itemClassName)}
+          role="listitem"
+        >
+          {renderLeading && <div className="listView__leading">{renderLeading(item)}</div>}
+
+          <div className="listView__content">{renderInfo(item)}</div>
+
+          {renderTrailing && (
+            <div className="listView__trailing ml-auto shrink-0">{renderTrailing(item)}</div>
+          )}
+        </div>
+      ))}
     </div>
   );
 }

From ef18b03c493aca94802b919805ee40b4d6ba8814 Mon Sep 17 00:00:00 2001
From: YeoEunnn <ayeoreunmy3456@naver.com>
Date: Tue, 20 Jan 2026 02:20:02 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=82=AD=EC=A0=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=9D=84=20PjSection=EC=97=90=EC=84=9C=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20(#5?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/ProjectsSection.tsx |  45 ++++++-
 src/components/projects/ProjectCard.tsx | 171 +++++++++---------------
 src/components/projects/ProjectList.tsx |  48 ++++---
 3 files changed, 137 insertions(+), 127 deletions(-)

diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 768be1f5..ecbca130 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -1,7 +1,9 @@
+import { useState } from 'react';
+
 import type { ViewMode } from '@/types/home';
 import type { ProjectItem } from '@/types/project';
 
-import { CardView, ListView } from '../common';
+import { CardView, Modal } from '../common';
 import ProjectCard from '../projects/ProjectCard';
 import { ProjectCardSkeleton } from '../projects/ProjectCardSkeleton';
 import ProjectHeader from '../projects/ProjectHeader';
@@ -28,6 +30,7 @@ export default function ProjectsSection({
   onChangeViewMode,
 }: Props) {
   const hasProjects = projects.length > 0;
+  const [deleteTarget, setDeleteTarget] = useState<ProjectItem | null>(null);
 
   if (!isLoading && !hasProjects) return null;
 
@@ -58,7 +61,9 @@ export default function ProjectsSection({
             items={projects}
             getKey={(item) => item.id}
             className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-3"
-            renderCard={(item) => <ProjectCard item={item} />}
+            renderCard={(item) => (
+              <ProjectCard item={item} onDeleteClick={(target) => setDeleteTarget(target)} />
+            )}
           />
         )
       ) : isLoading ? (
@@ -71,9 +76,41 @@ export default function ProjectsSection({
           ))}
         </div>
       ) : (
-        <ProjectList items={projects} className="mt-6" />
+        <ProjectList items={projects} className="mt-6" onDeleteClick={setDeleteTarget} />
       )}
-      {/* 프레젠테이션 목록 */}
+
+      <Modal
+        isOpen={Boolean(deleteTarget)}
+        onClose={() => setDeleteTarget(null)}
+        title="발표 삭제"
+        size="sm"
+      >
+        <div className="flex flex-col gap-1">
+          <p className="text-body-m-bold">{deleteTarget?.title}</p>
+          <p className="text-body-m">해당 발표를 정말 삭제하시겠습니까?</p>
+        </div>
+
+        <div className="mt-7 flex items-center justify-center gap-3 text-body-s">
+          <button
+            className="flex-1 rounded-lg bg-gray-200 py-3 text-main"
+            type="button"
+            onClick={() => setDeleteTarget(null)}
+          >
+            취소
+          </button>
+          <button
+            className="flex-1 rounded-lg py-3 bg-main text-gray-100"
+            type="button"
+            onClick={() => {
+              // TODO : 실제 삭제 호출 : deleteTarget?.id
+              // 서버/스토어 붙이면 여기에서 mutation 호출하고 성공 시 목록 갱신
+              setDeleteTarget(null);
+            }}
+          >
+            삭제
+          </button>
+        </div>
+      </Modal>
     </section>
   );
 }
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index a4075d86..fad9ad58 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import clsx from 'clsx';
 
 import CommentCountIcon from '@/assets/icons/icon-comment-count.svg?react';
@@ -9,127 +7,84 @@ import ReactionCountIcon from '@/assets/icons/icon-reaction-count.svg?react';
 import ViewCountIcon from '@/assets/icons/icon-view-count.svg?react';
 import type { ProjectItem } from '@/types/project';
 
-import { Modal, Popover } from '../common';
+import { Popover } from '../common';
 
 type ProjectCardProps = {
   item: ProjectItem;
   className?: string;
+  onDeleteClick?: (item: ProjectItem) => void; // 상위로 올릴 콜백 (플젝 삭제)
 };
 
-export default function ProjectCard({ item, className }: ProjectCardProps) {
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-
-  const {
-    title,
-    updatedAt,
-    pageCount,
-    commentCount,
-    reactionCount,
-    viewCount = 0,
-    thumbnailUrl,
-  } = item;
+export default function ProjectCard({ item, className, onDeleteClick }: ProjectCardProps) {
+  const { title, updatedAt, pageCount, commentCount, reactionCount, viewCount, thumbnailUrl } =
+    item;
 
   return (
-    <>
-      <article className={clsx('overflow-hidden rounded-2xl border-none bg-white', className)}>
-        <div className="w-full aspect-video bg-gray-200">
-          {thumbnailUrl && (
-            <img
-              className="h-full w-full object-cover outline-none"
-              src={thumbnailUrl}
-              alt={title}
-            />
-          )}
+    <article className={clsx('overflow-hidden rounded-2xl border-none bg-white', className)}>
+      <div className="w-full aspect-video bg-gray-200">
+        {thumbnailUrl && (
+          <img className="h-full w-full object-cover outline-none" src={thumbnailUrl} alt={title} />
+        )}
+      </div>
+
+      <div className="p-4">
+        {/* 제목 및 업데이트 날짜 */}
+        <div className="flex justify-between items-center">
+          <h3 className="text-body-m-bold text-gray-800">{title}</h3>
+          <Popover
+            trigger={({ isOpen }) => (
+              <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />
+            )}
+            position="bottom"
+            align="end"
+            ariaLabel="더보기"
+            className="border border-gray-200 w-32 overflow-hidden"
+          >
+            {({ 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>
 
-        <div className="p-4">
-          {/* 제목 및 업데이트 날짜 */}
-          <div className="flex justify-between items-center">
-            <h3 className="text-body-m-bold text-gray-800">{title}</h3>
-            <Popover
-              trigger={({ isOpen }) => (
-                <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />
-              )}
-              position="bottom"
-              align="end"
-              ariaLabel="더보기"
-              className="border border-gray-200 w-32 overflow-hidden"
-            >
-              {({ 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();
-                      setIsDeleteModalOpen(true);
-                    }}
-                  >
-                    삭제
-                  </button>
-                </div>
-              )}
-            </Popover>
+        <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">
+          <div className="flex gap-1">
+            <PageCountIcon />
+            <span>{pageCount} 페이지</span>
           </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">
-            <div className="flex gap-1">
-              <PageCountIcon />
-              <span>{pageCount} 페이지</span>
+          {/* 반응 모음 */}
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
+              <CommentCountIcon />
+              {commentCount}
             </div>
-
-            {/* 반응 모음 */}
-            <div className="flex gap-3">
-              <div className="flex gap-1">
-                <CommentCountIcon />
-                <span>{commentCount}</span>
-              </div>
-              <div className="flex gap-1">
-                <ReactionCountIcon />
-                <span>{reactionCount}</span>
-              </div>
-              <div className="flex gap-1">
-                <ViewCountIcon />
-                <span>{viewCount}</span>
-              </div>
+            <div className="flex items-center gap-1">
+              <ReactionCountIcon />
+              {reactionCount}
+            </div>
+            <div className="flex items-center gap-1">
+              <ViewCountIcon />
+              {viewCount}
             </div>
           </div>
         </div>
-      </article>
-
-      <Modal
-        isOpen={isDeleteModalOpen}
-        onClose={() => setIsDeleteModalOpen(false)}
-        title="발표 삭제"
-        size="sm"
-      >
-        <div className="flex flex-col gap-1">
-          <p className="text-body-m-bold">{title}</p>
-          <p className="text-body-m">해당 발표를 정말 삭제하시겠습니까?</p>
-        </div>
-        <div className="flex items-center justify-center text-body-s gap-3 mt-7">
-          <button
-            className="border border-none rounded-lg flex-1 py-3 bg-gray-200 text-main cursor-pointer"
-            type="button"
-          >
-            취소
-          </button>
-          <button
-            className="border border-none rounded-lg flex-1 py-3 bg-main text-gray-100 cursor-pointer"
-            type="button"
-            onClick={() => {
-              // TODO : 실제 삭제 호출
-              setIsDeleteModalOpen(false);
-            }}
-          >
-            삭제
-          </button>
-        </div>
-      </Modal>
-    </>
+      </div>
+    </article>
   );
 }
diff --git a/src/components/projects/ProjectList.tsx b/src/components/projects/ProjectList.tsx
index 6bb59d0f..e31b51a1 100644
--- a/src/components/projects/ProjectList.tsx
+++ b/src/components/projects/ProjectList.tsx
@@ -13,9 +13,15 @@ type ProjectListProps = {
   items: ProjectItem[];
   className?: string;
   itemClassName?: string;
+  onDeleteClick?: (item: ProjectItem) => void; // 상위로 올릴 콜백 (플젝 삭제)
 };
 
-export default function ProjectList({ items, className, itemClassName }: ProjectListProps) {
+export default function ProjectList({
+  items,
+  className,
+  itemClassName,
+  onDeleteClick,
+}: ProjectListProps) {
   return (
     <ListView
       items={items}
@@ -41,7 +47,7 @@ export default function ProjectList({ items, className, itemClassName }: Project
 
           {/* 날짜 | 페이지 수 + 댓글/이모티콘/조회 */}
           <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-2 text-caption text-gray-500">
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-5">
               <span>{item.updatedAt}</span>
               <span className="text-gray-300">|</span>
               <span className="flex items-center gap-1">
@@ -67,27 +73,39 @@ export default function ProjectList({ items, className, itemClassName }: Project
           </div>
         </div>
       )}
-      renderTrailing={() => (
+      renderTrailing={(item) => (
         <Popover
           trigger={({ isOpen }) => (
-            <MoreIcon className={clsx(isOpen ? 'text-main' : 'text-gray-500')} />
+            <button
+              type="button"
+              aria-label="더보기"
+              className={clsx(isOpen ? 'text-main' : 'text-gray-500')}
+            >
+              <MoreIcon />
+            </button>
           )}
           position="bottom"
           align="end"
           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>
       )}
     />