1. HTML 구조 준비하기:

   <div class="filters">
     <button data-filter="*" class="active">All</button>
     <button data-filter=".filter1">Filter 1</button>
     <button data-filter=".filter2">Filter 2</button>
     <button data-filter=".filter3">Filter 3</button>
   </div>
   
   <div class="grid">
     <div class="grid-item filter1">Item 1</div>
     <div class="grid-item filter2">Item 2</div>
     <div class="grid-item filter3">Item 3</div>
     <div class="grid-item filter1">Item 4</div>
     <!-- 그 외의 다른 grid-items -->
   </div>
   

2. Isotope 초기화 및 필터링 옵션 추가하기:

   var $grid = $('.grid').isotope();
   
   $('.filters').on('click', 'button', function() {
     var filterValue = $(this).attr('data-filter');
   
     $grid.isotope({ filter: filterValue });
     $('.filters button').removeClass('active');
     $(this).addClass('active');
   });
   

3. 스타일링을 위한 CSS 추가하기:

   .grid {
     /* grid 스타일링 */
   }
   
   .grid-item {
     /* grid-item 스타일링 */
   }
   
   .button {
     /* 필터링 버튼 스타일링 */
   }
   
   .button.active {
     /* 선택된 버튼 스타일링 */
   }
   

위의 코드에서 데이터 속성 data-filter는 각 버튼의 필터링 값을 나타내며, 이 값은 Isotope 필터링을 위해 사용됩니다. 필터링할 요소에는 해당하는 클래스를 추가해야 합니다. 클릭 이벤트 핸들러에서 선택된 버튼의 필터링 값을 가져와서 Isotope에 전달하고, 버튼의 활성 상태를 관리합니다.

이제 사용자는 필터링 버튼을 클릭하여 그리드에 표시할 요소를 필터링할 수 있습니다. 추가적인 필터링 옵션을 원한다면, HTML과 JavaScript 코드를 조정하여 필요한 필터링 값을 추가하면 됩니다.