Merge pull request #159 from kakao-tech-campus-3rd-step3/fix/club-apply-button-path#158

[FIX] clubId 가 string이지 못하게 교정 (#158)

Author: aaaaaattt

src/mocks/repositories/club.ts

@@ -239,7 +239,7 @@ export const clubs: Club[] = [
 
 export const mockClubDetail: ClubDetail[] = [
   {
-    id: 1,
+    clubId: 1,
     clubName: '인터엑스',
     location: '공7 201호',
     category: '사회연구',
@@ -268,7 +268,7 @@ export const mockClubDetail: ClubDetail[] = [
     applicationNotice: '현재 지원은 휴학생을 제외한 1~3학년만 받고 있습니다.',
   },
   {
-    id: 2,
+    clubId: 2,
     clubName: '코드마스터',
     location: '공5 102호',
     category: '프로그래밍',
@@ -296,7 +296,7 @@ export const mockClubDetail: ClubDetail[] = [
     applicationNotice: '1~4학년 모두 지원 가능합니다.',
   },
   {
-    id: 3,
+    clubId: 3,
     clubName: '아트픽',
     location: '예술관 301호',
     category: '예술',
@@ -332,11 +332,11 @@ export const clubRepository = {
   },
 
   getClubDetailById: (id: number) => {
-    return mockClubDetail.find((club) => club.id === id);
+    return mockClubDetail.find((club) => club.clubId === id);
   },
 
   updateClubDetail: (id: number, updatedData: Partial<ClubDetail>) => {
-    const index = mockClubDetail.findIndex((club) => club.id === id);
+    const index = mockClubDetail.findIndex((club) => club.clubId === id);
     if (index === -1) return;
 
     mockClubDetail[index] = {

src/pages/user/ClubDetail/Page.tsx

@@ -15,12 +15,13 @@ import type { ClubDetail } from './types/clubDetail';
 
 export const ClubDetailPage = () => {
   const { clubId } = useParams<{ clubId: string }>();
+  const clubIdNumber = Number(clubId);
   const [club, setClub] = useState<ClubDetail | null>(null);
 
   useEffect(() => {
-    if (!clubId) return;
-    fetchClubDetail(clubId).then(setClub).catch(console.error);
-  }, [clubId]);
+    if (!clubIdNumber) return;
+    fetchClubDetail(clubIdNumber).then(setClub).catch(console.error);
+  }, [clubIdNumber]);
 
   if (!club) return <div>Loading...</div>;
 
@@ -46,7 +47,7 @@ export const ClubDetailPage = () => {
           regularMeetingInfo={club.regularMeetingInfo}
           recruitStatus={club.recruitStatus}
           applicationNotice={club.applicationNotice}
-          clubId={club.id}
+          clubId={club.clubId}
         />
       </ContentRight>
     </Layout>

src/pages/user/ClubDetail/api/clubDetail.ts

@@ -1,11 +1,9 @@
 import type { ClubDetail } from '../types/clubDetail';
 
-export const fetchClubDetail = async (clubId: string | number): Promise<ClubDetail> => {
-  const url = `/api/clubs/${clubId}`;
-  const response = await fetch(url);
+const BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
-  if (!response.ok) {
-    throw new Error('동아리 상세 정보를 가져오는데 실패했습니다.');
-  }
-  return response.json() as Promise<ClubDetail>;
+export const fetchClubDetail = async (clubId: number): Promise<ClubDetail> => {
+  const res = await fetch(`${BASE_URL}/clubs/${clubId}`);
+  if (!res.ok) throw new Error('동아리 상세 정보를 가져오는데 실패했습니다.');
+  return res.json() as Promise<ClubDetail>;
 };

src/pages/user/ClubDetail/components/ClubInfoSidebarSection/index.tsx

@@ -5,6 +5,7 @@ import type { ClubDetail } from '@/pages/user/ClubDetail/types/clubDetail';
 
 type ClubInfoSidebarSectionProps = Pick<
   ClubDetail,
+  | 'clubId'
   | 'presidentName'
   | 'presidentPhoneNumber'
   | 'location'
@@ -13,11 +14,10 @@ type ClubInfoSidebarSectionProps = Pick<
   | 'regularMeetingInfo'
   | 'recruitStatus'
   | 'applicationNotice'
-> & {
-  clubId: number | string;
-};
+>;
 
 export const ClubInfoSidebarSection = ({
+  clubId,
   presidentName,
   presidentPhoneNumber,
   location,
@@ -26,7 +26,6 @@ export const ClubInfoSidebarSection = ({
   regularMeetingInfo,
   recruitStatus,
   applicationNotice,
-  clubId,
 }: ClubInfoSidebarSectionProps) => {
   return (
     <SidebarContainer>

src/pages/user/ClubDetail/types/clubDetail.ts

@@ -1,7 +1,7 @@
 export type RecruitStatus = '모집중' | '모집 준비중' | '모집 종료';
 
 export type ClubDetail = {
-  id: number;
+  clubId: number;
   clubName: string;
   location: string;
   category: string;