♻️ refactor : 북마크 버튼

dnd-side-project · Jan 9, 2024 · 81c3c47 · 81c3c47
1 parent fc0654c
commit 81c3c47
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/src/components/Feed/BookmarkButton.tsx b/src/components/Feed/BookmarkButton.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { Icon } from '../Button/Icon';
+import { PreparingModal } from '@/components/Modal';
+import { useOverlay } from '@/components/Overlay/useOverlay';
+import { ICON } from '@/constants/icon';
+
+export default function BookmarkButton() {
+  const { open } = useOverlay();
+
+  return (
+    <div
+      className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-[#141218] bg-opacity-30 p-6"
+      onClick={(e) => {
+        e.preventDefault();
+        open(({ exit }) => <PreparingModal onClose={exit} />);
+      }}
+    >
+      <Icon icon={ICON.bookmark.white.empty} />
+    </div>
+  );
+}
diff --git a/src/components/Feed/Photo.tsx b/src/components/Feed/Photo.tsx
@@ -1,10 +1,6 @@
-'use client';
 import Link from 'next/link';
 
-import { Icon } from '../Button/Icon';
-import { PreparingModal } from '@/components/Modal';
-import { useOverlay } from '@/components/Overlay/useOverlay';
-import { ICON } from '@/constants/icon';
+import BookmarkButton from './BookmarkButton';
 
 interface Photo {
   imageKey?: string;
@@ -13,22 +9,13 @@ interface Photo {
 }
 
 export default function Photo({ imageKey, source, id }: Photo) {
-  const { open } = useOverlay();
   return (
     <Link href={`detail/${id}`} scroll={false}>
       <div className="relative mb-16 inline-block h-fit w-full rounded-8">
         {imageKey && (
           <>
             <img src={imageKey} alt={source || ''} className="rounded-8" />
-            <div
-              className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-white bg-opacity-30 p-6"
-              onClick={(e) => {
-                e.preventDefault();
-                open(({ exit }) => <PreparingModal onClose={exit} />);
-              }}
-            >
-              <Icon icon={ICON.bookmark.white.empty} />
-            </div>
+            <BookmarkButton />
           </>
         )}
       </div>