[feature] 관리자페이지 수정하기 api 연동

frontend/src/apis/updateClubDescription.ts

@@ -0,0 +1,36 @@
+import API_BASE_URL from '@/constants/api';
+import { ClubDescription } from '@/types/club';
+
+export const updateClubDescription = async (
+  updatedData: ClubDescription,
+): Promise<void> => {
+  const response = await fetch(`${API_BASE_URL}/api/club/description`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(updatedData),
+  });
+
+  if (!response.ok) {
+    let errorMessage = `Failed to update club (HTTP ${response.status})`;
+
+    try {
+      const errorResult = await response.json();
+      if (errorResult?.message) {
+        errorMessage += `: ${errorResult.message}`;
+      }
+    } catch (error) {
+      console.error('📌 오류 응답 JSON 파싱 실패:', error);
+    }
+
+    throw new Error(errorMessage);
+  }
+
+  try {
+    await response.json();
+  } catch (error) {
+    console.error('📌 JSON 파싱 실패:', error);
+    throw new Error('Invalid JSON response from API');
+  }
+};

frontend/src/apis/updateClubDetail.ts

@@ -0,0 +1,35 @@
+import API_BASE_URL from '@/constants/api';
+import { ClubDetail } from '@/types/club';
+
+export const updateClubDetail = async (
+  updatedData: Partial<ClubDetail>,
+): Promise<void> => {
+  const response = await fetch(`${API_BASE_URL}/api/club/info`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(updatedData),
+  });
+
+  let result;
+  try {
+    result = await response.json();
+  } catch (error) {
+    console.error('📌 JSON 파싱 실패:', error);
+    result = null;
+  }
+
+  if (!response.ok) {
+    const errorMessage = result?.message
+      ? `Failed to update club (HTTP ${response.status}): ${result.message}`
+      : `Failed to update club (HTTP ${response.status})`;
+
+    throw new Error(errorMessage);
+  }
+
+  if (!result?.data) {
+    console.error('📌 API 응답에 data 필드가 없음:', result);
+    throw new Error('Unexpected API response: Missing data field');
+  }
+};

frontend/src/components/common/Button/Button.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 
-interface ButtonProps {
+export interface ButtonProps {
   width?: string;
   children: React.ReactNode;
   onClick: () => void;
+  animated?: boolean;
 }
 
+const pulse = keyframes`
+  0% { transform: scale(1); background-color: #3a3a3a; }
+  50% { transform: scale(1.05); background-color: #505050; }
+  100% { transform: scale(1); background-color: #3a3a3a; }
+`;
+
 const StyledButton = styled.button<ButtonProps>`
   background-color: #3a3a3a;
   color: #ffffff;
@@ -21,11 +28,26 @@ const StyledButton = styled.button<ButtonProps>`
 
   &:hover {
     background-color: #333333;
+    ${({ animated }) =>
+      animated &&
+      css`
+        animation: ${pulse} 0.4s ease-in-out;
+      `}
+  }
+
+  &:active {
+    transform: ${({ animated }) => (animated ? 'scale(0.95)' : 'none')};
   }
 `;
 
-const Button = ({ width, children, onClick }: ButtonProps) => (
-  <StyledButton width={width} onClick={onClick}>
+
+const Button = ({
+  width,
+  children,
+  onClick,
+  animated = false,
+}: ButtonProps) => (
+  <StyledButton width={width} onClick={onClick} animated={animated}>
     {children}
   </StyledButton>
 );

frontend/src/hooks/queries/club/useGetClubDetail.ts

@@ -1,8 +1,9 @@
 import { getClubDetail } from '@/apis/getClubDetail';
 import { useQuery } from '@tanstack/react-query';
+import { ClubDetail } from '@/types/club';
 
 export const useGetClubDetail = (clubId: string) => {
-  return useQuery({
+  return useQuery<ClubDetail>({
     queryKey: ['clubDetail', clubId],
     queryFn: () => getClubDetail(clubId as string),
     enabled: !!clubId,

frontend/src/hooks/queries/club/useUpdateClubDescription.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateClubDescription } from '@/apis/updateClubDescription';
+import { ClubDescription } from '@/types/club';
+
+export const useUpdateClubDescription = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedData: ClubDescription) =>
+      updateClubDescription(updatedData),
+
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['clubDetail'],
+      });
+    },
+
+    onError: (error) => {
+      console.error('Error updating club detail:', error);
+    },
+  });
+};

frontend/src/hooks/queries/club/useUpdateClubDetail.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateClubDetail } from '@/apis/updateClubDetail';
+import { ClubDetail } from '@/types/club';
+
+export const useUpdateClubDetail = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updatedData: Partial<ClubDetail>) =>
+      updateClubDetail(updatedData),
+
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['clubDetail'],
+      });
+    },
+
+    onError: (error) => {
+      console.error('Error updating club detail:', error);
+    },
+  });
+};

frontend/src/pages/AdminPage/AdminPage.tsx

@@ -4,16 +4,28 @@ import { PageContainer } from '@/styles/PageContainer.styles';
 import SideBar from '@/pages/AdminPage/components/SideBar/SideBar';
 import { Outlet } from 'react-router-dom';
 import * as Styled from './AdminPage.styles';
+import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail';
 
 const AdminPage = () => {
+  const {
+    data: clubDetail,
+    isLoading,
+    error,
+  } = useGetClubDetail('67d2e3b9b15c136c6acbf20b');
+
+  if (!clubDetail) {
+    return <div>Loading...</div>;
+  }
+  if (error) return <p>Error: {error.message}</p>;
+
   return (
     <>
       <Header />
       <PageContainer>
         <Styled.AdminPageContainer>
-          <SideBar />
+          <SideBar clubName={clubDetail?.name || ''} />
           <Styled.Content>
-            <Outlet />
+            <Outlet context={clubDetail} />
           </Styled.Content>
         </Styled.AdminPageContainer>
       </PageContainer>

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

@@ -3,13 +3,17 @@ import * as Styled from './SideBar.styles';
 import defaultLogo from '@/assets/images/logos/default_profile_image.svg';
 import { useNavigate, useLocation } from 'react-router-dom';
 
+interface SideBarProps {
+  clubName: string;
+}
+
 const tabs = [
   { label: '동아리 정보 및 태그', path: '/admin/club-info' },
   { label: '소개 정보 수정', path: '/admin/recruit-edit' },
   { label: '회원 정보 관리', path: '/admin/account-edit' },
 ];
 
-const SideBar = () => {
+const SideBar = ({ clubName }: SideBarProps) => {
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -22,7 +26,7 @@ const SideBar = () => {
     <Styled.SidebarWrapper>
       <Styled.SidebarHeader>설정</Styled.SidebarHeader>
       <Styled.ClubLogo src={defaultLogo} alt='Club Logo' />
-      <Styled.ClubTitle>WAP</Styled.ClubTitle>
+      <Styled.ClubTitle>{clubName}</Styled.ClubTitle>
       <Styled.divider />
 
       <Styled.SidebarButtonContainer>

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

@@ -1,5 +1,11 @@
 import styled from 'styled-components';
 
+export const TitleButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
 export const InfoTitle = styled.h2`
   font-size: 1.5rem;
   font-weight: bold;

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

@@ -1,32 +1,98 @@
 import React, { useState, useEffect } from 'react';
+import * as Styled from './ClubInfoEditTab.styles';
 import InputField from '@/components/common/InputField/InputField';
 import SelectTags from '@/pages/AdminPage/components/SelectTags/SelectTags';
 import MakeTags from '@/pages/AdminPage/components/MakeTags/MakeTags';
-import * as Styled from './ClubInfoEditTab.styles';
+import Button from '@/components/common/Button/Button';
+import { useOutletContext } from 'react-router-dom';
+import { ClubDetail } from '@/types/club';
+import { useUpdateClubDetail } from '@/hooks/queries/club/useUpdateClubDetail';
+import { parseRecruitmentPeriod } from '@/utils/stringToDate';
 
 const ClubInfoEditTab = () => {
-  //TODO: 추후 API 연동 시, 기존 정보 불러와서 초기화
+  const clubDetail = useOutletContext<ClubDetail | null>();
+  const { mutate: updateClub } = useUpdateClubDetail();
+
   const [clubName, setClubName] = useState('');
   const [clubPresidentName, setClubPresidentName] = useState('');
-  const [introduction, setIntroduction] = useState('');
   const [telephoneNumber, setTelephoneNumber] = useState('');
-  const [selectedClassification, setSelectedClassification] =
-    useState<string>('중등');
-  const [selectedDivision, setSelectedDivision] = useState<string>('학술');
+  const [introduction, setIntroduction] = useState('');
+  const [selectedDivision, setSelectedDivision] = useState<string>('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [clubTags, setClubTags] = useState<string[]>(() => ['', '']);
 
-  const categories = ['중등', '과동'];
-  const tags = ['봉사', '종교', '취미교양', '학술', '운동', '공연'];
+  const divisions = ['중동', '과동'];
+  const categories = ['봉사', '종교', '취미교양', '학술', '운동', '공연'];
 
   useEffect(() => {
-    if (clubTags.length < 2) {
-      setClubTags((prevTags) => [...prevTags, ''].slice(0, 2));
+    if (clubDetail) {
+      // [x] FIXME: 동아리회장 이름, 번호 필드명 수정해야 함
+      setClubName(clubDetail.name);
+      setClubPresidentName(clubDetail.clubPresidentName);
+      setTelephoneNumber(clubDetail.telephoneNumber);
+      setIntroduction(clubDetail.introduction);
+      setSelectedDivision(clubDetail.division);
+      setSelectedCategory(clubDetail.category);
+      setClubTags(
+        clubDetail.tags.length >= 2
+          ? clubDetail.tags
+          : [...clubDetail.tags, ''],
+      );
     }
-  }, [clubTags]);
+  }, [clubDetail]);
+
+  const handleUpdateClub = () => {
+    if (!clubDetail) return;
+
+    const { recruitmentStart, recruitmentEnd } = clubDetail.recruitmentPeriod
+      ? parseRecruitmentPeriod(clubDetail.recruitmentPeriod)
+      : { recruitmentStart: null, recruitmentEnd: null };
+
+    const recruitmentStartISO = recruitmentStart
+      ? recruitmentStart.toISOString()
+      : null;
+
+    const recruitmentEndISO = recruitmentEnd
+      ? recruitmentEnd.toISOString()
+      : null;
+
+    const updatedData: Omit<Partial<ClubDetail>, 'id'> & {
+      clubId: string;
+      recruitmentStart: string | null;
+      recruitmentEnd: string | null;
+    } = {
+      clubId: clubDetail.id,
+      name: clubName,
+      category: selectedCategory,
+      division: selectedDivision,
+      tags: clubTags,
+      introduction: introduction,
+      clubPresidentName: clubPresidentName,
+      telephoneNumber: telephoneNumber,
+      recruitmentStart: recruitmentStartISO,
+      recruitmentEnd: recruitmentEndISO,
+      recruitmentTarget: clubDetail.recruitmentTarget,
+    };
+
+    updateClub(updatedData, {
+      onSuccess: () => {
+        alert('동아리 정보가 성공적으로 수정되었습니다.');
+      },
+      onError: (error) => {
+        alert(`동아리 정보 수정에 실패했습니다: ${error.message}`);
+      },
+    });
+  };
 
   return (
     <>
-      <Styled.InfoTitle>동아리 정보 수정</Styled.InfoTitle>
+      <Styled.TitleButtonContainer>
+        <Styled.InfoTitle>동아리 정보 수정</Styled.InfoTitle>
+        <Button width={'150px'} animated onClick={handleUpdateClub}>
+          수정하기
+        </Button>
+      </Styled.TitleButtonContainer>
+
       <Styled.InfoGroup>
         <InputField
           label='동아리 명'
@@ -68,7 +134,7 @@ const ClubInfoEditTab = () => {
           label='한줄소개'
           placeholder='한줄소개를 입력해주세요'
           type='text'
-          maxLength={40}
+          maxLength={20}
           showMaxChar={true}
           value={introduction}
           onChange={(e) => setIntroduction(e.target.value)}
@@ -77,16 +143,16 @@ const ClubInfoEditTab = () => {
 
         <SelectTags
           label='분류'
-          tags={categories}
-          selected={selectedClassification}
-          onChange={setSelectedClassification}
+          tags={divisions}
+          selected={selectedDivision}
+          onChange={setSelectedDivision}
         />
 
         <SelectTags
           label='분과'
-          tags={tags}
-          selected={selectedDivision}
-          onChange={setSelectedDivision}
+          tags={categories}
+          selected={selectedCategory}
+          onChange={setSelectedCategory}
         />
 
         <MakeTags value={clubTags} onChange={setClubTags} />