Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

2025-03-17 10:44:55 +09:00 · 2025-03-17 10:44:55 +09:00 · 5d4c90e604
commit 5d4c90e604
parent 4bd8ea10af 65a20845d7
28 changed files with 679 additions and 448 deletions
--- a/public/css/custom.css
+++ b/public/css/custom.css
@ -1,6 +1,70 @@
 /* 여기에 light css 작성  */

-
+/* 에러페이지 */
+/* 전체 화면을 덮는 스타일 */
+.error-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #000;
+  font-family: 'Poppins', sans-serif;
+  z-index: 9999 !important;
+}
+/* 오류 메시지 컨텐츠 */
+.error-content {
+  text-align: center;
+  animation: fadeIn 0.8s ease-in-out;
+}
+/* 에러 이미지 */
+.error-image {
+  width: 280px; /* 이미지 크기 */
+  margin-bottom: 20px;
+}
+/* 에러 코드 스타일 */
+.error-content h1 {
+  font-size: 6rem;
+  font-weight: bold;
+  color: #ff8c00; /* 오렌지 */
+  text-shadow: 2px 2px 8px rgba(255, 140, 0, 0.3);
+  margin-bottom: 60px;
+}
+/* 홈으로 돌아가기 버튼 */
+.home-btn {
+  display: inline-block;
+  padding: 10px 28px;
+  font-size: 1rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: #fff;
+  background: rgba(105, 108, 255, 0.9);
+  border-radius: 30px;
+  transition: 0.3s ease-in-out;
+  box-shadow: 0 4px 15px rgba(105, 108, 255, 0.5);
+}
+/* 버튼 호버 효과 */
+.home-btn:hover {
+  background: linear-gradient(90deg, orange, #ff8c00);
+  box-shadow: 0 0 20px rgba(255, 140, 0, 1);
+  transform: scale(1.05);
+}
+/* 페이드 인 애니메이션 */
+@keyframes fadeIn {
+  from {
+      opacity: 0;
+      transform: translateY(-10px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
 /* 휴가 */

 .fc-daygrid-event {
--- a/public/img/icons/illustrations/page-misc-error-light.png
+++ b/public/img/icons/illustrations/page-misc-error-light.png
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@ -51,6 +51,10 @@ $api.interceptors.response.use(
        // 오류 응답 처리
        if (error.response) {
            switch (error.response.status) {
+                case 400:
+                    toastStore.onToast('잘못된 요청입니다.', 'e');
+                    router.push('/error/400'); // 🚀 400 에러 발생 시 자동 이동
+                    break;
                case 401:
                    if (!error.config.headers.isLogin) {
                        // toastStore.onToast('인증이 필요합니다.', 'e');
@ -62,9 +66,11 @@ $api.interceptors.response.use(
                    break;
                case 404:
                    toastStore.onToast('요청한 페이지를 찾을 수 없습니다.', 'e');
+                    router.push('/error/404');
                    break;
                case 500:
                    toastStore.onToast('서버 오류가 발생했습니다.', 'e');
+                    router.push('/error/500');
                    break;
                default:
                    toastStore.onToast('알 수 없는 오류가 발생했습니다.', 'e');
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@ -5,28 +5,29 @@
            <span v-if="isEssential" class="text-danger">*</span>
        </label>
        <div class="col-md-10">
-            <input
-                :id="name"
-                class="form-control"
-                :type="type"
-                v-model="inputValue"
-                :maxLength="maxlength"
-                :placeholder="title"
-                :disabled="disabled"
-                :min="min"
-                autocomplete="off"
-                @focusout="$emit('focusout', modelValue)"
-                @input="handleInput"
-            />
+            <div class="d-flex align-items-center">
+                <input
+                    :id="name"
+                    class="form-control"
+                    :type="type"
+                    v-model="inputValue"
+                    :maxLength="maxlength"
+                    :placeholder="title"
+                    :disabled="disabled"
+                    :min="min"
+                    autocomplete="off"
+                    @focusout="$emit('focusout', modelValue)"
+                    @input="handleInput"
+                />
+            </div>
            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div>
-            <!-- 카테고리 중복 -->
            <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div>
        </div>
    </div>
 </template>

 <script setup>
-    import { ref, watch } from 'vue';
+import { ref, watch } from 'vue';

    // Props 정의
    const props = defineProps({
@ -78,6 +79,11 @@
            default: '',
            required: false,
        },
+        isBtn: {
+            type: Boolean,
+            default: false,
+            required: false,
+        }
    });

    // Emits 정의
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@ -10,6 +10,9 @@
                    {{ isCommon ? item.label : item }}
                </option>
            </select>
+            <div v-if="isBtn" class="ms-2">
+                    <slot name="append"></slot>
+            </div>

            <div v-if="isColor && selected"
                    class="w-px-40 h-px-30"
@ -70,6 +73,11 @@ const props = defineProps({
        default: true,
        required: false,
    },
+    isBtn: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
    isCommon: {
        type: Boolean,
        default: false,
--- a/src/components/voteboard/voteCard.vue
+++ b/src/components/voteboard/voteCard.vue
@ -1,65 +1,64 @@
 <template>
-    <div class="card mb-6"  :class="{ 'disabled-class': data.localVote.LOCVOTDDT  && (topVoters.length == 1 || data.localVote.LOCVOTRES || voteResult == 0)}">
+    <div v-if="data.voteMembers.some(item => item.MEMBERSEQ === userStore.user.id)"
+        class="card mb-6"  :class="{ 'disabled-class': data.localVote.LOCVOTDDT  && (topVoters.length == 1 || data.localVote.LOCVOTRES || voteResult == 0)}">
        <div  class="card-body" v-if="!data.localVote.LOCVOTDEL" >
            <h5 class="card-title mb-1">
                <div class="list-unstyled users-list d-flex align-items-center gap-1">
-                <img
-                class="rounded-circle user-avatar border border-3 w-px-40"
-                :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
-                :style="`border-color: ${data.localVote.usercolor} !important;`"
-                @error="$event.target.src = '/img/icons/icon.png'"
-                alt="user"
-                />
-
-                <div class="w-100">
-                <div class="d-flex justify-content-between">
-                    <div class="user-info">
-                        <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
-                        <!-- 투표완료시  -->
-                    </div>
-                    <div class="add-btn d-flex align-items-center">
-                        <!-- 투표작성자만 수정/삭제/종료 가능  -->
-                        <div v-if="userStore.user.id === data.localVote.LOCVOTREG">
-                            <button
-                            v-if="!data.localVote.LOCVOTDDT"
-                            type="button"
-                            class="btn btn-label-danger btn-icon"
-                            @click="endBtn(data.localVote.LOCVOTSEQ)"
-                            ><i class="bx bx-power-off"></i>
-                            </button>
-                            <DeleteBtn v-if="!data.localVote.LOCVOTDDT" @click="voteDelete(data.localVote.LOCVOTSEQ)" />
+                    <img
+                    class="rounded-circle user-avatar border border-3 w-px-40"
+                    :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
+                    :style="`border-color: ${data.localVote.usercolor} !important;`"
+                    @error="$event.target.src = '/img/icons/icon.png'"
+                    alt="user"
+                    />
+                    <div class="w-100">
+                        <div class="d-flex justify-content-between">
+                            <div class="user-info">
+                                <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
+                                <!-- 투표완료시  -->
+                            </div>
+                            <div class="add-btn d-flex align-items-center">
+                                <!-- 투표작성자만 수정/삭제/종료 가능  -->
+                                <div v-if="userStore.user.id === data.localVote.LOCVOTREG">
+                                    <button
+                                    v-if="!data.localVote.LOCVOTDDT"
+                                    type="button"
+                                    class="btn btn-label-danger btn-icon m-1"
+                                    @click="endBtn(data.localVote.LOCVOTSEQ)"
+                                    ><i class="bx bx-power-off"></i>
+                                    </button>
+                                    <DeleteBtn v-if="!data.localVote.LOCVOTDDT" @click="voteDelete(data.localVote.LOCVOTSEQ)" />
+                                </div>
+                                <p v-if="data.localVote.LOCVOTDDT" class="btn-icon btn-danger rounded-2"><i class="bx bx-power-off"></i></p>
+                            </div>
                        </div>
-                        <p v-if="data.localVote.LOCVOTDDT" class="btn-icon btn-danger rounded-2"><i class="bx bx-power-off"></i></p>
-                        <i v-if="yesVotetotal != '0'" class="bx bxs-check-circle link-success"></i>
                    </div>
                </div>
-                </div>
-                </div>
            </h5>
-            <h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}</h5>
+            <h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}
+                <i v-if="yesVotetotal != '0'" class="bx bxs-check-circle link-success"></i>
+            </h5>
            <small >{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</small>
            <!-- 투표안했을시-->
            <div v-if="data.localVote.LOCVOTDDT && voteResult == 0">
                <small class="text-primary text-uppercase">투표 결과없음 (😂아무도 투표하지 않았습니다)</small>
            </div>
            <div v-else>
-            <vote-card-check
-            v-if="yesVotetotal == 0 && !data.localVote.LOCVOTDDT"
-            @addContents="addContents"
-            @checkedNames="checkedNames"
-            :data="data.voteDetails"
-            :voteInfo="data.localVote"
-            :total="data.voteDetails.length "/>
-
-            <small v-if="yesVotetotal != 0 && !data.localVote.LOCVOTDDT">투표 완료 : 종료시 투표 결과가 나타납니다.</small>
-
-            <!-- 투표 결과 -->
-            <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
-            <vote-result-list  :data="topVoters"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES" :locvotreg="data.localVote.LOCVOTREG"/>
-            </div>
-            <!-- 투표완/미완 인원 -->
-            <vote-user-list
-            :data="data.voteMembers"/>
+                <vote-card-check
+                v-if="yesVotetotal == 0 && !data.localVote.LOCVOTDDT"
+                @addContents="addContents"
+                @checkedNames="checkedNames"
+                :data="data.voteDetails"
+                :voteInfo="data.localVote"
+                :total="data.voteDetails.length "/>
+                <small v-if="yesVotetotal != 0 && !data.localVote.LOCVOTDDT">투표 완료 : 종료시 투표 결과가 나타납니다.</small>
+                <!-- 투표 결과 -->
+                <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
+                    <vote-result-list  :data="topVoters"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES" :locvotreg="data.localVote.LOCVOTREG"/>
+                </div>
+                <!-- 투표완/미완 인원 -->
+                <vote-user-list
+                :data="data.voteMembers"/>
            </div>
        </div>
        <div v-else  class="card-body">
@ -96,6 +95,7 @@ const yesVotetotal = computed(() => {
    return props.data.voteDetails.reduce((sum, item) => sum + item.yesvote, 0);
 });

+
 // 가장 많은 투표를 받은 항목들 (1위)
 const topVoters = computed(() => {
    // 가장 높은 VOTE_COUNT 찾기
--- a/src/components/voteboard/voteCardCheck.vue
+++ b/src/components/voteboard/voteCardCheck.vue
@ -1,42 +1,41 @@
 <template>
    <div class="card-text">
-        <div class="demo-inline-spacing mt-4">
-        <!-- 투표리스트 -->
-            <div  v-for="(item, index) in data"
-            :key="index">
-            <vote-card-check-list
-            :data="item"
-            :multiIs = voteInfo.LOCVOTMUL
-            :selectedValues="checkedNames"
-            @update:selectedValues="updateCheckedNames"
-            />
-            <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1">
-            <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start mt-2">
-            <div class="flex-grow-1 me-2 ">
-                <form-input
-                :title="'항목 ' + (index + data.length + 1)"
-                :name="'content' + index"
-                :is-essential="false"
-                :is-alert="contentAlerts[index]"
-                v-model="item.content"
+        <div class="demo-inline-spacing">
+            <!-- 투표리스트 -->
+            <div  v-for="(item, index) in data" :key="index">
+                <vote-card-check-list
+                :data="item"
+                :multiIs = voteInfo.LOCVOTMUL
+                :selectedValues="checkedNames"
+                @update:selectedValues="updateCheckedNames"
                />
-            <link-input v-model="item.url"  />
-            </div>
-            <delete-btn @click="removeItem(index)"  />
-            </div>
-            <div class="mb-4 d-flex justify-content mt-3">
-            <plus-btn @click="addItem" :disabled="total >= 10" class="mb-2" />
-            <button class="btn btn-primary btn-icon mb-3" @click="addContentSave(item.LOCVOTSEQ)" :disabled="isSaveDisabled">
-                <i class="bx bx-check"></i>
-            </button>
-            </div>
-            </div>
-
+                <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1">
+                    <div v-for="(item, index) in itemList" :key="index" class=" mt-2">
+                        <form-input
+                        :title="'항목 ' + (index + data.length + 1)"
+                        :name="'content' + index"
+                        :is-essential="false"
+                        :is-alert="contentAlerts[index]"
+                        v-model="item.content"
+                        :is-btn="true"
+                        >
+                            <template v-slot:append>
+                                <delete-btn @click="removeItem(index)" />
+                            </template>
+                        </form-input>
+                        <link-input v-model="item.url"  class="mb-1"/>
+                    </div>
+                    <div class="d-flex justify-content">
+                        <plus-btn @click="addItem" :disabled="total >= 10" class="m-1" />
+                        <button class="btn btn-primary btn-icon mt-1" @click="addContentSave(item.LOCVOTSEQ)" :disabled="isSaveDisabled">
+                            <i class="bx bx-check"></i>
+                        </button>
+                    </div>
+                </div>
            </div>
        </div>
-
    </div>
-    <save-btn class="btn-sm mt-2" @click="selectVote"/>
+    <save-btn class="mt-2" @click="selectVote"/>
 </template>

 <script setup>
--- a/src/components/voteboard/voteInCompleteUserList.vue
+++ b/src/components/voteboard/voteInCompleteUserList.vue
@ -2,11 +2,11 @@
    <div class="d-flex align-items-center ">
        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
-            <div class="d-flex flex-wrap align-items-center">
-                <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-                    <vote-in-complete-user-list-card :data="data" />
-                </ul>
-            </div>
+                <div class="d-flex flex-wrap align-items-center">
+                    <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                        <vote-in-complete-user-list-card :data="data" />
+                    </ul>
+                </div>
            </li>
        </ul>
    </div>
--- a/src/components/voteboard/voteInCompleteUserListCard.vue
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@ -6,13 +6,13 @@
    class="avatar pull-up"
    :aria-label="data.MEMBERSEQ"
    :data-bs-original-title="getTooltipTitle(data)">
-    <img
-        class="rounded-circle user-avatar border border-3"
-        :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
-        :style="`border-color: ${data.usercolor} !important;`"
-        @error="$event.target.src = '/img/icons/icon.png'"
-        alt="user"
-    />
+        <img
+            class="rounded-circle user-avatar border border-3"
+            :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
+            :style="`border-color: ${data.usercolor} !important;`"
+            @error="$event.target.src = '/img/icons/icon.png'"
+            alt="user"
+        />
    </li>
 </template>

--- a/src/components/voteboard/voteLinkInput.vue
+++ b/src/components/voteboard/voteLinkInput.vue
@ -1,34 +1,34 @@
 <template>
-<div class="d-flex align-items-center">
+<div class="mb-2 row">
    <!-- 링크 아이콘 -->
-    <i class="bx bx-link-alt me-2" @click="togglePopover"></i>
-
+    <label for="name" class="col-md-2 col-form-label">
+        <div class="d-flex align-items-center">
+            <!-- 링크 아이콘 -->
+            <i class="bx bx-link-alt me-2" @click="togglePopover"></i>
+            <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
+            <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
+                <a :href="formattedLink" class="d-inline-block text-truncate" target="_blank" rel="noopener noreferrer">
+                    {{ link }}
+                </a>
+            </span>
+        </div>
+    </label>
    <!-- 링크 입력창 (옆으로 나오게) -->
-    <div
-    v-if="isPopoverVisible"
-    class="d-flex"
-    >
-    <input
-        v-model="link"
-        placeholder="URL을 입력해주세요"
-        class="form-control"
-        style="min-width: 500px;"
-    />
-    <save-btn class="btn-sm" @click="saveLink"/>
+    <div v-if="isPopoverVisible" class="col-md-10">
+        <div class="d-flex align-items-center">
+            <input
+                v-model="link"
+                placeholder="URL을 입력해주세요"
+                class="form-control me-2"
+            />
+            <save-btn class="btn-icon" @click="saveLink"/>
+        </div>
    </div>
-
-    <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
-    <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
-        <a :href="formattedLink" class="d-inline-block text-truncate" target="_blank" rel="noopener noreferrer">
-        {{ link }}
-        </a>
-    </span>
 </div>
 </template>

 <script setup>
 import SaveBtn from '@c/button/SaveBtn.vue'
-
 import { ref, computed } from "vue";

 const props = defineProps({
--- a/src/components/voteboard/voteResultCard.vue
+++ b/src/components/voteboard/voteResultCard.vue
@ -1,19 +1,19 @@
 <template>
    <div>
-    <ul class="timeline mb-0">
-        <li class="timeline-item ps-6 ">
-        <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-            <i class="icon-base bx bx-check-circle"></i>
-        </span>
-        <div class="timeline-event ps-1">
-            <div class="timeline-header">
-            <small class="text-primary text-uppercase">투표결과</small>
-            </div>
-            <h6  v-if="data" class="my-50">{{ data[0].LOCVOTCON }}</h6>
-            <h6  v-if="randomResultNum" class="my-50">{{randomResultNum }}</h6>
-        </div>
-        </li>
-    </ul>
+        <ul class="timeline mb-0">
+            <li class="timeline-item ps-6 ">
+                <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base bx bx-check-circle"></i>
+                </span>
+                <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                        <small class="text-primary text-uppercase">투표결과</small>
+                    </div>
+                    <h6  v-if="data" class="my-50">{{ data[0].LOCVOTCON }}</h6>
+                    <h6  v-if="randomResultNum" class="my-50">{{randomResultNum }}</h6>
+                </div>
+            </li>
+        </ul>
    </div>
 </template>

--- a/src/components/voteboard/voteResultList.vue
+++ b/src/components/voteboard/voteResultList.vue
@ -1,11 +1,11 @@
 <template>
    <div class="card mb-6 border border-2 border-primary rounded primary-shadow">
        <div class="card-body">
-        <!-- 1위가 여러개일때  -->
-        <vote-result-random v-if="topVoters.length > 1" :data="topVoters" :randomResultNum="randomResultNum" :locvotreg="locvotreg"
-        @randomList="randomList"/>
-        <!-- 1위가 하나일때-->
-        <vote-result-card v-if="topVoters.length == 1" :data="topVoters"/>
+            <!-- 1위가 여러개일때  -->
+            <vote-result-random v-if="topVoters.length > 1" :data="topVoters" :randomResultNum="randomResultNum" :locvotreg="locvotreg"
+            @randomList="randomList"/>
+            <!-- 1위가 하나일때-->
+            <vote-result-card v-if="topVoters.length == 1" :data="topVoters"/>
        </div>
    </div>
 </template>
--- a/src/components/voteboard/voteResultRandom.vue
+++ b/src/components/voteboard/voteResultRandom.vue
@ -1,23 +1,22 @@
 <template>
    <div v-if="!isRandom && !randomResultNum">
-    <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
-    <!-- 중복된 1위 리스트 -->
-    <vote-result-random-list
-    v-for="(item,index) in data"
-    :key="index"
-    :data="item"
-    :randomResultNum="randomResultNum"/>
+        <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
+        <!-- 중복된 1위 리스트 -->
+        <vote-result-random-list
+        v-for="(item,index) in data"
+        :key="index"
+        :data="item"
+        :randomResultNum="randomResultNum"/>
    </div>
    <div v-if="isRandom === false && randomResultNum">
        <vote-result-card  :randomResultNum="randomResultNum"/>
    </div>
-
    <button v-if="isRandom" class="btn btn-primary" type="button" disabled="">
        <span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
        random..
    </button>
    <div class="d-grid w-100 mt-6"  v-if="userStore.user.id === locvotreg">
-    <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
+        <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
    </div>
 </template>

--- a/src/components/voteboard/voteUserList.vue
+++ b/src/components/voteboard/voteUserList.vue
@ -2,7 +2,7 @@
 <div class="d-flex align-items-center">
    <!--투표한 사람 목록 -->
    <div class="d-flex align-items-center gap-2">
-        <i class='bx bxs-user-check link-info'></i>
+        <i class='bx bxs-user-check link-info fa-3x'></i>
        <vote-complete-user-list
        v-for="(item, index) in voetedUsers"
        :key="index"
@ -11,7 +11,7 @@
    </div>
    <!-- 투표안한 사람 목록 -->
    <div class="d-flex align-items-center gap-2 ms-auto">
-        <i class='bx bxs-user-x link-danger'></i>
+        <i class='bx bxs-user-x link-danger fa-3x'></i>
        <vote-in-complete-user-list
        v-for="(item, index) in noVoetedUsers"
        :key="index"
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@ -1,29 +1,18 @@
 <template>
-            <ul class="d-flex p-0 mb-0">
-            <li class="d-flex">
+    <!-- <ul class="d-flex p-0 mb-0 flex-wrap">
+        <li class="d-flex">
            <button
                type="button"
                class="alphabet-btn"
                :class="{ active: selectedAl === 'all' }"
                @click="selectAlphabet('all')"
-            > 전체 ({{ totalCount}})
+            > 전체 ({{ totalCount }})
            </button>
-            <span class="divider">|</span>
-            </li>
-            <li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
-                <button
-                    type="button"
-                    class="alphabet-btn"
-                    :class="{ active: selectedAl === char.CHARACTER_ }"
-                    @click="selectAlphabet(char.CHARACTER_)"
-                >
-                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
-                </button>
-                <span v-if="index !== koreanChars.length - 1" class="divider">|</span>
-            </li>
-        </ul>
+        </li>
+    </ul> -->
+    <div v-for="(group, groupIndex) in chunkedKoreanChars" :key="'ko-group-' + groupIndex">
        <ul class="d-flex p-0 mb-0">
-            <li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                <button
                    type="button"
                    class="alphabet-btn"
@ -32,9 +21,25 @@
                >
                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                </button>
-                <span v-if="index !== englishChars.length - 1" class="divider">|</span>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
            </li>
        </ul>
+    </div>
+    <div v-for="(group, groupIndex) in chunkedEnglishChars" :key="'en-group-' + groupIndex">
+        <ul class="d-flex p-0 mb-0">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
+                <button
+                    type="button"
+                    class="alphabet-btn"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
+                    @click="selectAlphabet(char.CHARACTER_)"
+                >
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
+                </button>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
+            </li>
+        </ul>
+    </div>
 </template>

 <script setup>
@ -47,7 +52,7 @@ const props = defineProps({
    },
    selectedAl: {
        type: String,
-        default : '',
+        default: '',
        required: false,
    },
 });
@ -56,14 +61,24 @@ const selectedAlphabet = ref(props.selectedAl);
 const totalCount = computed(() => {
    return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
 });
+
+const chunkArray = (arr, size) => {
+    return arr.reduce((acc, _, i) => {
+        if (i % size === 0) acc.push(arr.slice(i, i + size));
+        return acc;
+    }, []);
+};
+
 const koreanChars = computed(() => {
    return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
 });
-
 const englishChars = computed(() => {
    return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
 });

+const chunkedKoreanChars = computed(() => chunkArray(koreanChars.value, 5));
+const chunkedEnglishChars = computed(() => chunkArray(englishChars.value, 5));
+
 const emit = defineEmits();
 const selectAlphabet = (alphabet) => {
    selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
@ -81,6 +96,7 @@ const selectAlphabet = (alphabet) => {
    cursor: pointer;
    width: 70%;
    height: 40px;
+    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for color */
 }

 .alphabet-btn:hover {
@ -90,10 +106,16 @@ const selectAlphabet = (alphabet) => {
 .alphabet-btn.active {
    color: #0d6efd;
    text-decoration: underline;
+    font-size: 13px; /* Keep font size fixed in active state */
 }
+
 .divider {
    color: #bbb;
    font-size: 14px;
    font-weight: bold;
 }
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
 </style>
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@ -1,5 +1,5 @@
 <template>
-    <li class="mt-5 card p-5">
+    <li class="card p-5 mb-2">
        <DictWrite
            v-if="writeStore.isItemActive(item.WRDDICSEQ)"
            @close="writeStore.closeAll();"
@ -64,7 +64,7 @@
            </div>
        </div>

-        <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
+        <div class="edit-btn">
            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
            :isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
        </div>
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@ -1,39 +1,31 @@
 <template>
    <div>
-        <div class="row">
-            <div class="col-10">
-                <FormSelect
-                    name="cate"
-                    title="카테고리 선택"
-                    :data="dataList"
-                    :is-common="true"
-                    @update:data="selectCategory = $event"
-                    @change="onChange"
-                    :value="formValue"
-                    :disabled="isDisabled"
-                    :is-essential="false"
-                />
-            </div>
-            <div class="col-2 btn-margin" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
-            </div>
-        </div>
-
-        <div class="row" v-if="showInput">
-            <div class="col-10">
-                <FormInput
-                    ref="categoryInputRef"
-                    title="카테고리 입력"
-                    name="카테고리"
-                    @update:modelValue="addCategory = $event"
-                    :is-cate-alert="addCategoryAlert"
-                    @focusout="handleCategoryFocusout(addCategory)"
-                />
-            </div>
+        <FormSelect class="me-5"
+            name="cate"
+            title="카테고리"
+            :data="dataList"
+            :is-common="true"
+            @update:data="selectCategory = $event"
+            @change="onChange"
+            :value="formValue"
+            :is-essential="false"
+        />
+        <div v-if="!isDisabled" class="add-btn">
+            <PlusBtn @click="toggleInput"/>
        </div>
    </div>
-    <div class="dict-w">
-        <FormInput
+
+        <div v-if="showInput">
+            <FormInput class="me-5"
+                ref="categoryInputRef"
+                title="새 카테고리"
+                name="새 카테고리"
+                @update:modelValue="addCategory = $event"
+                :is-cate-alert="addCategoryAlert"
+                @focusout="handleCategoryFocusout(addCategory)"
+            />
+        </div>
+        <FormInput class="me-5"
            title="용어"
            type="text"
            name="word"
@ -44,15 +36,14 @@
            :disabled="isDisabled"
            @keyup="ValidHandler('title')"
        />
-    </div>
-    <div>
-        <QEditor  @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
-        <div class="text-end mt-5">
-            <button class="btn btn-primary" @click="saveWord">
-                <i class="bx bx-check"></i>
-            </button>
+        <div>
+            <QEditor class="" @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+            <div class="text-end mt-5">
+                <button class="btn btn-primary" @click="saveWord">
+                    <i class="bx bx-check"></i>
+                </button>
+            </div>
        </div>
-    </div>
 </template>

 <script setup>
@ -189,36 +180,38 @@ const saveWord = () => {

 // 카테고리 focusout 이벤트 핸들러 추가
 const handleCategoryFocusout = (value) => {
+
    const valueTrim = value.trim();
+    if(value){
+        const existingCategory = props.dataList.find(item => item.label === valueTrim);

-    const existingCategory = props.dataList.find(item => item.label === valueTrim);
+        // 카테고리 입력시 공백
+        if(valueTrim == ''){
+            addCategoryAlert.value = true;

-    // 카테고리 입력시 공백
-    if(valueTrim == ''){
-        addCategoryAlert.value = true;
-
-        // 공백시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+            // 공백시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);


-    }else if (existingCategory) {
-        addCategoryAlert.value = true;
+        }else if (existingCategory) {
+            addCategoryAlert.value = true;

-        // 중복시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+            // 중복시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);

-    } else {
-        addCategoryAlert.value = false;
+        } else {
+            addCategoryAlert.value = false;
+        }
    }
 };

@ -235,4 +228,9 @@ const handleCategoryFocusout = (value) => {
        margin-top: 2.5rem
    }
 }
+.add-btn {
+    position: absolute;
+    right: 0.7rem;
+    top: 1.2rem;
+}
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -89,10 +89,12 @@ const routes = [
        component: () => import('@v/admin/TheAuthorization.vue'),
        meta: { requiresAuth: true }
    },
+    { path: "/error/400", name: "Error400", component: () => import('@v/error/Error400.vue') },
+    { path: "/error/500", name: "Error500", component: () => import('@v/error/Error500.vue') },
    {
        path: "/:anything(.*)",
-        component: () => import('@v/ErrorPage.vue'),
-    }
+        name: "Error404", component: () => import('@v/error/Error404.vue')
+    },
 ];

 const router = createRouter({
@ -126,4 +128,21 @@ router.beforeEach(async (to, from, next) => {
    next();
 });

+import axios from 'axios';
+
+axios.interceptors.response.use(
+    response => response,
+    error => {
+        const status = error.response?.status;
+
+        if (status === 400) {
+            router.push({ name: 'Error400' });
+        } else if (status === 500) {
+            router.push({ name: 'Error500' });
+        }
+
+        return Promise.reject(error);
+    }
+);
+
 export default router
--- a/src/stores/useBoardAccessStore.js
+++ b/src/stores/useBoardAccessStore.js
@ -0,0 +1,45 @@
+/*
+    작성자 : 박성용
+    작성일 : 2025-03-14
+    수정자 :
+    수정일 :
+    설명   : 게시글 수정 시 비밀번호 적재용.
+*/
+import { ref, computed, watch } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useBoardAccessStore = defineStore(
+    'access',
+    () => {
+        const password = ref('');
+
+        // watch(password, newValue => {
+        //     localStorage.setItem('tempPassword', JSON.stringify(newValue.value));
+        // });
+
+        if (localStorage.getItem('tempPassword')) {
+            // 저장된 값을 불러와 상태에 할당
+            const tempPassword = localStorage.getItem('tempPassword');
+            if (typeof tempPassword === 'String') password.value = tempPassword;
+        }
+
+        function setBoardPassword(input) {
+            password.value = input;
+            if (typeof input === 'String') localStorage.setItem('tempPassword', input);
+        }
+
+        function $reset() {
+            password.value = '';
+            localStorage.removeItem('tempPassword');
+        }
+
+        return {
+            password,
+            setBoardPassword,
+            $reset,
+        };
+    },
+    {
+        persist: true,
+    },
+);
--- a/src/views/ErrorPage.vue
+++ b/src/views/ErrorPage.vue
@ -1,13 +0,0 @@
-<template>
-    Error
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@ -85,11 +85,13 @@
    import { ref, onMounted, computed, watch, inject } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    import { useToastStore } from '@s/toastStore';
+    import { useBoardAccessStore } from '@s/useBoardAccessStore';
    import axios from '@api';

    // 공통
    const $common = inject('common');
    const toastStore = useToastStore();
+    const accessStore = useBoardAccessStore();

    // 상태 변수
    const title = ref('');
@ -117,22 +119,29 @@

    // 게시물 데이터 로드
    const fetchBoardDetails = async () => {
-        try {
-            const response = await axios.get(`board/${currentBoardId.value}`);
-            const data = response.data.data;
+        // 수정 데이터 전송
+        const password = accessStore.password;
+        const params = {
+            password: password || '',
+        };
+        //const response = await axios.get(`board/${currentBoardId.value}`);
+        const { data } = await axios.post(`board/${currentBoardId.value}`, params);

-            // 기존 첨부파일 추가
-            if (data.hasAttachment && data.attachments.length > 0) {
-                attachFiles.value = addDisplayFileName([...data.attachments]);
-            }
-
-            // 데이터 설정
-            title.value = data.title || '제목 없음';
-            content.value = data.content || '내용 없음';
-            contentLoaded.value = true;
-        } catch (error) {
-            console.error('게시물 가져오기 오류:', error.response || error.message);
+        if (data.code !== 200) {
+            toastStore.onToast(data.message, 'e');
+            router.go(-1);
+            return;
        }
+        const boardData = data.data;
+        // 기존 첨부파일 추가
+        if (boardData.hasAttachment && boardData.attachments.length > 0) {
+            attachFiles.value = addDisplayFileName([...boardData.attachments]);
+        }
+
+        // 데이터 설정
+        title.value = boardData.title || '제목 없음';
+        content.value = boardData.content || '내용 없음';
+        contentLoaded.value = true;
    };

    // 기존 첨부파일명을 노출
@ -144,6 +153,7 @@

    // 목록 페이지로 이동
    const goList = () => {
+        accessStore.$reset();
        router.push('/board');
    };

@ -218,43 +228,42 @@
    const updateBoard = async () => {
        if (checkValidation()) return;

-        try {
-            // 수정 데이터 전송
-            const boardData = {
-                LOCBRDTTL: title.value.trim(),
-                LOCBRDCON: JSON.stringify(content.value),
-                LOCBRDSEQ: currentBoardId.value,
-            };
+        // 수정 데이터 전송
+        const boardData = {
+            LOCBRDTTL: title.value.trim(),
+            LOCBRDCON: JSON.stringify(content.value),
+            LOCBRDSEQ: currentBoardId.value,
+        };

-            // 업로드 된 첨부파일의 삭제목록
-            if (delFileIdx.value && delFileIdx.value.length > 0) {
-                boardData.delFileIdx = [...delFileIdx.value];
-            }
+        // 업로드 된 첨부파일의 삭제목록
+        if (delFileIdx.value && delFileIdx.value.length > 0) {
+            boardData.delFileIdx = [...delFileIdx.value];
+        }

-            const fileArray = newFileFilter(attachFiles);
-            const formData = new FormData();
+        const fileArray = newFileFilter(attachFiles);
+        const formData = new FormData();

-            // formData에 boardData 추가
-            Object.entries(boardData).forEach(([key, value]) => {
-                formData.append(key, value);
-            });
+        // formData에 boardData 추가
+        Object.entries(boardData).forEach(([key, value]) => {
+            formData.append(key, value);
+        });

-            // formData에 새로 추가한 파일 추가
-            fileArray.forEach((file, idx) => {
-                formData.append('files', file);
-            });
+        // formData에 새로 추가한 파일 추가
+        fileArray.forEach((file, idx) => {
+            formData.append('files', file);
+        });

-            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
+        const { data } = await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
+        if (data.code === 200 && data.data === true) {
            toastStore.onToast('게시물이 수정되었습니다.', 's');
            goList();
-        } catch (error) {
-            console.error('게시물 수정 중 오류 발생:', error);
-            toastStore.onToast('게시물 수정에 실패했습니다.');
+        } else {
+            toastStore.onToast('게시물 수정에 실패했습니다.', 'e');
        }
    };

    // 컴포넌트 마운트 시 데이터 로드
-    onMounted(() => {
+    onMounted(async () => {
        if (currentBoardId.value) {
            fetchBoardDetails();
        } else {
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -139,6 +139,7 @@
    import { useRoute, useRouter } from 'vue-router';
    import { useUserInfoStore } from '@/stores/useUserInfoStore';
    import { useToastStore } from '@s/toastStore';
+    import { useBoardAccessStore } from '@s/useBoardAccessStore';
    import axios from '@api';

    const $common = inject('common');
@ -161,6 +162,8 @@
    const router = useRouter();
    const userStore = useUserInfoStore();
    const toastStore = useToastStore();
+    const accessStore = useBoardAccessStore();
+
    const currentBoardId = ref(Number(route.params.id));
    const unknown = computed(() => profileName.value === '익명');
    const currentUserId = computed(() => userStore?.user?.id); // 현재 로그인한 사용자 id
@ -242,21 +245,25 @@

    // 게시물 상세 데이터 불러오기
    const fetchBoardDetails = async () => {
-        const response = await axios.get(`board/${currentBoardId.value}`);
-        const data = response.data.data;
-
-        profileName.value = data.author || '익명';
-        authorId.value = data.authorId;
-        boardTitle.value = data.title || '제목 없음';
-        boardContent.value = data.content || '';
-        profileImg.value = data.profileImg || '';
-        date.value = data.date || '';
-        views.value = data.cnt || 0;
-        likes.value = data.likeCount || 0;
-        dislikes.value = data.dislikeCount || 0;
-        attachment.value = data.hasAttachment || null;
-        commentNum.value = data.commentCount || 0;
-        attachments.value = data.attachments || [];
+        const { data } = await axios.get(`board/${currentBoardId.value}`);
+        if (data?.data) {
+            const boardData = data.data;
+            profileName.value = boardData.author || '익명';
+            authorId.value = boardData.authorId;
+            boardTitle.value = boardData.title || '제목 없음';
+            boardContent.value = boardData.content || '';
+            profileImg.value = boardData.profileImg || '';
+            date.value = boardData.date || '';
+            views.value = boardData.cnt || 0;
+            likes.value = boardData.likeCount || 0;
+            dislikes.value = boardData.dislikeCount || 0;
+            attachment.value = boardData.hasAttachment || null;
+            commentNum.value = boardData.commentCount || 0;
+            attachments.value = boardData.attachments || [];
+        } else {
+            toastStore.onToast(data.message, 'e');
+            router.back();
+        }
    };

    // 좋아요, 싫어요
@ -603,20 +610,23 @@
        }

        try {
-            const response = await axios.post(`board/${currentBoardId.value}/password`, {
+            const { data } = await axios.post(`board/${currentBoardId.value}/password`, {
                LOCBRDPWD: password.value,
                LOCBRDSEQ: currentBoardId.value,
            });

-            if (response.data.code === 200 && response.data.data === true) {
+            if (data.code === 200 && data.data === true) {
+                accessStore.setBoardPassword(password.value);
                boardPasswordAlert.value = '';
                isPassword.value = false;

                if (lastClickedButton.value === 'edit') {
                    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
+                    return;
                } else if (lastClickedButton.value === 'delete') {
                    await deletePost();
                }
+                accessStore.$reset();
                lastClickedButton.value = null;
            } else {
                boardPasswordAlert.value = '비밀번호가 일치하지 않습니다.';
--- a/src/views/error/Error400.vue
+++ b/src/views/error/Error400.vue
@ -0,0 +1,12 @@
+<template>
+    <div class="error-container">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-dark.png" alt="Error Illustration" class="error-image" />
+            <h1>400</h1>
+            <RouterLink to="/" class="home-btn">홈으로 돌아가기</RouterLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+</style>
--- a/src/views/error/Error404.vue
+++ b/src/views/error/Error404.vue
@ -0,0 +1,13 @@
+<template>
+    <div class="error-page">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-light.png" alt="Error Illustration" class="error-image" />
+            <h1>404</h1>
+            <RouterLink to="/" class="home-btn">홈으로 돌아가기</RouterLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/views/error/Error500.vue
+++ b/src/views/error/Error500.vue
@ -0,0 +1,16 @@
+<template>
+    <div class="error-page">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-dark.png" alt="Error Illustration" class="error-image" />
+            <h1>500</h1>
+            <RouterLink to="/" class="home-btn">HOME</RouterLink>
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/voteboard/voteBoardList.vue
+++ b/src/views/voteboard/voteBoardList.vue
@ -1,21 +1,28 @@
 <template>
 <div class="container-xxl flex-grow-1 container-p-y">
-    <div class="row g-3">
-    <div class="mt-8">
+    <div class="">
        <!-- 투표 작성  -->
        <WriteBtn @click="voteWrite"  />
+
        <!-- 투표마감/투표중  셀렉트 -->
-        <FormSelect class="col-3" name="cate" :isLabel="false" title="투표상태" :data="categoryList" @update:data="category = $event" @change="selectHandler"/>
+        <div v-for="(item, index) in categoryList" @change="selectHandler"
+            :key="index"
+            class="form-check form-check-inline"  >
+            <input class="form-check-input" type="radio" name="cate" :id="'inlineRadio' + index"
+                    :value="index" v-model="category">
+            <label class="form-check-label" :for="'inlineRadio' + index">{{ item }}</label>
+        </div>
+
        <!-- 내가한 투표 보기  -->
-        <div class="p-4">
+        <div class="">
            <div class="form-check">
-            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" v-model="ischeked" @change="changeCheck">
-            <label class="form-check-label" for="defaultCheck1"> 내가 한 투표 </label>
+                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" v-model="ischeked" @change="changeCheck">
+                <label class="form-check-label" for="defaultCheck1"> 내가 한 투표 </label>
            </div>
        </div>

        <!-- 투표리스트 -->
-        <div v-if="voteListCardData.length == 0 " class="mt66">등록된 투표가 없습니다.</div>
+        <div v-if="voteListCardData.length == 0 " >투표가 없습니다.</div>
        <vote-list
        :data="voteListCardData"
        @addContents="addContents"
@ -27,7 +34,7 @@
        @randomList="randomList"
        />
    </div>
-    </div>
+</div>
    <!-- 페이지네이션 -->
    <div class="row g-3">
        <div class="mt-8">
@ -36,10 +43,9 @@
                v-bind="PageData"
                :currentPage="currentPage"
                @update:currentPage="handlePageChange"
-            />
+        />
        </div>
    </div>
-</div>
 </template>
 <script setup>
 import { getCurrentInstance, onMounted, ref } from 'vue';
--- a/src/views/voteboard/voteboardWrite.vue
+++ b/src/views/voteboard/voteboardWrite.vue
@ -1,86 +1,88 @@
 <template>
 <div class="container-xxl flex-grow-1 container-p-y">
    <div class="card mb-6">
-    <div class="card-body">
-        <div class="user-list-container">
-        <ul class="timeline mb-1">
-            <li class="timeline-item timeline-item-transparent">
-                <span class="timeline-point timeline-point-info"></span>
-                <div class="timeline-event">
-                    <div class="timeline-header mb-2">
-                        <h6 class="mb-0">투표 인원</h6>
-                    </div>
-                    <UserList @userListInfo="userSet" @user-list-update="handleUserListUpdate" class="mb-3" />
-                    <div v-if="UserListAlert" class="red">2명이상 선택해주세요 </div>
-                    <form-input
-                    title="제목"
-                    name="title"
-                    :is-essential="true"
-                    :is-alert="titleAlert"
-                    v-model="title"
-                    @keyup="ValidHandler('title')"
-                    />
-                    <form-input
-                    title="종료날짜"
-                    name="endDate"
-                    type="date"
-                    :is-essential="true"
-                    :is-alert="endDateAlert"
-                    v-model="endDate"
-                    :min="today"
-                    @change="ValidHandlerendDate"
-                    />
-                    <!-- 항목 입력 반복 -->
-                    <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start ">
-                    <div class="flex-grow-1 me-2 ">
-                        <form-input
-                        :title="'항목 ' + (index + 1)"
-                        :name="'content' + index"
-                        :is-essential="index < 2"
-                        :is-alert="contentAlerts[index]"
-                        v-model="item.content"
-                        @keyup="ValidHandler('content' + (index + 1))"
-                        />
-                        <link-input v-model="item.url"  class="mb-1"/>
-                    </div>
-                    <!-- delete-btn을 오른쪽으로 정렬 -->
-                    <delete-btn @click="removeItem(index)" :disabled="index < 2" />
-                    </div>
+        <div class="card-body">
+            <div class="user-list-container">
+                <ul class="timeline mb-1">
+                    <li class="timeline-item timeline-item-transparent">
+                        <span class="timeline-point timeline-point-info"></span>
+                        <div class="timeline-event">
+                            <div class="timeline-header mb-2">
+                                <h6 class="mb-0">투표 인원</h6>
+                            </div>
+                            <UserList @userListInfo="userSet" @user-list-update="handleUserListUpdate" class="mb-3" />
+                            <div v-if="UserListAlert" class="red">2명이상 선택해주세요 </div>
+                            <form-input
+                            title="제목"
+                            name="title"
+                            :is-essential="true"
+                            :is-alert="titleAlert"
+                            v-model="title"
+                            @keyup="ValidHandler('title')"
+                            />
+                            <form-input
+                            title="종료날짜"
+                            name="endDate"
+                            type="date"
+                            :is-essential="true"
+                            :is-alert="endDateAlert"
+                            v-model="endDate"
+                            :min="today"
+                            @change="ValidHandlerendDate"
+                            />
+                            <!-- 항목 입력 반복 -->
+                            <div v-for="(item, index) in itemList" :key="index">
+                                <form-input
+                                    :title="'항목 ' + (index + 1)"
+                                    :name="'content' + index"
+                                    :is-essential="index < 2"
+                                    :is-alert="contentAlerts[index]"
+                                    v-model="item.content"
+                                    @keyup="ValidHandler('content' + (index + 1))"
+                                    :is-btn="true"
+                                >
+                                    <template v-slot:append>
+                                        <delete-btn @click="removeItem(index)" :disabled="index < 2" />
+                                    </template>
+                                </form-input>

-                    <plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
-                    <div>
-                    <label class="list-group-item">
-                        <input
-                        class="form-check-input me-1"
-                        type="checkbox"
-                        id="addvoteitem"
-                        v-model="addvoteitem"
-                        />
-                        항목 추가여부
-                    </label>
-                    <label class="list-group-item">
-                        <input
-                        class="form-check-input me-1"
-                        type="checkbox"
-                        id="addvotemulti"
-                        v-model="addvotemulti"
-                        />
-                        다중투표 허용여부
-                    </label>
-                    </div>
+                                <link-input v-model="item.url"  class="mb-1"/>
+                            </div>
+
+                            <plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
+                            <div>
+                                <label class="list-group-item">
+                                    <input
+                                    class="form-check-input me-1"
+                                    type="checkbox"
+                                    id="addvoteitem"
+                                    v-model="addvoteitem"
+                                    />
+                                    항목 추가여부
+                                </label>
+                                <label class="list-group-item">
+                                    <input
+                                    class="form-check-input me-1"
+                                    type="checkbox"
+                                    id="addvotemulti"
+                                    v-model="addvotemulti"
+                                    />
+                                    다중투표 허용여부
+                                </label>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="mb-4 d-flex justify-content-end">
+                    <button type="button" class="btn btn-info" @click="goList">
+                    <i class="bx bx-left-arrow-alt"></i>
+                    </button>
+                    <button type="button" class="btn btn-primary ms-1" @click="saveValid">
+                    <i class="bx bx-check"></i>
+                    </button>
                </div>
-            </li>
-        </ul>
-        <div class="mb-4 d-flex justify-content-end">
-            <button type="button" class="btn btn-info" @click="goList">
-            <i class="bx bx-left-arrow-alt"></i>
-            </button>
-            <button type="button" class="btn btn-primary ms-1" @click="saveValid">
-            <i class="bx bx-check"></i>
-            </button>
+            </div>
        </div>
-        </div>
-    </div>
    </div>
 </div>
 </template>
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@ -1,48 +1,55 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div >
-            <!-- 타이틀, 검색 -->
-            <SearchBar @update:data="search"/>
-            <!-- 단어 갯수, 작성하기 -->
-            <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
-            <!-- ㄱ ㄴ ㄷ ㄹ -->
-            <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
-            <!-- 카테고리 -->
-            <div v-if="cateList.length">
-                <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory"  />
+<div class="container-xxl flex-grow-1 container-p-y d-flex">
+    <!-- 메인 컨텐츠 -->
+    <div class="flex-grow-1">
+        <!-- 타이틀, 검색 -->
+        <SearchBar @update:data="search"/>
+        <div class="d-flex">
+        <!-- 단어 갯수, 작성하기 -->
+        <!-- 왼쪽 사이드바 -->
+        <div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px;">
+                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
+                <!-- ㄱ ㄴ ㄷ ㄹ -->
+                <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
+                <!-- 카테고리 -->
+                <div v-if="cateList.length" class="mt-3">
+                    <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory"  />
+                </div>
            </div>
-            <!-- 작성 -->
-            <div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
-                <DictWrite @close="writeStore.closeAll()" :dataList="cateList"  @addWord="addWord"/>
+
+            <!-- 용어 리스트 컨텐츠 -->
+            <div class="flex-grow-1">
+                <!-- 작성 -->
+                <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
+                    <DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
+                </div>
+                <!-- 용어 리스트 -->
+                <div>
+                    <!-- 로딩 중일 때 -->
+                    <LoadingSpinner v-if="loading"/>
+                    <!-- 에러 메시지 -->
+                    <div v-if="error" class="error">{{ error }}</div>
+                    <!-- 단어 목록 -->
+                    <ul v-if="total > 0" class="ms-3 list-unstyled">
+                        <DictCard
+                            v-for="item in wordList"
+                            :key="item.WRDDICSEQ"
+                            :item="item"
+                            v-model:cateList="cateList"
+                            @refreshWordList="refreshWordList"
+                            @updateChecked="updateCheckedItems"
+                        />
+                    </ul>
+                    <!-- 데이터가 없을 때 -->
+                    <div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요</div>
+                </div>
            </div>
        </div>
-
-        <!-- 용어 리스트 -->
-        <div >
-            <!-- 로딩 중일 때 -->
-            <LoadingSpinner v-if="loading"/>
-            <!-- 에러 메시지 -->
-            <div v-if="error" class="error">{{ error }}</div>
-            <!-- 단어 목록 -->
-            <ul v-if="total > 0" class="px-0 list-unstyled">
-                <DictCard
-                    v-for="item in wordList"
-                    :key="item.WRDDICSEQ"
-                    :item="item"
-                    v-model:cateList="cateList"
-                    @refreshWordList="refreshWordList"
-                    @updateChecked="updateCheckedItems"
-                />
-            </ul>
-            <!-- 데이터가 없을 때 -->
-            <div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요 </div>
-        </div>
-
    </div>
-
-    <button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
-        <i class="bx bx-trash"></i>
-    </button>
+</div>
+<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
+    <i class="bx bx-trash"></i>
+</button>

 </template>

@ -255,7 +262,6 @@
 </script>

 <style scoped>
-
 .admin-del-btn {
    position: fixed;
    right: 1.5rem;
@ -263,11 +269,15 @@
    width: 3rem;
    height: 3rem;
 }
-
 .error {
    color: red;
    font-weight: bold;
 }
+.sidebar {
+    position: sticky;
+    top: 5px;
+    height: fit-content;
+}

@media (max-width: 768px) {
    .title {