Feat(client): card edit delete (#83)

jjangminii · web-flow · commit 0432f7ee5352 · 2025-09-13T18:16:26.000+09:00
* feat: 팝업 연결

* feat: OptionsMenuButton 연결

* feat: 수정 보달 연결
diff --git a/apps/client/src/pages/myBookmark/MyBookmark.tsx b/apps/client/src/pages/myBookmark/MyBookmark.tsx
@@ -4,9 +4,26 @@ import {
   useGetBookmarkArticles,
   useGetBookmarkUnreadArticles,
 } from './apis/queries';
+import { REMIND_MOCK_DATA } from '@pages/remind/constants';
+import CardEditModal from '@shared/components/cardEditModal/CardEditModal';
+import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal';
+import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
+import { belowOf } from '@shared/utils/anchorPosition';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  const {
+    state: menu,
+    open: openMenu,
+    close: closeMenu,
+    style,
+    containerRef,
+  } = useAnchoredMenu((anchor) => belowOf(anchor, 8));
+
+  const getBookmarkTitle = (id: number | null) =>
+    id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
 
   const { data: readArticles } = useGetBookmarkArticles(1, 10);
   const { data: unreadArticles } = useGetBookmarkUnreadArticles(1, 10);
@@ -18,6 +35,7 @@ const MyBookmark = () => {
   return (
     <div className="flex flex-col py-[5.2rem] pl-[8rem]">
       <p className="head3">나의 북마크</p>
+
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
           text="전체보기"
@@ -44,6 +62,10 @@ const MyBookmark = () => {
               content={article.memo}
               // category={article.category.categoryName}
               date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
+              onClick={() => {}}
+              onOptionsClick={(e) =>
+                openMenu(article.articleId, e.currentTarget)
+              }
             />
           ))}
 
@@ -56,9 +78,43 @@ const MyBookmark = () => {
               content={article.memo}
               // category={article.}
               date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
+              onClick={() => {}}
+              onOptionsClick={(e) =>
+                openMenu(article.articleId, e.currentTarget)
+              }
             />
           ))}
+
+        <OptionsMenuPortal
+          open={menu.open}
+          style={style ?? undefined}
+          containerRef={containerRef}
+          categoryId={menu.categoryId}
+          getCategoryName={getBookmarkTitle}
+          onEdit={() => {
+            setIsEditOpen(true);
+            closeMenu();
+          }}
+          onDelete={(id) => {
+            console.log('delete', id);
+            closeMenu();
+          }}
+          onClose={closeMenu}
+        />
       </div>
+
+      {isEditOpen && (
+        <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">
+          <div
+            className="absolute inset-0 bg-black/60 backdrop-blur-[2px]"
+            onClick={() => setIsEditOpen(false)}
+          />
+          <div className="absolute inset-0 flex items-center justify-center p-4">
+            {/* 필요하면 menu.categoryId를 모달에 전달 */}
+            <CardEditModal onClose={() => setIsEditOpen(false)} />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/client/src/pages/remind/Remind.tsx b/apps/client/src/pages/remind/Remind.tsx
@@ -1,9 +1,26 @@
-import { Badge, Card } from '@pinback/design-system/ui';
 import { useState } from 'react';
+import { Badge, Card } from '@pinback/design-system/ui';
+import CardEditModal from '@shared/components/cardEditModal/CardEditModal';
+import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal';
+import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
+import { belowOf } from '@shared/utils/anchorPosition';
+import { REMIND_MOCK_DATA } from './constants';
 import { useGetRemindArticles } from './apis/queries';
 import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 
 const Remind = () => {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  const {
+    state: menu,
+    open: openMenu,
+    close: closeMenu,
+    style,
+    containerRef,
+  } = useAnchoredMenu((anchor) => belowOf(anchor, 8));
+
+  const getItemTitle = (id: number | null) =>
+    id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
   const [activeBadge, setActiveBadge] = useState('notRead');
   const formattedDate = formatLocalDateTime();
 
@@ -46,9 +63,41 @@ const Remind = () => {
             content={article.memo}
             timeRemaining={article.remindAt}
             category={article.category.categoryName}
+            onOptionsClick={(e) =>
+              openMenu(article.category.categoryId, e.currentTarget)
+            }
           />
         ))}
+
+        <OptionsMenuPortal
+          open={menu.open}
+          style={style ?? undefined}
+          containerRef={containerRef}
+          categoryId={menu.categoryId}
+          getCategoryName={getItemTitle}
+          onEdit={() => {
+            setIsEditOpen(true);
+            closeMenu();
+          }}
+          onDelete={(id) => {
+            console.log('delete', id);
+            closeMenu();
+          }}
+          onClose={closeMenu}
+        />
       </div>
+
+      {isEditOpen && (
+        <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">
+          <div
+            className="absolute inset-0 bg-black/60 backdrop-blur-[2px]"
+            onClick={() => setIsEditOpen(false)}
+          />
+          <div className="absolute inset-0 flex items-center justify-center p-4">
+            <CardEditModal onClose={() => setIsEditOpen(false)} />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/client/src/shared/utils/anchorPosition.ts b/apps/client/src/shared/utils/anchorPosition.ts
@@ -2,3 +2,8 @@ export function rightOf(anchor: HTMLElement, gap = 8) {
   const r = anchor.getBoundingClientRect();
   return { top: r.top, left: r.right + gap };
 }
+
+export const belowOf = (anchor: HTMLElement, gap = 8) => {
+  const r = anchor.getBoundingClientRect();
+  return { top: r.bottom + gap, left: r.left };
+};
diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx
@@ -6,6 +6,8 @@ type BaseProps = {
   content?: string;
   category?: string;
   imageUrl?: string;
+  onClick?: () => void;
+  onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
 type RemindProps = BaseProps & {
@@ -22,14 +24,22 @@ type BookmarkProps = BaseProps & {
 
 export type CardProps = RemindProps | BookmarkProps;
 
-const Card = (props: CardProps) => {
-  const { type } = props;
+const Card = (
+  props: CardProps & {
+    onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  }
+) => {
+  const { type, onOptionsClick } = props;
 
   return (
     <>
-      {type === 'remind' && <RemindCard {...props} />}
+      {type === 'remind' && (
+        <RemindCard {...props} onOptionsClick={onOptionsClick} />
+      )}
 
-      {type === 'bookmark' && <MyBookmarkCard {...props} />}
+      {type === 'bookmark' && (
+        <MyBookmarkCard {...props} onOptionsClick={onOptionsClick} />
+      )}
     </>
   );
 };
diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx
@@ -8,6 +8,8 @@ interface MyBookmarkCardProps {
   category?: string;
   imageUrl?: string;
   date: string;
+  onClick?: () => void;
+  onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const MyBookmarkCard = ({
@@ -16,6 +18,7 @@ const MyBookmarkCard = ({
   category,
   imageUrl,
   date,
+  onOptionsClick,
 }: MyBookmarkCardProps) => {
   return (
     <BaseCard>
@@ -38,6 +41,7 @@ const MyBookmarkCard = ({
             type="button"
             aria-label="카테고리 상세"
             className="cursor-pointer self-start"
+            onClick={(e) => onOptionsClick?.(e)}
           >
             <Icon name="ic_details_category" />
           </button>
diff --git a/packages/design-system/src/components/card/RemindCard.tsx b/packages/design-system/src/components/card/RemindCard.tsx
@@ -8,6 +8,8 @@ interface RemindCardProps {
   category?: string;
   imageUrl?: string;
   timeRemaining: string;
+  onClick?: () => void;
+  onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const RemindCard = ({
@@ -16,6 +18,7 @@ const RemindCard = ({
   category,
   imageUrl,
   timeRemaining,
+  onOptionsClick,
 }: RemindCardProps) => {
   return (
     <BaseCard>
@@ -46,6 +49,7 @@ const RemindCard = ({
             type="button"
             aria-label="카테고리 상세"
             className="cursor-pointer self-start"
+            onClick={(e) => onOptionsClick?.(e)}
           >
             <Icon name="ic_details_category" />
           </button>
@@ -54,7 +58,6 @@ const RemindCard = ({
           {content}
         </p>
 
-        {/* TODO: 카테고리 컴포넌트로 교체 */}
         <span className="bg-category-red-bg caption2-sb text-category-red-text h-[2.2rem] w-[6.2rem] rounded-[0.4rem] px-[0.8rem] py-[0.2rem]">
           {category}
         </span>

Original file line number	Diff line number	Diff line change
`@@ -2,3 +2,8 @@ export function rightOf(anchor: HTMLElement, gap = 8) {`
`2`	`2`	`const r = anchor.getBoundingClientRect();`
`3`	`3`	`return { top: r.top, left: r.right + gap };`
`4`	`4`	`}`
	`5`	`+`
	`6`	`+export const belowOf = (anchor: HTMLElement, gap = 8) => {`
	`7`	`+ const r = anchor.getBoundingClientRect();`
	`8`	`+ return { top: r.bottom + gap, left: r.left };`
	`9`	`+};`