[feature] 관리자는 동아리 상세 페이지에서 지원서 모집 기간을 원클릭으로 수정할 수 있다

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { colors } from '@/styles/theme/colors';
+import { setTypography, typography } from '@/styles/theme/typography';
+
+export const Button = styled.button<{ $active: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  padding: 9px 16px;
+  ${setTypography(typography.button.button1)};
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    transform 0.06s ease;
+
+  color: ${({ $active }) => ($active ? colors.base.white : colors.gray[700])};
+  background-color: ${({ $active }) =>
+    $active ? colors.primary[800] : colors.gray[300]};
+  border: ${({ $active }) =>
+    $active ? `1px solid transparent` : `1px solid ${colors.gray[500]}`};
+
+  &:active {
+    transform: translateY(1px);
+  }
+`;

frontend/src/components/common/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes } from 'react';
+import * as Styled from './ToggleButton.styles';
+
+interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active: boolean;
+}
+
+const ToggleButton = ({
+  active,
+  children,
+  type = 'button',
+  ...rest
+}: ToggleButtonProps) => (
+  <Styled.Button $active={active} type={type} {...rest}>
+    {children}
+  </Styled.Button>
+);
+
+export default ToggleButton;

frontend/src/constants/adminFieldLimits.ts

@@ -13,6 +13,11 @@ export const FAQ_ANSWER_MAX = 300;
 
 // 모집 정보 수정 (RecruitEditTab)
 export const RECRUIT_TARGET_MAX = 10;
+// 상시모집 종료일로 쓰는 더미 연도
+export const FAR_FUTURE_YEAR = 2999;
+
+// 모집 기간 변경 모달 (RecruitmentPeriodModal)
+export const PERIOD_CHANGE_DAYS_MAX = 365;
 
 // 계정 관리 (AccountEditTab)
 export const PASSWORD_MAX = 20;

frontend/src/constants/eventName.ts

@@ -173,6 +173,10 @@ export const ADMIN_EVENT = {
   PASSWORD_CHANGE_BUTTON_CLICKED: '비밀번호 변경 버튼클릭',
   NEW_PASSWORD_CLEAR_BUTTON_CLICKED: '새 비밀번호 입력 초기화 버튼클릭',
   CONFIRM_PASSWORD_CLEAR_BUTTON_CLICKED: '확인 비밀번호 입력 초기화 버튼클릭',
+
+  // 동아리 상세 - 모집 기간 변경 (관리자 전용)
+  PERIOD_CHANGE_BUTTON_CLICKED: '모집 기간 변경 버튼클릭',
+  PERIOD_CHANGE_CONFIRMED: '모집 기간 변경 완료',
 } as const;
 
 export const PAGE_VIEW = {

frontend/src/constants/queryKeys.ts

@@ -32,6 +32,8 @@ export const queryKeys = {
   },
   club: {
     all: ['clubs'] as const,
+    /** 모든 clubDetail 쿼리를 한 번에 무효화하는 prefix */
+    allDetails: ['clubDetail'] as const,
     detail: (clubParam: string) => ['clubDetail', clubParam] as const,
     calendarEvents: (clubParam: string) =>
       ['clubCalendarEvents', clubParam] as const,

frontend/src/constants/storageKeys.ts

@@ -11,4 +11,6 @@ export const STORAGE_KEYS = {
   SATISFACTION_ANSWERED: 'satisfactionAnswered',
   HAS_CONSENTED_PERSONAL_INFO: 'hasConsentedPersonalInfo',
   QUERY_CACHE: 'MOADONG_QUERY_CACHE',
+  /** 관리자 로그인 시 귀속된 동아리 ID. 새로고침 후에도 관리자 UI 유지에 사용 */
+  ADMIN_CLUB_ID: 'adminClubId',
 } as const;

frontend/src/hooks/Queries/useClub.ts

@@ -122,9 +122,12 @@ export const useUpdateClubDescription = () => {
   return useMutation({
     mutationFn: (updatedData: ClubDescription) =>
       updateClubDescription(updatedData),
-    onSuccess: (_, variables) => {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.club.allDetails,
+      });
       queryClient.invalidateQueries({
-        queryKey: queryKeys.club.detail(variables.id),
+        queryKey: queryKeys.club.all,
       });
     },
     onError: (error) => {

frontend/src/hooks/useAuth.ts

@@ -4,17 +4,14 @@ import { getClubIdByToken } from '@/apis/auth';
 const useAuth = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [clubId, setClubId] = useState<string | null>(null);
 
   useEffect(() => {
     const checkAuth = async () => {
       try {
-        const clubId = await getClubIdByToken();
-        setClubId(clubId);
+        await getClubIdByToken();
         setIsAuthenticated(true);
       } catch {
         setIsAuthenticated(false);
-        setClubId(null);
       } finally {
         setIsLoading(false);
       }
@@ -23,7 +20,7 @@ const useAuth = () => {
     checkAuth();
   }, []);
 
-  return { isLoading, isAuthenticated, clubId };
+  return { isLoading, isAuthenticated };
 };
 
 export default useAuth;

frontend/src/hooks/useLogout.ts

@@ -2,10 +2,12 @@ import { useNavigate } from 'react-router-dom';
 import { logout } from '@/apis/auth';
 import { ADMIN_EVENT } from '@/constants/eventName';
 import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack';
+import { useAdminClubId } from '@/store/useAdminClubStore';
 
 const useLogout = () => {
   const navigate = useNavigate();
   const trackEvent = useMixpanelTrack();
+  const { setClubId } = useAdminClubId();
 
   const handleLogout = async () => {
     const confirmed = window.confirm('정말 로그아웃하시겠습니까?');
@@ -15,6 +17,7 @@ const useLogout = () => {
       await logout();
       trackEvent(ADMIN_EVENT.LOGOUT_BUTTON_CLICKED);
       localStorage.removeItem('accessToken');
+      setClubId(null);
       navigate('/admin/login', { replace: true });
     } catch {
       alert('로그아웃에 실패했습니다.');

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

@@ -10,6 +10,7 @@ import { STORAGE_KEYS } from '@/constants/storageKeys';
 import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack';
 import useTrackPageView from '@/hooks/Mixpanel/useTrackPageView';
 import useAuth from '@/hooks/useAuth';
+import { useAdminClubId } from '@/store/useAdminClubStore';
 import * as Styled from './LoginTab.styles';
 
 const LoginTab = () => {
@@ -22,6 +23,7 @@ const LoginTab = () => {
   const navigate = useNavigate();
 
   const { isAuthenticated, isLoading: authLoading } = useAuth();
+  const { setClubId } = useAdminClubId();
 
   useEffect(() => {
     if (!authLoading && isAuthenticated) {
@@ -42,6 +44,7 @@ const LoginTab = () => {
         STORAGE_KEYS.HAS_CONSENTED_PERSONAL_INFO,
         JSON.stringify(loginData.allowedPersonalInformation),
       );
+      setClubId(loginData.clubId);
       alert('로그인 성공! 관리자 페이지로 이동합니다.');
       navigate('/admin');
     } catch (error: unknown) {

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

@@ -1,22 +1,12 @@
-import { useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import Spinner from '@/components/common/Spinner/Spinner';
 import useAuth from '@/hooks/useAuth';
-import { useAdminClubId } from '@/store/useAdminClubStore';
 
 const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
-  const { isLoading, isAuthenticated, clubId } = useAuth();
-  const { clubId: storeClubId, setClubId } = useAdminClubId();
-
-  useEffect(() => {
-    if (clubId) {
-      setClubId(clubId);
-    }
-  }, [clubId, setClubId]);
+  const { isLoading, isAuthenticated } = useAuth();
 
   if (isLoading) return <Spinner />;
   if (!isAuthenticated) return <Navigate to='/admin/login' replace />;
-  if (clubId && storeClubId !== clubId) return <Spinner />;
 
   return <>{children}</>;
 };

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colors } from '@/styles/theme/colors';
+import { setTypography, typography } from '@/styles/theme/typography';
 
 export const Container = styled.div`
   display: flex;
@@ -13,33 +13,13 @@ export const RecruitPeriodContainer = styled.div`
   max-width: 706px;
 `;
 
-export const AlwaysRecruitButton = styled.button<{ $isAlwaysActive: boolean }>`
-  border-radius: 10px;
-  width: 120px;
-  height: 45px;
-  padding: 0px 16px;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
+export const AlwaysRecruitButtonWrapper = styled.div`
   flex-shrink: 0;
 
-  color: ${colors.gray[700]};
-  background-color: ${colors.gray[300]};
-  border: 1px solid ${colors.gray[500]};
-
-  ${({ $isAlwaysActive }) =>
-    $isAlwaysActive &&
-    `
-  color: ${colors.base.white};
-  background-color: ${colors.primary[800]};
-  border: none;
-  `}
-  transition:
-    background-color 0.12s ease,
-    transform 0.06s ease;
-
-  &:active {
-    transform: translateY(1px);
+  button {
+    width: 120px;
+    height: 45px;
+    ${setTypography(typography.paragraph.p2)};
   }
 `;
 

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
 import { setYear } from 'date-fns';
 import Button from '@/components/common/Button/Button';
 import InputField from '@/components/common/InputField/InputField';
-import { RECRUIT_TARGET_MAX } from '@/constants/adminFieldLimits';
+import ToggleButton from '@/components/common/ToggleButton/ToggleButton';
+import {
+  FAR_FUTURE_YEAR,
+  RECRUIT_TARGET_MAX,
+} from '@/constants/adminFieldLimits';
 import { ADMIN_EVENT, PAGE_VIEW } from '@/constants/eventName';
 import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack';
 import useTrackPageView from '@/hooks/Mixpanel/useTrackPageView';
@@ -15,8 +18,6 @@ import { recruitmentDateParser } from '@/utils/recruitmentDateParser';
 import DateTimeRangePicker from './components/DateTimeRangePicker/DateTimeRangePicker';
 import * as Styled from './RecruitEditTab.styles';
 
-const FAR_FUTURE_YEAR = 2999;
-
 const RecruitEditTab = () => {
   const trackEvent = useMixpanelTrack();
   useTrackPageView(PAGE_VIEW.RECRUITMENT_INFO_EDIT_PAGE);
@@ -153,14 +154,15 @@ const RecruitEditTab = () => {
                 onChangeRecruitmentEnd={handleEndChange}
                 disabledEnd={isAlwaysRecruiting}
               />
-              <Styled.AlwaysRecruitButton
-                type='button'
-                $isAlwaysActive={isAlwaysRecruiting}
-                onClick={toggleAlwaysRecruiting}
-                aria-pressed={isAlwaysRecruiting}
-              >
-                상시모집
-              </Styled.AlwaysRecruitButton>
+              <Styled.AlwaysRecruitButtonWrapper>
+                <ToggleButton
+                  active={isAlwaysRecruiting}
+                  onClick={toggleAlwaysRecruiting}
+                  aria-pressed={isAlwaysRecruiting}
+                >
+                  상시모집
+                </ToggleButton>
+              </Styled.AlwaysRecruitButtonWrapper>
             </Styled.RecruitPeriodContainer>
           </div>
           <InputField

frontend/src/pages/ClubDetailPage/components/AdminPeriodButton/AdminPeriodButton.styles.ts

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import { media } from '@/styles/mediaQuery';
+import { colors } from '@/styles/theme/colors';
+import { setTypography, typography } from '@/styles/theme/typography';
+import { Z_INDEX } from '@/styles/zIndex';
+
+export const ButtonArea = styled.div`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0 24px;
+  z-index: ${Z_INDEX.clubDetailFooter};
+  background: ${colors.base.white};
+  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.16);
+
+  ${media.tablet} {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 500px;
+    padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
+    background: transparent;
+    box-shadow: none;
+  }
+
+  ${media.mobile} {
+    left: 0;
+    transform: none;
+    max-width: 100%;
+  }
+`;
+
+export const StatusInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  ${setTypography(typography.paragraph.p7)};
+  color: ${colors.gray[500]};
+`;
+
+export const StatusDot = styled.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: ${colors.primary[800]};
+`;
+
+export const StatusText = styled.span`
+  color: ${colors.gray[600]};
+  font-weight: 600;
+`;
+
+export const StatusDate = styled.span`
+  color: ${colors.gray[500]};
+  font-weight: 600;
+`;
+
+export const ChangePeriodButton = styled.button`
+  width: 517px;
+  height: 60px;
+  border-radius: 14px;
+  border: 1.5px solid ${colors.primary[800]};
+  background: ${colors.base.white};
+  ${setTypography(typography.title.title5)};
+  color: ${colors.primary[800]};
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background: ${colors.primary[500]};
+  }
+
+  ${media.tablet} {
+    width: 100%;
+    height: 50px;
+    ${setTypography(typography.paragraph.p2)};
+  }
+`;