[feature] 사용자가 지원하기를 눌렀을때 지원가능한 지원서들이 모달로 뜬다

frontend/src/App.tsx

@@ -77,7 +77,7 @@ const App = () => {
             }
           />
           <Route
-            path='/application/:clubId'
+            path='/application/:clubId/:applicationFormId'
             element={<ApplicationFormPage />}
           />
           <Route path='/club-union' element={<ClubUnionPage />} />

frontend/src/apis/application/getApplication.ts

@@ -1,11 +1,16 @@
 import API_BASE_URL from '@/constants/api';
 
-const getApplication = async (clubId: string) => {
+const getApplication = async (clubId: string, applicationFormId: string) => {
   try {
-    const response = await fetch(`${API_BASE_URL}/api/club/${clubId}/apply`);
+    const response = await fetch(`${API_BASE_URL}/api/club/${clubId}/apply/${applicationFormId}`);
     if (!response.ok) {
-      console.error(`Failed to fetch: ${response.statusText}`);
-      throw new Error((await response.json()).message);
+      let message = response.statusText;
+      try {
+        const errorData = await response.json();
+        if (errorData?.message) message = errorData.message;
+      } catch {}
+      console.error(`Failed to fetch: ${message}`);
+      throw new Error(message);
     }
 
     const result = await response.json();

frontend/src/apis/application/getApplicationOptions.ts

@@ -0,0 +1,28 @@
+import API_BASE_URL from "@/constants/api";
+
+const getApplicationOptions = async (clubId: string) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/club/${clubId}/apply`);
+        if (!response.ok) {
+            let message = response.statusText;
+            try {
+                const errorData = await response.json();
+                if (errorData?.message) message = errorData.message;
+            } catch {}
+            console.error(`Failed to fetch options: ${message}`);
+            throw new Error(message);
+        }
+
+        const result = await response.json();
+        let forms: Array<{ id: string; title: string }> = [];
+        if (result && result.data && Array.isArray(result.data.forms)) {
+            forms = result.data.forms;
+        }
+        return forms;
+    } catch (error) {
+        console.error('지원서 옵션 조회 중 오류가 발생했습니다.', error);
+        throw error;
+    }
+};
+
+export default getApplicationOptions;

frontend/src/components/application/modals/ApplicationSelectModal.styles.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const EmptyMessage = styled.div`
+  padding: 16px 8px;
+  color: #9D9D9D;
+  text-align: center;
+  font-weight: 600;
+`;
+
+export const List = styled.div`
+  display: grid;
+  gap: 16px;
+`;
+
+export const OptionButton = styled.button`
+  width: 100%;
+  padding: 18px 20px;
+  border-radius: 10px;
+  border: 1px solid #DCDCDC;
+  background: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
+
+  &:hover {
+    background: #ff7a00;
+    color: #fff;
+    border-color: #ff7a00;
+  }
+`;

frontend/src/components/application/modals/ApplicationSelectModal.tsx

@@ -0,0 +1,52 @@
+import Modal from "@/components/common/Modal/Modal";
+import * as Styled from './ApplicationSelectModal.styles';
+import { ApplicationForm } from "@/types/application";
+
+export interface ApplicationSelectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  options: ApplicationForm[];
+  onSelect: (option: ApplicationForm) => void;
+  onBackdropClick?: () => boolean | void;
+}
+
+interface OptionsListProps {
+  options: ApplicationForm[];
+  onSelect: (option: ApplicationForm) => void;
+}
+
+const OptionsList = ({ options, onSelect }: OptionsListProps) => {
+    if (options.length === 0) {
+        return <Styled.EmptyMessage>지원 가능한 분야가 없습니다.</Styled.EmptyMessage>;
+    }
+
+    return (
+        <Styled.List>
+            {options.map((option) => (
+                <Styled.OptionButton key={option.id} onClick={() => {onSelect(option);}}>
+                    {option.title}
+                </Styled.OptionButton>
+            ))}
+        </Styled.List>
+    )
+};
+
+const ApplicationSelectModal = ({ isOpen, onClose, options, onSelect, onBackdropClick }: ApplicationSelectModalProps) => {
+    const handleOverlayClick = () => {
+        return false;
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="지원 분야 선택"
+            description="지원할 분야를 선택해주세요"
+            onBackdropClick={handleOverlayClick}
+        >
+            <OptionsList options={options} onSelect={onSelect} />
+        </Modal>
+    );
+};
+
+export default ApplicationSelectModal;

frontend/src/components/common/Modal/Modal.styles.ts

@@ -0,0 +1,60 @@
+import { media } from '@/styles/mediaQuery';
+import styled from 'styled-components';
+
+export const Overlay = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0,0,0, ${({ isOpen }) => (isOpen ? 0.45 : 0)});
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  transition: background-color .2s ease;
+`;
+
+export const Container = styled.div<{ isOpen: boolean }>`
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  background: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: ${({ isOpen }) => (isOpen ? '0 18px 44px rgba(0,0,0,.22)' : 'none')};
+  transition: transform .2s ease, box-shadow .2s ease;
+`;
+
+export const Header = styled.div`
+  padding: 30px;
+  border-bottom: 1px solid #DCDCDC;
+  display: flex;
+  align-items: center;
+`;
+
+export const Title = styled.h3`
+  font-size: 20px;
+  font-weight: 800;
+  flex: 1;
+  text-align: left;
+`;
+
+export const IconButton = styled.button`
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  font-weight: 800;
+  color: #9D9D9D;
+  line-height: 1;
+  cursor: pointer;
+`;
+
+export const Description = styled.p`
+  padding: 20px 32px 0px;
+  text-align: left;
+  color: #9D9D9D;
+  font-weight: 600;
+`;
+
+export const Body = styled.div`
+  padding: 16px 30px 30px;
+  overflow: auto;
+`;

frontend/src/components/common/Modal/Modal.tsx

@@ -0,0 +1,40 @@
+import { MouseEvent, ReactNode, useEffect } from "react";
+import * as Styled from './Modal.styles';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children?: ReactNode;
+  onBackdropClick?: () => boolean | void;
+}
+
+
+const Modal = ({ isOpen, onClose, title, description, children, onBackdropClick }: ModalProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } 
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <Styled.Overlay isOpen={isOpen} onClick={onBackdropClick} aria-modal="true">
+      <Styled.Container isOpen={isOpen} onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
+        <Styled.Header> 
+            {title && <Styled.Title>{title}</Styled.Title>}
+          <Styled.IconButton aria-label="close" type="button" onClick={onClose}>✕</Styled.IconButton>
+        </Styled.Header>
+        {description && <Styled.Description>{description}</Styled.Description>}
+        <Styled.Body>{children}</Styled.Body>
+      </Styled.Container>
+    </Styled.Overlay>
+  );
+}
+
+export default Modal;

frontend/src/context/AdminClubContext.tsx

@@ -6,6 +6,8 @@ interface AdminClubContextType {
   setClubId: (id: string | null) => void;
   applicantsData: ApplicantsInfo | null;
   setApplicantsData: (data: ApplicantsInfo | null) => void;
+  applicationFormId: string | null;
+  setApplicationFormId: (id: string | null) => void;
 }
 
 const AdminClubContext = createContext<AdminClubContextType | undefined>(
@@ -19,9 +21,16 @@ export const AdminClubProvider = ({
 }) => {
   const [clubId, setClubId] = useState<string | null>(null);
   const [applicantsData, setApplicantsData] = useState<ApplicantsInfo | null>(null);
+  const [applicationFormId, setApplicationFormId] = useState<string | null>(null);
 
   return (
-    <AdminClubContext.Provider value={{ clubId, setClubId, applicantsData, setApplicantsData }}>
+    <AdminClubContext.Provider 
+      value={{ 
+        clubId, setClubId, 
+        applicantsData, setApplicantsData, 
+        applicationFormId, setApplicationFormId,
+      }}
+    >
       {children}
     </AdminClubContext.Provider>
   );

frontend/src/hooks/queries/application/useGetApplication.ts

@@ -1,11 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import getApplication from '@/apis/application/getApplication';
 
-export const useGetApplication = (clubId: string) => {
+export const useGetApplication = (clubId?: string | null, applicationFormId?: string | null) => {
   return useQuery({
-    queryKey: ['applicationForm', clubId],
-    queryFn: () => getApplication(clubId),
+    queryKey: ['applicationForm', clubId, applicationFormId],
+    queryFn: () => getApplication(clubId!, applicationFormId!),
     retry: false,
-    enabled: !!clubId,
+    enabled: !!clubId && !!applicationFormId,
   });
 };

frontend/src/mocks/api/apply.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { mockData } from '../data/mockData';
+import { mockData, mockOptions } from '../data/mockData';
 import { API_BASE } from '../constants/clubApi';
 import { validateClubId } from '../utils/validateClubId';
 import { ERROR_MESSAGE } from '../constants/error';
@@ -24,9 +24,14 @@ export const applyHandlers = [
 
     return HttpResponse.json(
       {
-        clubId,
-        form_title: mockData.title,
-        questions: mockData.questions,
+        status: '200',
+        message: 'OK',
+        data: {
+          clubId,
+          title: mockData.title,
+          description: mockData.description,
+          questions: mockData.questions,
+        },
       },
       { status: 200 },
     );
@@ -69,4 +74,16 @@ export const applyHandlers = [
       { status: 200 },
     );
   }),
+
+  http.get(`${API_BASE}/:clubId/applications`, ({ params }) => {
+    const clubId = String(params.clubId);
+    if (!validateClubId(clubId)) {
+      return HttpResponse.json(
+        { message: ERROR_MESSAGE.INVALID_CLUB_ID },
+        { status: 400 },
+      );
+    } 
+    const list = mockOptions[clubId] ?? [];
+    return HttpResponse.json({data: list}, {status: 200});
+  }),
 ];

frontend/src/mocks/constants/clubApi.ts

@@ -1,3 +1,8 @@
 export const API_BASE = 'http://localhost/api/club';
 
 export const CLUB_ID = '67e54ae51cfd27718dd40be6';
+
+export const CLUB_IVF = '67ee2ca3b35e3c267e3c248d';
+export const CLUB_BOB = '67e54ae51cfd27718dd40bea';
+export const CLUB_BACK = '67e54ae51cfd27718dd40bd8';
+export const CLUB_TEST = '67ebf9f75c8623081055881c';

frontend/src/mocks/data/mockData.ts

@@ -1,4 +1,5 @@
-import { ApplicationFormData } from '@/types/application';
+import { ApplicationFormData, ApplicationForm } from '@/types/application';
+import { CLUB_BACK, CLUB_BOB, CLUB_IVF, CLUB_TEST } from '../constants/clubApi';
 
 type QuestionType =
   | 'CHOICE'
@@ -121,3 +122,22 @@ export const mockData: ApplicationFormData = {
     },
   ],
 };
+
+export const mockOptions: Record<string, ApplicationForm[]> = {
+  /*보블리스*/
+  [CLUB_BOB]: [
+  { id: 'string101', title: '개발자로 지원하기' },
+  { id: 'string103', title: '기획자로 지원하기' },  
+  ],
+  /*IVF*/
+  [CLUB_IVF]: [ 
+    { id: 'string201', title: '선수로 지원하기' },
+    { id: 'string202', title: '매니저로 지원하기' },
+  ],
+  /*백경예술연구회*/
+  [CLUB_BACK]: [
+    { id: 'string301', title: '백경예술연구회 지원하기' },
+  ],
+  /*테스트*/
+  [CLUB_TEST]: [],
+};

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx

@@ -38,9 +38,9 @@ const ApplicantDetailPage = () => {
   const [applicantStatus, setApplicantStatus] = useState<ApplicationStatus>(
     ApplicationStatus.SUBMITTED,
   );
-  const { applicantsData, clubId } = useAdminClubContext();
+  const { applicantsData, clubId, applicationFormId } = useAdminClubContext();
 
-  const { data: formData, isLoading, isError } = useGetApplication(clubId!);
+  const { data: formData, isLoading, isError } = useGetApplication(clubId!, applicationFormId!);
   const { mutate: updateApplicant } = useUpdateApplicant(clubId!);
 
   const applicantIndex =
@@ -75,7 +75,7 @@ const ApplicantDetailPage = () => {
           },
         ]);
       }, 400),
-    [clubId, questionId],
+    [clubId, questionId, updateApplicant],
   );
 
   if (!applicantsData) {