Merge pull request #89 from Funssion-SWM/develop

Refactor: moreOptions
Funssion-SWM · Dec 16, 2023 · 7bceb98 · 7bceb98
2 parents 5f32137 + 821a4bb
commit 7bceb98
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 204 deletions.
diff --git a/src/components/memo/MemoViewerHeader.tsx b/src/components/memo/MemoViewerHeader.tsx
@@ -2,13 +2,12 @@ import { useDetectOutsideClick } from '@/hooks/useDeleteOutsideClick';
 import { useContext, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { deleteMemo } from '@/service/memos';
-import more from '../../assets/icons/more.svg';
-import Image from 'next/image';
 import { ModalContext } from '@/context/ModalProvider';
 import LikeBox from '../shared/LikeBox';
 import { extractYMDHM } from '@/service/time';
 import { notifyToast } from '@/service/notify';
 import Link from 'next/link';
+import MoreOptions from '../shared/MoreOptions';
 
 type Props = {
   memoId: number;
@@ -34,29 +33,44 @@ export default function MemoViewerHeader({
   const router = useRouter();
   const { open } = useContext(ModalContext);
 
-  const handleDelete = () =>
-    deleteMemo(memoId).then((res) => {
-      if (res?.code) {
-        notifyToast(res.message, 'error');
-        return;
+  const handleDelete = () => {
+    setIsActive(false);
+    open(
+      seriesId
+        ? '시리즈에 속한 메모입니다. 메모를 삭제하시겠습니까?'
+        : '메모를 삭제하시겠습니까?',
+      () => {
+        deleteMemo(memoId).then((res) => {
+          if (res?.code) {
+            notifyToast(res.message, 'error');
+            return;
+          }
+          notifyToast('성공적으로 메모가 삭제되었습니다.', 'success');
+          router.push('/memos');
+          router.refresh();
+        });
       }
-      notifyToast('성공적으로 메모가 삭제되었습니다.', 'success');
-      router.push('/memos');
-      router.refresh();
-    });
+    );
+  };
+
+  const handleUpdateBtnClick = () => {
+    setIsActive(false);
+    router.push(`/create/memo/?id=${memoId}`);
+    router.refresh();
+  };
 
   return (
-    <div className="p-4 flex justify-between items-center">
+    <div className="flex items-center justify-between p-4">
       <div className="text-sm text-soma-grey-49">
         {extractYMDHM(createdDate)}
       </div>
       <nav className="relative flex items-center pl-5" ref={dropdownRef}>
         {seriesId && (
-          <div className="text-xs mx-4 text-soma-grey-70 hidden sm:block">
+          <div className="hidden mx-4 text-xs text-soma-grey-70 sm:block">
             {`🔗 Series `}
             <Link
               href={`/series/${seriesId}`}
-              className="text-soma-blue-40 font-extrabold underline "
+              className="font-extrabold underline text-soma-blue-40 "
               prefetch={false}
             >
               {seriesTitle}
@@ -72,43 +86,12 @@ export default function MemoViewerHeader({
           iconSize={20}
         />
         {isMyMemo && (
-          <div className="flex ml-2">
-            <button onClick={() => setIsActive((pre) => !pre)}>
-              <Image src={more} alt="more" />
-            </button>
-            <nav
-              className={`absolute top-6 right-0 bg-white flex flex-col gap-1 rounded-lg shadow-inner ${
-                isActive ? 'visible' : 'invisible'
-              }`}
-            >
-              <button
-                className="hover:bg-gray-200 p-2 rounded-t-lg"
-                onClick={() => {
-                  setIsActive(false);
-                  router.push(`/create/memo/?id=${memoId}`);
-                  router.refresh();
-                }}
-              >
-                수정하기
-              </button>
-              <button
-                className="hover:bg-gray-200 p-2 rounded-b-lg"
-                onClick={() => {
-                  setIsActive(false);
-                  open(
-                    seriesId
-                      ? '시리즈에 속한 메모입니다. 메모를 삭제하시겠습니까?'
-                      : '메모를 삭제하시겠습니까?',
-                    () => {
-                      handleDelete();
-                    }
-                  );
-                }}
-              >
-                삭제하기
-              </button>
-            </nav>
-          </div>
+          <MoreOptions
+            isActive={isActive}
+            onClick={() => setIsActive((pre) => !pre)}
+            onUpdateBtnClick={handleUpdateBtnClick}
+            onDeleteBtnClick={handleDelete}
+          />
         )}
       </nav>
     </div>

diff --git a/src/components/question/AnswerCardHeader.tsx b/src/components/question/AnswerCardHeader.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link';
 import basicProfileImg from '@/assets/profile.svg';
 import { useContext, useRef } from 'react';
 import { useDetectOutsideClick } from '@/hooks/useDeleteOutsideClick';
-import more from '@/assets/icons/more.svg';
 import { useRouter } from 'next/navigation';
 import { deleteAnswer, selectAnswer } from '@/service/answers';
 import { ModalContext } from '@/context/ModalProvider';
@@ -12,6 +11,7 @@ import { notifyToast } from '@/service/notify';
 import RelativeDate from '../shared/RelativeDate';
 import { Rank } from '@/types/rank';
 import { getImageSrcFromRank } from '@/service/rank';
+import MoreOptions from '../shared/MoreOptions';
 
 type Props = {
   answerId: number;
@@ -51,15 +51,37 @@ export default function AnswerCardHeader({
   const router = useRouter();
   const { open } = useContext(ModalContext);
 
-  const handleDelete = () =>
-    deleteAnswer(answerId).then((res) => {
-      if ('code' in res) {
-        notifyToast(res.message, 'error');
-        return;
-      }
-      notifyToast(res.message, 'success');
-      router.refresh();
+  const handleDelete = () => {
+    setIsActive(false);
+    open('답변을 삭제하시겠습니까?', () => {
+      deleteAnswer(answerId).then((res) => {
+        if ('code' in res) {
+          notifyToast(res.message, 'error');
+          return;
+        }
+        notifyToast(res.message, 'success');
+        router.refresh();
+      });
     });
+  };
+
+  const handleUpdateBtnClick = () => {
+    onUpdateBtnClick();
+    setIsActive(false);
+  };
+
+  const handleSelect = () => {
+    open('이 답변을 채택하시겠습니까?', () => {
+      selectAnswer(questionId, answerId).then((res) => {
+        if ('code' in res) {
+          notifyToast(res.message, 'error');
+          return;
+        }
+        notifyToast(res.message, 'success');
+        router.refresh();
+      });
+    });
+  };
 
   return (
     <div className="flex justify-between">
@@ -71,7 +93,7 @@ export default function AnswerCardHeader({
               alt="profileImg"
               width={36}
               height={36}
-              className="rounded-full w-9 h-9 object-cover"
+              className="object-cover rounded-full w-9 h-9"
             />
           </Link>
           <Image
@@ -83,7 +105,7 @@ export default function AnswerCardHeader({
           />
         </div>
         <div className="ml-2">
-          <h4 className="text-soma-grey-60 font-medium text-xs sm:text-base">
+          <h4 className="text-xs font-medium text-soma-grey-60 sm:text-base">
             {authorName}
           </h4>
           <RelativeDate date={createdDate} type="YMDHM" />
@@ -94,54 +116,15 @@ export default function AnswerCardHeader({
       ) : (
         <nav className="relative flex items-center pl-10" ref={dropdownRef}>
           {isMyQuestion && !isSolved && (
-            <BlueBtn
-              text="채택하기"
-              onClick={() => {
-                open('이 답변을 채택하시겠습니까?', () => {
-                  selectAnswer(questionId, answerId).then((res) => {
-                    if ('code' in res) {
-                      notifyToast(res.message, 'error');
-                      return;
-                    }
-                    notifyToast(res.message, 'success');
-                    router.refresh();
-                  });
-                });
-              }}
-            />
+            <BlueBtn text="채택하기" onClick={handleSelect} />
           )}
           {isMyAnswer && !isSelected && (
-            <div className="flex ml-2">
-              <button onClick={() => setIsActive((pre) => !pre)}>
-                <Image src={more} alt="more" />
-              </button>
-              <nav
-                className={`absolute top-6 right-0 bg-white flex flex-col z-10 gap-1 rounded-lg shadow-inner ${
-                  isActive ? 'visible' : 'invisible'
-                }`}
-              >
-                <button
-                  className="hover:bg-gray-200 p-2 rounded-t-lg"
-                  onClick={() => {
-                    onUpdateBtnClick();
-                    setIsActive(false);
-                  }}
-                >
-                  수정하기
-                </button>
-                <button
-                  className="hover:bg-gray-200 p-2 rounded-b-lg"
-                  onClick={() => {
-                    setIsActive(false);
-                    open('답변을 삭제하시겠습니까?', () => {
-                      handleDelete();
-                    });
-                  }}
-                >
-                  삭제하기
-                </button>
-              </nav>
-            </div>
+            <MoreOptions
+              isActive={isActive}
+              onClick={() => setIsActive((pre) => !pre)}
+              onUpdateBtnClick={handleUpdateBtnClick}
+              onDeleteBtnClick={handleDelete}
+            />
           )}
         </nav>
       )}

diff --git a/src/components/question/QuestionHeader.tsx b/src/components/question/QuestionHeader.tsx
@@ -1,13 +1,12 @@
-import Image from 'next/image';
 import LikeBox from '../shared/LikeBox';
-import more from '@/assets/icons/more.svg';
 import { useContext, useRef } from 'react';
 import { useDetectOutsideClick } from '@/hooks/useDeleteOutsideClick';
 import { useRouter } from 'next/navigation';
 import { ModalContext } from '@/context/ModalProvider';
 import { deleteQuestion } from '@/service/questions';
 import { extractYMDHM } from '@/service/time';
 import { notifyToast } from '@/service/notify';
+import MoreOptions from '../shared/MoreOptions';
 type Props = {
   questionId: number;
   likeNum: number;
@@ -30,19 +29,31 @@ export default function QuestionHeader({
   const router = useRouter();
   const { open } = useContext(ModalContext);
 
-  const handleDelete = () =>
-    deleteQuestion(questionId).then((res) => {
-      if ('code' in res) {
-        notifyToast(res.message, 'error');
-        return;
-      }
-      notifyToast(res.message, 'success');
-      router.push('/questions');
-      router.refresh();
+  const handleDelete = () => {
+    setIsActive(false);
+    open('질문을 삭제하시겠습니까?', () => {
+      deleteQuestion(questionId).then((res) => {
+        if ('code' in res) {
+          notifyToast(res.message, 'error');
+          return;
+        }
+        notifyToast(res.message, 'success');
+        router.push('/questions');
+        router.refresh();
+      });
     });
+  };
+
+  const handleUpdateBtnClick = () => {
+    setIsActive(false);
+    router.push(
+      `/create/question/?id=${questionId}${memoId ? `&memoId=${memoId}` : ''}`
+    );
+    router.refresh();
+  };
 
   return (
-    <div className="flex justify-between items-center">
+    <div className="flex items-center justify-between">
       <div className="text-sm text-soma-grey-49">
         {extractYMDHM(createdDate)}
       </div>
@@ -56,42 +67,12 @@ export default function QuestionHeader({
           iconSize={20}
         />
         {isMyQuestion && (
-          <div className="flex ml-2">
-            <button onClick={() => setIsActive((pre) => !pre)}>
-              <Image src={more} alt="more" />
-            </button>
-            <nav
-              className={`absolute top-6 right-0 bg-white flex flex-col gap-1 rounded-lg shadow-inner ${
-                isActive ? 'visible' : 'invisible'
-              }`}
-            >
-              <button
-                className="hover:bg-gray-200 p-2 rounded-t-lg"
-                onClick={() => {
-                  setIsActive(false);
-                  router.push(
-                    `/create/question/?id=${questionId}${
-                      memoId ? `&memoId=${memoId}` : ''
-                    }`
-                  );
-                  router.refresh();
-                }}
-              >
-                수정하기
-              </button>
-              <button
-                className="hover:bg-gray-200 p-2 rounded-b-lg"
-                onClick={() => {
-                  setIsActive(false);
-                  open('질문을 삭제하시겠습니까?', () => {
-                    handleDelete();
-                  });
-                }}
-              >
-                삭제하기
-              </button>
-            </nav>
-          </div>
+          <MoreOptions
+            isActive={isActive}
+            onClick={() => setIsActive((pre) => !pre)}
+            onUpdateBtnClick={handleUpdateBtnClick}
+            onDeleteBtnClick={handleDelete}
+          />
         )}
       </nav>
     </div>