studyview

frontend/src/views/StudyView.vue

@@ -102,14 +102,22 @@
 
         <!-- List & Search -->
         <div class="lg:col-span-2 space-y-4">
-          <!-- Search Bar -->
+          <!-- Search Bar & Random Sorting Toggle -->
-          <div class="flex gap-2">
+          <div class="flex flex-col sm:flex-row sm:items-center gap-3 bg-base-200/30 p-3 rounded-2xl border border-base-content/10">
             <input 
               v-model="searchQuery" 
               type="text" 
               placeholder="문제 번호 또는 텍스트로 검색..." 
-              class="input input-bordered w-full bg-base-200/50 rounded-2xl focus:input-primary" 
+              class="input input-bordered flex-1 bg-base-100 rounded-xl focus:input-primary text-sm h-10" 
             />
+            <label class="label cursor-pointer py-0 gap-2 shrink-0 select-none">
+              <input 
+                type="checkbox" 
+                v-model="randomizeElements" 
+                class="checkbox checkbox-sm checkbox-primary" 
+              />
+              <span class="label-text text-xs font-bold opacity-80">무작위 정렬</span>
+            </label>
           </div>
 
           <!-- Empty State -->
@@ -299,6 +307,32 @@ const selectedCategory = ref('')
 const studyElements = ref<StudyElement[]>([])
 const searchQuery = ref('')
 
+const randomizeElements = ref(false)
+const shuffledElements = ref<StudyElement[]>([])
+
+function shuffleStudyElements() {
+  const arr = [...studyElements.value]
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]]
+  }
+  shuffledElements.value = arr
+}
+
+watch(randomizeElements, (newVal) => {
+  if (newVal) {
+    shuffleStudyElements()
+  } else {
+    shuffledElements.value = []
+  }
+})
+
+watch(studyElements, () => {
+  if (randomizeElements.value) {
+    shuffleStudyElements()
+  }
+})
+
 // Load lists
 const categoriesCountMap = computed(() => {
   const map: Record<string, number> = {}
@@ -463,9 +497,10 @@ const renderedContent = computed(() => {
 
 // Search elements
 const filteredElements = computed(() => {
-  if (!searchQuery.value.trim()) return studyElements.value
+  const baseElements = randomizeElements.value ? shuffledElements.value : studyElements.value
+  if (!searchQuery.value.trim()) return baseElements
   const q = searchQuery.value.toLowerCase()
-  return studyElements.value.filter(se => 
+  return baseElements.filter(se => 
     se.questionId.toString().includes(q) || 
     se.questionText.toLowerCase().includes(q) ||
     se.keyword.toLowerCase().includes(q) ||
@@ -627,7 +662,18 @@ function isSwipeException(target: HTMLElement | null): boolean {
   let el = target
   while (el) {
     const tagName = el.tagName.toLowerCase()
-    if (tagName === 'img' || tagName === 'canvas' || tagName === 'embed' || tagName === 'iframe') {
+    if (
+      tagName === 'img' || 
+      tagName === 'canvas' || 
+      tagName === 'embed' || 
+      tagName === 'iframe' ||
+      tagName === 'table' ||
+      tagName === 'thead' ||
+      tagName === 'tbody' ||
+      tagName === 'tr' ||
+      tagName === 'td' ||
+      tagName === 'th'
+    ) {
       return true
     }
     const classes = el.classList