Step 2 Challenge 🚀

📋 구현할 기능

• 사이트 이름, URL, 카테고리를 입력하고 북마크 추가
• 각 북마크는 카드 형태로 표시 (이름, URL, 카테고리, 삭제 버튼)
• URL 클릭 시 새 탭에서 해당 사이트 열림 (target="_blank")
• 카테고리별 필터링 기능 (버튼 클릭 시)
• 활성화된 필터 버튼은 진하게 표시
• 삭제 버튼으로 북마크 제거

💡 힌트

• 북마크 배열로 관리: let bookmarks = []
• 각 북마크에 고유 ID 부여 (Date.now() 활용)
• data-category 속성으로 카테고리 저장
• 필터링: 배열을 filter()로 걸러서 render() 함수로 다시 그리기
• 카테고리별 색상: 개발=파랑, 디자인=보라, 뉴스=초록, 기타=회색

📝 북마크 카드 예시

<div class="bg-white border-l-4 border-blue-500 p-4 rounded shadow">
  <div class="flex justify-between items-start mb-2">
    <h4 class="font-bold text-lg">사이트 이름</h4>
    <button class="text-red-500">삭제</button>
  </div>
  <a href="URL" target="_blank" class="text-blue-600">URL</a>
  <div class="mt-2">
    <span class="bg-blue-100 px-2 py-1 rounded text-sm">카테고리</span>
  </div>
</div>