윅슨 블로그 수정사항 업데이트 완료. - 페이지네이션 기능은 추후 어떤식으로 보여질거냐에 따라 추가해야함.

2023-08-21 17:44:35 +09:00
parent 19359fa961
commit bb044c4a39
13 changed files with 514 additions and 157 deletions
--- a/app.py
+++ b/app.py
@@ -96,15 +96,17 @@ def sql_execute(q, d, is_data=False, is_last_id=False):
 def index():
    if 'user_info' in session:  # 로그인된 사용자가 있을 경우
        # 외부 공개 안된 글도 포함하여 모든 블로그 포스트를 가져옵니다.
-        query = "SELECT `id`, `title`, `thumbnail_img`, `contents` FROM `blog` WHERE `use_yn` = 'Y' ORDER BY `add_date` DESC;"
+        query = "SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date` FROM `blog` WHERE `use_yn` = 'Y' ORDER BY `add_date` DESC limit 7;"
+        random_query = "SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date` FROM `blog` WHERE `use_yn` = 'Y' ORDER BY rand();"
    else:  # 로그인된 사용자가 없을 경우
        # 외부 공개된 블로그 포스트만 가져옵니다.
-        query = "SELECT `id`, `title`, `thumbnail_img`, `contents` FROM `blog` WHERE `use_yn` = 'Y' and `public_yn` = 'Y' ORDER BY `add_date` DESC;"
+        query = "SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date` FROM `blog` WHERE `use_yn` = 'Y' and `public_yn` = 'Y' ORDER BY `add_date` DESC limit 7;"
+        random_query = "SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date` FROM `blog` WHERE `use_yn` = 'Y' and `public_yn` = 'Y' ORDER BY rand();"

    r, posts = sql_execute(query, (), is_data=True)
-
+    r, random_posts = sql_execute(random_query, (), is_data=True)
    # `index.html` 템플릿으로 데이터를 전달합니다.
-    return render_template('index.html', posts=posts)
+    return render_template('index.html',posts=posts, random_posts=random_posts)


@app.route('/login', methods=['GET', 'POST'])
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -0,0 +1,235 @@
+    @font-face {
+        src: url(/static/font/SourceHanSansK-Medium.woff) format('woff');
+        font-family: 'SourceHanSansK';
+        font-weight: 600;
+    }
+    @font-face {
+        src: url(/static/font/SourceHanSansK-Regular.woff) format('woff');
+        font-family: 'SourceHanSansK';
+        font-weight: 400;
+    }
+    @font-face {
+        src: url(/static/font/SourceHanSansK-ExtraLight.woff) format('woff');
+        font-family: 'SourceHanSansK';
+        font-weight: 100;
+    }
+    @font-face {
+        src: url(/static/font/NanumSquareR.woff) format('woff');
+        font-family: 'NanumSquare';
+    }
+
+    *{margin:0;padding:0;}
+    ol, ul{padding:0;margin:0;}
+    li{list-style:none;}
+    a:link {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:visited {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: inherit;
+    }
+
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    /* 기본 */
+    .wixon__wrap{width:100%;font-family: 'SourceHanSansK', sans-serif;}
+    .font__namum{font-family:'NanumSquare', sans-serif !important;}
+
+    /* header */
+    header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
+    .header__inner{
+        width:1620px;
+        height:219px;
+        margin:0 auto;
+        border-bottom:1px solid #e7e6e7;
+        display:flex;
+        justify-content:space-between;
+        position:relative;
+    }
+    h1{margin-top:70px;margin-left:200px;}
+    .nav__div{
+        margin-right:245px;
+        margin-top:97px;
+        font-size:19px;
+        letter-spacing:8.5px;
+        font-weight:100;
+        color:#901438;
+        cursor:default;
+    }
+    .nav__div .uk-icon{cursor:pointer;}
+    .login__section{position:absolute;width:100px;right:0;top:100px;text-align:right;}
+    .login_nav{display:none;}
+
+    /* main index */
+    .container{width:100%;max-width:1920px;margin:85px auto;}
+    .content{width:1200px;padding:0 210px;margin:0 auto;border-bottom:1px solid #e7e6e7;}
+    .content__inner{width:100%;}
+    .content__inner::after{content:"";display:block;clear:both;}
+    .post__lists0, .post__lists1, .new__div{float:left;}
+    .post__lists0, .post__lists1{width:400px;}
+    .post__lists0{padding-right:30px;}
+    .post__lists1{padding-right:50px;}
+    .new__div{width:320px;}
+    .post__lists li{width:100%;height:auto;}
+    .post__lists li a{display:block;width:100%;height:100%;}
+    .lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;}
+    .lists__img img{width:100%;}
+    .lists__desc{padding-top:25px;}
+    .lists__category{
+        width:60px;
+        font-size:0.7em;
+        color:#898989;
+        text-align:center;
+        border-bottom:1px solid #c9c9c9;
+        margin:0 auto;
+    }
+    .lists__title{
+        overflow:hidden;
+        text-overflow:ellipsis;
+        display:-webkit-box;
+        -webkit-line-clamp:2;
+        -webkit-box-orient:vertical;
+        text-align:center;
+        word-break:keep-all;
+        padding:0 30px;
+        font-size: 1.4em;
+        line-height: 1.3;
+        margin:13px 0 20px;
+        color:#111;
+        font-family: 'SourceHanSansK', sans-serif !important;
+    }
+    .lists__content{
+        overflow:hidden;
+        text-overflow:ellipsis;
+        display:-webkit-box;
+        -webkit-line-clamp:3;
+        -webkit-box-orient:vertical;
+        color:#898989;
+        font-size:0.85em;
+        padding:0 20px;
+        text-align:center;
+        word-break:keep-all;
+        line-height:1.3;
+    }
+    .lists__date{text-align:center;font-size:0.8em;margin:20px 0 60px;color:#898989;}
+    .lists__date b{color:#111;font-weight:400;}
+    .fake__lists{display:none;}
+
+    .new__post__div{width:100%;}
+    .new__post__div h2{font-size:1.45em;letter-spacing:-1px;text-indent:10px;margin-bottom:10px;}
+    .new__posts{width:100%;}
+    .new__posts li{border-top:1px solid #dcdcdc;width:100%;}
+    .new__desc{width:100%;}
+    .new__category{width:35px;color:#898989;border-bottom:1px solid #c9c9c9;font-size:0.7em;padding-top:12px;}
+    .new__title{
+        width:100%;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        display:-webkit-box;
+        -webkit-line-clamp:3;
+        -webkit-box-orient:vertical;
+        word-break:keep-all;
+        font-size: 0.75em;
+        color:#666;
+        margin:20px 0 15px;
+        font-weight:600;
+    }
+    .new__date{font-size:0.7em;margin-bottom:30px;color:#898989;}
+    .new__date b{color:#111;font-weight:400;}
+    .post__lists li:hover, .new__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
+    .post__lists li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
+
+    /* footer */
+    footer{width:100%;height:430px;background-color:#100e11;}
+    .footer__inner{
+        width:1620px;
+        margin:0 auto;
+        display:flex;
+        justify-content:space-between;
+        font-weight:600;
+        color:#777;
+        padding-left:30px;
+    }
+    .footer__tel{font-size:0.65em;letter-spacing:-0.25px;margin:0;padding-top:175px;}
+    footer address{display:block;font-size:0.65em;letter-spacing:-0.25px;margin:3px 0 0;}
+    .copywriter{font-size:0.65em;letter-spacing:-0.25px;text-transform:uppercase;margin:20px 0 15px;}
+    .footer__logo{padding-top:155px;padding-right:80px;}
+    .slogan{font-size:0.65em;letter-spacing:1px;text-transform:uppercase;margin:15px 0 0;}
+    .footer__info ul{display:flex;}
+    .footer__info ul li:first-child{padding-top:25px;margin-right:75px;}
+    .footer__info ul li:last-child{padding-top:15px;}
+
+    /* post */
+    .container__post{margin-bottom:90px;}
+    .content__info{width:100%;padding-top:60px;}
+    .content__category{font-size:0.7em;text-indent:15px;color:#898989;margin-bottom:5px;}
+    .title__div{
+        width:100%;height:50px;
+        line-height:50px;
+        border-top:1px solid #636363;
+        border-bottom:1px solid #d2d2d2;
+        display:flex;justify-content:space-between;
+    }
+    .content__title{
+        line-height:50px;
+        text-indent:13px;
+        font-size:1.1em;
+        color:#242424;
+        font-weight:400;
+        margin:0;
+        font-family: 'SourceHanSansK', sans-serif !important;
+    }
+    .content__date{margin:0;font-size:0.75em;padding-right:60px;}
+    .content__date span{margin-right:10px;font-size:1.2em;}
+    .content__desc{padding:40px 55px;font-size:0.85em;color:#343434;}
+    .etc__list{width:100%;}
+    .other__list{width:100%;border-top:1px solid #727272;border-bottom:1px solid #727272;}
+    .other__list ul{width:100%;}
+    .other__list li{width:100%;height:50px;display:flex;justify-content:left;margin:0;position:relative;}
+    .other__list__way{text-indent:13px;line-height:50px;margin:0;font-size:0.9em;color:#636363;}
+    .other__list__title{
+        margin:0;
+        width:630px;
+        line-height:50px;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+        padding-left:55px;
+        font-size:0.75em;
+    }
+    .other__list__date{position:absolute;right:25px;top:15px;margin:0;font-size:0.75em;}
+    .other__list__date span{margin-right:10px;font-size:1.2em;}
+    .btn__area{text-align:right;padding-bottom:145px;}
+    .btn__area a{
+        display:inline-block;
+        width:130px;height:40px;
+        line-height:40px;
+        margin-top:25px;margin-right:12px;
+        text-align:center;
+    }
+    .btn__area .btn__lists{background-color:#000;color:#fff;}
+    .btn__area .btn__delete{border:1px solid #f0506e;color:#f0506e;}
+    .btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}
+
+
+
--- a/static/font/NanumSquareR.woff
+++ b/static/font/NanumSquareR.woff
--- a/static/font/SourceHanSansK-ExtraLight.woff
+++ b/static/font/SourceHanSansK-ExtraLight.woff
--- a/static/font/SourceHanSansK-Medium.woff
+++ b/static/font/SourceHanSansK-Medium.woff
--- a/static/font/SourceHanSansK-Regular.woff
+++ b/static/font/SourceHanSansK-Regular.woff
--- a/static/images/logo.png
+++ b/static/images/logo.png
--- a/static/images/lpstock.png
+++ b/static/images/lpstock.png
--- a/static/images/menu.png
+++ b/static/images/menu.png
--- a/static/images/opusclam.png
+++ b/static/images/opusclam.png
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,72 +3,34 @@
 <head>
    <title>Blog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
-    <style>
-        a:link {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        a:visited {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        a:hover {
-            color: inherit;
-            text-decoration: underline;
-        }
-
-        ::-webkit-scrollbar {
-            width: 10px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #888;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-    </style>
-
+    <link rel="stylesheet" href="/static/css/style.css"/>
    <!-- include libraries(jQuery, bootstrap) -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-
    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
-
-
+    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit-icons.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 </head>
 <body>
-
-<nav class="uk-navbar-container" uk-navbar>
-    <div class="uk-navbar-left">
-        <ul class="uk-navbar-nav">
-            <li class="uk-active"><a href="/">
-                <img src="http://webmail.wixon.co.kr/user_img/logoImage.jpeg" alt="">
-            </a></li>
-        </ul>
+    <div class="wixon__wrap">
+        <header>
+            <div class="header__inner">
+                <h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
+                <div class="nav__div">
+                    <span class="nav__title">WXNNER BLOG</span>
+                    <span class="uk-icon" uk-icon="icon: menu"></span>
                </div>
-
-
-    <div class="uk-navbar-right">
-        <ul class="uk-navbar-nav">
+                <ul class="login__section">
                    {% if g.is_login %}
                        <li>
-                    <a href="#">{{ g.user_info.mb_name }} <span class="uk-icon"
-                                                                uk-icon="icon: triangle-down"></span></a>
-                    <div class="uk-navbar-dropdown">
-                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                            <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 target="_blank" href="http://www.wixon.co.kr/backS1te">관리자 페이지</a></li>
                                    <li class="uk-active"><a href="/logout">로그아웃</a></li>
@@ -80,13 +42,22 @@
                    {% endif %}
                </ul>
            </div>
-
-
-</nav>
+        </header>

    {% block content %}{% endblock %}
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit-icons.min.js"></script>
-</body>
-</html>
+        <script>
+            $(document).ready(function(){
+                // 로그인 메뉴 활성화
+                let check_state = 0;
+                $(".login__section .user__nav__open").click(function(){
+                    if(check_state != 0){
+                        $(this).find("span").attr("uk-icon","icon: triangle-down");
+                        check_state = 0;
+                    }else{
+                         $(this).find("span").attr("uk-icon","icon: triangle-up");
+                         check_state = 1;
+                    }
+                    $(".login_nav").toggle(300);
+                });
+            })
+        </script>
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,37 +1,140 @@
+
        {% extends 'base.html' %}

        {% block content %}
-    <style>
-        .blog-card {
-            margin: 10px;
-        }
-
-        .blog-card img {
-            width: 100%;
-            height: auto;
-        }
-    </style>
-    <div class="uk-container">
-        <div class="uk-grid uk-grid-small uk-child-width-1-4@m uk-child-width-1-2@s" uk-grid>
+            <div class="container">
+                <div class="content">
                    {% if not posts %}
-                <h4 style="margin-top: 30px">작성된 포스트가 없습니다.</h4>
+                        <h4 style="margin-top: 100px">작성된 포스트가 없습니다.</h4>
                    {% else %}
+                        <div class="content__inner">
+                            <ul class="post__lists post__lists0">
+                            </ul>
+                            <ul class="post__lists post__lists1">
+                            </ul>
+                            <div class="new__div">
+                                <ul class="post__lists post__lists2">
+                                </ul>
+                                <div class="new__post__div">
+                                    <h2>최근 포스트</h2>
+                                    <ul class="new__posts">
                                        {% for post in posts %}
-                    <div>
-                        <div class="uk-card uk-card-default blog-card">
-                            <div class="uk-card-media-top">
-                                <img src="{{ post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}"
-                                     alt="{{ post.title }}" style="max-width: 100%;max-height: 500px;">
-                            </div>
-                            <div class="uk-card-body">
-                                <h3 class="uk-card-title">{{ post.title }}</h3>
-                                <a href="{{ url_for('post', post_id=post.id) }}" class="uk-button uk-button-text">Read
-                                    more</a>
-                            </div>
-                        </div>
+                                            <li>
+                                                <a href="{{ url_for('post', post_id=post.id) }}">
+                                                    <div class="new__desc">
+                                                        <p class="new__category">{{ post.category }}</p>
+                                                        <h3 class="new__title">{{ post.title }}</h3>
+                                                        <p class="new__date">
+                                                            <b>{{ (post.add_date).strftime("%b %d") }}</b> / {{ (post.add_date).strftime("%Y") }}
+                                                        </p>
                                                    </div>
+                                                </a>
+                                            </li>
                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <ul class="fake__lists">
+                            {% for r_post in random_posts %}
+                                <li>
+                                    <a href="{{ url_for('post', post_id=r_post.id) }}">
+                                        <div class="lists__img">
+                                            <img src="{{ r_post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}" alt="{{ r_post.title }}" />
+                                        </div>
+                                        <div class="lists__desc">
+                                            <p class="lists__category">{{ r_post.category }}</p>
+                                            <h3 class="lists__title">{{ r_post.title }}</h3>
+                                            <p class="lists__content">
+                                                컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고 컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고 컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고
+                                            </p>
+                                            {# <p class="lists__content">{{ r_post.contents | safe }}</p> #}
+                                            <p class="lists__date">
+                                                <b>{{ (r_post.add_date).strftime("%b %d") }}</b> / {{ (r_post.add_date).strftime("%Y") }}
+                                            </p>
+                                        </div>
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        </ul>
                    {% endif %}
                </div>
            </div>
+            <footer>
+                <div class="footer__inner">
+                    <div class="footer__info">
+                        <p class="footer__tel">
+                            TEL 02-3141-1305  / 1306    E-mail  cser@wixon.co.kr  /  기업부설연구소 제 2021154317호
+                        </p>
+                        <address>
+                            서울시 마포구 동교로 215-1 한사 스튜디오 406 (주)윅슨어소시에이츠 / #406 , HANSA Studio, 215-1, Donggyo-ro, Mapo-gu, Seoul,  Korea
+                        </address>
+                        <p class="copywriter">
+                            &copy; wixon associates Inc. 2022
+                        </p>
+                        <p class="slogan">
+                            wixon. Who Invariable eXistence On the New era " wixon associates Inc. "
+                        </p>
+                        <ul>
+                            <li><a href="/"><img src="/static/images/opusclam.png" alt="WIXON" /></a></li>
+                            <li><a href="/"><img src="/static/images/lpstock.png" alt="WIXON" /></a></li>
+                        </ul>
+                    </div>
+                    <h2 class="footer__logo">
+                        <a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a>
+                    </h2>
+                </div>
+            </footer>
+            <script>
+            moment.locale('en');
+            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"));
+                }
+                $(".fake__lists").html("");
+            })
+        </script>
        {% endblock %}
+        </div>
+</body>
+</html>
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,57 +1,95 @@
 {% extends 'base.html' %}

 {% block content %}
-    <div class="uk-container" style="margin-top: 30px">
-        <div class="uk-card uk-card-default uk-margin" style="padding: 10px 30px">
-            <div class="uk-card-body" style="padding: 10px 30px">
-                {% if g.is_login and (g.user_info.mb_id == post.mb_id or g.user_info.mb_id in ['admin', 'wixon']) %}
-                    <div style="float: right;color: white">
-                        <a href="{{ url_for('edit_post', post_id=post.id) }}" class="uk-button uk-button-primary">수정</a>
-                        <a class="uk-button uk-button-danger" href="javascript:blogDelete('{{ post.id }}');">삭제</a>
+        <div class="container__post">
+            <div class="content">
+                <div class="content__info">
+                    <p class="content__category">{{ post.category }}</p>
+                    <div class="title__div">
+                        <h3 class="content__title">{{ post.title }}</h3>
+                        <p class="content__date"><span>{{ post.mb_id }}</span> {{ post.add_date }}</p>
                    </div>
-                {% endif %}
-                <h3 class="uk-card-title">[{{ post.category }}] {{ post.title }}</h3>
-                <p class="uk-text-meta" style="float: right">Posted on {{ post.add_date }}</p>
-                <div style="width: 100%;border-top: 1px solid #eee;padding: 15px">
+                    <div class="content__desc">
                        {{ post.contents | safe }}
                    </div>
                </div>
-        </div>
-
-        <div class="uk-card uk-card-default uk-margin custom-table">
-            <div class="uk-card-body" style="padding: 0px">
-                <table class="uk-table uk-table-divider">
-                    <tbody>
+                <div class="etc__list">
+                    <div class="other__list">
+                        <ul>
                        {% if prev_post is not none %}
-                        <tr>
-                            <td style="width: 80px;text-align: center;padding: 8px 6px;">이전</td>
-                            <td style="padding: 8px 6px;">
+                            <li>
+                                <p class="other__list__way">이전</p>
+                                <p class="other__list__title">
                                    <a href="{{ url_for('post', post_id=prev_post.id) }}">{{ prev_post.title }}</a>
-                            </td>
-                        </tr>
+                                </p>
+                                <p class="other__list__date">
+                                    <span>{{ prev_post.mb_id }}</span> {{ prev_post.add_date }}
+                                </p>
+                            </li>
+                        {% else %}
+                            <li>
+                                <p class="other__list__way">이전</p>
+                                <p class="other__list__title">
+                                    이전 글이 없습니다.
+                                </p>
+                            </li>
                        {% endif %}
                        {% if next_post is not none %}
-                        <tr>
-                            <td style="width: 80px;text-align: center;padding: 8px 6px;">다음</td>
-                            <td style="padding: 8px 6px;">
-                                <a href="{{ url_for('post', post_id=next_post.id) }}">
-                                    <div style="width: 100%">
-                                        {{ next_post.title }}
-                                    </div>
-                                </a>
-                            </td>
-                        </tr>
+                            <li>
+                                <p class="other__list__way">다음</p>
+                                <p class="other__list__title">
+                                    <a href="{{ url_for('post', post_id=next_post.id) }}">{{ next_post.title }}</a>
+                                </p>
+                                <p class="other__list__date">
+                                    <span>{{ next_post.mb_id }}</span> {{ next_post.add_date }}
+                                </p>
+                            </li>
+                        {% else %}
+                            <li>
+                                <p class="other__list__way">다음</p>
+                                <p class="other__list__title">
+                                    다음 글이 없습니다.
+                                </p>
+                            </li>
                        {% endif %}
-                    </tbody>
-                </table>
+                        </ul>
                    </div>
-
-            <div style="text-align: right;padding: 15px;">
-                <a href="{{ url_for('index') }}" class="uk-button uk-button-default">목록</a>
+                    <div class="btn__area">
+                    {% if g.is_login and (g.user_info.mb_id == post.mb_id or g.user_info.mb_id in ['admin', 'wixon']) %}
+                        <a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn__edit">수정</a>
+                        <a class="btn__delete" href="javascript:blogDelete('{{ post.id }}');">삭제</a>
+                    {% endif %}
+                        <a href="{{ url_for('index') }}" class="btn__lists">목록</a>
                    </div>
                </div>
            </div>
-
+        </div>
+        <footer>
+                <div class="footer__inner">
+                    <div class="footer__info">
+                        <p class="footer__tel">
+                            TEL 02-3141-1305  / 1306    E-mail  cser@wixon.co.kr  /  기업부설연구소 제 2021154317호
+                        </p>
+                        <address>
+                            서울시 마포구 동교로 215-1 한사 스튜디오 406 (주)윅슨어소시에이츠 / #406 , HANSA Studio, 215-1, Donggyo-ro, Mapo-gu, Seoul,  Korea
+                        </address>
+                        <p class="copywriter">
+                            &copy; wixon associates Inc. 2022
+                        </p>
+                        <p class="slogan">
+                            wixon. Who Invariable eXistence On the New era " wixon associates Inc. "
+                        </p>
+                        <ul>
+                            <li><a href="/"><img src="/static/images/opusclam.png" alt="WIXON" /></a></li>
+                            <li><a href="/"><img src="/static/images/lpstock.png" alt="WIXON" /></a></li>
+                        </ul>
+                    </div>
+                    <h2 class="footer__logo">
+                        <a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a>
+                    </h2>
+                </div>
+            </footer>
+    </div>
    <script>
        function blogDelete(id) {
            Swal.fire({
@@ -87,6 +125,14 @@
                }
            });
        }
+        $(document).ready(function(){
+            var cheack_li = $(".other__list li").length;
+            if(cheack_li>1){
+                $(".other__list li:first-child").css("borderBottom","1px solid #d2d2d2");
+            }
+        })
    </script>
 {% endblock %}
+</body>
+</html>