feat: use cheer modal 훅 생성 및 적용

depromeet · Aug 29, 2024 · 09d88bd · 09d88bd
1 parent d9f0256
commit 09d88bd
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 63 deletions.
diff --git a/...cord-detail/components/cheer-progress.tsx → ...onents/molecules/cheer/cheer-progress.tsx b/...cord-detail/components/cheer-progress.tsx → ...onents/molecules/cheer/cheer-progress.tsx
@@ -2,11 +2,10 @@
 
 import { useEffect, useState } from 'react';
 
+import { DetailCheerItem } from '@/features/record-detail';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-import { DetailCheerItem } from '../types';
-
 type CheerProgress = {
   isOpen: boolean;
   onChangeOpen: (isOpen: boolean) => void;

diff --git a/components/molecules/cheer/index.ts b/components/molecules/cheer/index.ts
@@ -1,2 +1,3 @@
 export * from './cheer-bottom-sheet';
 export * from './cheer-item';
+export * from './cheer-progress';
diff --git a/features/record-detail/components/index.ts b/features/record-detail/components/index.ts
@@ -1,5 +1,4 @@
 export * from './cheer-modal';
-export * from './cheer-progress';
 export * from './date-picker';
 export * from './edit-button';
 export * from './swim-description-item';

diff --git a/features/record-detail/sections/detail-cheer-fab.tsx b/features/record-detail/sections/detail-cheer-fab.tsx
@@ -1,34 +1,30 @@
 'use client';
 
-import { useState } from 'react';
-
-import { CheerBottomSheet } from '@/components/molecules';
-import { useBottomSheet, useToast } from '@/hooks';
+import { CheerBottomSheet, CheerProgress } from '@/components/molecules';
+import { useCheerBottomSheet, useToast } from '@/hooks';
 import { css } from '@/styled-system/css';
 
-import { useCheer, useCheerEligibility, useCheerPreviewList } from '../apis';
-import { CheerProgress } from '../components';
-import { initialCheerList } from '../data';
-import { DetailCheerItemSelected, RecordDetailType } from '../types';
+import { useCheerEligibility, useCheerPreviewList } from '../apis';
+import { RecordDetailType } from '../types';
 
 export const DetailCheerFabSection = ({ data }: { data: RecordDetailType }) => {
-  const { mutate: mutateCheer } = useCheer();
+  const { toast } = useToast();
+
   const { refetch: refetchCheer } = useCheerPreviewList(data.id);
   const { data: eligibilityData } = useCheerEligibility(
     data.id,
     data.isMyMemory,
   );
-
-  const [cheerList, setCheerList] = useState(initialCheerList);
-  const [selectedCheerItem, setSelectedCheerItem] =
-    useState<DetailCheerItemSelected>();
-
-  const { toast } = useToast();
   const {
-    isOpen: isOpenBottomSheet,
-    open: openBottomSheet,
-    close: closeBottomSheet,
-  } = useBottomSheet();
+    cheerList,
+    selectedCheerItem,
+    handleClickCheerItem,
+    handleClickSendCheer,
+    handleChangeSelectedItem,
+    isOpenBottomSheet,
+    closeBottomSheet,
+    openBottomSheet,
+  } = useCheerBottomSheet({ memoryId: data.id, onRefetch: refetchCheer });
 
   const handleClickFab = () => {
     if (!eligibilityData?.isRegistrable) {
@@ -38,47 +34,6 @@ export const DetailCheerFabSection = ({ data }: { data: RecordDetailType }) => {
 
     openBottomSheet();
   };
-
-  const handleClickCheerItem = (index: number) => {
-    setCheerList((prev) =>
-      prev.map((item, idx) =>
-        idx === index
-          ? { ...item, isSelected: !item.isSelected }
-          : { ...item, isSelected: false },
-      ),
-    );
-  };
-
-  const handleClickSendCheer = () => {
-    const selectedCheerItem = cheerList.find(({ isSelected }) => isSelected);
-    if (!selectedCheerItem) return;
-
-    mutateCheer(
-      {
-        emoji: selectedCheerItem.emoji,
-        comment: selectedCheerItem.comment,
-        memoryId: data.id,
-      },
-      {
-        onSuccess: ({ status, code, message }) => {
-          if (status === 400 || code === 'REACTION_4') {
-            alert(message);
-            return;
-          }
-
-          void refetchCheer();
-          setSelectedCheerItem(selectedCheerItem);
-          closeBottomSheet();
-        },
-      },
-    );
-  };
-
-  const handleChangeSelectedItem = (isOpen: boolean) => {
-    if (isOpen) return;
-    setSelectedCheerItem(undefined);
-  };
-
   const { isMyMemory } = data;
 
   return (

diff --git a/hooks/index.ts b/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './apis';
 export * from './use-bottom-sheet';
+export * from './use-cheer-bottom-sheet';
 export * from './use-dialog';
 export * from './use-drag-scroll';
 export * from './use-intersection-observer';

diff --git a/hooks/use-cheer-bottom-sheet.ts b/hooks/use-cheer-bottom-sheet.ts
@@ -0,0 +1,116 @@
+'use client';
+
+import { RefetchOptions } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { DetailCheerItemSelected } from '@/features/record-detail';
+import { useCheer } from '@/features/record-detail/apis';
+
+import { useBottomSheet } from './use-bottom-sheet';
+
+const initialCheerList = [
+  {
+    emoji: '🔥',
+    comment: '오늘도 힘내요!',
+    isSelected: false,
+  },
+  {
+    emoji: '🦭',
+    comment: '물개세요?',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊',
+    isSelected: false,
+  },
+  {
+    emoji: '👏',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊‍♂️',
+    comment: '진정한 수영인으로 인정합니다',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊‍♂️',
+    comment: '다음에 같이 수영해요',
+    isSelected: false,
+  },
+  {
+    emoji: '😲',
+    comment: '대단해요!',
+    isSelected: false,
+  },
+];
+
+type UseCheerBottomSheet = {
+  memoryId: number;
+  onRefetch: (options?: RefetchOptions) => Promise<unknown>;
+};
+export const useCheerBottomSheet = ({
+  memoryId,
+  onRefetch,
+}: UseCheerBottomSheet) => {
+  const { mutate: mutateCheer } = useCheer();
+  const [cheerList, setCheerList] = useState(initialCheerList);
+  const [selectedCheerItem, setSelectedCheerItem] =
+    useState<DetailCheerItemSelected>();
+
+  const {
+    isOpen: isOpenBottomSheet,
+    open: openBottomSheet,
+    close: closeBottomSheet,
+  } = useBottomSheet();
+
+  const handleClickCheerItem = (index: number) => {
+    setCheerList((prev) =>
+      prev.map((item, idx) =>
+        idx === index
+          ? { ...item, isSelected: !item.isSelected }
+          : { ...item, isSelected: false },
+      ),
+    );
+  };
+
+  const handleClickSendCheer = () => {
+    const selectedCheerItem = cheerList.find(({ isSelected }) => isSelected);
+    if (!selectedCheerItem) return;
+
+    mutateCheer(
+      {
+        emoji: selectedCheerItem.emoji,
+        comment: selectedCheerItem.comment,
+        memoryId,
+      },
+      {
+        onSuccess: ({ status, code, message }) => {
+          if (status === 400 || code === 'REACTION_4') {
+            alert(message);
+            return;
+          }
+
+          setSelectedCheerItem(selectedCheerItem);
+          closeBottomSheet();
+          void onRefetch?.();
+        },
+      },
+    );
+  };
+
+  const handleChangeSelectedItem = (isOpen: boolean) => {
+    if (isOpen) return;
+    setSelectedCheerItem(undefined);
+  };
+
+  return {
+    cheerList,
+    selectedCheerItem,
+    handleClickCheerItem,
+    handleClickSendCheer,
+    handleChangeSelectedItem,
+    isOpenBottomSheet,
+    openBottomSheet,
+    closeBottomSheet,
+  };
+};