동아리 상세 페이지 탭 정보 리팩토링

src/domains/club/introduction/api/useClubIntro.ts

@@ -1,36 +1,19 @@
 import { apiRequest } from '@/api/apiRequest';
+import {
+    ClubDetailResponse,
+    ClubRecruitmentResponse,
+    ClubScheduleResponse,
+} from '@/api/data-contracts';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
-interface ApiClubIntroductionResponse {
-    introduction: string;
-    activity: string;
-}
-
-type Schedule = {
-    month: string;
-    content: string;
-};
-
-interface ApiClubScheduleResponse {
-    schedules: Schedule[];
-}
-
-export interface ApiClubInfoResponse {
-    leaderName: string;
-    leaderEmail: string;
-    leaderPhone: string;
-    activities: string;
-    membershipFee: string;
-    snsUrl: string;
-}
-
 interface UseClubApiOptions {
-    clubId: string;
+    clubId?: string;
     isPreview: boolean;
-    endpoint: string;
+    endpoint?: string;
     errorMessage: string;
 }
+
 export const useClubApi = <T>({
     clubId,
     isPreview,
@@ -44,7 +27,9 @@ export const useClubApi = <T>({
                 ? `/api/clubs/club-admin/${clubId}`
                 : `/api/clubs/${clubId}`;
             const suffix = isPreview ? '/draft' : '';
-            const requestUrl = `${baseUrl}/${endpoint}${suffix}`;
+            const requestUrl = endpoint
+                ? `${baseUrl}/${endpoint}${suffix}`
+                : `${baseUrl}${suffix}`;
 
             const response = await apiRequest({
                 url: requestUrl,
@@ -69,26 +54,34 @@ export const useIsPreview = () => {
     return { nowUrl, id, isPreview };
 };
 
-export const useClubIntroduction = (clubId: string, isPreview: boolean) =>
-    useClubApi<ApiClubIntroductionResponse>({
-        clubId,
-        isPreview,
-        endpoint: 'introduction',
-        errorMessage: '동아리 소개 조회 실패',
-    });
+interface ClubDetailHookProps {
+    clubId?: string;
+    isPreview: boolean;
+}
 
-export const useClubSchedules = (clubId: string, isPreview: boolean) =>
-    useClubApi<ApiClubScheduleResponse>({
+export const useClubSchedules = ({ clubId, isPreview }: ClubDetailHookProps) =>
+    useClubApi<ClubScheduleResponse>({
         clubId,
         isPreview,
         endpoint: 'schedules',
         errorMessage: '동아리 스케줄 조회 실패',
     });
 
-export const useClubInfo = (clubId: string, isPreview: boolean) =>
-    useClubApi<ApiClubInfoResponse>({
+export const useClubInfo = ({ clubId, isPreview }: ClubDetailHookProps) =>
+    useClubApi<ClubDetailResponse>({
         clubId,
         isPreview,
         endpoint: 'info',
         errorMessage: '동아리 정보 조회 실패',
     });
+
+export const useClubRecruitment = ({
+    clubId,
+    isPreview,
+}: ClubDetailHookProps) =>
+    useClubApi<ClubRecruitmentResponse>({
+        clubId,
+        isPreview,
+        endpoint: 'recruitment',
+        errorMessage: '동아리 모집 상태 불러오기 실패',
+    });

src/domains/club/introduction/ui/public/ClubDetailDefaultInfo.tsx

@@ -0,0 +1,38 @@
+import { ClubDetailResponse } from '@/api/data-contracts';
+import {
+    CLUB_INFO_META,
+    DISPLAY_ORDER,
+} from '@/domains/shared/constants/club-info.constants';
+import { formatClubInfo } from '@/domains/shared/lib/formatClubInfo';
+
+export default function ClubDetailDefaultInfo({
+    data,
+}: {
+    data?: ClubDetailResponse;
+}) {
+    if (!data) return null;
+    return (
+        <div className="flex flex-col gap-1.5">
+            {DISPLAY_ORDER.map((key) => {
+                const rawValue = data[key];
+                if (!rawValue) return null;
+
+                const { icon, label } = CLUB_INFO_META[key];
+
+                return (
+                    <div key={key} className="flex gap-2.5 items-start">
+                        <div className="w-18 flex gap-1 items-center shrink-0">
+                            <div className="w-4 h-4">{icon}</div>
+                            <span className="text-b3 text-neutral-400">
+                                {label}
+                            </span>
+                        </div>
+                        <span className="text-b4 text-neutral-600 break-all">
+                            {formatClubInfo(key, rawValue)}
+                        </span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

src/domains/club/introduction/ui/public/Intro.tsx

@@ -0,0 +1,32 @@
+import {
+    useClubApi,
+    useIsPreview,
+} from '@/domains/club/introduction/api/useClubIntro';
+import { ClubDetailResponse } from '@/api/data-contracts';
+import ClubDetailDefaultInfo from '@/domains/club/introduction/ui/public/ClubDetailDefaultInfo';
+import ClubDetailCard from '@/domains/shared/components/layout/ClubDetailCard';
+import ClubDetailText from '@/domains/shared/components/club-detail-info/ClubDetailText';
+
+export default function Intro() {
+    const { id, isPreview } = useIsPreview();
+
+    // TODO isLoading 전달
+    const { data } = useClubApi<ClubDetailResponse>({
+        clubId: id,
+        isPreview,
+        errorMessage: '정보 조회 실패',
+    });
+
+    return (
+        <section className="flex flex-col gap-2.5">
+            <ClubDetailCard title="동아리 기본 정보">
+                {/* TODO isLoading 전달 */}
+                <ClubDetailDefaultInfo data={data} />
+            </ClubDetailCard>
+
+            <ClubDetailCard title="동아리 소개">
+                <ClubDetailText text={data?.description} />
+            </ClubDetailCard>
+        </section>
+    );
+}

src/domains/club/recruitment/ui/public/Recruit.tsx

@@ -1,19 +1,30 @@
-import ContentBlock from '../../../../shared/components/card/ContentBlock';
-import { useClubDetail } from '@/domains/club/profile/model/useClubDetail';
-import { useClubRecruit } from '@/domains/club/recruitment/api/useClubRecruit';
+import {
+    useClubRecruitment,
+    useIsPreview,
+} from '@/domains/club/introduction/api/useClubIntro';
+import ClubDetailText from '@/domains/shared/components/club-detail-info/ClubDetailText';
+import ClubDetailCard from '@/domains/shared/components/layout/ClubDetailCard';
 
 export default function Recruit() {
-    const { clubId, isPreview } = useClubDetail();
-    const { data } = useClubRecruit(clubId || '', isPreview);
+    const { id, isPreview } = useIsPreview();
+    const { data } = useClubRecruitment({ clubId: id, isPreview });
     return (
-        <section className="flex flex-col gap-[10px]">
-            <ContentBlock title="모집기간" content={data?.due} />
-            <ContentBlock title="모집대상" content={data?.target} />
-            <ContentBlock title="유의사항" content={data?.notice} />
-            <ContentBlock
-                title="💡 기타 동아리 모집 안내"
-                content={data?.etc}
-            />
+        <section className="flex flex-col gap-2.5">
+            <ClubDetailCard title="모집기간">
+                <ClubDetailText text={data?.due} />
+            </ClubDetailCard>
+
+            <ClubDetailCard title="모집대상">
+                <ClubDetailText text={data?.target} />
+            </ClubDetailCard>
+
+            <ClubDetailCard title="유의사항">
+                <ClubDetailText text={data?.notice} />
+            </ClubDetailCard>
+
+            <ClubDetailCard title="기타 동아리 모집 관련">
+                <ClubDetailText text={data?.etc} />
+            </ClubDetailCard>
         </section>
     );
 }