[feat] 최근 본 동아리 조회 기능 구현

apps/web/src/apis/clubDetail/entity.ts

@@ -1,5 +1,11 @@
+import type { ClubCategory } from '@/apis/common/club';
+
 import type { UniversitySummary } from '../universityClub/entity';
-export type ClubCategory = 'ACADEMIC' | 'SPORTS' | 'HOBBY' | 'RELIGION' | 'PERFORMANCE' | 'JUNIOR';
+
+export interface ClubDetailUniversitySummary extends UniversitySummary {
+  clubCount: number;
+}
+
 export interface ClubDetailResponse {
   id: number;
   name: string;
@@ -10,5 +16,5 @@ export interface ClubDetailResponse {
   description: string;
   introduce: string;
   location: string;
-  university: UniversitySummary;
+  university: ClubDetailUniversitySummary;
 }

apps/web/src/apis/common/club.ts

@@ -0,0 +1,16 @@
+export const CLUB_CATEGORY = {
+  ACADEMIC: 'ACADEMIC',
+  SPORTS: 'SPORTS',
+  HOBBY: 'HOBBY',
+  RELIGION: 'RELIGION',
+  PERFORMANCE: 'PERFORMANCE',
+  JUNIOR: 'JUNIOR',
+} as const;
+
+export type ClubCategory = (typeof CLUB_CATEGORY)[keyof typeof CLUB_CATEGORY];
+
+export const CLUB_CATEGORY_VALUES = Object.values(CLUB_CATEGORY);
+
+export function isClubCategory(value: string | null | undefined): value is ClubCategory {
+  return typeof value === 'string' && CLUB_CATEGORY_VALUES.includes(value as ClubCategory);
+}

apps/web/src/apis/recentClub/entity.ts

@@ -0,0 +1,19 @@
+import type { ClubCategory } from '@/apis/common/club';
+
+export interface RecentClubRequestParams {
+  clubIds: number[];
+}
+
+export interface RecentClub {
+  id: number;
+  name: string;
+  imageUrl: string;
+  category: ClubCategory;
+  categoryName: string;
+  topic: string;
+  description: string;
+}
+
+export interface RecentClubResponse {
+  clubs: RecentClub[];
+}

apps/web/src/apis/recentClub/index.ts

@@ -0,0 +1,9 @@
+import { apiClient } from '../client';
+import type { RecentClubRequestParams, RecentClubResponse } from './entity';
+
+export const getRecentClubs = async (clubIds: number[]) => {
+  const response = await apiClient.get<RecentClubResponse, RecentClubRequestParams>('konect/clubs/recent', {
+    params: { clubIds },
+  });
+  return response;
+};

apps/web/src/apis/recentClub/queries.ts

@@ -0,0 +1,16 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { getRecentClubs } from '.';
+
+export const recentClubQueryKeys = {
+  all: ['recentClub'] as const,
+  list: (clubIds: number[]) => [...recentClubQueryKeys.all, clubIds] as const,
+};
+
+export const recentClubQueries = {
+  list: (clubIds: number[]) =>
+    queryOptions({
+      queryKey: recentClubQueryKeys.list(clubIds),
+      queryFn: () => getRecentClubs(clubIds),
+    }),
+};

apps/web/src/apis/universityClub/entity.ts

@@ -1,7 +1,6 @@
+import type { ClubCategory } from '@/apis/common/club';
 import type { Region } from '@/apis/home/entity';
 
-export type ClubCategory = 'ACADEMIC' | 'SPORTS' | 'HOBBY' | 'RELIGION' | 'PERFORMANCE' | 'JUNIOR';
-
 export interface UniversityClubListRequestParams {
   page?: number;
   limit?: number;
@@ -16,7 +15,6 @@ export interface UniversitySummary {
   region: Region;
   regionName: string;
   imageUrl: string;
-  clubCount?: number;
 }
 
 export interface ClubCategorySummary {
@@ -31,8 +29,8 @@ export interface UniversityClub {
   imageUrl: string;
   category: ClubCategory;
   categoryName: string;
+  topic: string;
   description: string;
-  memberCount: number;
 }
 
 export interface UniversityClubListResponse {

apps/web/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,49 @@
+import { Fragment } from 'react';
+import { cn } from '@konect/utils/cn';
+import { Link } from 'react-router-dom';
+
+interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav
+      className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-2xl sm:leading-10"
+      aria-label="breadcrumb"
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <Fragment key={`${item.label}-${index}`}>
+            {item.to && !isLast ? (
+              <Link className="hover:text-primary-600 transition-colors" to={item.to}>
+                {item.label}
+              </Link>
+            ) : (
+              <span
+                className={cn(isLast && 'text-text-600 min-w-0 truncate font-semibold')}
+                aria-current={isLast ? 'page' : undefined}
+              >
+                {item.label}
+              </span>
+            )}
+            {!isLast && (
+              <span className="text-text-300 text-lg sm:text-[20px]" aria-hidden="true">
+                ›
+              </span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+}
+
+export default Breadcrumb;

apps/web/src/components/RecentClubCard/index.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@konect/utils/cn';
+import { Link } from 'react-router-dom';
+
+import type { RecentClub } from '@/apis/recentClub/entity';
+import { CATEGORY_TEXT_COLORS } from '@/constants/club';
+
+interface RecentClubCardProps {
+  club: RecentClub;
+}
+
+function RecentClubCard({ club }: RecentClubCardProps) {
+  return (
+    <Link
+      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex w-full items-center gap-7 overflow-hidden rounded-[20px] border bg-white px-5.5 py-5 transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
+      to={`/clubs/${club.id}`}
+    >
+      <img className="size-12.5 shrink-0 rounded-full object-cover" src={club.imageUrl} alt="" />
+      <span className="min-w-0">
+        <span className="block truncate leading-10 font-semibold text-black">{club.name}</span>
+        <span className="flex min-w-0 items-center gap-2 text-[13px] leading-10">
+          <span className={cn('shrink-0 font-semibold', CATEGORY_TEXT_COLORS[club.category])}>{club.categoryName}</span>
+          <span className="bg-text-200 size-1 rounded-full" aria-hidden="true" />
+          <span className="text-text-600 min-w-0 truncate font-medium">{club.topic || club.description}</span>
+        </span>
+      </span>
+    </Link>
+  );
+}
+
+export default RecentClubCard;

apps/web/src/components/RecentClubList/index.tsx

@@ -0,0 +1,57 @@
+import { cn } from '@konect/utils/cn';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { recentClubQueries } from '@/apis/recentClub/queries';
+import RecentClubCard from '@/components/RecentClubCard';
+import { useRecentClubIds } from '@/utils/recentClubStorage';
+
+interface RecentClubListProps {
+  className: string;
+  emptyClassName?: string;
+}
+
+function RecentClubList({ className, emptyClassName }: RecentClubListProps) {
+  const recentClubIds = useRecentClubIds();
+
+  if (recentClubIds.length === 0) {
+    return <RecentClubListMessage className={emptyClassName} message="최근에 본 동아리가 없어요." />;
+  }
+
+  return <RecentClubListContent className={className} emptyClassName={emptyClassName} recentClubIds={recentClubIds} />;
+}
+
+function RecentClubListContent({
+  className,
+  emptyClassName,
+  recentClubIds,
+}: RecentClubListProps & { recentClubIds: number[] }) {
+  const { data } = useSuspenseQuery(recentClubQueries.list(recentClubIds));
+  const recentClubs = data.clubs;
+
+  if (recentClubs.length === 0) {
+    return <RecentClubListMessage className={emptyClassName} message="최근에 본 동아리가 없어요." />;
+  }
+
+  return (
+    <div className={className}>
+      {recentClubs.map((club) => (
+        <RecentClubCard key={club.id} club={club} />
+      ))}
+    </div>
+  );
+}
+
+function RecentClubListMessage({ className, message }: { className?: string; message: string }) {
+  return (
+    <p
+      className={cn(
+        'border-primary-200 text-text-400 bg-web-background rounded-[20px] border px-6 py-8 text-center text-[16px] leading-7',
+        className
+      )}
+    >
+      {message}
+    </p>
+  );
+}
+
+export default RecentClubList;

apps/web/src/constants/club.ts

@@ -1,10 +1,10 @@
-import type { ClubCategory } from '@/apis/universityClub/entity';
+import { CLUB_CATEGORY, type ClubCategory } from '@/apis/common/club';
 
 export const CATEGORY_TEXT_COLORS: Record<ClubCategory, string> = {
-  ACADEMIC: 'text-primary-500',
-  SPORTS: 'text-info-600',
-  HOBBY: 'text-danger-600',
-  RELIGION: 'text-warning-700',
-  PERFORMANCE: 'text-[#cd3bf6]',
-  JUNIOR: 'text-success-700',
+  [CLUB_CATEGORY.ACADEMIC]: 'text-primary-500',
+  [CLUB_CATEGORY.SPORTS]: 'text-info-600',
+  [CLUB_CATEGORY.HOBBY]: 'text-danger-600',
+  [CLUB_CATEGORY.RELIGION]: 'text-warning-700',
+  [CLUB_CATEGORY.PERFORMANCE]: 'text-[#cd3bf6]',
+  [CLUB_CATEGORY.JUNIOR]: 'text-success-700',
 };

apps/web/src/pages/ClubDetail/index.tsx

@@ -1,12 +1,16 @@
+import { useEffect } from 'react';
 import { cn } from '@konect/utils/cn';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { clubDetailQueries } from '@/apis/clubDetail/queries';
 import AddMov from '@/assets/add-mov.svg';
 import AddPhoto from '@/assets/add-photo.svg';
 import NoneImage from '@/assets/None-image.png';
+import Breadcrumb from '@/components/Breadcrumb';
+import RecentClubList from '@/components/RecentClubList';
 import { CATEGORY_TEXT_COLORS } from '@/constants/club';
+import { saveRecentClubId } from '@/utils/recentClubStorage';
 
 function Introduce({ introduce }: { introduce: string }) {
   return (
@@ -48,16 +52,20 @@ export default function ClubDetail() {
   const { clubId } = useParams();
   const { data: clubDetail } = useSuspenseQuery(clubDetailQueries.detail(Number(clubId)));
 
+  useEffect(() => {
+    saveRecentClubId(clubDetail.id);
+  }, [clubDetail.id]);
+
   return (
     <main className="bg-web-background min-h-screen text-black">
       <div className="mx-auto flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-25.5 xl:px-0">
-        <nav className="text-text-400 flex items-center gap-3 text-sm leading-8 font-semibold sm:gap-3.5 sm:text-[24px] sm:leading-10">
-          <Link to="/">홈</Link>
-          <span className="text-text-300 text-lg sm:text-[20px]">›</span>
-          <Link to={`/universities/${clubDetail.university.id}/clubs`}>대학교 동아리</Link>
-          <span className="text-text-300 text-lg sm:text-[20px]">›</span>
-          <span className="text-text-600 text-2xl font-semibold">{clubDetail.name}</span>
-        </nav>
+        <Breadcrumb
+          items={[
+            { label: '홈', to: '/' },
+            { label: '대학교 동아리', to: `/universities/${clubDetail.university.id}/clubs` },
+            { label: clubDetail.name },
+          ]}
+        />
         <div className="mt-10 grid gap-8 lg:mt-15 lg:grid-cols-[407px_minmax(0,1050px)] lg:gap-5">
           <aside className="flex flex-col gap-6 lg:gap-10">
             <section className="border-text-100 flex h-55 items-center justify-center rounded-4xl border bg-white px-8 py-8 text-center sm:h-66 sm:rounded-[40px] sm:px-21 sm:py-10">
@@ -73,6 +81,7 @@ export default function ClubDetail() {
             </section>
             <section className="border-text-100 rounded-4xl border bg-white px-5 py-7 sm:rounded-[40px] sm:px-10 sm:py-11">
               <h2 className="text-text-600 text-[24px] leading-10 font-medium">최근에 본 동아리</h2>
+              <RecentClubList className="mt-10 flex flex-col gap-5" />
             </section>
           </aside>
           <div className="flex flex-col gap-10">