Merge pull request #25 from Leets-Official/23-feat/BannerCard-컴포넌트-구현

[Feat] BannerCard 컴포넌트 제작

Author: jwj0620gcu

src/app/styles/index.css

@@ -65,7 +65,8 @@
   --spacing-m: 16px;
   --spacing-s: 14px;
   --spacing-xs: 12px;
-  --spacing-xxs: 8px;
+  --spacing-xxs: 10px;
+  --spacing-xxxs: 8px;
 
   /* Margin (Primitive/Scale) */
   --margin-l: 24px;

src/pages/playground.tsx

@@ -1,3 +1,4 @@
+import { BannerCard } from '@shared/ui/BannerCard/BannerCard';
 import { Button } from '@shared/ui/Button/Button';
 import { Card } from '@shared/ui/Card/Card';
 import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
@@ -11,12 +12,13 @@ export default function Playground() {
     <div className="flex flex-col gap-6 p-8">
       <h1 className="typo-title-2">UI Playground</h1>
 
-      {/* Button */}
+      {/* Header */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Header</h2>
         <Header />
       </section>
 
+      {/* Button */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Button</h2>
         <p className="typo-caption-2 text-gray-600">
@@ -97,7 +99,6 @@ export default function Playground() {
       {/* Card */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Card</h2>
-
         <Card
           imageSrc="/iphone11.png"
           titleText="Title 인데 제목이 정말 길 경우에는 두줄 까지만 보이고, 뒤엔 점 처리"
@@ -106,6 +107,23 @@ export default function Playground() {
         />
       </section>
 
+      {/* BannerCard */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">Banner Card</h2>
+        <p className="typo-caption-2 text-gray-600">배너 카드</p>
+        <BannerCard
+          title={
+            <>
+              중고 전자기기
+              <br />
+              구매하기
+            </>
+          }
+          description="설명 최대 길이 2줄"
+          buttonText="바로가기"
+        />
+      </section>
+
       {/* TextField 예시 */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">TextField</h2>

src/shared/assets/icons/banner/gear.svg

@@ -0,0 +1 @@
+export { default as GearIcon } from './gear.svg';

src/shared/assets/icons/banner/index.ts

@@ -0,0 +1,64 @@
+import { GearIcon } from '@shared/assets/icons/banner';
+import { Button } from '@shared/ui/Button/Button';
+import { bannerCardVariants } from './BannerCard.variants';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+const { base, frame, textWrapper, title, description, imageWrapper, image } = bannerCardVariants();
+
+export type BannerCardProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> &
+  VariantProps<typeof bannerCardVariants> & {
+    title: ReactNode;
+    description: string;
+    buttonText?: string;
+    onClick?: () => void;
+  };
+
+export const BannerCard = ({
+  title: titleContent = (
+    <>
+      중고 전자기기
+      <br />
+      구매하기
+    </>
+  ),
+  description: descriptionText = '설명 최대 길이 2줄',
+  buttonText = '바로가기',
+  onClick,
+  className,
+  ...props
+}: BannerCardProps) => {
+  return (
+    <div
+      data-testid="banner-card"
+      className={base({ className })}
+      role="button"
+      aria-label="banner-card"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      {...props}
+    >
+      <div className={frame()}>
+        <div className={textWrapper()}>
+          <p className={title()}>{titleContent}</p>
+
+          <p className={description()}>{descriptionText}</p>
+
+          <Button size="auto" className="w-[104px]">
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+
+      <div className={imageWrapper()}>
+        <img src={GearIcon} alt="" className={image()} />
+      </div>
+    </div>
+  );
+};

src/shared/ui/BannerCard/BannerCard.tsx

@@ -0,0 +1,72 @@
+import { tv } from 'tailwind-variants';
+
+export const bannerCardVariants = tv({
+  base: [
+    'group',
+    'relative',
+    'flex',
+    'flex-col',
+    'justify-end',
+    'items-start',
+
+    'w-[427px]',
+    'h-[384px]',
+
+    'px-[var(--padding-xl)]',
+    'py-[27px]',
+
+    'gap-[var(--spacing-xxs)]',
+
+    'rounded-[var(--radius-xl)]',
+
+    'bg-white',
+    'bg-[linear-gradient(0deg,rgba(4,217,181,0)_0%,rgba(0,179,155,0.2)_71.11%)]',
+
+    'cursor-pointer',
+    'outline-none',
+  ],
+
+  slots: {
+    frame: [
+      'flex',
+      'flex-col',
+      'items-start',
+
+      'gap-[var(--spacing-xs)]',
+
+      'self-stretch',
+
+      'h-[330px]',
+    ],
+
+    textWrapper: [
+      'relative',
+      'z-10',
+      'flex',
+      'flex-col',
+      'items-start',
+
+      'gap-[var(--spacing-xs)]',
+
+      'self-stretch',
+    ],
+
+    title: ['typo-title-3', 'text-black'],
+
+    description: ['typo-body-1', 'text-black', 'overflow-hidden', 'text-ellipsis', 'line-clamp-2'],
+
+    imageWrapper: ['absolute', 'right-0', 'bottom-0', 'z-0', 'pointer-events-none'],
+
+    image: [
+      'w-[213px]',
+      'h-[213px]',
+      'object-cover',
+
+      'transition-all',
+      'duration-300',
+
+      'group-hover:w-[307px]',
+      'group-hover:h-[307px]',
+    ],
+  },
+});

src/shared/ui/BannerCard/BannerCard.variants.ts

@@ -0,0 +1,2 @@
+export { BannerCard } from './BannerCard';
+export type { BannerCardProps } from './BannerCard';

src/shared/ui/BannerCard/index.ts

@@ -0,0 +1,2 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';

src/shared/ui/Card/index.ts

@@ -0,0 +1,34 @@
+import { BannerCard } from '@shared/ui/BannerCard';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('BannerCard', () => {
+  it('배너 카드 렌더링', () => {
+    render(<BannerCard />);
+    expect(screen.getByTestId('banner-card')).toBeInTheDocument();
+  });
+
+  it('타이틀 텍스트 렌더링', () => {
+    render(<BannerCard />);
+    expect(screen.getByText(/중고 전자기기/)).toBeInTheDocument();
+    expect(screen.getByText(/구매하기/)).toBeInTheDocument();
+  });
+
+  it('버튼 렌더링', () => {
+    render(<BannerCard />);
+    expect(screen.getByRole('button', { name: '바로가기' })).toBeInTheDocument();
+  });
+
+  it('버튼 클릭 시 onClick 호출', () => {
+    const onClick = vi.fn();
+    render(<BannerCard onClick={onClick} />);
+
+    screen.getByRole('button', { name: '바로가기' }).click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('className 전달', () => {
+    render(<BannerCard className="custom-class" />);
+    expect(screen.getByTestId('banner-card')).toHaveClass('custom-class');
+  });
+});