From 39de8edde4f49b976eee654ca3183838f7666f04 Mon Sep 17 00:00:00 2001 From: lbard33 Date: Fri, 16 Jan 2026 16:12:48 +0900 Subject: [PATCH] mobile - update --- app.py | 36 ++++++++++++- static/css/style.css | 58 +++++++++++++++++++++ templates/base.html | 109 +++++++++++++++++++++++---------------- templates/edit_post.html | 6 ++- templates/index.html | 93 ++++++++++++++++++--------------- templates/list.html | 107 +++++++++++++++++++++++++++++++------- templates/login.html | 2 +- templates/write.html | 6 ++- 8 files changed, 305 insertions(+), 112 deletions(-) diff --git a/app.py b/app.py index 2aad106..7a80422 100644 --- a/app.py +++ b/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) + # ============================================ # 관리자 페이지 # ============================================ diff --git a/static/css/style.css b/static/css/style.css index cc42c7d..02db4dd 100644 --- a/static/css/style.css +++ b/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;} + + + + + + + + + + + + + } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 93970f9..8eb08bc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,6 +2,7 @@ WIXON Blog + @@ -19,51 +20,57 @@ {% block staticfiles %}{% endblock %} -
- - WXNNER BLOG -
+
+
+ + WXNNER BLOG +
-
-
-
-
-
-
-
-

WIXON

-
-
+
+
+
+

WIXON

+
+
- {% block content %}{% endblock %} + {% block content %}{% endblock %} + \ No newline at end of file diff --git a/templates/edit_post.html b/templates/edit_post.html index 4be8bae..34d2456 100644 --- a/templates/edit_post.html +++ b/templates/edit_post.html @@ -14,8 +14,8 @@ font-size: 16px !important; } -
-

포스트 수정

+
+

포스트 수정

@@ -82,6 +82,8 @@ } } }); + + $(".nav__div").hide(); }); {% endblock %} diff --git a/templates/index.html b/templates/index.html index 1d8fa6d..6cdc00e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -90,48 +90,59 @@ console.log(moment().format('ll')); $(document).ready(function() { - const count__lists = $(".fake__lists li").length; - if (count__lists < 4) { - for (let i = 0; i < count__lists; i++) { - let n_1 = i % 3; - switch (n_1) { - case 1.: - $(".post__lists0").append($(".fake__lists li:first-child")); - break; - case 2: - $(".post__lists1").append($(".fake__lists li:first-child")); - break; - case 0: - $(".post__lists2").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++) { - 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; - } - } - }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")); + function Mobile() { + return $(window).width() <= 1023; + } + + + if(Mobile()){ + // 모바일용 메뉴 동작 + + }else{ + // PC용 메뉴 동작 + const count__lists = $(".fake__lists li").length; + if (count__lists < 4) { + for (let i = 0; i < count__lists; i++) { + let n_1 = i % 3; + switch (n_1) { + case 1.: + $(".post__lists0").append($(".fake__lists li:first-child")); + break; + case 2: + $(".post__lists1").append($(".fake__lists li:first-child")); + break; + case 0: + $(".post__lists2").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++) { + 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; + } + } + }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(""); }) {% endblock %} diff --git a/templates/list.html b/templates/list.html index fc5cb48..8a0fe97 100644 --- a/templates/list.html +++ b/templates/list.html @@ -65,27 +65,96 @@
+ + 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 = ` +
  • + +
    + ${post.title} +
    +
    +

    ${post.category}

    +

    ${post.title}

    +

    ${post.contents}

    +

    ${post.add_date_str}

    +
    +     +
    • + `; + + 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); + } + {% endblock %}
    diff --git a/templates/login.html b/templates/login.html index e80a77c..f09396c 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block content %} -
    +