[Release] v1.0.9

frontend/src/App.tsx

@@ -17,6 +17,8 @@ import LoginTab from '@/pages/AdminPage/auth/LoginTab/LoginTab';
 import PrivateRoute from '@/pages/AdminPage/auth/PrivateRoute/PrivateRoute';
 import PhotoEditTab from '@/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab';
 import ApplicationFormPage from './pages/ApplicationFormPage/ApplicationFormPage';
+import ApplicantsTab from './pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab';
+import ApplicantDetailPage from './pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage';
 
 const queryClient = new QueryClient();
 
@@ -76,6 +78,14 @@ const App = () => {
                             path='application-edit'
                             element={<ApplicationEditTab />}
                           />
+                          <Route 
+                            path='applicants'
+                            element={<ApplicantsTab />}
+                          />
+                          <Route 
+                            path='applicants/:questionId'
+                            element={<ApplicantDetailPage />}
+                          />
                         </Route>
                       </Routes>
                     </PrivateRoute>

frontend/src/apis/applicants/getClubApplicants.ts

@@ -0,0 +1,20 @@
+import API_BASE_URL from '@/constants/api';
+import { secureFetch } from '../auth/secureFetch';
+
+const getClubApplicants = async (clubId: string) => {
+  try {
+    const response = await secureFetch(`${API_BASE_URL}/api/club/${clubId}/apply/info`);
+    if (!response.ok) {
+      console.error(`Failed to fetch: ${response.statusText}`)
+      throw new Error((await response.json()).message);
+    }
+
+    const result = await response.json();
+    return result.data;
+  } catch (error) {
+    console.error('Error fetching club applicants', error);
+    throw error;
+  }
+};
+
+export default getClubApplicants;

frontend/src/components/common/SearchBox/SearchBox.tsx

@@ -1,13 +1,15 @@
 import { useRef, useState } from 'react';
 import { useSearch } from '@/context/SearchContext';
+import { useCategory } from '@/context/CategoryContext';
 import useMixpanelTrack from '@/hooks/useMixpanelTrack';
 import * as Styled from './SearchBox.styles';
 import SearchIcon from '@/assets/images/icons/search_button_icon.svg';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 const SearchBox = () => {
   const [isSearchBoxClicked, setIsSearchBoxClicked] = useState(false);
-  const { setKeyword, inputValue, setInputValue } = useSearch();
+  const { setKeyword, inputValue, setInputValue, setIsSearching } = useSearch();
+  const { setSelectedCategory } = useCategory();
   const trackEvent = useMixpanelTrack();
   const navigate = useNavigate();
   const location = useLocation();
@@ -23,6 +25,8 @@ const SearchBox = () => {
   const handleSearch = () => {
     redirectToHome();
     setKeyword(inputValue);
+    setSelectedCategory('all');
+    setIsSearching(true);
 
     inputRef.current?.blur();
 
@@ -40,7 +44,8 @@ const SearchBox = () => {
   return (
     <Styled.SearchBoxContainer
       $isFocused={isSearchBoxClicked}
-      onSubmit={handleSubmit}>
+      onSubmit={handleSubmit}
+    >
       <Styled.SearchInputStyles
         ref={inputRef}
         type='text'
@@ -54,7 +59,8 @@ const SearchBox = () => {
       <Styled.SearchButton
         type='submit'
         $isFocused={isSearchBoxClicked}
-        aria-label='검색'>
+        aria-label='검색'
+      >
         <img src={SearchIcon} alt='Search Button' />
       </Styled.SearchButton>
     </Styled.SearchBoxContainer>

frontend/src/context/AdminClubContext.tsx

@@ -1,12 +1,15 @@
 import { createContext, useContext, useState } from 'react';
+import { ApplicantsInfo } from '@/types/applicants';
 
 interface AdminClubContextType {
   clubId: string | null;
   setClubId: (id: string | null) => void;
+  applicantsData: ApplicantsInfo | null;
+  setApplicantsData: (data: ApplicantsInfo | null) => void;
 }
 
 const AdminClubContext = createContext<AdminClubContextType | undefined>(
-  undefined,
+  undefined
 );
 
 export const AdminClubProvider = ({
@@ -15,9 +18,10 @@ export const AdminClubProvider = ({
   children: React.ReactNode;
 }) => {
   const [clubId, setClubId] = useState<string | null>(null);
+  const [applicantsData, setApplicantsData] = useState<ApplicantsInfo | null>(null);
 
   return (
-    <AdminClubContext.Provider value={{ clubId, setClubId }}>
+    <AdminClubContext.Provider value={{ clubId, setClubId, applicantsData, setApplicantsData }}>
       {children}
     </AdminClubContext.Provider>
   );

frontend/src/context/SearchContext.tsx

@@ -5,6 +5,8 @@ interface SearchContextType {
   setKeyword: (keyword: string) => void;
   inputValue: string;
   setInputValue: (value: string) => void;
+  isSearching: boolean;
+  setIsSearching: (isSearching: boolean) => void;
 }
 
 interface SearchProviderProps {
@@ -16,6 +18,7 @@ const SearchContext = createContext<SearchContextType | undefined>(undefined);
 export const SearchProvider = ({ children }: SearchProviderProps) => {
   const [keyword, setKeyword] = useState<string>('');
   const [inputValue, setInputValue] = useState('');
+  const [isSearching, setIsSearching] = useState(false);
 
   return (
     <SearchContext.Provider
@@ -24,7 +27,10 @@ export const SearchProvider = ({ children }: SearchProviderProps) => {
         setKeyword,
         inputValue,
         setInputValue,
-      }}>
+        isSearching,
+        setIsSearching,
+      }}
+    >
       {children}
     </SearchContext.Provider>
   );

frontend/src/hooks/queries/applicants/useGetApplicants.ts

@@ -0,0 +1,10 @@
+import getClubApplicants from "@/apis/applicants/getClubApplicants"
+import { useQuery } from "@tanstack/react-query"
+
+export const useGetApplicants = (clubId: string) => {
+  return useQuery({
+    queryKey: ['clubApplicants', clubId],
+    queryFn: () => getClubApplicants(clubId),
+    retry: false,
+  })
+}

frontend/src/pages/AdminPage/auth/PrivateRoute/PrivateRoute.tsx

@@ -3,15 +3,25 @@ import useAuth from '@/hooks/useAuth';
 import { Navigate } from 'react-router-dom';
 import { useAdminClubContext } from '@/context/AdminClubContext';
 import Spinner from '@/components/common/Spinner/Spinner';
+import { useGetApplicants } from '@/hooks/queries/applicants/useGetApplicants';
 
 const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const { isLoading, isAuthenticated, clubId } = useAuth();
-  const { setClubId } = useAdminClubContext();
+  const { setClubId, setApplicantsData } = useAdminClubContext();
+  const { data: applicantsData } = useGetApplicants(clubId ?? '');
 
   useEffect(() => {
-    if (clubId) setClubId(clubId);
+    if (clubId) {
+      setClubId(clubId);
+    }
   }, [clubId, setClubId]);
 
+  useEffect(() => {
+    if (clubId && applicantsData) {
+      setApplicantsData(applicantsData);
+    }
+  }, [clubId, applicantsData]);
+
   if (isLoading) return <Spinner />;
   if (!isAuthenticated) return <Navigate to='/admin/login' replace />;
 

frontend/src/pages/AdminPage/components/SideBar/SideBar.styles.ts

@@ -7,7 +7,6 @@ export const SidebarWrapper = styled.aside`
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: normal;
-
   width: 168px;
 `;
 

frontend/src/pages/AdminPage/components/SideBar/SideBar.tsx

@@ -14,7 +14,8 @@ const tabs = [
   { label: '기본 정보 수정', path: '/admin/club-info' },
   { label: '모집 정보 수정', path: '/admin/recruit-edit' },
   { label: '활동 사진 수정', path: '/admin/photo-edit' },
-  { label: '지원 관리', path: '/admin/application-edit' },
+  { label: '지원서 관리', path: '/admin/application-edit' },
+  { label: '지원자 관리', path: '/admin/applicants' },
   { label: '계정 관리', path: '/admin/account-edit' },
 ];
 
@@ -40,7 +41,9 @@ const SideBar = ({ clubLogo, clubName }: SideBarProps) => {
     if (!confirmed) return;
 
     try {
-      await logout();
+      if (document.cookie.split(';').some((cookie) => cookie.trim().startsWith('refreshToken='))) {
+        await logout();
+      }
       localStorage.removeItem('accessToken');
       navigate('/admin/login', { replace: true });
     } catch (error) {

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useAdminClubContext } from '@/context/AdminClubContext';
+import Header from '@/components/common/Header/Header';
+import { PageContainer } from '@/styles/PageContainer.styles';
+import * as Styled from '@/pages/ApplicationFormPage/ApplicationFormPage.styles';
+import QuestionContainer from '@/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer';
+import QuestionAnswerer from '@/pages/ApplicationFormPage/components/QuestionAnswerer/QuestionAnswerer';
+import { useGetApplication } from '@/hooks/queries/application/useGetApplication';
+import Spinner from '@/components/common/Spinner/Spinner';
+import backButtonIcon from '@/assets/images/icons/back_button_icon.svg';
+
+
+const ApplicantDetailPage = () => {
+  const { questionId } = useParams<{ questionId: string }>();
+  const navigate = useNavigate();
+  const { applicantsData, clubId } = useAdminClubContext();
+
+  // 지원서 질문 목록 fetch
+  const { data: formData, isLoading, isError } = useGetApplication(clubId!);
+
+  if (!applicantsData) {
+    return <div>지원자 데이터를 불러올 수 없습니다.</div>;
+  }
+  if (isLoading) return <Spinner />;
+  if (isError || !formData) return <div>지원서 정보를 불러올 수 없습니다.</div>;
+
+  // questionId로 지원자 찾기
+  const applicant = applicantsData.applicants.find(
+    (a) => a.id === questionId
+  );
+  if (!applicant) {
+    return <div>해당 지원자를 찾을 수 없습니다.</div>;
+  }
+
+  // 답변 매핑 함수
+  const getAnswerByQuestionId = (qId: number) => {
+    return applicant.answers
+      .filter((ans) => ans.id === qId)
+      .map((ans) => ans.value);
+  };
+
+  return (
+    <>
+      <Header />
+      <PageContainer style={{ paddingTop: '80px' }}>
+        {/* FormTitle과 백아이콘을 한 줄에 배치 */}
+        <div
+          style={{
+            position: 'sticky',
+            top: 25,
+            zIndex: 10,
+            background: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            marginBottom: 16,
+          }}
+        >
+          <button
+            onClick={() => navigate(-1)}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+            aria-label="뒤로가기"
+          >
+            <img src={backButtonIcon} alt="뒤로가기" style={{ width: 16, height: 16 }} />
+          </button>
+        </div>
+        {/* 커서 고정 */}
+        <Styled.QuestionsWrapper style={{ cursor: 'default' }}>
+          {formData.questions.map((q: import('@/types/application').Question, i: number) => (
+            <QuestionContainer key={q.id} hasError={false}>
+              <QuestionAnswerer
+                question={q}
+                selectedAnswers={getAnswerByQuestionId(q.id)}
+                onChange={() => {}}
+              />
+            </QuestionContainer>
+          ))}
+        </Styled.QuestionsWrapper>
+      </PageContainer>
+    </>
+  );
+};
+
+export default ApplicantDetailPage;