src/popup/
├── Popup.tsx           # 메인 엔트리
├── components/
│   ├── LinkCard.tsx    # 링크 카드 컴포넌트
│   ├── TagFilter.tsx   # 태그 필터 UI
│   ├── SearchBar.tsx   # 검색 바
│   └── LinkList.tsx    # 링크 목록
└── hooks/
    ├── useLinks.ts     # 링크 CRUD 훅
    ├── useTags.ts      # 태그 관리 훅
    └── useSearch.ts    # 검색 훅

src/options/
├── Options.tsx         # 설정 페이지 엔트리
└── components/
    ├── ExportImport.tsx
    └── ThemeSelector.tsx

// Good
export function LinkCard({ link, onDelete }: LinkCardProps) {
  return (
    <div className="p-4 border rounded-lg">
      {/* ... */}
    </div>
  );
}

// Bad - 클래스 컴포넌트
class LinkCard extends React.Component { }

interface LinkCardProps {
  link: Link;
  onDelete: (id: string) => void;
  onTagClick?: (tag: string) => void;
}

// useLinks.ts
export function useLinks() {
  const [links, setLinks] = useState<Link[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadLinks();
  }, []);

  async function loadLinks() {
    setLoading(true);
    const data = await getLinks();
    setLinks(data);
    setLoading(false);
  }

  async function addLink(input: CreateLinkInput) {
    const newLink = createLink(input);
    await saveLink(newLink);
    setLinks(prev => [...prev, newLink]);
  }

  return { links, loading, addLink, /* ... */ };
}

// Good - Tailwind 유틸리티
<div className="flex items-center gap-2 p-4 bg-white rounded-lg shadow">

// Avoid - 커스텀 CSS
<div className="link-card">

// Popup 크기 고려 (400px width 기준)
<div className="w-full max-w-[400px]">

<div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">

function LinkList() {
  const { links, loading, error } = useLinks();

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  if (links.length === 0) return <EmptyState />;

  return (
    <div className="space-y-2">
      {links.map(link => (
        <LinkCard key={link.id} link={link} />
      ))}
    </div>
  );
}

<button
  aria-label="Delete link"
  onClick={handleDelete}
  className="p-2 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 rounded"
>
  <TrashIcon className="w-4 h-4" />
</button>