Merge pull request #155 from TTORANG/develop

deploy: 2.1.0 배포

Author: AndyH0ng

firebase.json

@@ -32,7 +32,7 @@
         "headers": [
           {
             "key": "Content-Security-Policy",
-            "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: https:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://ttorang-server-407623424780.asia-northeast3.run.app https://cdn.ttorang.com https://developers.kakao.com; media-src 'self' https://cdn.ttorang.com; frame-ancestors 'none'"
+            "value": "default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: https:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://ttorang-server-407623424780.asia-northeast3.run.app https://cdn.ttorang.com https://developers.kakao.com https://cdn.jsdelivr.net; media-src 'self' https://cdn.ttorang.com; frame-ancestors 'none'"
           },
           {
             "key": "X-Frame-Options",

src/App.tsx

@@ -1,7 +1,10 @@
 import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
+import { useQueryClient } from '@tanstack/react-query';
+
 import type { JwtPayloadDto } from '@/api/dto';
+import { queryKeys } from '@/api/queryClient';
 import { DevFab } from '@/components/common/DevFab';
 import { router } from '@/router';
 import { useAuthStore } from '@/stores/authStore';
@@ -10,6 +13,8 @@ import { parseJwtPayload } from '@/utils/jwt';
 
 function App() {
   useThemeListener();
+  const queryClient = useQueryClient();
+  const accessToken = useAuthStore((state) => state.accessToken);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -41,6 +46,11 @@ function App() {
     return () => window.removeEventListener('message', handleMessage);
   }, []);
 
+  useEffect(() => {
+    if (!accessToken) return;
+    void queryClient.invalidateQueries({ queryKey: queryKeys.presentations.lists() });
+  }, [accessToken, queryClient]);
+
   return (
     <>
       <RouterProvider router={router} />

src/api/errorHandler.ts

@@ -8,7 +8,9 @@ type ErrorHandler = (message: string) => void;
  */
 const errorHandlers: Record<number, ErrorHandler> = {
   401: () => {
-    // 세션 만료 시 로그아웃 처리
+    const { accessToken } = useAuthStore.getState();
+    // 로그인 상태일 때만 만료 처리 (비로그인 상태에서는 토스트 금지)
+    if (!accessToken) return;
     useAuthStore.getState().logout();
     showToast.error('로그인이 만료되었습니다.', '다시 로그인해주세요.');
   },

src/assets/icons/icon-logout.svg

@@ -61,7 +61,7 @@ export default function FileDropzone({
     if (inputRef.current) inputRef.current.value = ''; // 같은 파일 다시 선택 가능하게 (선택창 value 초기화)
   };
 
-  const handleDragEnter = (e: React.DragEvent<HTMLButtonElement>) => {
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     if (isBlocked) return;
@@ -70,13 +70,13 @@ export default function FileDropzone({
     setIsDragging(true);
   };
 
-  const handleDragOver = (e: React.DragEvent<HTMLButtonElement>) => {
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     if (isBlocked) return;
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLButtonElement>) => {
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     if (isBlocked) return;
@@ -85,7 +85,7 @@ export default function FileDropzone({
     if (dragCounter.current === 0) setIsDragging(false);
   };
 
-  const handleDrop = (e: React.DragEvent<HTMLButtonElement>) => {
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     // 드롭 시 카운터 초기화해서 다음 드래그 상태가 꼬이지 않도록 함
@@ -115,6 +115,14 @@ export default function FileDropzone({
   const showDragOverlay = isDragging && !isBlocked;
   const showUploadOverlay = isUploading;
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (isBlocked) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openFileDialog();
+    }
+  };
+
   return (
     <div className="w-full mt-10">
       <input
@@ -125,9 +133,12 @@ export default function FileDropzone({
         onChange={(e) => handleFile(e.target.files)}
       />
 
-      <button
-        type="button"
+      <div
+        role="button"
+        tabIndex={isBlocked ? -1 : 0}
+        aria-disabled={isBlocked}
         onClick={openFileDialog}
+        onKeyDown={handleKeyDown}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -187,7 +198,7 @@ export default function FileDropzone({
             </button>
           </div>
         )}
-      </button>
+      </div>
     </div>
   );
 }

src/components/common/FileDropzone.tsx

@@ -1,16 +1,124 @@
 /**
  * @file LoginButton.tsx
- * @description 로그인 버튼 컴포넌트
+ * @description 로그인/프로필 버튼 컴포넌트
  *
- * 헤더 우측에 표시되는 로그인 링크입니다.
+ * 비로그인 상태: 로그인 버튼 (클릭 시 로그인 모달)
+ * 로그인 상태: 사용자 이름 + 프로필 이미지 (클릭 시 로그아웃/회원탈퇴 드롭다운)
  */
+import { useState } from 'react';
+
+import { apiClient } from '@/api/client';
 import LoginIcon from '@/assets/icons/icon-login.svg?react';
+import LogoutIcon from '@/assets/icons/icon-logout.svg?react';
+import { Dropdown } from '@/components/common/Dropdown';
+import { Modal } from '@/components/common/Modal';
 import { useAuthStore } from '@/stores/authStore';
+import { showToast } from '@/utils/toast';
 
 import { HeaderButton } from './HeaderButton';
 
 export function LoginButton() {
+  const user = useAuthStore((s) => s.user);
   const openLoginModal = useAuthStore((s) => s.openLoginModal);
+  const logout = useAuthStore((s) => s.logout);
+
+  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+  const [isWithdrawing, setIsWithdrawing] = useState(false);
+
+  if (!user) {
+    return <HeaderButton text="로그인" icon={<LoginIcon />} onClick={openLoginModal} />;
+  }
+
+  const handleWithdraw = async () => {
+    setIsWithdrawing(true);
+    try {
+      await apiClient.delete(`/users/${user.id}`);
+      logout();
+      setIsWithdrawModalOpen(false);
+      showToast.success('회원 탈퇴가 완료되었습니다.');
+    } catch {
+      showToast.error('회원 탈퇴에 실패했습니다.', '잠시 후 다시 시도해주세요.');
+    } finally {
+      setIsWithdrawing(false);
+    }
+  };
+
+  return (
+    <>
+      <Dropdown
+        position="bottom"
+        align="end"
+        ariaLabel="사용자 메뉴"
+        trigger={
+          <button
+            type="button"
+            className="flex cursor-pointer items-center gap-2 text-body-s-bold text-gray-800 transition-colors hover:text-gray-600"
+          >
+            {user.name ?? '사용자'}
+            {user.profileImage ? (
+              <img
+                src={user.profileImage}
+                alt="프로필"
+                className="size-6 rounded-full object-cover"
+              />
+            ) : (
+              <div className="size-6 rounded-full bg-gray-200" />
+            )}
+          </button>
+        }
+        items={[
+          {
+            id: 'logout',
+            label: (
+              <span className="flex items-center gap-1">
+                로그아웃
+                <LogoutIcon className="size-6" />
+              </span>
+            ),
+            onClick: logout,
+            variant: 'danger',
+          },
+          {
+            id: 'withdraw',
+            label: '회원 탈퇴',
+            onClick: () => setIsWithdrawModalOpen(true),
+            variant: 'danger',
+          },
+        ]}
+      />
 
-  return <HeaderButton text="로그인" icon={<LoginIcon />} onClick={openLoginModal} />;
+      <Modal
+        isOpen={isWithdrawModalOpen}
+        onClose={() => setIsWithdrawModalOpen(false)}
+        title="회원 탈퇴"
+        size="sm"
+        closeOnBackdropClick={!isWithdrawing}
+        closeOnEscape={!isWithdrawing}
+      >
+        <p className="text-body-m">
+          탈퇴하면 모든 데이터가 삭제되며 복구할 수 없습니다.
+          <br />
+          정말 탈퇴하시겠습니까?
+        </p>
+        <div className="mt-7 flex gap-3">
+          <button
+            className="flex-1 rounded-md bg-gray-100 py-3 font-bold text-gray-600 transition-colors hover:bg-gray-200 disabled:opacity-50"
+            type="button"
+            onClick={() => setIsWithdrawModalOpen(false)}
+            disabled={isWithdrawing}
+          >
+            취소
+          </button>
+          <button
+            className="flex-1 rounded-md bg-error py-3 font-bold text-white transition-colors hover:bg-error/90 disabled:opacity-50"
+            type="button"
+            onClick={handleWithdraw}
+            disabled={isWithdrawing}
+          >
+            {isWithdrawing ? '탈퇴 중...' : '탈퇴'}
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
 }

src/components/common/layout/LoginButton.tsx

@@ -27,10 +27,14 @@ export function usePresentations(options?: { enabled?: boolean }) {
 /**
  * 프로젝트 목록 조회 (필터/검색/정렬 지원)
  */
-export function usePresentationsWithFilters(params: GetPresentationsRequestDto) {
+export function usePresentationsWithFilters(
+  params: GetPresentationsRequestDto,
+  options?: { enabled?: boolean },
+) {
   return useQuery({
     queryKey: queryKeys.presentations.list(params),
     queryFn: () => getPresentations(params),
+    enabled: options?.enabled ?? true,
   });
 }
 
@@ -67,6 +71,26 @@ export function useUpdatePresentation() {
             ? { ...old, title: updatePresentation.title, updatedAt: updatePresentation.updatedAt }
             : old,
       );
+      // 목록 캐시는 즉시 업데이트 (화면 전환 시 반영 지연 방지)
+      queryClient.setQueriesData<PresentationListResponse>(
+        { queryKey: queryKeys.presentations.lists() },
+        (oldData) => {
+          if (!oldData) return oldData;
+          const nextPresentations = oldData.presentations.map((item) =>
+            item.projectId === updatePresentation.projectId
+              ? {
+                  ...item,
+                  title: updatePresentation.title,
+                  updatedAt: updatePresentation.updatedAt,
+                }
+              : item,
+          );
+          return {
+            ...oldData,
+            presentations: nextPresentations,
+          };
+        },
+      );
       // 목록은 최신 데이터 반영을 위해 무효화
       void queryClient.invalidateQueries({ queryKey: queryKeys.presentations.lists() });
     },

src/hooks/queries/usePresentations.ts

@@ -2,6 +2,7 @@
  * 슬라이드 관련 TanStack Query 훅
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
 
 import type { UpdateSlideTitleRequestDto } from '@/api/dto';
 import { getSlides, updateSlide } from '@/api/endpoints/slides';
@@ -17,9 +18,16 @@ export function useSlides(projectId: string) {
     queryKey: queryKeys.slides.list(projectId),
     queryFn: () => getSlides(projectId),
     enabled: !!projectId,
+    retry: false,
     // 🔄 서버가 웹소켓 브로드캐스트를 안하므로 임시로 폴링 추가
     // TODO: 서버에서 broadcastNewComment 호출 후 제거
-    refetchInterval: 3000, // 3초마다 자동 갱신
+    refetchInterval: (query) => {
+      const error = query.state.error;
+      if (isAxiosError(error) && error.response?.status === 401) {
+        return false;
+      }
+      return 3000;
+    }, // 3초마다 자동 갱신 (401이면 중단)
     refetchIntervalInBackground: false, // 탭이 백그라운드일 때는 멈춤
   });
 }

src/hooks/queries/useSlides.ts

@@ -36,7 +36,7 @@ export function useAutoSaveScript() {
       try {
         await mutateAsync({ slideId, data: { script } });
         lastSavedRef.current = script;
-        showToast.success('저장 완료');
+        showToast.success('저장 완료', '대본이 자동으로 저장되었습니다.');
       } catch {
         showToast.error('저장 실패', '다시 시도해주세요.');
       }