Feedback Components 구성 요소
포럼/커뮤니티 플랫폼을 위한 복잡한 머티리얼 디자인에서 영감을 받은 피드백 구성 요소로, 다양한 대화형 요소, 보색 구성표, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">
<!-- Feedback Card Container -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden mb-8">
<!-- Header Section -->
<div class="bg-indigo-600 dark:bg-indigo-900 p-4 sm:p-6 text-white flex items-center justify-between">
<div>
<h2 class="text-2xl sm:text-3xl font-bold mb-1">Community Feedback</h2>
<p class="text-indigo-100 text-sm sm:text-base">Help us improve by sharing your thoughts.</p>
</div>
<span class="material-icons-outlined text-white text-3xl sm:text-4xl">feedback</span>
</div>
<!-- Feedback Type/Category Selection -->
<div class="border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
<div class="flex flex-wrap gap-2 text-sm sm:text-base">
<button class="px-4 py-2 rounded-full font-medium text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100 shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
Suggestion
</button>
<button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
Bug Report
</button>
<button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
Question
</button>
<button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
Other
</button>
</div>
</div>
<!-- Main Feedback Form -->
<div class="p-4 sm:p-6">
<form>
<div class="mb-4">
<label for="feedback-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title <span class="text-red-500">*</span></label>
<input type="text" id="feedback-title" placeholder="e.g., Improve search functionality" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required>
</div>
<div class="mb-4">
<label for="feedback-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description <span class="text-red-500">*</span></label>
<textarea id="feedback-description" rows="6" placeholder="Provide a detailed description of your feedback, including steps to reproduce bugs if applicable." class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 resize-y transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required></textarea>
</div>
<div class="mb-4">
<label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments (Optional)</label>
<div class="flex items-center space-x-4">
<label class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
Upload File
<input type="file" id="attachment" class="hidden">
</label>
<span class="text-sm text-gray-500 dark:text-gray-400" id="file-name">No file chosen</span>
</div>
</div>
<div class="mb-6 flex items-center justify-between">
<label for="email-notification" class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="email-notification" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-indigo-600">
<span class="ml-2 text-sm text-gray-900 dark:text-gray-300">Notify me of updates</span>
</label>
<div class="group relative inline-block">
<spa class="material-icons-outlined text-gray-400 dark:text-gray-500 text-lg sm:text-xl cursor-help">info</span>
<div class="absolute hidden group-hover:block bg-gray-700 dark:bg-gray-600 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 w-48 shadow-lg z-10 transition duration-300 ease-in-out opacity-0 group-hover:opacity-100 pointer-events-none">
We'll send you email updates on the status of your feedback.
<div class="absolute left-1/2 -ml-1 bottom-0 transform translate-y-full border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-600"></div>
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button type="button" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
Cancel
</button>
<button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
Submit Feedback
</button>
</div>
</form>
</div>
</div>
<!-- Recently Submitted Feedback Section (Example) -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="bg-emerald-600 dark:bg-emerald-900 p-4 sm:p-6 text-white flex items-center justify-between">
<div>
<h3 class="text-xl sm:text-2xl font-bold mb-1">Recent Submissions</h3>
<p class="text-emerald-100 text-sm sm:text-base">See what others are suggesting.</p>
</div>
<span class="material-icons-outlined text-white text-3xl sm:text-4xl">forum</span>
</div>
<div class="p-4 sm:p-6 space-y-4">
<!-- Feedback Item 1 -->
<div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe <span class="text-indigo-600 dark:text-indigo-400 ml-2">• Suggestion</span></p>
<p class="text-base font-medium text-gray-900 dark:text-gray-100">Add dark mode to the forum</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">It would be great to have a dark mode option to reduce eye strain, especially during late-night browsing. The current light theme is a bit too bright.</p>
<div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>2 days ago</span>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">thumb_up</span>
<span>15</span>
</div>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">comment</span>
<span>3</span>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-green-600 dark:text-green-400">In Progress</span></p>
</div>
</div>
</div>
<!-- Feedback Item 2 -->
<div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith <span class="text-emerald-600 dark:text-emerald-400 ml-2">• Bug Report</span></p>
<p class="text-base font-medium text-gray-900 dark:text-gray-100">Profile picture not updating</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">When I try to upload a new profile picture, it appears to upload successfully but the old picture remains visible after refreshing the page. Tried multiple browsers.</p>
<div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>5 hours ago</span>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">thumb_up</span>
<span>7</span>
</div>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">comment</span>
<span>1</span>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-orange-600 dark:text-orange-400">Investigating</span></p>
</div>
</div>
</div>
<!-- Feedback Item 3 -->
<div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Peter Jones <span class="text-purple-600 dark:text-purple-400 ml-2">• Question</span></p>
<p class="text-base font-medium text-gray-900 dark:text-gray-100">How to embed videos in posts?</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">I'm trying to share a YouTube video in my post but the embed code doesn't seem to work. Is there a specific way to do this or is it not supported?</p>
<div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
<span>1 day ago</span>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">thumb_up</span>
<span>8</span>
</div>
<div class="flex items-center space-x-1">
<span class="material-icons-outlined text-base">comment</span>
<span>5</span>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-blue-600 dark:text-blue-400">Answered</span></p>
</div>
</div>
</div>
</div>
<div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm font-medium">View All Feedback</a>
</div>
</div>
<!-- Required for Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<!-- Dummy JS for file input label and tooltip (not part of the JSON output requirements, but for live demo functionality) -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('attachment');
const fileNameSpan = document.getElementById('file-name');
if (fileInput) {
fileInput.addEventListener('change', (event) => {
const fileName = event.target.files[0] ? event.target.files[0].name : 'No file chosen';
fileNameSpan.textContent = fileName;
});
}
});
</script>
</div>관련 구성 요소
피드백 구성 요소
Skeuomorphism에서 영감을 받은 피드백 구성 요소는 대시보드에 대한 유사한 색 구성표를 특징으로 합니다. 단순하고 반응이 빠르도록 설계되었으며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 향상된 스타일링 및 구성 요소를 위해 shadcn/ui를 활용합니다.
Feedback Components 구성 요소
복잡하고 반응이 빠르며 어두운 테마로 지원되는 피드백 구성 요소 구성 요소는 대시보드에 대해 제공되며, 미니멀리스트/플랫 미학과 파스텔 색상 구성표로 설계되었습니다. Tailwind CSS 클래스와 함께 HTML만 사용하여 진행률 표시줄, 상태 표시기 및 최근 활동과 같은 다양한 피드백 요소를 표시합니다.
피드백 구성 요소
매력적인 애니메이션과 마이크로 상호 작용을 통합하는 반응형 피드백 구성 요소입니다. 다크 모드를 지원하도록 설계되었으며 자리 표시자 이미지 및 아바타와 함께 사용자 피드백을 위한 요소를 제공합니다.