[feat] 동아리 등록 요청 플로우 구현

apps/web/src/App.tsx

@@ -3,6 +3,9 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Layout from './layout';
 import ClubDetail from './pages/ClubDetail';
+import ClubInformationUpdate from './pages/ClubInformationUpdate';
+import ClubRegistration from './pages/ClubRegistration';
+import ClubRequestComplete from './pages/ClubRequestComplete';
 import Home from './pages/Home';
 import RegisterClub from './pages/RegisterClub';
 import UniversityClubList from './pages/UniversityClubList';
@@ -17,6 +20,9 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/universities/:universityId/clubs" element={<UniversityClubList />} />
           <Route path="/clubs/register" element={<RegisterClub />} />
+          <Route path="/clubs/registration-requests" element={<ClubRegistration />} />
+          <Route path="/clubs/register/complete" element={<ClubRequestComplete />} />
+          <Route path="/clubs/information-update-requests" element={<ClubInformationUpdate />} />
           <Route path="/clubs/:clubId" element={<ClubDetail />} />
         </Route>
       </SentryRoutes>

apps/web/src/apis/clubDetail/entity.ts

@@ -5,7 +5,7 @@ import type { UniversitySummary } from '../universityClub/entity';
 export interface ClubDetailResponse {
   id: number;
   name: string;
-  imageUrl: string;
+  categoryEmoji: string;
   category: ClubCategory;
   categoryName: string;
   topic: string;

apps/web/src/apis/clubInformationUpdate/entity.ts

@@ -0,0 +1,17 @@
+import type { ClubCategory } from '@/apis/common/club';
+
+export interface ClubInformationUpdateRequest {
+  universityName: string;
+  clubName: string;
+  clubCategory: ClubCategory;
+  clubTopic: string;
+  clubEmoji: string;
+  shortDescription: string;
+  fullIntroduction: string;
+  imageUrls: string[];
+}
+
+export interface SubmitClubInformationUpdateRequestParams {
+  clubId: number;
+  body: ClubInformationUpdateRequest;
+}

apps/web/src/apis/clubInformationUpdate/index.ts

@@ -0,0 +1,9 @@
+import { apiClient } from '../client';
+import type { ClubInformationUpdateRequest } from './entity';
+
+export const submitClubInformationUpdateRequest = async (clubId: number, body: ClubInformationUpdateRequest) => {
+  const response = await apiClient.post<null>(`clubs/${clubId}/information-update-requests`, {
+    body,
+  });
+  return response;
+};

apps/web/src/apis/clubInformationUpdate/mutations.ts

@@ -0,0 +1,13 @@
+import { mutationOptions } from '@tanstack/react-query';
+
+import type { SubmitClubInformationUpdateRequestParams } from './entity';
+import { submitClubInformationUpdateRequest } from '.';
+
+export const clubInformationUpdateMutations = {
+  submit: () =>
+    mutationOptions({
+      mutationKey: ['clubInformationUpdate', 'submit'],
+      mutationFn: ({ clubId, body }: SubmitClubInformationUpdateRequestParams) =>
+        submitClubInformationUpdateRequest(clubId, body),
+    }),
+};

apps/web/src/apis/clubRegistration/entity.ts

@@ -0,0 +1,7 @@
+import type { ClubInformationUpdateRequest } from '@/apis/clubInformationUpdate/entity';
+
+export type ClubRegistrationRequest = ClubInformationUpdateRequest;
+
+export interface SubmitClubRegistrationRequestParams {
+  body: ClubRegistrationRequest;
+}

apps/web/src/apis/clubRegistration/index.ts

@@ -0,0 +1,9 @@
+import { apiClient } from '../client';
+import type { ClubRegistrationRequest } from './entity';
+
+export const submitClubRegistrationRequest = async (body: ClubRegistrationRequest) => {
+  const response = await apiClient.post<null>('clubs/registration-requests', {
+    body,
+  });
+  return response;
+};

apps/web/src/apis/clubRegistration/mutations.ts

@@ -0,0 +1,12 @@
+import { mutationOptions } from '@tanstack/react-query';
+
+import type { SubmitClubRegistrationRequestParams } from './entity';
+import { submitClubRegistrationRequest } from '.';
+
+export const clubRegistrationMutations = {
+  submit: () =>
+    mutationOptions({
+      mutationKey: ['clubRegistration', 'submit'],
+      mutationFn: ({ body }: SubmitClubRegistrationRequestParams) => submitClubRegistrationRequest(body),
+    }),
+};

apps/web/src/apis/recentClub/entity.ts

@@ -7,7 +7,7 @@ export interface RecentClubRequestParams {
 export interface RecentClub {
   id: number;
   name: string;
-  imageUrl: string;
+  categoryEmoji: string;
   category: ClubCategory;
   categoryName: string;
   topic: string;

apps/web/src/apis/universityClub/entity.ts

@@ -27,7 +27,7 @@ export interface ClubCategorySummary {
 export interface UniversityClub {
   id: number;
   name: string;
-  imageUrl: string;
+  categoryEmoji: string;
   category: ClubCategory;
   categoryName: string;
   topic: string;

apps/web/src/apis/upload/entity.ts

@@ -0,0 +1,6 @@
+export type UploadTarget = 'CLUB' | 'BANK' | 'COUNCIL' | 'USER';
+
+export interface UploadImageResponse {
+  key: string;
+  fileUrl: string;
+}

apps/web/src/apis/upload/index.ts

@@ -0,0 +1,13 @@
+import { apiClient } from '../client';
+import type { UploadImageResponse, UploadTarget } from './entity';
+
+export const uploadImage = async (file: File, target: UploadTarget) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await apiClient.post<UploadImageResponse, { target: UploadTarget }>('upload/image', {
+    body: formData,
+    params: { target },
+  });
+  return response;
+};

apps/web/src/components/RecentClubCard/index.tsx

@@ -14,7 +14,7 @@ function RecentClubCard({ club }: RecentClubCardProps) {
       className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex w-full items-center gap-4 overflow-hidden rounded-[20px] border bg-white px-5.5 py-5 transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
       to={`/clubs/${club.id}`}
     >
-      <img className="size-12.5 shrink-0 rounded-full object-cover" src={club.imageUrl} alt="" />
+      <img className="size-12.5 shrink-0 rounded-full object-cover" src={club.categoryEmoji} alt="" />
       <span className="min-w-0">
         <span className="block truncate text-[14px] leading-10 font-semibold text-black">{club.name}</span>
         <span className="flex min-w-0 items-center gap-2 text-[12px] leading-6">

apps/web/src/pages/ClubDetail/index.tsx

@@ -80,7 +80,7 @@ export default function ClubDetail() {
           <div className="flex flex-col gap-5">
             <section className="border-text-100 flex flex-col gap-5 rounded-[20px] border bg-white px-11 py-10">
               <div className="flex gap-10 py-[14.5px]">
-                <img className="size-22.5 object-cover" src={clubDetail.imageUrl} alt="" />
+                <img className="size-22.5 object-cover" src={clubDetail.categoryEmoji} alt="" />
                 <div className="flex flex-col gap-1 leading-10">
                   <h1 className="text-[32px] font-extrabold">{clubDetail.name}</h1>
                   <div className="flex items-center gap-2 text-[16px]">