[Feat] 카드 컴포넌트 제작

package.json

@@ -35,6 +35,7 @@
     "react-hook-form": "^7.76.0",
     "shadcn": "^4.7.0",
     "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.13"
@@ -59,15 +60,15 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^16.4.0",
     "prettier": "^3.8.3",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.22.4",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
     "vite": "^8.0.12",
-    "husky": "^8.0.0",
-    "lint-staged": "^16.4.0",
     "vitest": "^4.1.6"
   },
   "lint-staged": {

src/components/common/Button.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { Button } from './Button'
+
+describe('Button', () => {
+  it('variant가 disable이면 별도 disabled prop 없이도 비활성화된다', () => {
+    render(
+      <Button variant="disable" size="m">
+        저장하기
+      </Button>,
+    )
+
+    expect(screen.getByRole<HTMLButtonElement>('button', { name: '저장하기' }).disabled).toBe(true)
+  })
+
+  it.each(['primary', 'strong', 'error', 'outlined'] as const)(
+    'variant가 %s이면 기본적으로 활성화된다',
+    (variant) => {
+      render(
+        <Button variant={variant} size="m">
+          저장하기
+        </Button>,
+      )
+
+      expect(screen.getByRole<HTMLButtonElement>('button', { name: '저장하기' }).disabled).toBe(
+        false,
+      )
+    },
+  )
+
+  it('disabled prop을 명시하면 variant와 무관하게 그 값을 따른다', () => {
+    render(
+      <Button variant="primary" size="m" disabled>
+        저장하기
+      </Button>,
+    )
+
+    expect(screen.getByRole<HTMLButtonElement>('button', { name: '저장하기' }).disabled).toBe(true)
+  })
+
+  it('클릭 시 onClick이 호출된다', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <Button variant="primary" size="m" onClick={onClick}>
+        저장하기
+      </Button>,
+    )
+
+    await user.click(screen.getByRole('button', { name: '저장하기' }))
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('leftIcon과 rightIcon을 함께 렌더링한다', () => {
+    render(
+      <Button
+        variant="primary"
+        size="m"
+        leftIcon={<span data-testid="left-icon" />}
+        rightIcon={<span data-testid="right-icon" />}
+      >
+        저장하기
+      </Button>,
+    )
+
+    expect(screen.getByTestId('left-icon')).toBeTruthy()
+    expect(screen.getByTestId('right-icon')).toBeTruthy()
+  })
+})

src/components/common/Button.tsx

@@ -0,0 +1,67 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from '@lib/tv'
+
+const buttonVariants = tv({
+  base: 'flex items-center justify-center gap-1 text-center transition-colors',
+  variants: {
+    variant: {
+      primary: 'bg-blue-5 text-brand-primary',
+      strong: 'bg-brand-primary text-fill-normal',
+      error: 'bg-red-10 text-red-70',
+      disable: 'bg-fill-alternative text-label-light cursor-not-allowed',
+      outlined: 'bg-fill-normal border-line-normal text-label-netural border',
+    },
+    // pl-*/pr-*로 좌우를 각각 선언한다: tailwind-merge는 px-*를 pl-*/pr-*와 같은 그룹으로
+    // 취급하지 않아 compoundVariants의 좌우 오버라이드가 조용히 씹힌다(둘 다 남아 CSS 생성
+    // 순서에 결과가 좌우됨). 같은 축의 유틸리티끼리만 둬야 확실히 병합된다.
+    size: {
+      s: 'text-label-14sb h-9 rounded-md pr-4 pl-4',
+      m: 'text-label-14sb h-10 rounded-lg pr-5 pl-5',
+      l: 'text-body-16sb h-11 rounded-lg pr-6 pl-6',
+      xl: 'text-body-16sb h-12 rounded-lg pr-6 pl-6',
+    },
+  },
+  compoundVariants: [
+    // size=m의 strong만 Figma에서 8px 16px로, 같은 size의 다른 variant(8px 20px)보다 좁다.
+    { variant: 'strong', size: 'm', class: 'pr-4 pl-4' },
+    // outlined는 사이즈와 무관하게 radius 8px + 아이콘 쪽(왼쪽) 패딩이 좁은 비대칭 패딩을 쓴다.
+    { variant: 'outlined', size: ['s', 'm'], class: 'rounded-md py-2 pr-4 pl-3' },
+    { variant: 'outlined', size: ['l', 'xl'], class: 'rounded-md py-2 pr-5 pl-[18px]' },
+  ],
+})
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+export type ButtonVariant = NonNullable<ButtonVariants['variant']>
+export type ButtonSize = NonNullable<ButtonVariants['size']>
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant: ButtonVariant
+  size: ButtonSize
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+}
+
+export function Button({
+  variant,
+  size,
+  leftIcon,
+  rightIcon,
+  className,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled ?? variant === 'disable'}
+      className={buttonVariants({ variant, size, className })}
+      {...props}
+    >
+      {leftIcon}
+      {children}
+      {rightIcon}
+    </button>
+  )
+}

src/components/common/PageHeader.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { cn } from '@lib/utils'
+import { Button } from './Button'
 
 interface PageHeaderProps {
   title: string
@@ -22,13 +23,9 @@ export function PageHeader({ title, actionLabel, onAction, children, className }
         {children}
       </div>
       {actionLabel && (
-        <button
-          type="button"
-          onClick={onAction}
-          className="bg-brand-primary text-label-14sb text-fill-normal h-10 rounded-[8px] px-4 py-2 transition-colors hover:brightness-95"
-        >
+        <Button variant="strong" size="m" onClick={onAction} className="hover:brightness-95">
           {actionLabel}
-        </button>
+        </Button>
       )}
     </div>
   )

src/components/common/index.ts

@@ -1,5 +1,6 @@
 // @generated
 
+export * from './Button'
 export * from './Logo'
 export * from './PageHeader'
 export * from './SegmentedControl'

src/components/index.ts

@@ -1,3 +1,5 @@
 // @generated
 
 export * from './common'
+export * from './introductions'
+export * from './projects'

src/components/introductions/ImageBoxThumbnail.tsx

@@ -0,0 +1,35 @@
+import UploadIcon from '@/assets/icons/generated/UploadIcon'
+import { cn } from '@lib/utils'
+
+interface ImageBoxThumbnailProps {
+  imageUrl?: string
+  alt?: string
+  uploadLabel?: string
+  className?: string
+}
+
+export function ImageBoxThumbnail({
+  imageUrl,
+  alt = '',
+  uploadLabel = '업로드',
+  className,
+}: ImageBoxThumbnailProps) {
+  return (
+    <div
+      className={cn(
+        'border-fill-alternative relative h-20 w-[150px] overflow-hidden rounded-md border',
+        !imageUrl && 'bg-fill-normal flex items-center justify-center',
+        className,
+      )}
+    >
+      {imageUrl ? (
+        <img src={imageUrl} alt={alt} className="h-full w-full object-cover" />
+      ) : (
+        <span className="text-caption-12sb text-label-alternative flex items-center gap-1 pr-1.5">
+          <UploadIcon className="size-[18px]" aria-hidden="true" />
+          {uploadLabel}
+        </span>
+      )}
+    </div>
+  )
+}

src/components/introductions/Inputfield.tsx

@@ -0,0 +1,22 @@
+import type { InputHTMLAttributes } from 'react'
+import { cn } from '@lib/utils'
+
+interface InputfieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+}
+
+export function Inputfield({ className, ...props }: InputfieldProps) {
+  return (
+    <div
+      className={cn(
+        'bg-fill-netural border-line-normal flex h-10 items-center rounded-lg border px-3 py-1.5',
+        className,
+      )}
+    >
+      <input
+        className="text-label-14m text-label-normal placeholder:text-label-assitive w-full bg-transparent outline-none"
+        {...props}
+      />
+    </div>
+  )
+}

src/components/introductions/IntroductionCard.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { IntroductionCard } from './IntroductionCard'
+
+describe('IntroductionCard', () => {
+  it('default variant에서는 플레이스홀더를 보여주고 추가하기 버튼이 비활성화된다', () => {
+    render(<IntroductionCard variant="default" />)
+
+    expect(screen.getByPlaceholderText('타이틀')).toBeTruthy()
+    expect(screen.getByPlaceholderText('설명을 입력해주세요')).toBeTruthy()
+    expect(screen.getByRole<HTMLButtonElement>('button', { name: '추가하기' }).disabled).toBe(true)
+    expect(screen.getByRole<HTMLButtonElement>('button', { name: '삭제하기' }).disabled).toBe(false)
+  })
+
+  it('active variant에서는 입력값을 보여주고 교체하기 버튼이 활성화된다', () => {
+    render(
+      <IntroductionCard
+        variant="active"
+        title="내용"
+        description="큐시즘 오리엔테이션 소개"
+        thumbnailUrl="/thumb.png"
+      />,
+    )
+
+    expect(screen.getByDisplayValue('내용')).toBeTruthy()
+    expect(screen.getByDisplayValue('큐시즘 오리엔테이션 소개')).toBeTruthy()
+    expect(screen.getByRole<HTMLButtonElement>('button', { name: '교체하기' }).disabled).toBe(false)
+  })
+
+  it('삭제하기 버튼 클릭 시 onDelete가 호출된다', async () => {
+    const user = userEvent.setup()
+    const onDelete = vi.fn()
+    render(<IntroductionCard variant="active" onDelete={onDelete} />)
+
+    await user.click(screen.getByRole('button', { name: '삭제하기' }))
+
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('active variant에서 교체하기 버튼 클릭 시 onAddOrReplace가 호출된다', async () => {
+    const user = userEvent.setup()
+    const onAddOrReplace = vi.fn()
+    render(<IntroductionCard variant="active" onAddOrReplace={onAddOrReplace} />)
+
+    await user.click(screen.getByRole('button', { name: '교체하기' }))
+
+    expect(onAddOrReplace).toHaveBeenCalledTimes(1)
+  })
+})