✨ 지갑 주소 입력 및 검증 파일 업로드 페이지 추가 (#40)

* 🚚 공동 api 유틸 위치로 이동

* ✨ S3(storage)와의 소통을 위한 storageApi 모듈 생성

* ✨ 지갑 주소 입력 및 검증 파일 업로드 페이지 추가

* ✨ 로그인하지 않아도 인증 사진을 올릴 수 있도록 설정

* 🧪 submit form을 위한 성공/실패 테스트 추가

* ♻️ apis.ts 파일에 Query type을 직접 삽입한 경우 정리

* 🎨 포매팅 적용

Author: Yeonu-Kim

src/App.tsx

@@ -1,7 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState } from 'react';
+import { useApplicationQuery } from '@/feature/application/application/application-query';
+import { implApplicationUsecase } from '@/feature/application/usecase/application-usecase';
 import { useAuthQuery } from '@/feature/auth/application/auth-query';
 import { implAuthUsecase } from '@/feature/auth/usecase/auth-usecase';
+import { implFileUsecase } from '@/feature/file/usecase/file-usecase';
 import { QueryContext } from '@/feature/shared/context/query-context';
 import { ReviewContext } from '@/feature/shared/context/review-context';
 import { TokenContext } from '@/feature/shared/context/token-context';
@@ -10,6 +13,8 @@ import { RouterProvider } from '@/feature/shared/routes/router-provider';
 import { useStoreQuery } from '@/feature/store/application/store-query';
 import { implStoreUsecase } from '@/feature/store/usecase/store-usecase';
 import { externalCall, implApi } from '@/infrastructure/api';
+import { implStorageApi } from '@/infrastructure/api/client';
+import { externalStorageCall } from '@/infrastructure/api/external-call';
 import { implTokenRepository } from '@/infrastructure/token/token-repository';
 
 const queryClient = new QueryClient({
@@ -26,14 +31,18 @@ const AppContent = () => {
   const [storeId, setStoreId] = useState<string | null>(null);
   const [eventId, setEventId] = useState<string | null>(null);
   const api = implApi({ externalCall });
+  const storageApi = implStorageApi({ externalStorageCall });
   const tokenRepository = implTokenRepository({ setToken });
   const authUsecase = implAuthUsecase({ api, tokenRepository });
   const authQuery = useAuthQuery({ authUsecase });
   const storeUsecase = implStoreUsecase({ api });
   const storeQuery = useStoreQuery({ storeUsecase });
+  const fileUsecase = implFileUsecase({ api, storageApi });
+  const applicationUsecase = implApplicationUsecase({ api, fileUsecase });
+  const applicationQuery = useApplicationQuery({ applicationUsecase });
 
   return (
-    <QueryContext.Provider value={{ authQuery, storeQuery }}>
+    <QueryContext.Provider value={{ authQuery, storeQuery, applicationQuery }}>
       <TokenContext.Provider value={{ token }}>
         <UsecaseContext.Provider value={{ authUsecase }}>
           <ReviewContext.Provider

src/entities/file.ts

@@ -0,0 +1 @@
+export type FileType = 'REVIEW' | 'STORE';

src/feature/application/application/application-query.ts

@@ -0,0 +1,84 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createErrorMessage } from '@/feature/shared/error/create-error-message';
+import type {
+  EventDetailResponse,
+  StoreDetailResponse,
+} from '@/infrastructure/api/apis/local-server/schemas';
+import type { ApplicationUsecase } from '../usecase/application-usecase';
+
+export type ApplicationQuery = ReturnType<typeof useApplicationQuery>;
+
+export const useApplicationQuery = ({
+  applicationUsecase,
+}: {
+  applicationUsecase: ApplicationUsecase;
+}) => {
+  return {
+    useGetStore: ({ storeId }: { storeId: string }) => {
+      const { data, isLoading } = useQuery({
+        queryKey: ['store', storeId],
+        queryFn: async (): Promise<StoreDetailResponse> => {
+          const response = await applicationUsecase.getStore({ storeId });
+          if (response.type === 'success') {
+            return response.data;
+          }
+          throw new Error(response.message);
+        },
+      });
+      return { store: data, isLoading };
+    },
+
+    useGetEvent: ({ eventId }: { eventId: string }) => {
+      const { data, isLoading } = useQuery({
+        queryKey: ['event', eventId],
+        queryFn: async (): Promise<EventDetailResponse> => {
+          const response = await applicationUsecase.getEvent({ eventId });
+          if (response.type === 'success') {
+            return response.data;
+          }
+          throw new Error(response.message);
+        },
+      });
+      return { event: data, isLoading };
+    },
+
+    useSubmitApplication: ({
+      setResponseMessage,
+      onSuccess,
+    }: {
+      setResponseMessage: (message: string) => void;
+      onSuccess: () => void;
+    }) => {
+      const { mutate: submitApplication, isPending } = useMutation({
+        mutationFn: async ({
+          eventId,
+          walletAddress,
+          imageFile,
+        }: {
+          eventId: string;
+          walletAddress: string;
+          imageFile: File;
+        }) => {
+          return await applicationUsecase.submitApplication({
+            eventId,
+            walletAddress,
+            imageFile,
+          });
+        },
+        onSuccess: (response) => {
+          if (response.type === 'success') {
+            onSuccess();
+            return;
+          }
+          setResponseMessage(
+            createErrorMessage(
+              response.code,
+              '제출에 실패했습니다. 다시 시도해 주세요.'
+            )
+          );
+        },
+      });
+      return { submitApplication, isPending };
+    },
+  };
+};

src/feature/application/presenter/application-form-presenter.ts

@@ -0,0 +1,30 @@
+import type { Input, InputForForm } from '@/entities/input';
+import type { ApplicationInputPresenter } from './application-input-presenter';
+
+type ApplicationFormPresenter = {
+  useValidator({
+    applicationInputPresenter,
+  }: {
+    applicationInputPresenter: ApplicationInputPresenter;
+  }): {
+    inputStates: {
+      walletAddress: Input<string>;
+      imageFile: Input<File | null>;
+    };
+    formStates: {
+      walletAddress: InputForForm<string>;
+      imageFile: InputForForm<File | null>;
+    };
+  };
+};
+
+export const applicationFormPresenter: ApplicationFormPresenter = {
+  useValidator: ({ applicationInputPresenter }) => {
+    const { walletAddress, imageFile } =
+      applicationInputPresenter.useValidator();
+    return {
+      inputStates: { walletAddress, imageFile },
+      formStates: { walletAddress, imageFile },
+    };
+  },
+};

src/feature/application/presenter/application-input-presenter.ts

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import type { Input } from '@/entities/input';
+
+const ETHEREUM_ADDRESS_REGEX = /^0x[0-9a-fA-F]{40}$/;
+const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+export type ApplicationInputPresenter = {
+  useValidator(): {
+    walletAddress: Input<string>;
+    imageFile: Input<File | null>;
+  };
+};
+
+export const applicationInputPresenter: ApplicationInputPresenter = {
+  useValidator: () => {
+    const [walletAddress, setWalletAddress] = useState('');
+    const [imageFile, setImageFile] = useState<File | null>(null);
+
+    return {
+      walletAddress: {
+        value: walletAddress,
+        isError: !ETHEREUM_ADDRESS_REGEX.test(walletAddress),
+        onChange: setWalletAddress,
+      },
+      imageFile: {
+        value: imageFile,
+        isError:
+          imageFile === null ||
+          !ALLOWED_IMAGE_TYPES.includes(imageFile.type) ||
+          imageFile.size > MAX_FILE_SIZE,
+        onChange: setImageFile,
+      },
+    };
+  },
+};

src/feature/application/usecase/application-usecase.ts

@@ -0,0 +1,74 @@
+import type { UsecaseResponse } from '@/feature/shared/response';
+import type { Apis } from '@/infrastructure/api';
+import type {
+  EventDetailResponse,
+  StoreDetailResponse,
+} from '@/infrastructure/api/apis/local-server/schemas';
+import type { FileUsecase } from '../../file/usecase/file-usecase';
+
+export type ApplicationUsecase = {
+  getStore(params: { storeId: string }): UsecaseResponse<StoreDetailResponse>;
+  getEvent(params: { eventId: string }): UsecaseResponse<EventDetailResponse>;
+  submitApplication(params: {
+    eventId: string;
+    walletAddress: string;
+    imageFile: File;
+  }): UsecaseResponse<null>;
+};
+
+export const implApplicationUsecase = ({
+  api,
+  fileUsecase,
+}: {
+  api: Apis;
+  fileUsecase: FileUsecase;
+}): ApplicationUsecase => ({
+  getStore: async ({ storeId }) => {
+    const { status, data } = await api['GET /api/store/:storeId']({
+      query: { storeId },
+    });
+    if (status === 200) {
+      return { type: 'success', data: data as StoreDetailResponse };
+    }
+    const err = data as { code: string; message: string };
+    return { type: 'error', code: err.code, message: err.message };
+  },
+
+  getEvent: async ({ eventId }) => {
+    const { status, data } = await api['GET /api/event/:eventId']({
+      query: { eventId },
+    });
+    if (status === 200) {
+      return { type: 'success', data: data as EventDetailResponse };
+    }
+    const err = data as { code: string; message: string };
+    return { type: 'error', code: err.code, message: err.message };
+  },
+
+  submitApplication: async ({ eventId, walletAddress, imageFile }) => {
+    const presignedResp = await fileUsecase.getUploadPresignedUrl({
+      fileName: imageFile.name,
+      fileType: 'REVIEW',
+    });
+    if (presignedResp.type === 'error') {
+      return presignedResp;
+    }
+
+    const uploadResp = await fileUsecase.uploadFile({
+      presignedUrl: presignedResp.data.url,
+      file: imageFile,
+    });
+    if (uploadResp.type === 'error') {
+      return uploadResp;
+    }
+
+    const { status, data } = await api['POST /api/applications']({
+      body: { eventId, walletAddress, imageKey: presignedResp.data.s3Key },
+    });
+    if (status === 200) {
+      return { type: 'success', data: null };
+    }
+    const err = data as { code: string; message: string };
+    return { type: 'error', code: err.code, message: err.message };
+  },
+});

src/feature/file/usecase/file-usecase.ts

@@ -0,0 +1,51 @@
+import type { FileType } from '@/entities/file';
+import type { UsecaseResponse } from '@/feature/shared/response';
+import type { Apis } from '@/infrastructure/api';
+import type { S3UploadResponse } from '@/infrastructure/api/apis/local-server/schemas';
+import type { StorageApis } from '@/infrastructure/api/client';
+
+export type FileUsecase = {
+  getUploadPresignedUrl(params: {
+    fileName: string;
+    fileType: FileType;
+  }): UsecaseResponse<S3UploadResponse>;
+  uploadFile(params: {
+    presignedUrl: string;
+    file: File;
+  }): UsecaseResponse<null>;
+};
+
+export const implFileUsecase = ({
+  api,
+  storageApi,
+}: {
+  api: Apis;
+  storageApi: StorageApis;
+}): FileUsecase => ({
+  getUploadPresignedUrl: async ({ fileName, fileType }) => {
+    const { status, data } = await api['POST /api/s3']({
+      body: { fileName, fileType },
+    });
+    if (status === 200) {
+      return { type: 'success', data: data as S3UploadResponse };
+    }
+    const err = data as { code: string; message: string };
+    return { type: 'error', code: err.code, message: err.message };
+  },
+
+  uploadFile: async ({ presignedUrl, file }) => {
+    const { status } = await storageApi['PUT upload-file']({
+      path: presignedUrl,
+      body: file,
+      contentType: file.type,
+    });
+    if (status === 200) {
+      return { type: 'success', data: null };
+    }
+    return {
+      type: 'error',
+      code: 'S3_001',
+      message: '이미지 업로드에 실패했습니다.',
+    };
+  },
+});

src/feature/shared/context/query-context.ts

@@ -1,10 +1,12 @@
 import { createContext } from 'react';
+import type { ApplicationQuery } from '@/feature/application/application/application-query';
 import type { AuthQuery } from '@/feature/auth/application/auth-query';
 import type { StoreQuery } from '@/feature/store/application/store-query';
 
 export type QueryContext = {
   authQuery: AuthQuery;
   storeQuery: StoreQuery;
+  applicationQuery: ApplicationQuery;
 };
 
 export const QueryContext = createContext<QueryContext | null>(null);

src/feature/shared/routes/path.ts

@@ -3,5 +3,5 @@ export const PATH = {
   SIGN_IN: '/sign-in',
   SIGN_UP: '/sign-up',
   SIGN_UP_COMPLETE: '/sign-up-complete',
-  SUBMIT: '/submit',
+  SUBMIT: '/store/:storeId/event/:eventId',
 };

src/feature/shared/routes/router-provider.tsx

@@ -6,6 +6,7 @@ import { LandingPage } from '../../../pages/landing';
 import { MyPage } from '../../../pages/my-page';
 import { SignInPage } from '../../../pages/sign-in';
 import { SignUpPage } from '../../../pages/sign-up';
+import { SubmitPage } from '../../../pages/submit';
 import { PATH } from './path';
 
 export const RouterProvider = () => {
@@ -15,6 +16,7 @@ export const RouterProvider = () => {
       <Routes>
         <Route path={PATH.SIGN_IN} element={<SignInPage />} />
         <Route path={PATH.SIGN_UP} element={<SignUpPage />} />
+        <Route path={PATH.SUBMIT} element={<SubmitPage />} />
         <Route element={<ReissueToken />}>
           <Route path={PATH.LANDING} element={<LandingPage />} />
           <Route element={<ProtectedRoute role="SIGN_IN" />}>