From c45464a30e5614151dfa84c1f530e415c1fe58ec Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 10:57:49 +0900
Subject: [PATCH 01/20] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=EC=8B=A0=EC=B2=AD=20routes=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/router/index.js b/src/router/index.js
index 30eaabd..62f695d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,6 +31,11 @@ const routes = [
         component: () => import('@v/user/TheLogin.vue'),
         meta: { layout: 'NoLayout' },
     },
+    {
+        path: '/register',
+        component: () => import('@v/user/TheRegister.vue'),
+        meta: { layout: 'NoLayout' },
+    },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),

From c9011329646cc1ac3e76ef1b3c3e5c3048455af0 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 10:58:05 +0900
Subject: [PATCH 02/20] =?UTF-8?q?userforminput=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UserFormInput.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/input/UserFormInput.vue b/src/components/input/UserFormInput.vue
index d6654f6..12d8b6e 100644
--- a/src/components/input/UserFormInput.vue
+++ b/src/components/input/UserFormInput.vue
@@ -5,7 +5,7 @@
         class="col-md-2 col-form-label"
         >
             {{ title }}
-            <span :class="isEssential ? 'text-red' : 'none'">*</span>
+            <span :class="isEssential ? 'text-red' : 'd-none'">*</span>
         </label>
         <div class="col-md-12">
             <div v-if="useInputGroup" class="input-group mb-3">
@@ -34,7 +34,7 @@
                 />
             </div>
 
-            <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}를 확인해주세요.</div>
+            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
         </div>
     </div>
 </template>
@@ -97,7 +97,5 @@ const updateInput = function (event) {
 </script>
 
 <style>
-.none {
-    display: none;
-}
+
 </style>

From c9e5679bbd9114daa12ec4a24c10c32bc3ebc77a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 10:58:17 +0900
Subject: [PATCH 03/20] =?UTF-8?q?login=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/LoginForm.vue  | 68 +++++++++++++++++++++++++++++
 src/components/login/LogoHeader.vue | 32 ++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/components/login/LoginForm.vue
 create mode 100644 src/components/login/LogoHeader.vue

diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
new file mode 100644
index 0000000..1a5e7ab
--- /dev/null
+++ b/src/components/login/LoginForm.vue
@@ -0,0 +1,68 @@
+<template>
+    <form @submit.prevent="handleSubmit">
+        <div class="col-xl-12">
+            <UserFormInput
+                title="아이디"
+                name="id"
+                :label-outside="true"
+                :is-alert="idAlert"
+                :useInputGroup="true"
+                @update:data="handleIdChange"
+                :value="id"
+            />
+
+            <UserFormInput
+                title="비밀번호"
+                name="pw"
+                type="password"
+                :is-alert="passwordAlert"
+                @update:data="handlePasswordChange"
+                :value="password"
+            />
+
+            <div class="d-grid gap-2 mt-7 mb-5">
+                <button type="submit" class="btn btn-primary">로그인</button>
+            </div>
+
+            <div class="mb-3 d-flex justify-content-around">
+                <div>
+                    <input type="checkbox" class="form-check-input" id="rememberCheck" />
+                    <label class="form-check-label fw-bold" for="rememberCheck">&nbsp;자동로그인</label>
+                </div>
+                <RouterLink class="text-dark fw-bold" to="/register">등록신청</RouterLink>
+                <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import UserFormInput from '@c/input/UserFormInput.vue';
+
+    const id = ref('');
+    const password = ref('');
+    const idAlert = ref(false);
+    const passwordAlert = ref(false);
+
+    const emit = defineEmits(['submit']);
+
+    const handleIdChange = value => {
+        id.value = value;
+        idAlert.value = false;
+    };
+
+    const handlePasswordChange = value => {
+        password.value = value;
+        passwordAlert.value = false;
+    };
+
+    const handleSubmit = () => {
+        idAlert.value = id.value.trim() === '';
+        passwordAlert.value = password.value.trim() === '';
+
+        if (!idAlert.value && !passwordAlert.value) {
+            emit('submit', { id: id.value, password: password.value });
+        }
+    };
+</script>
diff --git a/src/components/login/LogoHeader.vue b/src/components/login/LogoHeader.vue
new file mode 100644
index 0000000..243842f
--- /dev/null
+++ b/src/components/login/LogoHeader.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="text-center">
+        <span>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="100"
+                height="100"
+                viewBox="0 0 100 100"
+            >
+                <image
+                    xlink:href="data:image/png;base64,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"
+                    x="0"
+                    y="0"
+                    width="100"
+                    height="100"
+                />
+            </svg>
+        </span>
+        <h2>{{ title }}</h2>
+    </div>
+</template>
+
+<script setup>
+    const prop = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+    });
+</script>

From 7787f77a29c547473e307c7c9efc486c953a8573 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 10:58:27 +0900
Subject: [PATCH 04/20] =?UTF-8?q?login=20view=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/TheLogin.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/views/user/TheLogin.vue

diff --git a/src/views/user/TheLogin.vue b/src/views/user/TheLogin.vue
new file mode 100644
index 0000000..d98d246
--- /dev/null
+++ b/src/views/user/TheLogin.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="d-flex justify-content-center align-items-center vh-100">
+        <div class="container container-p-y rounded bg-white" style="max-width: 500px">
+            <LogoHeader :logo-url="logoUrl" title="LOCALNET" />
+            <LoginForm @submit="handleSubmit" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import LogoHeader from '@c/login/LogoHeader.vue';
+import LoginForm from '@c/login/LoginForm.vue';
+</script>
+
+<style></style>

From 372d12edb759efe778dab110b954b2a2af80637b Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 13:44:46 +0900
Subject: [PATCH 05/20] =?UTF-8?q?LogoHeader=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/TheLogin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/TheLogin.vue b/src/views/user/TheLogin.vue
index d98d246..20987e7 100644
--- a/src/views/user/TheLogin.vue
+++ b/src/views/user/TheLogin.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex justify-content-center align-items-center vh-100">
         <div class="container container-p-y rounded bg-white" style="max-width: 500px">
-            <LogoHeader :logo-url="logoUrl" title="LOCALNET" />
+            <LogoHeader title="LOCALNET" />
             <LoginForm @submit="handleSubmit" />
         </div>
     </div>

From dfae7d24fbbda808c1dca11f9b7cea5989f067b7 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 15:54:03 +0900
Subject: [PATCH 06/20] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/img/avatars/default-Profile.jpg | Bin 0 -> 12666 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/img/avatars/default-Profile.jpg

diff --git a/public/img/avatars/default-Profile.jpg b/public/img/avatars/default-Profile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5f398b1df752d0d735edea2bddf2883625d0393f
GIT binary patch
literal 12666
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

literal 0
HcmV?d00001


From 720b6f7985367d9a2c19a19d6ac10489c80eeefc Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 15:54:44 +0900
Subject: [PATCH 07/20] =?UTF-8?q?fromselect=20=EB=9D=BC=EB=B2=A8=20?=
 =?UTF-8?q?=EC=9C=84=EC=AA=BD=EC=97=90=20=EC=9C=84=EC=B9=98=20=ED=95=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8A=94=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormSelect.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 10ce5c3..5d8d051 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="mb-4 row">
+    <div class="mb-2" :class="isRow ?'row' : ''">
         <label for="input-ss" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
             <span :class="isEssential ? 'text-red' : 'none'">*</span>
         </label>
-        <div class="col-md-10">
+        <div :class="isRow ?'col-md-10' : 'col-md-12'">
             <select class="form-select" id="input-ss" v-model="selectData">
                 <option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option>
             </select>
@@ -51,6 +51,11 @@ const props = defineProps({
         type: Boolean,
         default: true,
         required: true,
+    },
+    isRow : {
+        type: Boolean,
+        default: true,
+        required: true,
     }
 });
 

From 03ed1c6a99ec32a06ad969b8a28e279ce1c8e239 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 15:54:55 +0900
Subject: [PATCH 08/20] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UserFormInput.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/input/UserFormInput.vue b/src/components/input/UserFormInput.vue
index 12d8b6e..8c54b63 100644
--- a/src/components/input/UserFormInput.vue
+++ b/src/components/input/UserFormInput.vue
@@ -1,9 +1,6 @@
 <template>
     <div class="mb-2">
-        <label
-        :for="name"
-        class="col-md-2 col-form-label"
-        >
+        <label :for="name" class="col-md-2 col-form-label">
             {{ title }}
             <span :class="isEssential ? 'text-red' : 'd-none'">*</span>
         </label>

From b6f2a01219442a431165cd48b66707028f3e1a2f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 15:55:06 +0900
Subject: [PATCH 09/20] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/login/LoginForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
index 1a5e7ab..9296d52 100644
--- a/src/components/login/LoginForm.vue
+++ b/src/components/login/LoginForm.vue
@@ -4,7 +4,6 @@
             <UserFormInput
                 title="아이디"
                 name="id"
-                :label-outside="true"
                 :is-alert="idAlert"
                 :useInputGroup="true"
                 @update:data="handleIdChange"

From ae2dbd4992c9780c7cbb4d6b7282ebc482cc1980 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 16 Jan 2025 16:09:47 +0900
Subject: [PATCH 10/20] =?UTF-8?q?board-list=20=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCardList.vue     |  10 +-
 src/views/board/BoardList.vue             |  40 +++-
 src/views/board/BoardView.vue             |   1 +
 src/views/vacation/VacationManagement.vue | 236 ++++++++++++++--------
 4 files changed, 193 insertions(+), 94 deletions(-)

diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index 6e0b651..fbc984b 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="container mt-4">
+    <div class="mt-4">
         <div v-if="posts.length === 0" class="text-center">
             게시물이 없습니다.
         </div>
-        <div v-for="post in posts" :key="post.id">
+        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
             <BoardCard
                 :img="post.img"
                 :category="post.category"
@@ -30,6 +30,12 @@ export default {
             required: true,
         },
     },
+    emits: ['click'],
+    methods: {
+        handleClick(id) {
+            this.$emit('click', id);
+        },
+    },
 };
 </script>
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index ce7873a..3aa5861 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
+        <!-- 검색 -->
         <search-bar @update:data="search" />
+
+        <!-- 리스트 -->
         <div class="row g-3">
             <div class="mt-8">
                 <router-link to="/board/write">
@@ -8,10 +11,15 @@
                 </router-link>
             </div>
 
-            <board-card :posts="filteredList" @click="goDetail" />
+            <board-card :posts="paginatedList" @click="goDetail" />
 
+            <!-- 페이지네이션 -->
             <div class="mt-8">
-                <pagination />
+                <pagination
+                    :current-page="currentPage"
+                    :total-pages="totalPages"
+                    @update:page="changePage"
+                />
             </div>
         </div>
     </div>
@@ -32,6 +40,7 @@ const searchText = ref('');
 
 // 상세 페이지 이동
 const goDetail = (id) => {
+    console.log('Navigating to ID:', id)
     router.push({ name: 'BoardDetail', params: { id } });
 };
 
@@ -47,13 +56,38 @@ const filteredList = computed(() =>
     )
 );
 
+// 페이지네이션 상태
+const currentPage = ref(1); // 현재 페이지 번호
+const itemsPerPage = 5; // 한 페이지에 표시할 아이템 수
+
+// 현재 페이지 데이터 계산
+const paginatedList = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return filteredList.value.slice(start, end);
+});
+
+// 총 페이지 수 계산
+const totalPages = computed(() => {
+    return Math.ceil(filteredList.value.length / itemsPerPage);
+});
+
+// 페이지 변경 함수
+const changePage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+        currentPage.value = page;
+    }
+};
+
 // 게시물 데이터 로드
 const fetchPosts = async () => {
     const response = await axios.get("board/general");
     console.log(response.data.data.list)
+
     if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
-        list.value = response.data.data.list.map((post) => ({
+        list.value = response.data.data.list.map((post, index) => ({
             ...post,
+            id: post.id || index,
             img: post.img || null,
             likes: post.likes || 0,
             comments: post.comments || 0,
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 080fdc0..d848449 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -83,6 +83,7 @@ const fetchBoardDetails = async () => {
 
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
+    console.log('Route Params:', route.params);
     fetchBoardDetails();
 });
 </script>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index f5e414a..df74285 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,9 +1,11 @@
 <template>
     <div class="vacation-management">
         <div class="container-xxl flex-grow-1 container-p-y">
+            <!-- 저장 버튼 -->
             <div class="save-button-container">
-                <button class="btn btn-success" @click="addVacationRequest">✔</button>
+                <button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
             </div>
+            <!-- 캘린더 -->
             <div class="card app-calendar-wrapper">
                 <div class="row g-0">
                     <div class="col app-calendar-content">
@@ -15,13 +17,25 @@
                                     :options="calendarOptions"
                                     defaultView="dayGridMonth"
                                     class="flatpickr-calendar-only"
-                                >
-                                </full-calendar>
+                                />
                             </div>
                         </div>
+                        <!-- 오전/오후 반차 버튼 -->
                         <div class="half-day-buttons">
-                            <button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">☀️ 오전반차</button>
-                            <button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">🌙 오후반차</button>
+                            <button
+                                class="btn btn-info"
+                                :class="{ active: halfDayType === 'AM' }"
+                                @click="toggleHalfDay('AM')"
+                            >
+                                ☀️ 오전반차
+                            </button>
+                            <button
+                                class="btn btn-warning"
+                                :class="{ active: halfDayType === 'PM' }"
+                                @click="toggleHalfDay('PM')"
+                            >
+                                🌙 오후반차
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -36,12 +50,14 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import 'flatpickr/dist/flatpickr.min.css';
 import '@/assets/css/app-calendar.css';
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
+import axios from '@api'; // Axios 추가
 
 const fullCalendarRef = ref(null);
 const calendarEvents = ref([]);
-const selectedDates = ref([]);
-const halfDayType = ref(null); // 오전/오후 반차 선택
+const selectedDates = ref(new Map());
+const halfDayType = ref(null);
+const employeeId = ref(1);
 
 const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
@@ -56,49 +72,153 @@ const calendarOptions = reactive({
     dateClick: handleDateClick,
 });
 
+/**
+ * 날짜 클릭 이벤트
+ */
 function handleDateClick(info) {
     const date = info.dateStr;
     const dayElement = info.dayEl;
 
-    if (!selectedDates.value.includes(date)) {
-        selectedDates.value.push(date);
-        if (halfDayType.value === 'AM') {
+    if (!selectedDates.value.has(date)) {
+        const type = halfDayType.value ? (halfDayType.value === 'AM' ? 'D' : 'N') : 'F';
+        selectedDates.value.set(date, type);
+
+        if (type === 'D') {
             dayElement.style.backgroundImage = 'linear-gradient(to bottom, #ade3ff 50%, transparent 50%)';
-        } else if (halfDayType.value === 'PM') {
+        } else if (type === 'N') {
             dayElement.style.backgroundImage = 'linear-gradient(to top, #ade3ff 50%, transparent 50%)';
         } else {
             dayElement.style.backgroundColor = '#ade3ff';
         }
     } else {
-        selectedDates.value = selectedDates.value.filter((d) => d !== date);
+        selectedDates.value.delete(date);
         dayElement.style.backgroundColor = '';
         dayElement.style.backgroundImage = '';
     }
 
-    halfDayType.value = null; // 날짜 클릭 후 반차 선택 초기화
+    halfDayType.value = null;
 }
 
+/**
+ * 오전/오후 반차 선택
+ */
 function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
 }
 
-function addVacationRequest() {
-    if (selectedDates.value.length === 0) {
-        alert('Please select at least one date.');
+async function fetchVacationData() {
+    try {
+        const response = await axios.get('vacation/list');
+        if (response.data.status === 'OK') {
+            const vacationList = response.data.data;
+
+            // 사원별로 날짜를 그룹화
+            const employeeVacations = new Map();
+
+            vacationList.forEach(({ employeeId, date, type }) => {
+                if (!employeeVacations.has(employeeId)) {
+                    employeeVacations.set(employeeId, []);
+                }
+                employeeVacations.get(employeeId).push({ date, type });
+            });
+
+            // 연속된 날짜 그룹화 및 스타일 적용
+            employeeVacations.forEach((dates, employeeId) => {
+                const sortedDates = dates.map(d => new Date(d.date)).sort((a, b) => a - b);
+                const color = getColorByEmployeeId(employeeId); // 사원별 색상 함수
+
+                let previousDate = null;
+
+                sortedDates.forEach(currentDate => {
+                    const dateStr = currentDate.toISOString().split('T')[0];
+                    const dayElement = document.querySelector(`[data-date="${dateStr}"]`);
+
+                    if (dayElement) {
+                        if (
+                            previousDate &&
+                            currentDate - previousDate === 86400000 // 하루 차이인지 확인
+                        ) {
+                            // 연속된 날짜 스타일 설정
+                            dayElement.style.backgroundColor = color;
+                        } else {
+                            // 새로운 시작점
+                            dayElement.style.backgroundColor = color;
+                            dayElement.style.borderLeft = `3px solid ${color}`;
+                        }
+                        previousDate = currentDate;
+                    }
+                });
+            });
+        }
+    } catch (error) {
+        console.error('Error fetching vacation data:', error);
+    }
+}
+
+/**
+ * 사원 ID별 색상 반환 함수
+ */
+function getColorByEmployeeId(employeeId) {
+    const colors = ['#ade3ff', '#ffade3', '#ade3ad', '#ffadad'];
+    return colors[employeeId % colors.length];
+}
+
+// 데이터 불러오기 호출
+fetchVacationData();
+
+/**
+ * 휴가 요청 추가
+ */
+async function addVacationRequests() {
+    if (selectedDates.value.size === 0) {
+        alert('휴가를 선택해주세요.');
         return;
     }
 
-    const newEvents = selectedDates.value.map((date) => ({
-        title: halfDayType.value ? `${halfDayType.value} Half Day Vacation` : 'Vacation',
-        start: date,
-        allDay: true,
+    const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
+        date,
+        type,
+        employeeId: employeeId.value,
     }));
 
-    calendarEvents.value = [...calendarEvents.value, ...newEvents];
-    alert(`Vacation added for dates: ${selectedDates.value.join(', ')} as ${halfDayType.value || 'Full Day'}`);
-    selectedDates.value = [];
-    halfDayType.value = null;
+    try {
+        const response = await axios.post('vacation', vacationRequests);
+
+        if (response.data && response.data.status === 'OK') {
+            alert('휴가가 저장되었습니다.');
+
+            const newEvents = vacationRequests.map(req => ({
+                title: req.type === 'D' ? '오전반차' : req.type === 'N' ? '오후반차' : '종일 휴가',
+                start: req.date,
+                allDay: true,
+            }));
+
+            calendarEvents.value = [...calendarEvents.value, ...newEvents];
+            selectedDates.value.clear();
+            resetCalendarStyles();
+        } else {
+            alert('휴가 저장 중 오류가 발생했습니다.');
+        }
+    } catch (error) {
+        console.error(error);
+        alert('휴가 저장에 실패했습니다.');
+    }
 }
+
+/**
+ * 초기화
+ */
+function resetCalendarStyles() {
+    const calendarElements = document.querySelectorAll('.fc-daygrid-day');
+    calendarElements.forEach(element => {
+        element.style.backgroundColor = '';
+        element.style.backgroundImage = '';
+    });
+}
+
+onMounted(() => {
+    fetchVacationData();
+});
 </script>
 
 <style scoped>
@@ -106,28 +226,6 @@ function addVacationRequest() {
     padding: 20px;
 }
 
-.save-button-container {
-    position: fixed;
-    top: 900px; /* 탑바 아래로 간격 조정 */
-    right: 400px;
-    z-index: 1050; /* 탑바보다 높은 값 */
-    background-color: white;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-@media (max-width: 768px) {
-    .save-button-container {
-        top: 70px; /* 모바일에서 탑바 아래 간격 조정 */
-        right: 5px;
-        left: 5px;
-        width: calc(100% - 10px); /* 모바일 화면에 맞게 크기 조정 */
-        text-align: center;
-    }
-}
-
-
 .half-day-buttons {
     display: flex;
     justify-content: center;
@@ -135,47 +233,7 @@ function addVacationRequest() {
     margin-top: 20px;
 }
 
-.fc-day-sun .fc-col-header-cell-cushion,
-.fc-day-sun a {
-    color: red;
-}
-
-.fc-day-sat .fc-col-header-cell-cushion,
-.fc-day-sat a {
-    color: blue;
-}
-
-.flatpickr-calendar-only input.flatpickr-input {
-    display: none;
-}
-
-.flatpickr-input {
-    display: none;
-}
-
-.pt-2.px-3 {
-    position: relative;
-}
-
-.flatpickr-calendar {
-    position: relative !important;
-    display: block !important;
-    width: 100% !important;
-    height: auto !important;
-    z-index: 1;
-}
-
-.btn-info {
-    background-color: #17a2b8;
-    color: white;
-}
-
-.btn-warning {
-    background-color: #ffc107;
-    color: white;
-}
-
-button.active {
-    opacity: 0.7;
+.half-day-buttons .btn.active {
+    border: 2px solid black;
 }
 </style>

From d61030cd515d6769e5ff418a511fa88c1623fed8 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 10:46:47 +0900
Subject: [PATCH 11/20] =?UTF-8?q?=EB=8B=A4=EC=9D=8C=20=EC=A3=BC=EC=86=8C?=
 =?UTF-8?q?=20api=EB=A5=BC=20=EC=9C=84=ED=95=9C=20script=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 12e3b00..cafce3b 100644
--- a/index.html
+++ b/index.html
@@ -84,6 +84,9 @@
         <!-- Page JS -->
         <!-- <script src="/js/dashboards-analytics.js"></script> -->
 
+        <!-- daum address -->
+        <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
+
         <script type="module" src="/src/main.js"></script>
     </body>
 </html>

From 40e9a78ef3f4fc5c22a02622817dc2543df8ef84 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 10:47:11 +0900
Subject: [PATCH 12/20] =?UTF-8?q?=EC=A3=BC=EC=86=8C=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/ArrInput.vue | 128 ++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/components/input/ArrInput.vue

diff --git a/src/components/input/ArrInput.vue b/src/components/input/ArrInput.vue
new file mode 100644
index 0000000..bb99de6
--- /dev/null
+++ b/src/components/input/ArrInput.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="mb-2">
+        <div class="d-flex align-items-center">
+            <label :for="name" class="col-md-2 col-form-label">
+                {{ title }}
+                <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
+            </label>
+            <button type="button" class="btn btn-sm btn-primary" @click="openAddressSearch">주소찾기</button>
+        </div>
+
+        <div class="col-md-12">
+            <div class="d-flex mb-3">
+                <input
+                    :id="name"
+                    class="form-control me-2 w-25"
+                    type="text"
+                    v-model="postcode"
+                    placeholder="우편번호"
+                    readonly
+                />
+
+                <input
+                    class="form-control"
+                    type="text"
+                    v-model="address"
+                    placeholder="기본주소"
+                    readonly
+                />
+
+            </div>
+
+            <div>
+                <input
+                    class="form-control"
+                    type="text"
+                    v-model="detailAddress"
+                    placeholder="상세주소"
+                    @input="updateDetailAddress"
+                    :maxLength="maxlength"
+                />
+            </div>
+
+            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+        required: true,
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
+    isEssential: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    maxlength: {
+        type: Number,
+        default: 30,
+        required: false,
+    },
+    isAlert: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+const emits = defineEmits(['update:data', 'update:alert']);
+
+// 주소 관련 상태 관리
+const postcode = ref('');
+const address = ref('');
+const detailAddress = ref('');
+
+// 주소 검색 팝업 열기
+const openAddressSearch = () => {
+    new window.daum.Postcode({
+        oncomplete: (data) => {
+            postcode.value = data.zonecode;
+            address.value = data.address;
+
+            // 전체 주소 데이터 내보내기
+            emitAddressData();
+
+            // 상세주소 입력 필드로 포커스 이동
+            setTimeout(() => {
+                const detailInput = document.querySelector('input[placeholder="상세주소"]');
+                if (detailInput) detailInput.focus();
+            }, 100);
+        }
+    }).open();
+};
+
+// 상세주소 업데이트
+const updateDetailAddress = (event) => {
+    detailAddress.value = event.target.value;
+    emitAddressData();
+};
+
+// 전체 주소 데이터 내보내기
+const emitAddressData = () => {
+    const fullAddress = {
+        postcode: postcode.value,
+        address: address.value,
+        detailAddress: detailAddress.value,
+        fullAddress: `${address.value} ${detailAddress.value}`.trim()
+    };
+    emits('update:data', fullAddress);
+};
+
+// isAlert를 false로 설정
+watch([postcode, address], ([newPostcode, newAddress]) => {
+    if (newPostcode && newAddress) {
+        emits('update:alert', false);
+    }
+});
+</script>

From 39ad02586fd1bc4aa60ef11f532bc1c552a97423 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 10:47:47 +0900
Subject: [PATCH 13/20] =?UTF-8?q?id=20=EA=B0=92=20name=EA=B0=92=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormSelect.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 5d8d051..4b69554 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="mb-2" :class="isRow ?'row' : ''">
-        <label for="input-ss" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
+        <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
-            <span :class="isEssential ? 'text-red' : 'none'">*</span>
+            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
         </label>
         <div :class="isRow ?'col-md-10' : 'col-md-12'">
-            <select class="form-select" id="input-ss" v-model="selectData">
+            <select class="form-select" :id="name" v-model="selectData">
                 <option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option>
             </select>
         </div>

From c94ab475abbb6a8a472c07c624e97df79475f620 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 10:48:00 +0900
Subject: [PATCH 14/20] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UserFormInput.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/input/UserFormInput.vue b/src/components/input/UserFormInput.vue
index 8c54b63..4e0217d 100644
--- a/src/components/input/UserFormInput.vue
+++ b/src/components/input/UserFormInput.vue
@@ -2,7 +2,7 @@
     <div class="mb-2">
         <label :for="name" class="col-md-2 col-form-label">
             {{ title }}
-            <span :class="isEssential ? 'text-red' : 'd-none'">*</span>
+            <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
         </label>
         <div class="col-md-12">
             <div v-if="useInputGroup" class="input-group mb-3">
@@ -14,10 +14,8 @@
                     :value="value"
                     :maxLength="maxlength"
                     :placeholder="title"
-                    aria-label="Recipient's username"
-                    :aria-describedby="`${name}-addon`"
                 />
-                <span class="input-group-text" :id="`${name}-addon`">@ localhost.co.kr</span>
+                <span class="input-group-text">@ localhost.co.kr</span>
             </div>
             <div v-else>
                 <input
@@ -82,7 +80,7 @@ const prop = defineProps({
     },
 });
 
-const emits = defineEmits(['update:data'])
+const emits = defineEmits(['update:data', 'update:alert'])
 
 const updateInput = function (event) {
     //Type Number 일때 maxlength 적용 안됨 방지
@@ -90,6 +88,10 @@ const updateInput = function (event) {
         event.target.value = event.target.value.slice(0, prop.maxlength);
     }
     emits('update:data', event.target.value);
+
+    // 값이 입력될 때 isAlert를 false로 설정
+    if (event.target.value.trim() !== '') { emits('update:alert', false); }
+
 };
 </script>
 

From a9a454db01544ff1aa259918827799d4045a23ad Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 10:48:32 +0900
Subject: [PATCH 15/20] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 23bbef5..4642c22 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,12 +32,11 @@ const routes = [
             }
         ]
     },
-    // 레이아웃 필요없을 때 예시
-    // {
-    //     path: '/login',
-    //     component: () => import('@v/user/TheLogin.vue'),
-    //     meta: { layout: 'NoLayout' },
-    // },
+    {
+        path: '/login',
+        component: () => import('@v/user/TheLogin.vue'),
+        meta: { layout: 'NoLayout' },
+    },
     {
         path: '/vacation',
         component: () => import('@v/vacation/VacationManagement.vue'),

From 5315989232534920c1e03a0a8cc8ebe9db7110d1 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 11:00:19 +0900
Subject: [PATCH 16/20] =?UTF-8?q?=EB=93=B1=EB=A1=9D=EC=8B=A0=EC=B2=AD=20fo?=
 =?UTF-8?q?rm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/RegisterForm.vue | 216 +++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 src/components/user/RegisterForm.vue

diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
new file mode 100644
index 0000000..52ebca7
--- /dev/null
+++ b/src/components/user/RegisterForm.vue
@@ -0,0 +1,216 @@
+<template>
+    <form @submit.prevent="handleSubmit">
+        <div class="text-center">
+            <label
+                for="profilePic"
+                class="rounded-circle m-auto border-label-secondary ui-bg-cover position-relative cursor-pointer"
+                id="profileLabel"
+                style="width: 100px; height: 100px; background-image: url(public/img/avatars/default-Profile.jpg)"
+            >
+            </label>
+            <span class="link-danger position-absolute">*</span>
+            <input type="file" id="profilePic" class="d-none" @change="profileUpload" />
+            <span v-if="profilerr" class="invalid-feedback d-block">{{ profilerr }}</span>
+        </div>
+
+        <div class="col-xl-12">
+            <UserFormInput
+                title="아이디"
+                name="id"
+                :isEssential="true"
+                :is-alert="idAlert"
+                :useInputGroup="true"
+                @update:data="id = $event"
+                @update:alert="idAlert = $event"
+                :value="id"
+            />
+
+            <UserFormInput
+                title="비밀번호"
+                name="pw"
+                type="password"
+                :isEssential="true"
+                :is-alert="passwordAlert"
+                @update:data="password = $event"
+                @update:alert="passwordAlert = $event"
+                :value="password"
+            />
+
+            <UserFormInput
+                title="비밀번호 확인"
+                name="pwch"
+                type="password"
+                :isEssential="true"
+                :is-alert="passwordcheckAlert"
+                @update:data="passwordcheck = $event"
+                @update:alert="passwordcheckAlert = $event"
+                :value="passwordcheck"
+            />
+
+            <UserFormInput
+                title="비밀번호 힌트"
+                name="pwhint"
+                :is-alert="passwordhintAlert"
+                @update:data="passwordhint = $event"
+                @update:alert="passwordhintAlert = $event"
+                :value="passwordhint"
+            />
+
+            <div class="d-flex">
+                <UserFormInput
+                    title="이름"
+                    name="name"
+                    :is-essential="true"
+                    :is-alert="nameAlert"
+                    @update:data="name = $event"
+                    @update:alert="nameAlert = $event"
+                    :value="name"
+                    class="me-2 w-50"
+                />
+
+                <FormSelect
+                    title="컬러"
+                    name="color"
+                    :is-essential="true"
+                    :is-row="false"
+                    :is-label="true"
+                    :data="colorList"
+                    @update:data="color = $event"
+                    class="w-50"
+                />
+            </div>
+
+            <div class="d-flex">
+                <UserFormInput
+                    title="생년월일"
+                    name="birth"
+                    :is-essential="true"
+                    :is-alert="birthAlert"
+                    @update:data="birth = $event"
+                    @update:alert="birthAlert = $event"
+                    :value="birth"
+                    class="me-2 w-50"
+                />
+
+                <FormSelect
+                    title="MBTI"
+                    name="mbti"
+                    :is-essential="true"
+                    :is-row="false"
+                    :is-label="true"
+                    :data="mbtiList"
+                    @update:data="mbti = $event"
+                    class="w-50"
+                />
+            </div>
+
+            <ArrInput
+                title="주소"
+                name="arr"
+                :isEssential="true"
+                :is-alert="arrAlert"
+                @update:data="arr = $event"
+                @update:alert="arrAlert = $event"
+                :value="arr"
+            />
+
+            <UserFormInput
+                title="휴대전화"
+                name="phone"
+                :isEssential="true"
+                :is-alert="phoneAlert"
+                @update:data="phone = $event"
+                @update:alert="phoneAlert = $event"
+                :maxlength="11"
+                :value="phone"
+            />
+
+            <div class="d-flex mt-5">
+                <RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
+                <button type="submit" class="btn btn-primary w-50">등록신청</button>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import UserFormInput from '@c/input/UserFormInput.vue';
+    import FormSelect from '@/components/input/FormSelect.vue';
+    import ArrInput from '@/components/input/ArrInput.vue';
+
+    const profile = ref(null);
+    const profilerr = ref('');
+
+    const id = ref('');
+    const password = ref('');
+    const passwordcheck = ref('');
+    const passwordhint = ref('');
+    const name = ref('');
+    const birth = ref('');
+    const arr = ref('');
+    const phone = ref('');
+    const color = ref('');
+    const mbti = ref('');
+
+    const idAlert = ref(false);
+    const passwordAlert = ref(false);
+    const passwordcheckAlert = ref(false);
+    const passwordhintAlert = ref(false);
+    const nameAlert = ref(false);
+    const birthAlert = ref(false);
+    const arrAlert = ref(false);
+    const phoneAlert = ref(false);
+
+    const handleSubmit = async () => {
+        idAlert.value = id.value.trim() === '';
+        passwordAlert.value = password.value.trim() === '';
+        passwordcheckAlert.value = passwordcheck.value.trim() === '';
+        passwordhintAlert.value = passwordhint.value.trim() === '';
+        nameAlert.value = name.value.trim() === '';
+        birthAlert.value = birth.value.trim() === '';
+        arrAlert.value = arr.value.trim() === '';
+        phoneAlert.value = phone.value.trim() === '';
+
+        if (!profile.value) {
+            profilerr.value = '프로필 이미지를 선택해주세요.';
+            return;
+        }
+    };
+
+    const profileValid = (size, type) => {
+        const maxSize = 5 * 1024 * 1024;
+        const validTypes = ['image/jpeg', 'image/png'];
+        if (size > maxSize) {
+            profilerr.value = '5MB 미만의 파일만 업로드할 수 있습니다.';
+            return false;
+        }
+        if (!validTypes.includes(type)) {
+            profilerr.value = '지원되지 않는 파일 형식입니다. JPEG 또는 PNG만 가능합니다.';
+            return false;
+        }
+        profilerr.value = '';
+        return true;
+    };
+
+    const profileUpload = e => {
+        const file = e.target.files[0];
+        const profileLabel = document.getElementById('profileLabel');
+
+        if (!profileValid(file.size, file.type)) {
+            e.target.value = '';
+            profileLabel.style.backgroundImage = 'url("public/img/avatars/default-Profile.jpg")';
+            return false;
+        }
+
+        const profilePic = e.target;
+        const url = URL.createObjectURL(profilePic.files[0]);
+        profileLabel.style.backgroundImage = `url(${url})`;
+        profile.value = file;
+    };
+
+    const colorList = ['blue', 'red', 'pink'];
+    const mbtiList = ['ISTP', 'ENFP', 'INTJ'];
+</script>
+
+<style></style>

From c6e4cc90895c067bec54f7a885964fa9da8bf083 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 11:00:32 +0900
Subject: [PATCH 17/20] =?UTF-8?q?=EB=93=B1=EB=A1=9D=EC=8B=A0=EC=B2=AD=20vi?=
 =?UTF-8?q?ew?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/TheRegister.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/views/user/TheRegister.vue

diff --git a/src/views/user/TheRegister.vue b/src/views/user/TheRegister.vue
new file mode 100644
index 0000000..7c7ec8e
--- /dev/null
+++ b/src/views/user/TheRegister.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="d-flex justify-content-center align-items-center">
+        <div class="container rounded bg-white my-10 py-10" style="max-width: 500px">
+            <RegisterForm @submit="handleSubmit" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import RegisterForm from '@c/user/RegisterForm.vue';
+
+const handleSubmit = async (formData) => {
+    console.log('Register');
+};
+</script>
+
+<style></style>

From d5f08d8eded77647e86cb141df8f958252628827 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 11:00:40 +0900
Subject: [PATCH 18/20] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/TheLogin.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/user/TheLogin.vue b/src/views/user/TheLogin.vue
index 20987e7..dfbac2a 100644
--- a/src/views/user/TheLogin.vue
+++ b/src/views/user/TheLogin.vue
@@ -8,8 +8,12 @@
 </template>
 
 <script setup>
-import LogoHeader from '@c/login/LogoHeader.vue';
-import LoginForm from '@c/login/LoginForm.vue';
+import LoginForm from '@c/user/LoginForm.vue';
+import LogoHeader from '@c/user/LogoHeader.vue';
+
+    const handleSubmit = async ({ id, password }) => {
+        console.log('Login');
+    };
 </script>
 
 <style></style>

From 3a0146c060d8f75ed5431007db596d5b61654385 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 17 Jan 2025 11:00:57 +0900
Subject: [PATCH 19/20] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20form,=20log?=
 =?UTF-8?q?o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{login => user}/LoginForm.vue  | 0
 src/components/{login => user}/LogoHeader.vue | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{login => user}/LoginForm.vue (100%)
 rename src/components/{login => user}/LogoHeader.vue (100%)

diff --git a/src/components/login/LoginForm.vue b/src/components/user/LoginForm.vue
similarity index 100%
rename from src/components/login/LoginForm.vue
rename to src/components/user/LoginForm.vue
diff --git a/src/components/login/LogoHeader.vue b/src/components/user/LogoHeader.vue
similarity index 100%
rename from src/components/login/LogoHeader.vue
rename to src/components/user/LogoHeader.vue

From 3fed02825966db13548eeec79a8bfc85adf49d85 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Fri, 17 Jan 2025 12:52:30 +0900
Subject: [PATCH 20/20] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js             |   4 +
 src/views/wordDict/wordDict.vue | 207 ++++++++++++++++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 src/views/wordDict/wordDict.vue

diff --git a/src/router/index.js b/src/router/index.js
index a19d7da..1ad0673 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,10 @@ const routes = [
             }
         ]
     },
+    {
+        path: '/wordDict',
+        component: () => import('@v/wordDict/wordDict.vue'),
+    },
     // 레이아웃 필요없을 때 예시
     // {
     //     path: '/login',
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
new file mode 100644
index 0000000..4382d55
--- /dev/null
+++ b/src/views/wordDict/wordDict.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+
+        <div class="card">
+            <!-- 타이틀, 검색 -->
+            <div class="row mt-4">
+                <div class="col-6">
+                    <h5 class="mb-0">용어집</h5>
+                </div>
+                <div class="col-6">
+                    <SearchBar @update:data="search"/>
+                </div>
+            </div>
+
+            <!-- 단어 갯수, 작성하기 -->
+            <div class="mt-4">
+                단어 : {{ filteredList.length }}
+                <WriteButton />
+            </div>
+
+            <div>
+                <div class="nav-align-top">
+                    <ul class="nav nav-pills" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">ㄱ</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">ㄴ</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">ㄷ</button>
+                        </li>
+                    </ul>
+                    <ul class="nav nav-pills" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">a</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">b</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button type="button" class="nav-link">c</button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <!-- 카테고리 -->
+            <div>
+                <ul v-if="cateList.length">
+                    <li v-for="item in cateList" :key="item.CMNCODVAL">
+                        <button>{{ item.CMNCODNAM }}</button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- 용어 리스트 -->
+            <div>
+                <!-- 로딩 중일 때 -->
+                <div v-if="loading">로딩 중...</div>
+
+                <!-- 에러 메시지 -->
+                <div v-if="error" class="error">{{ error }}</div>
+
+                <!-- 단어 목록 -->
+                <ul v-if="filteredList.length" class="word-list">
+                    <li v-for="item in filteredList" :key="item.WRDDICSEQ">
+                        <div class="d-flex">
+                            <div>
+                                ({{ item.category }}) <strong>{{ item.WRDDICTTL }}</strong>
+                            </div>
+                            <WriteButton />
+                        </div>
+                        <p>{{ item.WRDDICCON }}</p>
+                        <div>
+                            <img :src="'/img/avatars/' + item.author.profileImage" alt="최초 작성자" />
+                            최초 작성자 {{ item.author.name }}
+                            작성일 {{ new Date(item.author.createdAt).toLocaleString() }}
+                        </div>
+                        <div>
+                            <img :src="'/img/avatars/' + item.lastEditor.profileImage" alt="최근 수정자" />
+                            최근 수정자 {{ item.lastEditor.name }}
+                            수정일 {{ new Date(item.lastEditor.updatedAt).toLocaleString() }}
+                        </div>
+                    </li>
+                </ul>
+
+                <!-- 데이터가 없을 때 -->
+                <div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
+
+            </div>
+
+            <!-- 작성 및 수정 -->
+            <div>
+                <div>
+                    <FormSelect/>
+                    <button>쇼핑몰</button>
+                    <button>저장</button>
+                </div>
+                <div>
+                    <FormInput/>
+                </div>
+                <div>
+                    <QEditor/>
+                    <button>저장</button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    
+</template>
+
+<script setup>
+    import { ref, watchEffect, computed } from 'vue';
+    import axios from '@api';
+    import SearchBar from '@c/search/SearchBar.vue';
+    import WriteButton from '@c/button/WriteBtn.vue';
+    import QEditor from '@/components/editor/QEditor.vue';
+    import FormInput from '@/components/input/FormInput.vue';
+    import FormSelect from '@/components/input/FormSelect.vue';
+
+    // /** 상세로 이동 */
+    // const goDetail = idx => {
+    //     router.push(`/board/get/${idx}`);
+    // };
+
+    // 용어집
+    const wordList = ref([]);
+    // 카테고리
+    const cateList = ref([]);
+    const loading = ref(false);
+    const error = ref('');
+
+    // 검색
+    const searchText = ref('');
+
+    // 단어 및 카테고리 목록 통합 API 호출
+    const fetchAllData = async () => {
+        loading.value = true;
+        error.value = '';
+        try {
+            // 단어
+            const wordResponse = await axios.get('worddict/getWordList');
+            wordList.value = wordResponse.data.data.data;
+            console.log('단어 데이터:', wordList.value);
+
+            // 카테고리
+            const categoryResponse = await axios.get('worddict/getWordCategory');
+            cateList.value = categoryResponse.data.data;
+            console.log('카테고리 데이터:', cateList.value);
+        } catch (err) {
+            error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    // 검색
+    const search = (e) => {
+        const trimmedSearchText = e.trim();
+        if (trimmedSearchText.length === 0) {
+            alert('검색어를 입력해주세요.');
+            return;
+        }
+        searchText.value = trimmedSearchText;
+    };
+
+    // 검색
+    const filteredList = computed(() => 
+        wordList.value.filter(item => 
+            item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
+        )
+    );
+
+    
+
+
+    // `watchEffect`로 API 호출
+    watchEffect(() => {
+        fetchAllData();
+    });
+
+</script>
+
+<style scoped>
+
+.card > div {
+    padding: 0 30px
+}
+
+.word-list {
+    padding-left: 0;
+}
+.word-list li {
+    list-style: none;
+}
+
+.word-list li ~ li {
+    margin-top: 20px;
+}
+
+.error {
+    color: red;
+    font-weight: bold;
+}
+</style>