feat: 게시판 500px 모드

hwe/scss/board.scss

@@ -0,0 +1,76 @@
+@import "./common/bootstrap5.scss";
+@import "@scss/game_bg.scss";
+@import "./common_legacy.scss";
+@import "../../css/config.css";
+@import "./util.scss";
+
+
+@include media-1000px {
+    #container {
+        width: 1000px;
+        margin: 0 auto;
+    }
+}
+
+@include media-500px {
+    #container {
+        width: 500px;
+        margin: 0 auto;
+    }
+}
+
+.date{
+    font-size: 0.9em;
+}
+
+.authorName,
+.authorIcon,
+.inputCommentHeader {
+    flex: 0 0 auto;
+    width: 120px;
+}
+
+#newArticle {
+    margin-top: 1em;
+}
+
+.titleInput {
+    width: 100%;
+    color: white;
+    background-color: transparent;
+    border: none;
+    margin: 1px 5px;
+}
+
+.contentInput {
+    width: 100%;
+    min-height: 3em;
+    color: white;
+    background-color: transparent;
+    border: none;
+    padding: 1px 5px;
+}
+
+.articleFrame {
+    margin: 20px auto;
+}
+
+.commentText {
+    width: 100%;
+}
+
+.text {
+    text-align: left;
+    padding: 1px 5px;
+}
+
+.submitComment {
+    width: 100%;
+}
+
+.commentText {
+    color: white;
+    background-color: transparent;
+    border: none;
+    padding: 1px 5px;
+}

hwe/scss/chiefCenter.scss

@@ -5,6 +5,7 @@
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
 @import "@scss/game_bg.scss";
+@import "@scss/util.scss";
 
 $modcolor2: color.adjust($nbase2color, $lightness: -5%);
 
@@ -86,6 +87,12 @@ $modcolor2: color.adjust($nbase2color, $lightness: -5%);
             background-color: $modcolor2;
         }
     }
+
+    #bottomBar{
+        width: 1000px;
+        margin: 0 auto;
+        position: relative;
+    }
 }
 
 @include media-500px {
@@ -183,4 +190,10 @@ $modcolor2: color.adjust($nbase2color, $lightness: -5%);
             text-align: center;
         }
     }
+
+    #bottomBar {
+        width: 500px;
+        margin: 0 auto;
+        position: relative;
+    }
 }

hwe/scss/util.scss

@@ -14,3 +14,7 @@
 .avoid-wrap {
     display: inline-block;
 }
+
+.center {
+    text-align: center;
+}

hwe/ts/PageBoard.vue

@@ -1,18 +1,12 @@
 <template>
-  <top-back-bar :title="title" />
+  <div id="container">
+    <TopBackBar :title="title" />
 
-  <table id="newArticle" class="bg0">
-    <thead>
-      <tr>
-        <td colspan="2" class="newArticleHeader bg2">새 게시물 작성</td>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th class="bg1" style="width: 66px">
-          <span class="articleTitle">제목</span>
-        </th>
-        <td>
+    <div id="newArticle" class="bg0">
+      <div class="newArticleHeader bg2 center">새 게시물 작성</div>
+      <div class="row gx-0">
+        <div class="col-2 col-md-1 articleTitle bg1 center">제목</div>
+        <div class="col-10 col-md-11">
           <input
             class="titleInput"
             type="text"
@@ -20,11 +14,11 @@
             placeholder="제목"
             v-model="newArticle.title"
           />
-        </td>
-      </tr>
-      <tr>
-        <th class="bg1">내용</th>
-        <td class="boardArticle">
+        </div>
+      </div>
+      <div class="row gx-0">
+        <div class="col-2 col-md-1 bg1 center">내용</div>
+        <div class="col-10 col-md-11">
           <textarea
             class="contentInput autosize"
             ref="newArticleTextForm"
@@ -32,40 +26,35 @@
             v-model="newArticle.text"
             @input="autoResizeTextarea"
           />
-        </td>
-      </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td colspan="2">
-          <button type="button" id="submitArticle" @click="submitArticle">
-            등록
-          </button>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-8 col-md-10"></div>
+        <div class="col-4 col-md-2 d-grid">
+          <b-button id="submitArticle" @click="submitArticle"> 등록 </b-button>
+        </div>
+      </div>
+    </div>
+    <div id="board">
+      <template v-if="articles && articles.length">
+        <board-article
+          v-for="article in articles"
+          :key="article.no"
+          :article="article"
+          @submit-comment="reloadArticles"
+        />
+      </template>
+      <template v-else> 게시물이 없습니다. </template>
+    </div>
 
-  <div id="board">
-    <template v-if="articles && articles.length">
-      <board-article
-        v-for="article in articles"
-        :key="article.no"
-        :article="article"
-        @submit-comment="reloadArticles"
-      />
-    </template>
-    <template v-else> 게시물이 없습니다. </template>
+    <BottomBar/>
   </div>
 </template>
 
 <script lang="ts">
-import "@scss/common/bootstrap5.scss";
-import "@scss/game_bg.scss";
-import "../../css/config.css";
-
 import { defineComponent, onMounted, reactive, ref } from "vue";
 import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 import BoardArticle from "@/components/BoardArticle.vue";
 import { convertFormData } from "@util/convertFormData";
 import axios from "axios";
@@ -105,6 +94,7 @@ export default defineComponent({
   name: "PageBoard",
   components: {
     TopBackBar,
+    BottomBar,
     BoardArticle,
   },
   props: {
@@ -155,7 +145,7 @@ export default defineComponent({
 
       this.newArticle = { title: "", text: "" };
       const newArticleTextForm = unwrap(this.newArticleTextForm);
-      newArticleTextForm.style.height = 'auto';
+      newArticleTextForm.style.height = "auto";
 
       await this.reloadArticles();
     },
@@ -188,7 +178,6 @@ export default defineComponent({
         return;
       }
 
-
       articles.length = 0;
       articles.push(...Object.values(boardResponse.articles));
       articles.reverse();
@@ -205,65 +194,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-
-
-<style>
-#newArticle {
-  width: 1000px;
-  margin: 0 auto;
-}
-
-.titleInput {
-  width: 100%;
-  color: white;
-  background-color: transparent;
-  border: none;
-  margin: 1px 5px;
-}
-
-.contentInput {
-  width: 100%;
-  min-height: 3em;
-  color: white;
-  background-color: transparent;
-  border: none;
-  padding: 1px 5px;
-}
-
-.articleFrame {
-  width: 1000px;
-  margin: 20px auto;
-}
-
-.commentText {
-  width: 100%;
-}
-
-.authorName,
-.comment .author {
-  width: 110px;
-  font-size: 85%;
-}
-
-.date {
-  width: 125px;
-  font-size: 85%;
-}
-
-.text {
-  text-align: left;
-  padding: 1px 5px;
-}
-
-.submitComment {
-  width: 100%;
-}
-
-.commentText {
-  color: white;
-  background-color: transparent;
-  border: none;
-  padding: 1px 5px;
-}
-</style>
+</script>

hwe/ts/PageChiefCenter.vue

@@ -230,6 +230,9 @@
       </template>
     </div>
   </div>
+  <div id="bottomBar">
+    <BottomBar />
+  </div>
 </template>
 <script lang="ts">
 import "@scss/common/bootstrap5.scss";
@@ -239,6 +242,7 @@ import "../../css/config.css";
 import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
 import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 import VueTypes from "vue-types";
 import { isString, range } from "lodash";
 import { mb_strwidth } from "./util/mb_strwidth";
@@ -272,6 +276,7 @@ function isDropdownChildren(e?: Event): boolean {
 export default defineComponent({
   components: {
     TopBackBar,
+    BottomBar,
     ChiefReservedCommand,
     TopItem,
     BottomItem,

hwe/ts/components/BoardArticle.vue

@@ -1,53 +1,49 @@
 <template>
-  <table class="articleFrame bg0">
-    <thead>
-      <tr class="bg1">
-        <th class="authorName">{{ article.author }}</th>
-        <th class="articleTitle">{{ article.title }}</th>
-        <th class="date">{{ article.date }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <img
-            class="authorIcon generalIcon"
-            width="64"
-            height="64"
-            :src="article.author_icon"
-          />
-        </td>
-        <td class="text" colspan="2">{{ article.text }}</td>
-      </tr>
-    </tbody>
-    <tbody class="commentList">
+  <div class="articleFrame bg0">
+    <div class="bg1 row gx-0">
+      <div class="authorName center">{{ article.author }}</div>
+      <div class="col articleTitle center">{{ article.title }}</div>
+      <div class="col-2 col-md-1 date center">{{ article.date.slice(5, 16) }}</div>
+    </div>
+    <div class="row gx-0 s-border-b">
+      <div class="col-2 col-md-1 authorIcon center">
+        <img
+          class="generalIcon"
+          width="64"
+          height="64"
+          :src="article.author_icon"
+        />
+      </div>
+      <div class="col text">{{ article.text }}</div>
+    </div>
+    <div class="commentList">
       <board-comment
         v-for="comment in article.comment"
         :key="comment.no"
         :comment="comment"
       />
-    </tbody>
-    <tfoot>
-      <tr>
-        <td class="bg2 inputCommentHeader">댓글 달기</td>
-        <td>
-          <input
-            class="commentText"
-            type="text"
-            maxlength="250"
-            placeholder="새 댓글 내용"
-            v-model.trim="newCommentText"
-            @keyup.enter="submitComment"
-          />
-        </td>
-        <td>
-          <button type="button" class="submitComment" @click="submitComment">
-            등록
-          </button>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
+    </div>
+    <div class="row gx-0">
+      <div class="bg2 inputCommentHeader center d-grid">
+        <div class="align-self-center">댓글 달기</div>
+      </div>
+      <div class="col d-grid">
+        <input
+          class="commentText"
+          type="text"
+          maxlength="250"
+          placeholder="새 댓글 내용"
+          v-model.trim="newCommentText"
+          @keyup.enter="submitComment"
+        />
+      </div>
+      <div class="col-2 col-md-1 d-grid">
+        <b-button class="submitComment" @click="submitComment" size="sm"
+          >등록</b-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { BoardArticleItem } from "@/PageBoard.vue";

hwe/ts/components/BoardComment.vue

@@ -1,10 +1,9 @@
 <template>
-  <tr class="comment">
-    <th class="author">{{ comment.author }}</th>
-    <td class="text">{{ comment.text }}</td>
-    <td class="date">{{ comment.date }}</td>
-    <!-- 삭제도 나중에 추가? -->
-  </tr>
+  <div class="row gx-0 comment s-border-b">
+    <div class="authorName center d-grid"><div class="align-self-center">{{ comment.author }}</div></div>
+    <div class="col text">{{ comment.text }}</div>
+    <div class="col-2 col-md-1 date center d-grid"><div class="align-self-center">{{ comment.date.slice(5, 16) }}</div></div>
+  </div>
 </template>
 <script lang="ts">
 import { BoardCommentItem } from "@/PageBoard.vue";

hwe/ts/components/BottomBar.vue

@@ -12,7 +12,6 @@ import { defineComponent, PropType } from "vue";
 import "@scss/game_bg.scss";
 
 export default defineComponent({
-  name: "TopBackBar",
   methods: {
     back(){
       if(this.type === 'normal'){
@@ -28,10 +27,6 @@ export default defineComponent({
     }
   },
   props: {
-    title: {
-      type: String,
-      required: true,
-    },
     type: {
       type: String as PropType<"normal"|"chief"|"close">,
       default: "normal",

hwe/ts/v_board.ts

@@ -1,14 +1,17 @@
+import "@scss/board.scss";
 import { createApp } from 'vue'
 import PageBoard from '@/PageBoard.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "@scss/common/bootstrap5.scss";
-import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { auto500px } from "./util/auto500px";
 
 declare const isSecretBoard: boolean;
 
 
+
 setAxiosXMLHttpRequest();
+auto500px();
+
 createApp(PageBoard, {
     isSecretBoard
 }).use(BootstrapVue3).mount('#app')