shadcn/ui 실무 활용 팁

shadcn/ui를 실무에서 효과적으로 활용하는 방법을 소개합니다. 컴포넌트 커스터마이징, 테마 설정, 폼 검증 등 실전 팁을 다룹니다.

---

---

들어가며

이 글에서는 shadcn/ui 실무 활용 팁에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 컴포넌트_설치_및_커스터마이징
2. 다크모드_테마_설정
3. Form_컴포넌트와_Zod_검증
4. Dialog_상태_관리
5. Select_컴포넌트_활용
6. Table_컴포넌트_반응형_처리
7. Toast_알림_시스템
8. Command_컴포넌트_검색_기능
9. Popover_위치_조정
10. Skeleton_로딩_상태
11. Badge_컴포넌트_상태_표시
12. Accordion_FAQ_구현

---

1. 컴포넌트 설치 및 커스터마이징

개요

shadcn/ui 컴포넌트를 설치하고 프로젝트에 맞게 커스터마이징하는 방법입니다. CLI로 간편하게 설치할 수 있습니다.

코드 예제

npx shadcn-ui@latest add button

// components/ui/button.tsx 수정
const buttonVariants = cva({
  variants: {
    variant: {
      custom: "bg-purple-500 hover:bg-purple-600"
    }
  }
})

설명

CLI로 컴포넌트를 설치한 후, 소스 코드를 직접 수정하여 프로젝트에 맞는 스타일을 추가할 수 있습니다.

---

2. 다크모드 테마 설정

개요

CSS 변수를 활용하여 라이트/다크 테마를 구현합니다. tailwind.config에서 색상을 정의하고 next-themes로 토글합니다.

코드 예제

// app/globals.css
:root {
  --primary: 222.2 47.4% 11.2%;
}
.dark {
  --primary: 210 40% 98%;
}

// ThemeProvider 사용
<ThemeProvider attribute="class">
  {children}
</ThemeProvider>

설명

CSS 변수로 테마 색상을 정의하고, class 기반으로 다크모드를 전환하여 일관된 UI를 유지합니다.

---

3. Form 컴포넌트와 Zod 검증

개요

react-hook-form과 Zod를 결합하여 타입 안전한 폼 검증을 구현합니다. shadcn/ui Form 컴포넌트로 깔끔한 UI를 제공합니다.

코드 예제

const formSchema = z.object({
  email: z.string().email("유효한 이메일을 입력하세요")
})

<Form {...form}>
  <FormField control={form.control} name="email"
    render={({ field }) => (
      <FormItem>
        <FormControl><Input {...field} /></FormControl>
      </FormItem>
    )} />
</Form>

설명

Zod 스키마로 검증 규칙을 정의하고, FormField로 각 입력 필드를 감싸 자동으로 에러 메시지를 표시합니다.

---

4. Dialog 상태 관리

개요

Dialog 컴포넌트의 열림/닫힘 상태를 효율적으로 관리합니다. 제어 컴포넌트 패턴을 사용합니다.

코드 예제

const [open, setOpen] = useState(false)

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>열기</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogTitle>제목</DialogTitle>
  </DialogContent>
</Dialog>

설명

open과 onOpenChange props로 Dialog 상태를 제어하여, 외부에서 프로그래밍 방식으로 열고 닫을 수 있습니다.

---

5. Select 컴포넌트 활용

개요

드롭다운 선택을 위한 Select 컴포넌트를 폼과 통합하여 사용합니다. 접근성도 자동으로 처리됩니다.

코드 예제

<Select onValueChange={field.onChange}>
  <SelectTrigger>
    <SelectValue placeholder="선택하세요" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">옵션 1</SelectItem>
    <SelectItem value="option2">옵션 2</SelectItem>
  </SelectContent>
</Select>

설명

SelectTrigger와 SelectContent로 구조를 나누어 스타일링이 쉽고, 키보드 네비게이션도 자동 지원됩니다.

---

6. Table 컴포넌트 반응형 처리

개요

데이터 테이블을 반응형으로 만들어 모바일에서도 보기 좋게 표시합니다. scroll 컨테이너를 활용합니다.

코드 예제

<div className="rounded-md border">
  <div className="overflow-x-auto">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>이름</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>{/* 데이터 */}</TableBody>
    </Table>
  </div>
</div>

설명

overflow-x-auto를 추가하여 작은 화면에서 테이블을 가로 스크롤할 수 있게 하여 반응형을 구현합니다.

---

7. Toast 알림 시스템

개요

사용자 액션에 대한 피드백을 Toast로 표시합니다. useToast 훅으로 간편하게 호출할 수 있습니다.

코드 예제

const { toast } = useToast()

const handleSave = () => {
  toast({
    title: "저장 완료",
    description: "데이터가 성공적으로 저장되었습니다.",
    variant: "default"
  })
}

설명

useToast 훅으로 어디서든 토스트를 호출할 수 있으며, variant로 성공/에러 등 다양한 스타일을 적용합니다.

---

8. Command 컴포넌트 검색 기능

개요

Command 컴포넌트로 커맨드 팔레트나 검색 UI를 구현합니다. 키보드 단축키도 지원합니다.

코드 예제

<Command>
  <CommandInput placeholder="검색..." />
  <CommandList>
    <CommandGroup heading="제안">
      <CommandItem onSelect={() => {}}>
        프로필
      </CommandItem>
      <CommandItem>설정</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

설명

CommandInput으로 검색하고, CommandItem을 선택하여 액션을 실행하는 직관적인 UI를 만들 수 있습니다.

---

9. Popover 위치 조정

개요

Popover의 표시 위치를 조정하여 화면 밖으로 나가지 않도록 합니다. align과 side props를 활용합니다.

코드 예제

<Popover>
  <PopoverTrigger asChild>
    <Button>더보기</Button>
  </PopoverTrigger>
  <PopoverContent
    align="end"
    side="bottom"
    className="w-80">
    내용
  </PopoverContent>
</Popover>

설명

side로 방향을, align으로 정렬을 설정하여 Popover가 적절한 위치에 표시되도록 제어합니다.

---

10. Skeleton 로딩 상태

개요

데이터 로딩 중 Skeleton 컴포넌트로 자연스러운 로딩 UI를 제공합니다. 실제 콘텐츠와 유사한 형태로 배치합니다.

코드 예제

{isLoading ? (
  <div className="space-y-2">
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-20 w-full" />
  </div>
) : (
  <div>{content}</div>
)}

설명

로딩 중에는 Skeleton을 표시하고, 데이터가 로드되면 실제 콘텐츠로 교체하여 사용자 경험을 개선합니다.

---

11. Badge 컴포넌트 상태 표시

개요

Badge로 상태나 태그를 시각적으로 표시합니다. variant를 통해 다양한 스타일을 적용할 수 있습니다.

코드 예제

<div className="flex gap-2">
  <Badge variant="default">진행중</Badge>
  <Badge variant="secondary">대기</Badge>
  <Badge variant="destructive">실패</Badge>
  <Badge variant="outline">완료</Badge>
</div>

설명

variant props로 상태에 맞는 색상을 적용하여 정보를 한눈에 파악할 수 있게 합니다.

---

12. Accordion FAQ 구현

개요

Accordion으로 FAQ나 접을 수 있는 콘텐츠를 구현합니다. 여러 항목을 동시에 열 수도 있습니다.

코드 예제

<Accordion type="multiple" className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>질문 1</AccordionTrigger>
    <AccordionContent>
      답변 내용입니다.
    </AccordionContent>
  </AccordionItem>
</Accordion>

설명

type="multiple"로 여러 항목을 동시에 열 수 있고, type="single"로 하나만 열리게 제어할 수 있습니다.

---

마치며

이번 글에서는 shadcn/ui 실무 활용 팁에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#React #shadcn/ui #TailwindCSS #컴포넌트 #UI라이브러리