[Feat] BDYFE-189 카드 리스트 공통 컴포넌트 구현

src/app/globals.css

@@ -2,4 +2,5 @@
 
 @import '../styles/colors.css';
 @import '../styles/typography.css';
+@import '../styles/animations.css';
 @import '../styles/base.css';

src/domains/home/components/bookmark-container/bookmark-container.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react';
 
 import { cn } from '@/lib/cn';
-import { BookmarkIcon } from '@/shared/components/icons';
+import { BookmarkButton } from '@/shared/components/ui';
 
 type BookmarkOverlayVariant = 'card' | 'summary';
 
@@ -29,24 +29,11 @@ export const BookmarkContainer = ({
     <div className="relative w-full">
       {children}
 
-      <button
-        type="button"
-        className={cn(
-          'absolute',
-          bookmarkPosition[variant],
-          isBookmarked ? 'text-mint-300' : 'text-gray-200',
-        )}
-        aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}
-        aria-pressed={isBookmarked}
-        onClick={(event) => {
-          event.stopPropagation();
-          onBookmarkClick();
-        }}
-      >
-        <BookmarkIcon
-          className={cn('size-6', isBookmarked && 'fill-current')}
-        />
-      </button>
+      <BookmarkButton
+        isBookmarked={isBookmarked}
+        className={cn('absolute', bookmarkPosition[variant])}
+        onClick={onBookmarkClick}
+      />
     </div>
   );
 };

src/domains/posts/components/post-detail-profile-header/post-detail-profile-header.tsx

@@ -8,11 +8,9 @@ import { POST_MUTATION_OPTIONS } from '@/domains/posts/api/query';
 import { PostRecruitmentStatusBottomSheet } from '@/domains/posts/components/post-recruitment-status-bottom-sheet/post-recruitment-status-bottom-sheet';
 import { PostRecruitmentStatusButton } from '@/domains/posts/components/post-recruitment-status-button/post-recruitment-status-button';
 import type { PostRecruitmentStatusTypes } from '@/domains/posts/model/post-recruitment-status';
-import { cn } from '@/lib/cn';
 import { POST_QUERY_KEY, RECOMMENDATION_QUERY_KEY } from '@/shared/api';
 import { defaultProfileImage } from '@/shared/assets/illustrations';
-import { BookmarkIcon } from '@/shared/components/icons';
-import { useToast } from '@/shared/components/ui';
+import { BookmarkButton, useToast } from '@/shared/components/ui';
 import { CommonImage } from '@/shared/components/ui/common-image/common-image';
 import { ROUTES } from '@/shared/config';
 
@@ -146,20 +144,11 @@ export const PostDetailProfileHeader = ({
           />
         </>
       ) : (
-        <button
-          aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}
-          aria-pressed={isBookmarked}
-          className={cn(
-            'flex size-12 shrink-0 items-center justify-center',
-            isBookmarked ? 'text-mint-300' : 'text-gray-500',
-          )}
-          type="button"
+        <BookmarkButton
+          isBookmarked={isBookmarked}
+          className={isBookmarked ? 'size-12' : 'size-12 text-gray-500'}
           onClick={handleBookmarkClick}
-        >
-          <BookmarkIcon
-            className={cn('size-6', isBookmarked && 'fill-current')}
-          />
-        </button>
+        />
       )}
     </header>
   );

src/shared/components/ui/bookmark-button/bookmark-button.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import { BookmarkIcon } from '@/shared/components/icons';
+
+interface BookmarkButtonProps {
+  isBookmarked: boolean;
+  onClick: () => void;
+  className?: string;
+}
+
+export const BookmarkButton = ({
+  isBookmarked,
+  onClick,
+  className,
+}: BookmarkButtonProps) => {
+  return (
+    <button
+      type="button"
+      aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}
+      aria-pressed={isBookmarked}
+      className={cn(
+        'focus-visible:outline-mint-300 flex shrink-0 items-center justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',
+        isBookmarked ? 'text-mint-300' : 'text-gray-200',
+        className,
+      )}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+    >
+      <BookmarkIcon className={cn('size-6', isBookmarked && 'fill-current')} />
+    </button>
+  );
+};

src/shared/components/ui/card-list/card-list-skeleton.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/cn';
+import { Skeleton } from '@/shared/components/ui/skeleton/skeleton';
+
+const SKELETON_IMAGE_KEYS = [1, 2, 3, 4] as const;
+
+interface CardListSkeletonProps {
+  className?: string;
+}
+
+export const CardListSkeleton = ({ className }: CardListSkeletonProps) => {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'flex w-full min-w-0 flex-col items-start gap-3 overflow-clip',
+        className,
+      )}
+    >
+      <div className="flex w-52 flex-col items-start gap-1">
+        <Skeleton className="my-0.5 h-5 w-full rounded-[3px]" />
+        <Skeleton className="my-0.5 h-3.5 w-3/4 rounded-[3px]" />
+      </div>
+
+      <div className="flex items-start gap-2">
+        {SKELETON_IMAGE_KEYS.map((imageKey) => (
+          <Skeleton key={imageKey} className="size-25 shrink-0 rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+};

src/shared/components/ui/card-list/card-list.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import Link from 'next/link';
+
+import { cn } from '@/lib/cn';
+import { BookmarkButton } from '@/shared/components/ui/bookmark-button/bookmark-button';
+import { CommonImage } from '@/shared/components/ui/common-image/common-image';
+
+interface CardListImage {
+  src: string;
+  alt: string;
+}
+
+interface CardListProps {
+  title: string;
+  description: string;
+  images: CardListImage[];
+  isBookmarked: boolean;
+  onBookmarkClick: () => void;
+  href?: string;
+  className?: string;
+}
+
+export const CardList = ({
+  title,
+  description,
+  images,
+  isBookmarked,
+  onBookmarkClick,
+  href,
+  className,
+}: CardListProps) => {
+  const information = (
+    <>
+      <h3 className="text-body-sb-16 w-full truncate text-gray-800">{title}</h3>
+      <p className="text-caption-m-12 w-full truncate text-gray-500">
+        {description}
+      </p>
+    </>
+  );
+
+  return (
+    <article
+      className={cn(
+        'flex w-full min-w-0 flex-col items-start gap-3',
+        className,
+      )}
+    >
+      <div className="flex w-full items-center gap-8">
+        {href ? (
+          <Link
+            href={href}
+            className="focus-visible:outline-mint-300 flex min-w-0 flex-1 flex-col items-start gap-1 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid"
+          >
+            {information}
+          </Link>
+        ) : (
+          <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
+            {information}
+          </div>
+        )}
+
+        <BookmarkButton
+          isBookmarked={isBookmarked}
+          className="h-6 w-6.25"
+          onClick={onBookmarkClick}
+        />
+      </div>
+
+      <div
+        role="group"
+        aria-label={`${title} 이미지 목록`}
+        tabIndex={0}
+        className="focus-visible:outline-mint-300 flex w-full scrollbar-none items-center gap-2 overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid [&::-webkit-scrollbar]:hidden"
+      >
+        {images.map(({ src, alt }) => (
+          <CommonImage
+            key={src}
+            src={src}
+            alt={alt}
+            width={100}
+            height={100}
+            radius="rounded-xl"
+            className="size-25"
+          />
+        ))}
+      </div>
+    </article>
+  );
+};

src/shared/components/ui/card-list/index.ts

@@ -0,0 +1,2 @@
+export { CardList } from './card-list';
+export { CardListSkeleton } from './card-list-skeleton';

src/shared/components/ui/index.ts

@@ -8,13 +8,15 @@ export {
   AsyncLoadingState,
   type AsyncLoadingStateProps,
 } from './async-boundary';
+export { BookmarkButton } from './bookmark-button/bookmark-button';
 export { BottomActionBar } from './bottom-action-bar/bottom-action-bar';
 export { BottomSheet } from './bottom-sheet/bottom-sheet';
 export { Button, type ButtonProps } from './button/button';
 export { IconButton, type IconButtonProps } from './button/icon-button';
 export { Card } from './card/card';
 export { CardDate } from './card/card-date';
 export { PostStatusTag, type RecruitmentStatus, Tag } from './card/card-tag';
+export { CardList, CardListSkeleton } from './card-list';
 export { Chip, ChipButton } from './chip/chip';
 export { ChipGroup, type ChipGroupProps } from './chip-group/chip-group';
 export { CommonImage } from './common-image/common-image';
@@ -31,6 +33,7 @@ export { ProfileImageInput } from './profile-image-input/profile-image-input';
 export { ProgressBar } from './progress-bar/progress-bar';
 export { Searchbar, type SearchbarSize } from './searchbar/searchbar';
 export { SearchbarWithDropdown } from './searchbar/searchbar-with-dropdown';
+export { Skeleton } from './skeleton/skeleton';
 export { Tab } from './tab/tab';
 export { TextArea, type TextAreaStatus } from './text-area/text-area';
 export { TextField, type TextFieldStatus } from './text-field/text-field';

src/shared/components/ui/skeleton/skeleton.tsx

@@ -0,0 +1,14 @@
+import { cn } from '@/lib/cn';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export const Skeleton = ({ className }: SkeletonProps) => {
+  return (
+    <div
+      aria-hidden
+      className={cn('animate-skeleton-wave bg-gray-200/20', className)}
+    />
+  );
+};

src/styles/animations.css

@@ -0,0 +1,30 @@
+@keyframes skeleton-gradient-wave {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@utility animate-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      100deg,
+      transparent 20%,
+      color-mix(in srgb, var(--color-white) 55%, transparent) 50%,
+      transparent 80%
+    );
+    content: '';
+    transform: translateX(-100%);
+    animation: skeleton-gradient-wave 1.7s linear infinite;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-skeleton-wave::after {
+    animation: none;
+  }
+}