Activity Feed 구성 요소

<div class="min-h-screen bg-stone-100 dark:bg-stone-900 font-sans p-4 sm:p-6 md:p-8 lg:p-10 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700 font-serif">
    <!-- Header -->
    <div class="bg-stone-200 dark:bg-stone-700 p-4 border-b border-stone-300 dark:border-stone-600 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 tracking-wide">Recent Activity</h2>
      <button class="flex items-center text-sm text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.91 2.222 2.419a1.724 1.724 0 00.045 2.112c1.292 1.41-0.291 3.244-1.921 3.568a1.724 1.724 0 00-1.065 2.572c.945 1.543-.91 3.333-2.419 2.222a1.724 1.724 0 00-2.112.045c-1.41 1.292-3.244-.291-3.568-1.921a1.724 1.724 0 00-2.572-1.065c-1.543.945-3.333-.91-2.222-2.419a1.724 1.724 0 00-.045-2.112c-1.292-1.41 0.291-3.244 1.921-3.568a1.724 1.724 0 001.065-2.572c-.945-1.543.91-3.333 2.419-2.222a1.724 1.724 0 002.112-.045z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span>Filter</span>
      </button>
    </div>

    <!-- Activity List -->
    <div class="divide-y divide-stone-200 dark:divide-stone-700">

      <!-- Activity Item 1: New Thread -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">John Doe</a> started a new thread:
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Tips for maintaining a vintage typewriter'
              </a>
            </p>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Antiques & Collectibles'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 5</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 12 comments</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 2: New Post -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Jane Smith</a> posted a reply in
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Upcoming Local Book Fair'
              </a>
            </p>
            <blockquote class="border-l-4 border-stone-300 dark:border-stone-600 pl-4 py-2 mt-3 mb-2 italic text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-700/60 rounded-sm">
              "I'm really excited about the selection this year. Anyone know if there will be any workshops on calligraphy?"
            </blockquote>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">5 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Local Events'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 8</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 27 replies</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 3: New File Upload -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Michael Green</a> uploaded a new file:
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1 flex items-center">
                <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                'Old Maps Collection.rar'
              </a>
            </p>
            <img class="w-full h-32 sm:h-48 object-cover rounded-md mt-3 mb-2 border border-stone-200 dark:border-stone-600" src="https://picsum.photos/600/300?random=1" alt="Uploaded Image">
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">1 day ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Historical Archives'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 15</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 9 comments</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 4: Upvote -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Sarah Lee</a> upvoted a post by 
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Emily White</a> in 
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Discussing the merits of paper vs. digital books'
              </a>
            </p>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 days ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'General Discussion'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center text-amber-600 dark:text-amber-400"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-8a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg> Upvoted</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 45 replies</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer -->
    <div class="bg-stone-200 dark:bg-stone-700 p-4 border-t border-stone-300 dark:border-stone-600 text-center">
      <button class="px-5 py-2 rounded-full bg-amber-700 text-white dark:bg-amber-600 hover:bg-amber-800 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium tracking-wide">
        Load More Activity
      </button>
    </div>
  </div>
</div>