mobile - update

templates/list.html

@@ -65,27 +65,96 @@
         </div>
     </footer>
     <script>
-    moment.locale('en');
-    console.log(moment().format('ll'));
+        let currentPage = 1;
+        let isLoading = false;
 
-    $(document).ready(function() {
-        const count__lists = $(".fake__lists li").length;
-        for (let i = 0; i < count__lists; i++) {
-            let n_1 = i % 3;
-            switch (n_1) {
-                case 1.:
-                    $(".list__posts1").append($(".fake__lists li:first-child"));
-                    break;
-                case 2:
-                    $(".list__posts2").append($(".fake__lists li:first-child"));
-                    break;
-                case 0:
-                    $(".list__posts0").append($(".fake__lists li:first-child"));
-                    break;
-            }
+        function Mobile() {
+            return $(window).width() <= 1023;
         }
-    })
-</script>
+
+        function getShortestColumnIndex() {
+            const lengths = [
+                $(".list__posts0 li").length,
+                $(".list__posts1 li").length,
+                $(".list__posts2 li").length
+            ];
+            return lengths.indexOf(Math.min(...lengths));
+        }
+
+        function distributePosts(posts) {
+            posts.forEach((post) => {
+                const postHTML = `
+                <li>
+                    <a href="/post/${post.id}">
+                    <div class="lists__img">
+                        <img src="${post.thumbnail_img || 'https://via.placeholder.com/300x200'}" alt="${post.title}" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200';" />
+                    </div>
+                    <div class="lists__desc">
+                        <p class="lists__category">${post.category}</p>
+                        <h3 class="lists__title">${post.title}</h3>
+                        <p class="lists__content">${post.contents}</p>
+                        <p class="lists__date"><b>${post.add_date_str}</b></p>
+                    </div>
+                    </a>
+                </li>
+                `;
+
+                if (Mobile()) {
+                    $(".fake__lists").append(postHTML);
+                } else {
+                    const columnIndex = getShortestColumnIndex(); // 가장 짧은 컬럼
+                    $(`.list__posts${columnIndex}`).append(postHTML);
+                }
+            });
+        }
+
+        function loadMorePosts() {
+            if (isLoading) return;
+            isLoading = true;
+            currentPage++;
+
+            $.ajax({
+                url: "/list_more",
+                type: "GET",
+                data: { page: currentPage },
+                success: function(data) {
+                    if (data.length === 0) {
+                        $(window).off("scroll");
+                        return;
+                    }
+                    distributePosts(data);
+                    isLoading = false;
+                },
+                error: function() {
+                    console.error("게시물 로딩 실패");
+                }
+            });
+        }
+
+        // 스크롤 감지
+        $(window).on("scroll", function() {
+            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
+                loadMorePosts();
+            }
+        });
+
+        if (!Mobile()) {
+            let initialPosts = [];
+            $(".fake__lists li").each(function() {
+                let $li = $(this);
+                initialPosts.push({
+                id: $li.find("a").attr("href").split("/post/")[1],
+                title: $li.find(".lists__title").text(),
+                category: $li.find(".lists__category").text(),
+                thumbnail_img: $li.find("img").attr("src"),
+                contents: $li.find(".lists__content").text(),
+                add_date_str: $li.find(".lists__date").text()
+                });
+            });
+
+            distributePosts(initialPosts);
+        }
+    </script>
 {% endblock %}
     </div>
     </body>