[feat/native] 스크랩 페이지 구현 초기 PR #148

.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep:*)",
+      "Bash(tree:*)",
+      "Bash(find:*)",
+      "Bash(git mv:*)",
+      "Bash(wc:*)",
+      "Bash(npx tsc:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
+    ]
+  }
+}

apps/native/App.tsx

@@ -11,6 +11,8 @@ import '@/app/providers/api';
 import { LoadingScreen } from '@components/common';
 import { useLoadAssets } from '@hooks';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Toast from 'react-native-toast-message';
+import { toastConfig } from '@/features/student/scrap/components/Notification/Toast';
 
 const queryClient = new QueryClient();
 
@@ -46,6 +48,7 @@ export default function App() {
           <NavigationContainer theme={navigationTheme} linking={linking}>
             <StatusBar style='dark' />
             <RootNavigator />
+            <Toast config={toastConfig} style={{ zIndex: 9999 }} />
           </NavigationContainer>
         </SafeAreaProvider>
       </GestureHandlerRootView>

apps/native/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

apps/native/package.json

@@ -14,21 +14,25 @@
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "^5.2.7",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
     "@react-navigation/native-stack": "^7.8.0",
     "@react-navigation/stack": "^7.1.1",
+    "@shopify/react-native-skia": "2.2.12",
     "@tanstack/react-query": "^5.66.0",
     "dotenv": "^17.2.3",
     "expo": "~54.0.25",
     "expo-asset": "^12.0.10",
+    "expo-blur": "^15.0.8",
     "expo-constants": "~18.0.10",
     "expo-file-system": "^19.0.19",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
     "expo-image": "~3.0.10",
+    "expo-image-picker": "^17.0.10",
     "expo-linking": "~8.0.9",
     "expo-modules-core": "^3.0.26",
     "expo-router": "~6.0.15",
@@ -46,11 +50,16 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-css-interop": "^0.2.1",
+    "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-popover-view": "^6.1.0",
     "react-native-reanimated": "~4.1.5",
     "react-native-safe-area-context": "~5.4.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "^15.15.0",
+    "react-native-toast-message": "^2.3.3",
+    "react-native-tooltips": "^1.0.3",
     "react-native-web": "~0.21.0",
     "react-native-webview": "^13.16.0",
     "react-native-worklets": "0.5.1",

apps/native/src/apis/controller/common/index.ts

@@ -0,0 +1,2 @@
+export * from './postGetPreSignedUrl';
+

apps/native/src/apis/controller/common/postGetPreSignedUrl.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+
+type GetPreSignedUrlRequest =
+  paths['/api/common/upload-file']['post']['requestBody']['content']['application/json'];
+type GetPreSignedUrlResponse =
+  paths['/api/common/upload-file']['post']['responses']['200']['content']['*/*'];
+
+/**
+ * 파일 업로드를 위한 Pre-signed URL 요청
+ * @description AWS S3 업로드를 위한 pre-signed URL을 받아옵니다.
+ */
+export const useGetPreSignedUrl = () => {
+  return useMutation({
+    mutationFn: async (request: GetPreSignedUrlRequest): Promise<GetPreSignedUrlResponse> => {
+      const { data } = await client.POST('/api/common/upload-file', {
+        body: request,
+      });
+      return data as GetPreSignedUrlResponse;
+    },
+  });
+};

apps/native/src/apis/controller/qna/index.ts

@@ -0,0 +1,2 @@
+export * from './useGetQnaImages';
+export * from './useGetQnaAllImages';

apps/native/src/apis/controller/qna/useGetQnaAllImages.ts

@@ -0,0 +1,8 @@
+import { TanstackQueryClient } from '@apis';
+
+/**
+ * Q&A 내가 참여한 모든 이미지 조회 (최신순)
+ */
+export const useGetQnaAllImages = () => {
+  return TanstackQueryClient.useQuery('get', '/api/student/qna/images');
+};

apps/native/src/apis/controller/qna/useGetQnaImages.ts

@@ -0,0 +1,21 @@
+import { TanstackQueryClient } from '@apis';
+
+/**
+ * Q&A 전체 이미지 조회 (질문 + 채팅)
+ * @param qnaId - Q&A ID
+ * @param enabled - 쿼리 활성화 여부
+ */
+export const useGetQnaImages = (qnaId: number, enabled = true) => {
+  return TanstackQueryClient.useQuery(
+    'get',
+    '/api/student/qna/{qnaId}/images',
+    {
+      params: {
+        path: { qnaId },
+      },
+    },
+    {
+      enabled,
+    }
+  );
+};

apps/native/src/apis/controller/scrap/deleteEmptyTrash.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+
+export const useEmptyTrash = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (): Promise<void> => {
+      await client.DELETE('/api/student/scrap/trash/all');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['scrap', 'trash'] });
+    },
+  });
+};

apps/native/src/apis/controller/scrap/deleteFolders.ts

@@ -0,0 +1,83 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+import type { ScrapSearchResponse } from '@/features/student/scrap/utils/types';
+import {
+  createSearchQueryFilters,
+  rollbackOptimisticUpdate,
+  invalidateScrapSearchQueries,
+  SCRAP_QUERY_KEYS,
+} from './utils';
+
+type DeleteFoldersRequest =
+  paths['/api/student/scrap/folder']['delete']['requestBody']['content']['application/json'];
+
+export const useDeleteFolders = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (request: DeleteFoldersRequest): Promise<void> => {
+      await client.DELETE('/api/student/scrap/folder', {
+        body: request,
+      });
+    },
+    // 낙관적 업데이트: 삭제 전 데이터 백업 및 즉시 UI 업데이트
+    onMutate: async (request) => {
+      const deletedFolderIds = new Set(request);
+
+      // 폴더 목록 쿼리 취소 및 백업
+      const folderQueryKey = SCRAP_QUERY_KEYS.folderList();
+      await queryClient.cancelQueries({ queryKey: folderQueryKey });
+      const previousFolders = queryClient.getQueryData(folderQueryKey);
+
+      // 검색 쿼리 취소 및 백업
+      const searchQueryFilters = createSearchQueryFilters();
+      await queryClient.cancelQueries(searchQueryFilters);
+      const previousQueries = queryClient.getQueriesData(searchQueryFilters);
+
+      // 낙관적 업데이트: 폴더 목록에서 삭제된 폴더 제거
+      queryClient.setQueryData(folderQueryKey, (old: any) => {
+        if (!old?.data) return old;
+        return {
+          ...old,
+          data: old.data.filter((folder: any) => !deletedFolderIds.has(folder.id)),
+        };
+      });
+
+      // 낙관적 업데이트: 검색 결과에서 삭제된 폴더 제거
+      queryClient.setQueriesData<ScrapSearchResponse>(searchQueryFilters, (old) => {
+        if (!old) return old;
+        return {
+          folders: old.folders?.filter((folder) => !deletedFolderIds.has(folder.id)),
+          scraps: old.scraps,
+        };
+      });
+
+      // 롤백을 위한 이전 데이터 반환
+      return { previousFolders, previousQueries };
+    },
+    // 에러 발생 시 롤백
+    onError: (error, request, context) => {
+      if (context?.previousFolders) {
+        const folderQueryKey = SCRAP_QUERY_KEYS.folderList();
+        queryClient.setQueryData(folderQueryKey, context.previousFolders);
+      }
+      if (context?.previousQueries) {
+        rollbackOptimisticUpdate(queryClient, context.previousQueries);
+      }
+    },
+    // 성공/실패 관계없이 쿼리 무효화 (백그라운드에서 최신 데이터 가져오기)
+    onSettled: () => {
+      // 폴더 목록 갱신
+      queryClient.invalidateQueries({
+        queryKey: SCRAP_QUERY_KEYS.folderList(),
+      });
+      // 검색 결과 갱신
+      invalidateScrapSearchQueries(queryClient);
+      // 휴지통 목록 갱신
+      queryClient.invalidateQueries({
+        queryKey: SCRAP_QUERY_KEYS.trashList(),
+      });
+    },
+  });
+};

apps/native/src/apis/controller/scrap/deletePermanentTrash.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+import { SCRAP_QUERY_KEYS } from './utils';
+
+type PermanentDeleteRequest =
+  paths['/api/student/scrap/trash']['delete']['requestBody']['content']['application/json'];
+
+export const usePermanentDeleteTrash = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (request: PermanentDeleteRequest): Promise<void> => {
+      await client.DELETE('/api/student/scrap/trash', {
+        body: request,
+      });
+    },
+    onSuccess: () => {
+      // 휴지통 목록 갱신
+      queryClient.invalidateQueries({
+        queryKey: SCRAP_QUERY_KEYS.trashList(),
+      });
+    },
+  });
+};

apps/native/src/apis/controller/scrap/deleteScrap.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+import {
+  optimisticDeleteScrap,
+  rollbackOptimisticUpdate,
+  invalidateScrapSearchQueries,
+  invalidateFolderScrapsQueries,
+  SCRAP_QUERY_KEYS,
+} from './utils';
+
+type DeleteScrapRequest =
+  paths['/api/student/scrap']['delete']['requestBody']['content']['application/json'];
+
+export const useDeleteScrap = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (
+      request: DeleteScrapRequest
+    ): Promise<{ success: boolean; request: DeleteScrapRequest }> => {
+      await client.DELETE('/api/student/scrap', {
+        body: request,
+      });
+
+      return { success: true, request };
+    },
+    // 낙관적 업데이트: 삭제 전 데이터 백업 및 즉시 UI 업데이트
+    onMutate: async (request) => {
+      return await optimisticDeleteScrap(queryClient, request.items);
+    },
+    // 에러 발생 시 롤백
+    onError: (error, request, context) => {
+      if (context?.previousQueries) {
+        rollbackOptimisticUpdate(queryClient, context.previousQueries);
+      }
+    },
+    // 성공/실패 관계없이 쿼리 무효화 (백그라운드에서 최신 데이터 가져오기)
+    onSettled: () => {
+      // 폴더 목록 갱신
+      queryClient.invalidateQueries({
+        queryKey: SCRAP_QUERY_KEYS.folderList(),
+      });
+      // 폴더 내 스크랩 목록 갱신
+      invalidateFolderScrapsQueries(queryClient);
+      // 검색 결과 갱신
+      invalidateScrapSearchQueries(queryClient);
+      // 휴지통 목록 갱신
+      queryClient.invalidateQueries({
+        queryKey: SCRAP_QUERY_KEYS.trashList(),
+      });
+    },
+  });
+};

apps/native/src/apis/controller/scrap/deleteUnscrapFromPointing.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+import { invalidateTrashMutationQueries } from './utils';
+
+type UnscrapFromPointingRequest =
+  paths['/api/student/scrap/from-pointing']['delete']['requestBody']['content']['application/json'];
+
+/**
+ * 포인팅에서 스크랩 취소 (다른 포인팅이 없으면 휴지통 처리)
+ * @description 포인팅 기반 스크랩을 취소하고, 다른 포인팅이 없으면 휴지통으로 이동합니다.
+ */
+export const useUnscrapFromPointing = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (request: UnscrapFromPointingRequest): Promise<void> => {
+      await client.DELETE('/api/student/scrap/from-pointing', {
+        body: request,
+      });
+    },
+    onSuccess: () => {
+      // 휴지통 및 검색 쿼리 갱신
+      invalidateTrashMutationQueries(queryClient);
+    },
+  });
+};

apps/native/src/apis/controller/scrap/deleteUnscrapFromProblem.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { client } from '@/apis/client';
+import { paths } from '@/types/api/schema';
+import { invalidateTrashMutationQueries } from './utils';
+
+type UnscrapFromProblemRequest =
+  paths['/api/student/scrap/from-problem']['delete']['requestBody']['content']['application/json'];
+
+/**
+ * 문제에서 스크랩 취소 (휴지통 처리)
+ * @description 문제 기반 스크랩을 취소하고 휴지통으로 이동합니다.
+ */
+export const useUnscrapFromProblem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (request: UnscrapFromProblemRequest): Promise<void> => {
+      await client.DELETE('/api/student/scrap/from-problem', {
+        body: request,
+      });
+    },
+    onSuccess: () => {
+      // 휴지통 및 검색 쿼리 갱신
+      invalidateTrashMutationQueries(queryClient);
+    },
+  });
+};