Merge pull request #224 from COW-dev/fix/#223

동아리 피드 SSE, 피드 생성 로직 수정
COW-dev · Jan 27, 2025 · 3930637 · 3930637
2 parents 0989088 + 11d7998
commit 3930637
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git a/src/components/admin/AdminHeading.tsx b/src/components/admin/AdminHeading.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useCookies } from 'react-cookie';
 import { useMyClub } from '@/hooks/api/club/useMyClub';
 import { useClubStore } from '@/store/club';
@@ -7,9 +8,11 @@ export default function AdminHeading() {
   const { data } = useMyClub(token);
   const setClub = useClubStore((state) => state.setClub);
 
-  if (data) {
-    setClub(data.data);
-  }
+  useEffect(() => {
+    if (data?.data) {
+      setClub(data.data);
+    }
+  }, [data, setClub]);
 
   return (
     <div className="flex w-full items-end justify-between">

diff --git a/src/components/common/UploadMedia.tsx b/src/components/common/UploadMedia.tsx
@@ -71,7 +71,7 @@ export default function UploadMedia({ onAdd, isLoading }: Props) {
             <Image src={Camera} width={30} height={30} alt="upload" />
             <p className="m-2 text-sm">Click to ImageUpload</p>
             <p className=" text-xs text-gray-400">
-              * 파일 용량은 최대 500MB / 4분까지 업로드 가능합니다.
+              * 파일 용량은 최대 300MB까지 업로드 가능합니다.
             </p>
           </div>
           <input

diff --git a/src/hooks/api/feed/useNewFeed.ts b/src/hooks/api/feed/useNewFeed.ts
@@ -22,8 +22,8 @@ export function useNewFeed(): UseMutationResult<
       queryClient.invalidateQueries(['feed']);
       if (!variables.mimeType?.includes('video')) {
         toast.success('피드가 생성되었어요.');
+        router.push('/');
       }
-      router.push('/');
     },
     onError(error) {
       const errorMessage = error.response?.data?.message

diff --git a/src/pages/admin/feed/new/index.tsx b/src/pages/admin/feed/new/index.tsx
@@ -49,14 +49,10 @@ export default function Index() {
 
   function handleSubmit() {
     if (feedData.mimeType?.includes('video')) {
-      mutation.mutate(
-        { ...feedData, token },
-        {
-          onSuccess: () => {
-            subscribeToSSE(token, feedData.mediaId);
-          },
-        },
+      subscribeToSSE(token, feedData.mediaId, () =>
+        mutation.mutate({ ...feedData, token }),
       );
+      router.push('/');
       return;
     }
     mutation.mutate({ ...feedData, token });

diff --git a/src/utils/subscribeToSSE.tsx b/src/utils/subscribeToSSE.tsx
@@ -2,7 +2,11 @@ import { EventSourcePolyfill, NativeEventSource } from 'event-source-polyfill';
 import toast from 'react-hot-toast';
 import { useUploadStore } from '@/store/upload';
 
-export function subscribeToSSE(token: string, mediaId: string) {
+export function subscribeToSSE(
+  token: string,
+  mediaId: string,
+  createFeed: () => void,
+) {
   const { setVideoUploading, removeVideoUpload } = useUploadStore.getState();
   const EventSource = EventSourcePolyfill || NativeEventSource;
 
@@ -23,14 +27,15 @@ export function subscribeToSSE(token: string, mediaId: string) {
   eventSource.addEventListener('connect', (event) => {
     if ((event as MessageEvent).data === 'Connected successfully!') {
       toast.loading('비디오 업로드 중입니다.', { id: toastId });
+      createFeed();
     }
   });
 
   eventSource.addEventListener('sse', (event) => {
     const messageEvent = event as MessageEvent;
     const parsedData = JSON.parse(messageEvent.data);
     if (parsedData.data.convertJobStatus === 'COMPLETE') {
-      toast.success('비디오 업로드가 완료되었습니다!', { id: toastId });
+      toast.success('피드가 생성되었어요.', { id: toastId });
       removeVideoUpload(mediaId);
       eventSource.close();
     }