mobile - update

app.py

@@ -279,12 +279,12 @@ def list(cate=None):
         query = f"""SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
                     FROM `blog`
                     WHERE `use_yn` = 'Y' {cate_condition}
-                    ORDER BY `add_date` DESC;"""
+                    ORDER BY `add_date` DESC LIMIT 10;"""
     else:
         query = f"""SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
                     FROM `blog`
                     WHERE `use_yn` = 'Y' AND `public_yn` = 'Y' {cate_condition}
-                    ORDER BY `add_date` DESC;"""
+                    ORDER BY `add_date` DESC LIMIT 10;"""
 
     r, posts = sql_execute(query, params, is_data=True)
 
@@ -294,6 +294,38 @@ def list(cate=None):
 
     return render_template('list.html', posts=posts)
 
+@app.route('/list_more')
+def list_more():
+    page = int(request.args.get('page', 1))
+    limit = 10
+    offset = (page - 1) * limit
+
+    cate = request.args.get('cate')
+    cate_condition = ""
+    params = []
+
+    if cate:
+        cate_condition = "AND `category` = %s"
+        params.append(cate)
+
+    query = f"""
+        SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
+        FROM `blog`
+        WHERE `use_yn` = 'Y' 
+        { "AND `public_yn` = 'Y'" if 'user_info' not in session else "" }
+        {cate_condition}
+        ORDER BY `add_date` DESC
+        LIMIT %s OFFSET %s
+    """
+    params.extend([limit, offset])
+    r, posts = sql_execute(query, tuple(params), is_data=True)
+
+    for post in posts:
+        post['contents'] = remove_html_tags(post['contents'])[:150]
+        post['add_date_str'] = post['add_date'].strftime("%b %d / %Y")
+
+    return jsonify(posts)
+
 # ============================================
 # 관리자 페이지
 # ============================================

static/css/style.css

@@ -280,3 +280,61 @@
     .list__posts li a{display:block;width:100%;height:100%;}
     .list__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
     .list__posts li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
+
+    @media (max-width: 1023px) {
+        html, body{margin:0;overflow-x:hidden;min-height:100%;}
+        .body__wrap{width:100%;max-width:640px;margin:0 auto;position:relative;}
+
+        .nav__div{height:30px;border:none;padding:20px;position:absolute;}
+        .nav__title{display:none;}
+
+        .menu__wrap{width:calc(100% - 40px);z-index:999;max-width:640px;position:absolute;height:100vh;}
+        .wixon__wrap{width:100%;}
+        header{height:70px;}
+        .header__inner{width:100%;height:70px;}
+        h1{margin:0 !important;}
+        .header__inner h1 img{height:70px;padding:10px 20px;}
+        .container{margin-top:30px;}
+        .content{border:none;}
+        .content__inner{display:none;}
+        .fake__lists{display:block;}
+        .fake__lists li{border-bottom: 1px solid #e7e6e7;padding-top:30px;}
+        footer{height:100%;position:relative;}
+        .footer__inner{display:block;padding:0 20px;width:auto;}
+        .footer__tel{padding-top:30px;}
+        .footer__info{text-align:center;}
+        .footer__info ul{display:none;}
+        footer address{margin-top:10px;}
+        .slogan{display:none;}
+        .footer__logo{margin:0;padding:50px 0;text-align:center;}
+        .footer__logo img{width:70%;}
+
+        .container__post .content{width:auto;padding:0 30px;}
+        .title__div{display:block;height:auto;line-height:1em;padding:10px;width:auto;}
+        .content__title{line-height:1.5em;text-indent:0;}
+        .content__date{padding-top:10px;}
+        .content__desc{padding:10px;word-break:break-word;}
+        .content__desc > div{width:auto !important;}
+        .other__list__way{flex-shrink: 0;}
+        .other__list__title{padding-left:20px;}
+        .other__list__date{display:none;}
+        .btn__area{text-align:center;display:flex;justify-content: space-around;padding-top:30px;padding-bottom:0;}
+        .btn__area a{margin:0;width:30%;}
+
+        .login__container{padding-top:50px;}
+        .login__container .uk-form-stacked{padding-top:50px;width:auto !important;min-width:auto !important;}
+        
+        .post__container form{width:auto !important;min-width:auto !important;}
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    }   

templates/base.html

@@ -2,6 +2,7 @@
 <html>
 <head>
     <title>WIXON Blog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
     <link rel="stylesheet" href="/static/css/style.css"/>
     <!-- include libraries(jQuery, bootstrap) -->
@@ -19,51 +20,57 @@
     {% block staticfiles %}{% endblock %}
 </head>
 <body>
-    <div class="nav__div">
+    <div class="body__wrap">
-        <span class="uk-icon menu__open" uk-icon="icon: menu"></span>
+        <div class="nav__div">
-        <span class="nav__title">WXNNER BLOG</span>
+            <span class="uk-icon menu__open" uk-icon="icon: menu"></span>
-    </div>
+            <span class="nav__title">WXNNER BLOG</span>
+        </div>
 
-    <div class="menu__wrap">
+        <div class="menu__wrap">
-        <div class="menu__close"><button class="uk-icon" uk-icon="icon: close"></button></div>
+            <div class="menu__close"><button class="uk-icon" uk-icon="icon: close"></button></div>
-        <div class="menu__box">
+            <div class="menu__box">
-            <ul>
+                <ul>
-                <li><a href="/list">최신테크뉴스</a></li>
+                    <li><a href="/list">최신테크뉴스</a></li>
-                <li><a href="/list/NEWS">WXN 뉴스</a></li>
+                    <li><a href="/list/NEWS">WXN 뉴스</a></li>
-                <li><a href="/list/IT">IT 요즘</a></li>
+                    <li><a href="/list/IT">IT 요즘</a></li>
-                <!-- <li><a href="/list">IT활용자료(윅슨전용)</a></li> -->
+                    <!-- <li><a href="/list">IT활용자료(윅슨전용)</a></li> -->
-                <li><a href="/list/ETC">ETC</a></li>
+                    <li><a href="/list/ETC">ETC</a></li>
+                </ul>
+            </div>
+            <ul class="login__section">
+                {% if g.is_login %}
+                    <li>
+                        <a class="user__nav__open" href="#">{{ g.user_info.mb_name }} <span class="uk-icon" uk-icon="icon: triangle-down"></span></a>
+                        <div class="login_nav">
+                            <ul>
+                                <li class="uk-active"><a href="/write">포스트 작성</a></li>
+                                <li class="uk-active"><a href="/admin/">관리자 페이지</a></li>
+                                <li class="uk-active"><a href="/logout">LOGOUT</a></li>
+                            </ul>
+                        </div>
+                    </li>
+                {% else %}
+                    <li class="login__btn"><a href="/login">LOGIN</a></li>
+                {% endif %}
             </ul>
         </div>
-        <ul class="login__section">
-            {% if g.is_login %}
-                <li>
-                    <a class="user__nav__open" href="#">{{ g.user_info.mb_name }} <span class="uk-icon" uk-icon="icon: triangle-down"></span></a>
-                    <div class="login_nav">
-                        <ul>
-                            <li class="uk-active"><a href="/write">포스트 작성</a></li>
-                            <li class="uk-active"><a href="/admin/">관리자 페이지</a></li>
-                            <li class="uk-active"><a href="/logout">LOGOUT</a></li>
-                        </ul>
-                    </div>
-                </li>
-            {% else %}
-                <li class="login__btn"><a href="/login">LOGIN</a></li>
-            {% endif %}
-        </ul>
-    </div>
 
-    <div class="wixon__wrap">
+        <div class="wixon__wrap">
-        <header>
+            <header>
-            <div class="header__inner">
+                <div class="header__inner">
-                <h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
+                    <h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
-            </div>
+                </div>
-        </header>
+            </header>
+
+        {% block content %}{% endblock %}
     
-    {% block content %}{% endblock %}
 
 <script>
     $(document).ready(function(){
+        function isMobile() {
+            return $(window).width() <= 1023;
+        }
+
         // 로그인 메뉴 활성화
         let check_state = 0;
 
@@ -80,17 +87,29 @@
 
         // 메뉴 토글
         $(".menu__open").click(function() {
-            $(".menu__wrap").show();
+            if(isMobile()){
-            $(".nav__div").animate({"right":"-68px"}, 300, function(){
+                // 모바일용 메뉴 동작
-                $(".menu__wrap").animate({"right":"0"}, 700);
+                $(".menu__wrap").fadeIn(300).css({"right": "0"});
-            });
+            }else{
+                // PC용 메뉴 동작
+                $(".menu__wrap").show();
+                $(".nav__div").animate({"right": "-68px"}, 300, function(){
+                    $(".menu__wrap").animate({"right": "0"}, 700);
+                });
+            }
         });
 
         $('.menu__close').click(function() {
-            $(".menu__wrap").animate({"right":"-440px"}, 700, function(){
+            if (isMobile()) {
-                $(".menu__wrap").hide();
+                // 모바일용 메뉴 닫기
-                $(".nav__div").animate({"right":"0"}, 300);
+                $(".menu__wrap").fadeOut(300);
-            });
+            } else {
+                // PC용 메뉴 닫기
+                $(".menu__wrap").animate({"right": "-440px"}, 700, function(){
+                    $(".menu__wrap").hide();
+                    $(".nav__div").animate({"right": "0"}, 300);
+                });
+            }
         });
     })
 </script>

templates/edit_post.html

@@ -14,8 +14,8 @@
         font-size: 16px !important;
     }
     </style>
-    <div class="uk-container uk-margin-top" style="margin-bottom: 30px">
+    <div class="uk-container uk-margin-top post__container" style="margin-bottom: 30px">
-        <h1 class="uk-text-center"><span>포스트 수정</span></h1>
+        <h2 class="uk-text-center"><span>포스트 수정</span></h2>
         <form action="/edit_post/{{ post.id }}" method="post" class="uk-form-stacked">
             <div class="uk-margin">
                 <label class="uk-form-label" for="title">제목</label>
@@ -82,6 +82,8 @@
                     }
                 }
             });
+
+            $(".nav__div").hide();
         });
     </script>
 {% endblock %}

templates/index.html

@@ -90,48 +90,59 @@
             console.log(moment().format('ll'));
 
             $(document).ready(function() {
-                const count__lists = $(".fake__lists li").length;
+                function Mobile() {
-                if (count__lists < 4) {
+                    return $(window).width() <= 1023;
-                    for (let i = 0; i < count__lists; i++) {
+                }
-                        let n_1 = i % 3;
+
-                        switch (n_1) {
+
-                            case 1.:
+                if(Mobile()){
-                                $(".post__lists0").append($(".fake__lists li:first-child"));
+                    // 모바일용 메뉴 동작
-                                break;
+
-                            case 2:
+                }else{
-                                $(".post__lists1").append($(".fake__lists li:first-child"));
+                    // PC용 메뉴 동작
-                                break;
+                    const count__lists = $(".fake__lists li").length;
-                            case 0:
+                    if (count__lists < 4) {
-                                $(".post__lists2").append($(".fake__lists li:first-child"));
+                        for (let i = 0; i < count__lists; i++) {
-                                break;
+                            let n_1 = i % 3;
-                        }
+                            switch (n_1) {
-                    }
+                                case 1.:
-                }else if(count__lists>3 && count__lists<7){
+                                    $(".post__lists0").append($(".fake__lists li:first-child"));
-                    $(".post__lists2").append($(".fake__lists li:first-child"));
+                                    break;
-                    for (let i = 0; i < count__lists-1; i++) {
+                                case 2:
-                        let n_1 = i % 2;
+                                    $(".post__lists1").append($(".fake__lists li:first-child"));
-                        switch (n_1) {
+                                    break;
-                            case 0:
+                                case 0:
-                                $(".post__lists0").append($(".fake__lists li:first-child"));
+                                    $(".post__lists2").append($(".fake__lists li:first-child"));
-                                break;
+                                    break;
-                            case 1:
+                            }
-                                $(".post__lists1").append($(".fake__lists li:first-child"));
+                        }
-                                break;
+                    }else if(count__lists>3 && count__lists<7){
-                        }
+                        $(".post__lists2").append($(".fake__lists li:first-child"));
-                    }
+                        for (let i = 0; i < count__lists-1; i++) {
-                }else{
+                            let n_1 = i % 2;
-                    for(let i=0;i<6;i++){
+                            switch (n_1) {
-                        let n_1 = i % 2;
+                                case 0:
-                        switch(n_1){
+                                    $(".post__lists0").append($(".fake__lists li:first-child"));
-                            case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
+                                    break;
-                                break;
+                                case 1:
-                            case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
+                                    $(".post__lists1").append($(".fake__lists li:first-child"));
-                                break;
+                                    break;
-                        }
+                            }
-                    }
+                        }
-                    $(".post__lists2").append($(".fake__lists li:first-child"));
+                    }else{
+                        for(let i=0;i<6;i++){
+                            let n_1 = i % 2;
+                            switch(n_1){
+                                case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
+                                    break;
+                                case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
+                                    break;
+                            }
+                        }
+                        $(".post__lists2").append($(".fake__lists li:first-child"));
+                    }
+                    $(".fake__lists").html("");
                 }
-                $(".fake__lists").html("");
             })
         </script>
         {% endblock %}

templates/list.html

@@ -65,27 +65,96 @@
         </div>
     </footer>
     <script>
-    moment.locale('en');
+        let currentPage = 1;
-    console.log(moment().format('ll'));
+        let isLoading = false;
 
-    $(document).ready(function() {
+        function Mobile() {
-        const count__lists = $(".fake__lists li").length;
+            return $(window).width() <= 1023;
-        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;
-            }
         }
-    })
+
-</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>

templates/login.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="uk-container uk-margin-top">
+<div class="uk-container uk-margin-top login__container">
     <h1 class="uk-text-center"><span>LOGIN</span></h1>
     {% with messages = get_flashed_messages() %}
         {% if messages %}

templates/write.html

@@ -13,8 +13,8 @@
             font-size: 16px !important;
         }
     </style>
-    <div class="uk-container uk-margin-top" style="margin-bottom: 30px">
+    <div class="uk-container uk-margin-top post__container" style="margin-bottom: 30px">
-        <h1 class="uk-text-center"><span>포스트 작성</span></h1>
+        <h2 class="uk-text-center"><span>포스트 작성</span></h2>
         <form action="/write" method="post" class="uk-form-stacked">
             <div class="uk-margin">
                 <label class="uk-form-label" for="title">제목</label>
@@ -79,6 +79,8 @@
                     }
                 }
             });
+
+            $(".nav__div").hide();
         }
     </script>
 {% endblock %}