Merge pull request #219 from COW-dev/refactor/#218

동아리 피드 삭제, presignedUrl encode
COW-dev · Jan 21, 2025 · e86003f · e86003f
2 parents b736dd8 + 9038e07
commit e86003f
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 29 deletions.
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
@@ -31,8 +31,8 @@ export default function Modal({
         }`}
       >
         <div
-          className={`z-60 relative m-5  w-full overflow-y-scroll rounded-lg bg-white shadow md:overflow-y-auto ${
-            feed ? 'max-w-3xl md:h-[70%]' : 'max-h-[80%] max-w-lg '
+          className={`z-60 relative m-5 w-full overflow-y-scroll rounded-lg bg-white shadow md:overflow-y-auto ${
+            feed ? 'max-w-3xl' : 'max-h-[80%] max-w-lg '
           }`}
           ref={modalRef}
         >

diff --git a/src/components/common/Slider.tsx b/src/components/common/Slider.tsx
@@ -10,6 +10,7 @@ import Banner from './Banner';
 
 export default function Index() {
   const { data: bannerData } = useAllBanners();
+
   const option = {
     loop: true,
   };
@@ -27,8 +28,12 @@ export default function Index() {
           </div>
         ))}
       </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
+      {bannerData && bannerData?.data?.length > 1 && (
+        <>
+          <CarouselPrevious />
+          <CarouselNext />
+        </>
+      )}
     </Carousel>
   );
 }
diff --git a/src/components/feed/ClubFeed.tsx b/src/components/feed/ClubFeed.tsx
@@ -57,8 +57,8 @@ export default function ClubFeed({
 
   return (
     <div
-      className={`grid gap-0.5 ${
-        viewMode === 'ADMIN' ? 'grid-cols-4' : 'grid-cols-3'
+      className={`grid grid-cols-3 gap-0.5 ${
+        viewMode === 'ADMIN' && 'md:grid-cols-4'
       }`}
     >
       {feeds?.map((item, index) => (
@@ -86,6 +86,7 @@ export default function ClubFeed({
             alt={`image-${index + 1}`}
             priority={index < 10}
             style={{ objectFit: 'cover' }}
+            className="aspect-square"
             onLoad={() => handleImageLoad(item.id)}
           />
           {item.feedType == 'VIDEO' && (

diff --git a/src/components/layout/AdminHeader.tsx b/src/components/layout/AdminHeader.tsx
@@ -3,14 +3,23 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { removeToken } from '@/apis';
 import { useAuthStore } from '@/store/auth';
+import { useClubStore } from '@/store/club';
 import NewYear from '../common/NewYear';
 
 export default function AdminHeader() {
   const router = useRouter();
   const { resetAuth } = useAuthStore();
+  const { resetClub } = useClubStore();
   const curPath = router.pathname;
   const isLoginPage = curPath.endsWith('login');
 
+  const handleLogout = () => {
+    removeToken();
+    resetAuth();
+    resetClub();
+    router.push('/login');
+  };
+
   return (
     <header className="fixed z-40 flex h-16 w-full items-center justify-center border-b bg-white md:h-18">
       <div className="flex w-full max-w-6xl items-center justify-between px-6 md:px-16">
@@ -35,11 +44,7 @@ export default function AdminHeader() {
                   <NewYear />
                   <button
                     className="rounded-xl p-3 font-semibold text-gray-500 hover:text-blue-500"
-                    onClick={() => {
-                      removeToken();
-                      resetAuth();
-                      router.push('/login');
-                    }}
+                    onClick={handleLogout}
                   >
                     로그아웃
                   </button>

diff --git a/src/components/modal/feed/ClubFeedDetail.tsx b/src/components/modal/feed/ClubFeedDetail.tsx
@@ -37,7 +37,7 @@ export default function ClubFeedDetail({ feedId }: Props) {
       <div className="flex h-full w-full flex-col ">
         <div
           className={`${
-            feed?.feedType === 'VIDEO' ? 'h-full ' : 'h-[225px]'
+            feed?.feedType === 'VIDEO' ? 'h-full ' : 'h-64'
           } relative  w-full rounded-t-lg bg-black md:h-[450px]`}
         >
           {feed?.feedType === 'VIDEO' ? (
@@ -56,7 +56,7 @@ export default function ClubFeedDetail({ feedId }: Props) {
             </>
           )}
         </div>
-        <div className="mx-5 flex h-[17vh] flex-col items-start justify-center md:ml-10 ">
+        <div className="mx-5 my-1 flex h-36 flex-col items-start justify-center md:my-3 md:ml-10 ">
           <div className="flex w-full items-center justify-between">
             <Link
               href={location ? `/club/${feed?.clubProfile.id}` : '#'}

diff --git a/src/hooks/common/usePresignedUrl.tsx b/src/hooks/common/usePresignedUrl.tsx
@@ -9,7 +9,10 @@ export function usePresignedUrl() {
   const [{ token }] = useCookies(['token']);
 
   const uploadFile = useMutation(async (file: File): Promise<UploadFile> => {
-    const { data } = await getPresignedUrl(file.name, token);
+    const { data } = await getPresignedUrl(
+      encodeURIComponent(file.name),
+      token,
+    );
     const { id, contentType, uploadUrl } = data;
 
     await uploadPresignedUrl(file, uploadUrl, contentType);

diff --git a/src/pages/admin/feed/index.tsx b/src/pages/admin/feed/index.tsx
@@ -70,7 +70,13 @@ export default function Index() {
   }
 
   if (!club) {
-    return <div>동아리 정보가 존재하지 않아요.</div>;
+    return (
+      <div className="flex h-96 items-center justify-center">
+        <div className="text-base font-medium text-gray-500">
+          동아리 정보가 존재하지 않아요.
+        </div>
+      </div>
+    );
   }
 
   return (
@@ -96,9 +102,12 @@ export default function Index() {
               </button>
               <button
                 onClick={openModal}
-                className="rounded-xl bg-red-50 px-4 py-3 text-lg font-bold text-red-400 hover:bg-red-100"
+                disabled={!selectedFeed}
+                className={`${
+                  !selectedFeed && ' disabled:cursor-not-allowed'
+                } rounded-xl bg-red-50 px-4 py-3 text-lg font-bold text-red-400 hover:bg-red-100`}
               >
-                삭제 하기
+                삭제하기
               </button>
             </>
           ) : (
@@ -120,14 +129,24 @@ export default function Index() {
         </div>
       </div>
       <div className="mt-10 w-full">
-        <ClubFeed
-          feeds={feeds}
-          viewMode="ADMIN"
-          editMode={editMode}
-          selectedFeedId={selectedFeed}
-          onFeedSelect={handleRadioChange}
-        />
-        <div ref={observerTarget} className="h-5 w-full bg-transparent" />
+        {feeds.length === 0 ? (
+          <div className="flex h-96 items-center justify-center">
+            <div className="text-base font-medium text-gray-500">
+              등록된 게시물이 없습니다.
+            </div>
+          </div>
+        ) : (
+          <>
+            <ClubFeed
+              feeds={feeds}
+              viewMode="ADMIN"
+              editMode={editMode}
+              selectedFeedId={selectedFeed}
+              onFeedSelect={handleRadioChange}
+            />
+            <div ref={observerTarget} className="h-5 w-full bg-transparent" />
+          </>
+        )}
       </div>
       <Modal
         visible={visible}

diff --git a/src/store/club.ts b/src/store/club.ts
@@ -1,13 +1,27 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 import { ClubDetail } from '@/types/club';
 
 type ClubStore = {
   club: ClubDetail | null;
   setClub: (club: ClubDetail) => void;
+  resetClub: () => void;
 };
 
-export const useClubStore = create<ClubStore>((set) => ({
-  club: null as ClubDetail | null,
-  setClub: (club) => set({ club }),
-}));
+export const useClubStore = create(
+  persist<ClubStore>(
+    (set) => ({
+      club: null,
+      setClub: (club) => set({ club }),
+      resetClub: () => {
+        set({
+          club: null,
+        });
+      },
+    }),
+    {
+      name: 'club',
+    },
+  ),
+);
diff --git a/src/utils/subscribeToSSE.tsx b/src/utils/subscribeToSSE.tsx
@@ -13,6 +13,7 @@ export function subscribeToSSE(token: string, mediaId: string) {
         Authorization: 'Bearer ' + token,
       },
       withCredentials: true,
+      heartbeatTimeout: 60000,
     },
   );
   const toastId = toast.loading('비디오를 업로드가 시작되었습니다.');
@@ -43,4 +44,13 @@ export function subscribeToSSE(token: string, mediaId: string) {
       eventSource.close();
     }
   });
+  eventSource.onerror = (error) => {
+    console.error('SSE Error:', error);
+    toast.error('비디오 업로드 중 문제가 발생했습니다.', {
+      id: toastId,
+      duration: 5000,
+    });
+    removeVideoUpload(mediaId);
+    eventSource.close();
+  };
 }