Commit @e0df0e367ac05b6348a383b55129b76f1c5e6ec3

하관우 03-26

2025-03-26 하관우 멀티파트 토큰 재발급 수정정

@e0df0e367ac05b6348a383b55129b76f1c5e6ec3

0cf4df4

e0df0e3

client/resources/api/category.js

--- client/resources/api/category.js

+++ client/resources/api/category.js


-import apiClient from "./index";
+import {apiClient} from "./index";
 
 // 카테고리 목록 조회 (검색조건 없음)
 export const findAllByNullProc = () => {

 }
 
 // 카테고리 목록 조회 (검색조건 있음)
-export const findAllCategoryProc = () => {
-  return apiClient.get(`/category/findAllCategory.json`);
-}
+export const findAllCategoryProc = searchReqDTO => {
+  return apiClient.get(`/category/findAllCategory.json`, { params: searchReqDTO });
+}
+
+// 카테고리 정보 변경
+export const updateCategory = (ctgryId, updateCtgryDTO) => {
+  return apiClient.put(`/category/${ctgryId}/updateCategory.json`, updateCtgryDTO);
+}
+
+// 카테고리 정보 등록
+export const saveCategory = insertCtgryDTO => {
+  return apiClient.post(`/category/saveCategory.json`, insertCtgryDTO);
+}

0cf4df4

e0df0e3

client/resources/api/dcry.js

--- client/resources/api/dcry.js

+++ client/resources/api/dcry.js

...	...	@@ -1,4 +1,4 @@
1		-import apiClient from "./index";
	1	+import {apiClient} from "./index";
2	2
3	3	// 기록물 목록 조회
4	4	export const findAllDatas = (searchReqDTO) => {

0cf4df4

e0df0e3

client/resources/api/index.js

--- client/resources/api/index.js

+++ client/resources/api/index.js


 import axios from 'axios';
 import store from "../../views/pages/AppStore";
 
-const apiClient = axios.create({
-    headers: {
-        'Content-Type': 'application/json; charset=UTF-8',
-    }
-});
-
-// 요청 인터셉터
-apiClient.interceptors.request.use(
-    config => {
-        const token = store.state.authorization; // Access Token 가져오기
-        if (token) {
-            config.headers.Authorization = token; // 단순히 토큰만 추가
+// Axios 클라이언트 생성 함수
+const createClient = (contentType) => {
+    const client = axios.create({
+        headers: {
+            'Content-Type': contentType,
         }
-        return config;
-    },
-    error => {
-        return Promise.reject(error);
-    }
-);
+    });
 
-// 응답 인터셉터
-apiClient.interceptors.response.use(
-    response => {
-        return response;
-    },
-    async error => {
-        const originalReq = error.config;
-
-        // 403 에러 처리
-        if (error.response.status === 403) {
-            alert('접근 권한이 없습니다.');
-            window.history.back();
+    // 요청 인터셉터
+    client.interceptors.request.use(
+        config => {
+            const token = store.state.authorization; // Access Token 가져오기
+            if (token) {
+                config.headers.Authorization = token; // 토큰 추가
+            }
+            return config;
+        },
+        error => {
             return Promise.reject(error);
         }
+    );
 
-        // 401 에러 처리 (토큰 만료)
-        if (error.response.status === 401 && error.response.data.message === '로그인 시간이 만료되었습니다.' && !originalReq._retry) {
-            // 토큰 재발급 요청
-            try {
-                const res = await axios.post("/refresh/tknReissue.json", {}, {
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                });
+    // 응답 인터셉터
+    client.interceptors.response.use(
+        response => {
+            return response;
+        },
+        async error => {
+            const originalReq = error.config;
 
-                // 응답 상태가 200일 경우에만 처리
-                if (res.status === 200) {
-                    console.log("토큰 재발급 성공! 굿~");
-                    // 새로 발급 받은 AccessToken 저장
-                    store.commit('setAuthorization', res.headers.authorization);
-                    originalReq.headers.Authorization = store.state.authorization; // 새로 발급 받은 AccessToken을 기존 요청에 추가
-
-                    // JWT 토큰 디코딩
-                    const base64String = store.state.authorization.split('.')[1];
-                    const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
-                    const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
-                        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-                    }).join(''));
-                    const mbr = JSON.parse(jsonPayload);
-                    store.commit("setUserNm", mbr.userNm); // 사용자 이름 저장
-                    store.commit('setRoles', mbr.roles); // 사용자 역할 저장
-
-                    return apiClient(originalReq); // 원래 요청 재시도
-                } else {
-                    // 200이 아닌 경우
-                    throw new Error("토큰 재발급 요청 실패");
-                }
-            } catch (refreshError) {
-                const redirect = window.location.pathname + window.location.search;
-                sessionStorage.setItem("redirect", redirect);
-                alert('세션이 종료되었습니다.\n로그인을 새로 해주세요.');
-                store.commit("setStoreReset");
-                window.location = '/login.page'; // 로그인 페이지로 리다이렉트
-                return Promise.reject(refreshError);
+            // 403 에러 처리
+            if (error.response.status === 403) {
+                alert('접근 권한이 없습니다.');
+                window.history.back();
+                return Promise.reject(error);
             }
+
+            // 401 에러 처리 (토큰 만료)
+            if (error.response.status === 401 && error.response.data.message === '로그인 시간이 만료되었습니다.' && !originalReq._retry) {
+                // 토큰 재발급 요청
+                try {
+                    const res = await axios.post("/refresh/tknReissue.json", {}, {
+                        headers: {
+                            "Content-Type": "application/json; charset=UTF-8",
+                        },
+                    });
+
+                    // 응답 상태가 200일 경우에만 처리
+                    if (res.status === 200) {
+                        console.log("토큰 재발급 성공! 굿~");
+                        // 새로 발급 받은 AccessToken 저장
+                        store.commit('setAuthorization', res.headers.authorization);
+                        originalReq.headers.Authorization = store.state.authorization; // 새로 발급 받은 AccessToken을 기존 요청에 추가
+
+                        // JWT 토큰 디코딩
+                        const base64String = store.state.authorization.split('.')[1];
+                        const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
+                        const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
+                            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+                        }).join(''));
+                        const mbr = JSON.parse(jsonPayload);
+                        store.commit("setUserNm", mbr.userNm); // 사용자 이름 저장
+                        store.commit('setRoles', mbr.roles); // 사용자 역할 저장
+
+                        return client(originalReq); // 원래 요청 재시도
+                    } else {
+                        // 200이 아닌 경우
+                        throw new Error("토큰 재발급 요청 실패");
+                    }
+                } catch (refreshError) {
+                    const redirect = window.location.pathname + window.location.search;
+                    sessionStorage.setItem("redirect", redirect);
+                    alert('세션이 종료되었습니다.\n로그인을 새로 해주세요.');
+                    store.commit("setStoreReset");
+                    window.location = '/login.page'; // 로그인 페이지로 리다이렉트
+                    return Promise.reject(refreshError);
+                }
+            }
+
+            return Promise.reject(error);
         }
+    );
 
-        return Promise.reject(error);
-    }
-);
+    return client;
+};
 
-export default apiClient;
+// JSON 요청을 위한 apiClient
+const apiClient = createClient('application/json; charset=UTF-8');
+
+// 멀티파트 파일 업로드를 위한 fileClient
+const fileClient = createClient('multipart/form-data');
+
+export { apiClient, fileClient }; // 두 클라이언트를 내보냄

0cf4df4

e0df0e3

client/resources/api/main.js

--- client/resources/api/main.js

+++ client/resources/api/main.js

...	...	@@ -1,4 +1,4 @@
1		-import apiClient from "./index";
	1	+import {apiClient} from "./index";
2	2
3	3	// 메인화면 정보 조회
4	4	export const findAllSttusesProc = () => {

0cf4df4

e0df0e3

client/resources/api/user.js

--- client/resources/api/user.js

+++ client/resources/api/user.js

...	...	@@ -1,4 +1,4 @@
1		-import apiClient from "./index";
	1	+import {apiClient} from "./index";
2	2	import store from '../../views/pages/AppStore';
3	3
4	4	// 로그인

0cf4df4

e0df0e3

client/views/pages/user/CategoryManagement.vue

--- client/views/pages/user/CategoryManagement.vue

+++ client/views/pages/user/CategoryManagement.vue


             <div class="left-con">
                 <div class="search-wrap mb-20">
                     <div class="search-area">
-                       <div class="wfull" style="height: 100%;"> <input type="text"  v-model="searchText"></div>
-                        <button class="search-btn"><img :src="searchicon" alt=""></button>
+                        <div class="wfull" style="height: 100%;">
+                            <input type="text" v-model="searchReqDTO.searchText" @keyup.enter="searchCategories">
+                        </div>
+                        <button class="search-btn" @click="searchCategories"><img :src="searchicon" alt=""></button>
                     </div>
-                   
-                    
                 </div>
                 <table class="mb-10">
-                        <thead>
-                            <tr>
-                                <th>카테고리명</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="item in items" :key="item.id" :class="{'delete-member': item.delete}">
-                                <!-- Category 칼럼 -->
-                                <td>
-                                    {{ item.category}}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <thead>
+                        <tr>
+                            <th>카테고리명</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="item in selectedCategories" :key="item.ctgryId"
+                            :class="{ 'delete-member': item.useAt === 'N' }" @click="selectCategory(item)">
+                            <!-- Category 칼럼 -->
+                            <td>
+                                {{ item.ctgryNm }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
             <div class="righi-con wfull">
                 <div class="btn-group-small flex-end mb-20">
-                    <div class="button green-line">복구</div>
-                    <div class="button red-line">삭제</div>
-                    <div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
+                    <div v-if="copySelectedCategory.useAt === 'N' && isNewInsert && selectedCategory.ctgryId != null"
+                        class="button green-line" @click="updateByUseAtCategory">복구</div>
+                    <div v-if="copySelectedCategory.useAt === 'Y' && isNewInsert && selectedCategory.ctgryId != null"
+                        class="button red-line" @click="updateByUseAtCategory">삭제</div>
+                    <div class="button pink-line-bg flex align-center" @click="resetCategory"><img :src="check_pink"
+                            alt="">
                         <p>신규등록</p>
                     </div>
-                    <div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
+                    <div class="button blue-line-bg flex align-center" @click="insertByUpdateCategory"><img
+                            :src="check_blue" alt="">
                         <p>등록</p>
                     </div>
-                    <div class="button gray-bg">취소</div>
+                    <div class="button gray-bg" @click="cancelCategory">취소</div>
                 </div>
                 <form action="" class="insert-form mb-50">
                     <dl>
                         <dd>
                             <label for="id" class="require">카테고리명</label>
-                            <div class="wfull"><input type="text" id="id" value="admin" readonly></div>
+                            <div class="wfull"><input type="text" id="id" v-model="selectedCategory.ctgryNm">
+                            </div>
                         </dd>
                         <div class="hr"></div>
                         <dd>
                             <label for="use" class="require">사용여부</label>
                             <div class="switch">
-                                <input type="checkbox" id="switch" checked/>
+                                <input type="checkbox" id="switch" :checked="selectedCategory.useAt === 'Y'"
+                                    @change="toggleUseAt" />
                                 <label for="switch">Toggle</label>
-
                             </div>
 
                         </dd>
                         <div class="hr"></div>
                         <dd>
-                            <label for="text" >설명</label>
-                            <textarea name="" id="text"></textarea>
+                            <label for="text">설명</label>
+                            <textarea name="" id="text" v-model="selectedCategory.dc"></textarea>
                         </dd>
-                      
+
                     </dl>
                 </form>
             </div>

 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
+import { findAllCategoryProc, updateCategory, saveCategory } from "../../../resources/api/category"; // 카테고리 목록 검색
 
 export default {
     components: {

 
     data() {
         return {
-            items: [
-                { id: 1, category: '카테고리 1', delete: false },
-                { id: 2, category: '카테고리 2', delete: false },
-                { id: 3, category: '카테고리 3', delete: true },
-            ],
-            isModalOpen: false,
             // Define the image sources
             homeicon: 'client/resources/images/icon/home.png',
             erroricon: 'client/resources/images/icon/error.png',

             check_pink: 'client/resources/images/checkbox_pink.png',
             check_blue: 'client/resources/images/checkbox_blue.png',
             searchicon: 'client/resources/images/icon/search.png',
-            fileNames: [],
             selectedCategories: [],
+            // 선택된 카테고리 정보를 저장할 객체
+            selectedCategory: {
+                ctgryId: null,
+                ctgryNm: null,
+                useAt: null,
+                dc: null
+            },
+            // 선택된 카테고리 정보를 저장할 객체 copy
+            copySelectedCategory: {
+                oldCtgryNm: null,
+                ctgryId: null,
+                ctgryNm: null,
+                useAt: null,
+                dc: null
+            },
+            searchReqDTO: {
+                searchType: "nm",
+                searchText: null,
+                useAt: null
+            },
+            isNewInsert: true,
         };
     },
     computed: {
-        filteredItems() {
-            // This could be modified to support filtering based on searchQuery
-            return this.items.filter(item =>
-                item.category.includes(this.searchQuery)
-            );
-        }
     },
     methods: {
+        //카테고리 전체 조회
+        async searchCategories() {
+            try {
+                const response = await findAllCategoryProc(this.searchReqDTO);
+                if (response.status === 200) {
+                    this.selectedCategories = response.data.data.ctgry; // API 응답에서 카테고리 목록을 가져옴
+                    console.log("가져온 카테고리들 ", this.searchCategories);
+                    this.selectedCategory = {}
+                }
+            } catch (error) {
+                console.error("검색 중 오류 발생:", error);
+            }
+        },
+        // 클릭한 카테고리의 정보를 오른쪽에 표시
+        selectCategory(item) {
+            this.isNewInsert = true;
+            this.selectedCategory = {
+                ctgryId: item.ctgryId,
+                ctgryNm: item.ctgryNm,
+                useAt: item.useAt,
+                dc: item.dc
+            };
+            this.copySelectedCategory = {
+                ctgryId: item.ctgryId,
+                ctgryNm: item.ctgryNm,
+                useAt: item.useAt,
+                dc: item.dc
+            };
+
+            console.log("선택 된 카테고리", this.selectedCategory);
+        },
+        // 삭제 또는 복구 로직
+        async updateByUseAtCategory() {
+            if (this.selectedCategory.useAt === 'Y') {
+                this.selectedCategory.useAt = 'N'
+                if (confirm("선택한 카테고리를 삭제 하시겠습니까?")) {
+                    try {
+                        const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
+                        if (response.status === 200) {
+                            alert("삭제되었습니다..");
+                            this.searchCategories();
+                        }
+                    } catch (error) {
+                        alert("삭제가 실패하였습니다.");
+                        this.searchCategories();
+
+                    }
+                }
+            } else {
+                this.selectedCategory.useAt = 'Y'
+                if (confirm("선택한 카테고리를 복구 하시겠습니까?")) {
+                    try {
+                        const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
+                        if (response.status === 200) {
+                            alert("복구되었습니다..");
+                            this.searchCategories();
+                        }
+                    } catch (error) {
+                        alert("복구가 실패하였습니다.");
+                        this.searchCategories();
+
+                    }
+                }
+            }
+        },
+        // 신규 등록록
+        resetCategory() {
+            this.isNewInsert = false
+            this.selectedCategory = {
+                ctgryId: null,
+                ctgryNm: null,
+                useAt: null,
+                dc: null
+            };
+            this.copySelectedCategory = {
+                ctgryId: null,
+                ctgryNm: null,
+                useAt: null,
+                dc: null
+            };
+        },
+        // 등록 및 수정
+        async insertByUpdateCategory() {
+            if (!this.isValidationCategory()) {
+                if (this.selectedCategory.ctgryId == null || this.selectedCategory.ctgryId == '') {
+                    if (confirm("카테고리 등록을 하시겠습니까?")) {
+                        try {
+                            const response = await saveCategory(this.selectedCategory.ctgryId, this.selectedCategory);
+                            if (response.status === 200) {
+                                alert("등록되었습니다..");
+                                this.searchCategories();
+                            }
+                        } catch (error) {
+                            alert("등록이 실패하였습니다.");
+                            this.searchCategories();
+                        }
+                    }
+                } else {
+                    if (this.copySelectedCategory.ctgryNm == this.selectCategory.ctgryNm) {
+                        if (confirm("카테고리 수정을 하시겠습니까?")) {
+                            try {
+                                const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
+                                if (response.status === 200) {
+                                    alert("수정되었습니다..");
+                                    this.searchCategories();
+                                }
+                            } catch (error) {
+                                alert("수정이 실패하였습니다.");
+                                this.searchCategories();
+                            }
+                        }
+                    } else {
+                        if (confirm("카테고리 수정을 하시겠습니까?")) {
+                            try {
+                                this.selectCategory.oldCtgryNm = this.copySelectedCategory.ctgryNm;
+                                const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
+                                if (response.status === 200) {
+                                    alert("수정되었습니다..");
+                                    this.searchCategories();
+                                }
+                            } catch (error) {
+                                alert("수정이 실패하였습니다.");
+                                this.searchCategories();
+                            }
+                        }
+                    }
+                }
+            } else {
+                alert("필수 항목 값을 입력해주세요");
+            }
+        },
+        // 사용 여부를 토글하는 메서드
+        toggleUseAt() {
+            this.selectedCategory.useAt = this.selectedCategory.useAt === 'Y' ? 'N' : 'Y';
+        },
+        cancelCategory() {
+            this.selectedCategory = {
+                ctgryId: this.copySelectedCategory.ctgryId,
+                ctgryNm: this.copySelectedCategory.ctgryNm,
+                useAt: this.copySelectedCategory.useAt,
+                dc: this.copySelectedCategory.dc,
+            };
+        },
+        //카테고리 벨류데이션 체크
+        isValidationCategory() {
+            return this.selectedCategory.ctgryNm == null || this.selectedCategory.ctgryNm == '' || this.selectedCategory.useAt == null || this.selectedCategory.useAt == '';
+        },
+
+    },
+    mounted() {
+        // 초기 카테고리 조회 (optional)
+        this.searchCategories();
     }
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,85 +1,96 @@
1	1	import axios from 'axios';
2	2	import store from "../../views/pages/AppStore";
3	3
4		-const apiClient = axios.create({
5		- headers: {
6		- 'Content-Type': 'application/json; charset=UTF-8',
7		- }
8		-});
9		-
10		-// 요청 인터셉터
11		-apiClient.interceptors.request.use(
12		- config => {
13		- const token = store.state.authorization; // Access Token 가져오기
14		- if (token) {
15		- config.headers.Authorization = token; // 단순히 토큰만 추가
	4	+// Axios 클라이언트 생성 함수
	5	+const createClient = (contentType) => {
	6	+ const client = axios.create({
	7	+ headers: {
	8	+ 'Content-Type': contentType,
16	9	}
17		- return config;
18		- },
19		- error => {
20		- return Promise.reject(error);
21		- }
22		-);
	10	+ });
23	11
24		-// 응답 인터셉터
25		-apiClient.interceptors.response.use(
26		- response => {
27		- return response;
28		- },
29		- async error => {
30		- const originalReq = error.config;
31		-
32		- // 403 에러 처리
33		- if (error.response.status === 403) {
34		- alert('접근 권한이 없습니다.');
35		- window.history.back();
	12	+ // 요청 인터셉터
	13	+ client.interceptors.request.use(
	14	+ config => {
	15	+ const token = store.state.authorization; // Access Token 가져오기
	16	+ if (token) {
	17	+ config.headers.Authorization = token; // 토큰 추가
	18	+ }
	19	+ return config;
	20	+ },
	21	+ error => {
36	22	return Promise.reject(error);
37	23	}
	24	+ );
38	25
39		- // 401 에러 처리 (토큰 만료)
40		- if (error.response.status === 401 && error.response.data.message === '로그인 시간이 만료되었습니다.' && !originalReq._retry) {
41		- // 토큰 재발급 요청
42		- try {
43		- const res = await axios.post("/refresh/tknReissue.json", {}, {
44		- headers: {
45		- "Content-Type": "application/json; charset=UTF-8",
46		- },
47		- });
	26	+ // 응답 인터셉터
	27	+ client.interceptors.response.use(
	28	+ response => {
	29	+ return response;
	30	+ },
	31	+ async error => {
	32	+ const originalReq = error.config;
48	33
49		- // 응답 상태가 200일 경우에만 처리
50		- if (res.status === 200) {
51		- console.log("토큰 재발급 성공! 굿~");
52		- // 새로 발급 받은 AccessToken 저장
53		- store.commit('setAuthorization', res.headers.authorization);
54		- originalReq.headers.Authorization = store.state.authorization; // 새로 발급 받은 AccessToken을 기존 요청에 추가
55		-
56		- // JWT 토큰 디코딩
57		- const base64String = store.state.authorization.split('.')[1];
58		- const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
59		- const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
60		- return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
61		- }).join(''));
62		- const mbr = JSON.parse(jsonPayload);
63		- store.commit("setUserNm", mbr.userNm); // 사용자 이름 저장
64		- store.commit('setRoles', mbr.roles); // 사용자 역할 저장
65		-
66		- return apiClient(originalReq); // 원래 요청 재시도
67		- } else {
68		- // 200이 아닌 경우
69		- throw new Error("토큰 재발급 요청 실패");
70		- }
71		- } catch (refreshError) {
72		- const redirect = window.location.pathname + window.location.search;
73		- sessionStorage.setItem("redirect", redirect);
74		- alert('세션이 종료되었습니다.\n로그인을 새로 해주세요.');
75		- store.commit("setStoreReset");
76		- window.location = '/login.page'; // 로그인 페이지로 리다이렉트
77		- return Promise.reject(refreshError);
	34	+ // 403 에러 처리
	35	+ if (error.response.status === 403) {
	36	+ alert('접근 권한이 없습니다.');
	37	+ window.history.back();
	38	+ return Promise.reject(error);
78	39	}
	40	+
	41	+ // 401 에러 처리 (토큰 만료)
	42	+ if (error.response.status === 401 && error.response.data.message === '로그인 시간이 만료되었습니다.' && !originalReq._retry) {
	43	+ // 토큰 재발급 요청
	44	+ try {
	45	+ const res = await axios.post("/refresh/tknReissue.json", {}, {
	46	+ headers: {
	47	+ "Content-Type": "application/json; charset=UTF-8",
	48	+ },
	49	+ });
	50	+
	51	+ // 응답 상태가 200일 경우에만 처리
	52	+ if (res.status === 200) {
	53	+ console.log("토큰 재발급 성공! 굿~");
	54	+ // 새로 발급 받은 AccessToken 저장
	55	+ store.commit('setAuthorization', res.headers.authorization);
	56	+ originalReq.headers.Authorization = store.state.authorization; // 새로 발급 받은 AccessToken을 기존 요청에 추가
	57	+
	58	+ // JWT 토큰 디코딩
	59	+ const base64String = store.state.authorization.split('.')[1];
	60	+ const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
	61	+ const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
	62	+ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
	63	+ }).join(''));
	64	+ const mbr = JSON.parse(jsonPayload);
	65	+ store.commit("setUserNm", mbr.userNm); // 사용자 이름 저장
	66	+ store.commit('setRoles', mbr.roles); // 사용자 역할 저장
	67	+
	68	+ return client(originalReq); // 원래 요청 재시도
	69	+ } else {
	70	+ // 200이 아닌 경우
	71	+ throw new Error("토큰 재발급 요청 실패");
	72	+ }
	73	+ } catch (refreshError) {
	74	+ const redirect = window.location.pathname + window.location.search;
	75	+ sessionStorage.setItem("redirect", redirect);
	76	+ alert('세션이 종료되었습니다.\n로그인을 새로 해주세요.');
	77	+ store.commit("setStoreReset");
	78	+ window.location = '/login.page'; // 로그인 페이지로 리다이렉트
	79	+ return Promise.reject(refreshError);
	80	+ }
	81	+ }
	82	+
	83	+ return Promise.reject(error);
79	84	}
	85	+ );
80	86
81		- return Promise.reject(error);
82		- }
83		-);
	87	+ return client;
	88	+};
84	89
85		-export default apiClient;
	90	+// JSON 요청을 위한 apiClient
	91	+const apiClient = createClient('application/json; charset=UTF-8');
	92	+
	93	+// 멀티파트 파일 업로드를 위한 fileClient
	94	+const fileClient = createClient('multipart/form-data');
	95	+
	96	+export { apiClient, fileClient }; // 두 클라이언트를 내보냄

...	...	@@ -16,62 +16,68 @@
16	16	<div class="left-con">
17	17	<div class="search-wrap mb-20">
18	18	<div class="search-area">
19		- <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
20		- <button class="search-btn"><img :src="searchicon" alt=""></button>
	19	+ <div class="wfull" style="height: 100%;">
	20	+ <input type="text" v-model="searchReqDTO.searchText" @keyup.enter="searchCategories">
	21	+ </div>
	22	+ <button class="search-btn" @click="searchCategories"><img :src="searchicon" alt=""></button>
21	23	</div>
22		-
23		-
24	24	</div>
25	25	<table class="mb-10">
26		- <thead>
27		- <tr>
28		- <th>카테고리명</th>
29		- </tr>
30		- </thead>
31		- <tbody>
32		- <tr v-for="item in items" :key="item.id" :class="{'delete-member': item.delete}">
33		- <!-- Category 칼럼 -->
34		- <td>
35		- {{ item.category}}
36		- </td>
37		- </tr>
38		- </tbody>
39		- </table>
	26	+ <thead>
	27	+ <tr>
	28	+ <th>카테고리명</th>
	29	+ </tr>
	30	+ </thead>
	31	+ <tbody>
	32	+ <tr v-for="item in selectedCategories" :key="item.ctgryId"
	33	+ :class="{ 'delete-member': item.useAt === 'N' }" @click="selectCategory(item)">
	34	+ <!-- Category 칼럼 -->
	35	+ <td>
	36	+ {{ item.ctgryNm }}
	37	+ </td>
	38	+ </tr>
	39	+ </tbody>
	40	+ </table>
40	41	</div>
41	42	<div class="righi-con wfull">
42	43	<div class="btn-group-small flex-end mb-20">
43		- <div class="button green-line">복구</div>
44		- <div class="button red-line">삭제</div>
45		- <div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
	44	+ <div v-if="copySelectedCategory.useAt === 'N' && isNewInsert && selectedCategory.ctgryId != null"
	45	+ class="button green-line" @click="updateByUseAtCategory">복구</div>
	46	+ <div v-if="copySelectedCategory.useAt === 'Y' && isNewInsert && selectedCategory.ctgryId != null"
	47	+ class="button red-line" @click="updateByUseAtCategory">삭제</div>
	48	+ <div class="button pink-line-bg flex align-center" @click="resetCategory"><img :src="check_pink"
	49	+ alt="">
46	50	<p>신규등록</p>
47	51	</div>
48		- <div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
	52	+ <div class="button blue-line-bg flex align-center" @click="insertByUpdateCategory"><img
	53	+ :src="check_blue" alt="">
49	54	<p>등록</p>
50	55	</div>
51		- <div class="button gray-bg">취소</div>
	56	+ <div class="button gray-bg" @click="cancelCategory">취소</div>
52	57	</div>
53	58	<form action="" class="insert-form mb-50">
54	59	<dl>
55	60	<dd>
56	61	<label for="id" class="require">카테고리명</label>
57		- <div class="wfull"><input type="text" id="id" value="admin" readonly></div>
	62	+ <div class="wfull"><input type="text" id="id" v-model="selectedCategory.ctgryNm">
	63	+ </div>
58	64	</dd>
59	65	<div class="hr"></div>
60	66	<dd>
61	67	<label for="use" class="require">사용여부</label>
62	68	<div class="switch">
63		- <input type="checkbox" id="switch" checked/>
	69	+ <input type="checkbox" id="switch" :checked="selectedCategory.useAt === 'Y'"
	70	+ @change="toggleUseAt" />
64	71	<label for="switch">Toggle</label>
65		-
66	72	</div>
67	73
68	74	</dd>
69	75	<div class="hr"></div>
70	76	<dd>
71		- <label for="text" >설명</label>
72		- <textarea name="" id="text"></textarea>
	77	+ <label for="text">설명</label>
	78	+ <textarea name="" id="text" v-model="selectedCategory.dc"></textarea>
73	79	</dd>
74		-
	80	+
75	81	</dl>
76	82	</form>
77	83	</div>
...	...	@@ -82,6 +88,7 @@
82	88	</template>
83	89	<script>
84	90	import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
	91	+import { findAllCategoryProc, updateCategory, saveCategory } from "../../../resources/api/category"; // 카테고리 목록 검색
85	92
86	93	export default {
87	94	components: {
...	...	@@ -93,12 +100,6 @@
93	100
94	101	data() {
95	102	return {
96		- items: [
97		- { id: 1, category: '카테고리 1', delete: false },
98		- { id: 2, category: '카테고리 2', delete: false },
99		- { id: 3, category: '카테고리 3', delete: true },
100		- ],
101		- isModalOpen: false,
102	103	// Define the image sources
103	104	homeicon: 'client/resources/images/icon/home.png',
104	105	erroricon: 'client/resources/images/icon/error.png',
...	...	@@ -106,19 +107,185 @@
106	107	check_pink: 'client/resources/images/checkbox_pink.png',
107	108	check_blue: 'client/resources/images/checkbox_blue.png',
108	109	searchicon: 'client/resources/images/icon/search.png',
109		- fileNames: [],
110	110	selectedCategories: [],
	111	+ // 선택된 카테고리 정보를 저장할 객체
	112	+ selectedCategory: {
	113	+ ctgryId: null,
	114	+ ctgryNm: null,
	115	+ useAt: null,
	116	+ dc: null
	117	+ },
	118	+ // 선택된 카테고리 정보를 저장할 객체 copy
	119	+ copySelectedCategory: {
	120	+ oldCtgryNm: null,
	121	+ ctgryId: null,
	122	+ ctgryNm: null,
	123	+ useAt: null,
	124	+ dc: null
	125	+ },
	126	+ searchReqDTO: {
	127	+ searchType: "nm",
	128	+ searchText: null,
	129	+ useAt: null
	130	+ },
	131	+ isNewInsert: true,
111	132	};
112	133	},
113	134	computed: {
114		- filteredItems() {
115		- // This could be modified to support filtering based on searchQuery
116		- return this.items.filter(item =>
117		- item.category.includes(this.searchQuery)
118		- );
119		- }
120	135	},
121	136	methods: {
	137	+ //카테고리 전체 조회
	138	+ async searchCategories() {
	139	+ try {
	140	+ const response = await findAllCategoryProc(this.searchReqDTO);
	141	+ if (response.status === 200) {
	142	+ this.selectedCategories = response.data.data.ctgry; // API 응답에서 카테고리 목록을 가져옴
	143	+ console.log("가져온 카테고리들 ", this.searchCategories);
	144	+ this.selectedCategory = {}
	145	+ }
	146	+ } catch (error) {
	147	+ console.error("검색 중 오류 발생:", error);
	148	+ }
	149	+ },
	150	+ // 클릭한 카테고리의 정보를 오른쪽에 표시
	151	+ selectCategory(item) {
	152	+ this.isNewInsert = true;
	153	+ this.selectedCategory = {
	154	+ ctgryId: item.ctgryId,
	155	+ ctgryNm: item.ctgryNm,
	156	+ useAt: item.useAt,
	157	+ dc: item.dc
	158	+ };
	159	+ this.copySelectedCategory = {
	160	+ ctgryId: item.ctgryId,
	161	+ ctgryNm: item.ctgryNm,
	162	+ useAt: item.useAt,
	163	+ dc: item.dc
	164	+ };
	165	+
	166	+ console.log("선택 된 카테고리", this.selectedCategory);
	167	+ },
	168	+ // 삭제 또는 복구 로직
	169	+ async updateByUseAtCategory() {
	170	+ if (this.selectedCategory.useAt === 'Y') {
	171	+ this.selectedCategory.useAt = 'N'
	172	+ if (confirm("선택한 카테고리를 삭제 하시겠습니까?")) {
	173	+ try {
	174	+ const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
	175	+ if (response.status === 200) {
	176	+ alert("삭제되었습니다..");
	177	+ this.searchCategories();
	178	+ }
	179	+ } catch (error) {
	180	+ alert("삭제가 실패하였습니다.");
	181	+ this.searchCategories();
	182	+
	183	+ }
	184	+ }
	185	+ } else {
	186	+ this.selectedCategory.useAt = 'Y'
	187	+ if (confirm("선택한 카테고리를 복구 하시겠습니까?")) {
	188	+ try {
	189	+ const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
	190	+ if (response.status === 200) {
	191	+ alert("복구되었습니다..");
	192	+ this.searchCategories();
	193	+ }
	194	+ } catch (error) {
	195	+ alert("복구가 실패하였습니다.");
	196	+ this.searchCategories();
	197	+
	198	+ }
	199	+ }
	200	+ }
	201	+ },
	202	+ // 신규 등록록
	203	+ resetCategory() {
	204	+ this.isNewInsert = false
	205	+ this.selectedCategory = {
	206	+ ctgryId: null,
	207	+ ctgryNm: null,
	208	+ useAt: null,
	209	+ dc: null
	210	+ };
	211	+ this.copySelectedCategory = {
	212	+ ctgryId: null,
	213	+ ctgryNm: null,
	214	+ useAt: null,
	215	+ dc: null
	216	+ };
	217	+ },
	218	+ // 등록 및 수정
	219	+ async insertByUpdateCategory() {
	220	+ if (!this.isValidationCategory()) {
	221	+ if (this.selectedCategory.ctgryId == null \|\| this.selectedCategory.ctgryId == '') {
	222	+ if (confirm("카테고리 등록을 하시겠습니까?")) {
	223	+ try {
	224	+ const response = await saveCategory(this.selectedCategory.ctgryId, this.selectedCategory);
	225	+ if (response.status === 200) {
	226	+ alert("등록되었습니다..");
	227	+ this.searchCategories();
	228	+ }
	229	+ } catch (error) {
	230	+ alert("등록이 실패하였습니다.");
	231	+ this.searchCategories();
	232	+ }
	233	+ }
	234	+ } else {
	235	+ if (this.copySelectedCategory.ctgryNm == this.selectCategory.ctgryNm) {
	236	+ if (confirm("카테고리 수정을 하시겠습니까?")) {
	237	+ try {
	238	+ const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
	239	+ if (response.status === 200) {
	240	+ alert("수정되었습니다..");
	241	+ this.searchCategories();
	242	+ }
	243	+ } catch (error) {
	244	+ alert("수정이 실패하였습니다.");
	245	+ this.searchCategories();
	246	+ }
	247	+ }
	248	+ } else {
	249	+ if (confirm("카테고리 수정을 하시겠습니까?")) {
	250	+ try {
	251	+ this.selectCategory.oldCtgryNm = this.copySelectedCategory.ctgryNm;
	252	+ const response = await updateCategory(this.selectedCategory.ctgryId, this.selectedCategory);
	253	+ if (response.status === 200) {
	254	+ alert("수정되었습니다..");
	255	+ this.searchCategories();
	256	+ }
	257	+ } catch (error) {
	258	+ alert("수정이 실패하였습니다.");
	259	+ this.searchCategories();
	260	+ }
	261	+ }
	262	+ }
	263	+ }
	264	+ } else {
	265	+ alert("필수 항목 값을 입력해주세요");
	266	+ }
	267	+ },
	268	+ // 사용 여부를 토글하는 메서드
	269	+ toggleUseAt() {
	270	+ this.selectedCategory.useAt = this.selectedCategory.useAt === 'Y' ? 'N' : 'Y';
	271	+ },
	272	+ cancelCategory() {
	273	+ this.selectedCategory = {
	274	+ ctgryId: this.copySelectedCategory.ctgryId,
	275	+ ctgryNm: this.copySelectedCategory.ctgryNm,
	276	+ useAt: this.copySelectedCategory.useAt,
	277	+ dc: this.copySelectedCategory.dc,
	278	+ };
	279	+ },
	280	+ //카테고리 벨류데이션 체크
	281	+ isValidationCategory() {
	282	+ return this.selectedCategory.ctgryNm == null \|\| this.selectedCategory.ctgryNm == '' \|\| this.selectedCategory.useAt == null \|\| this.selectedCategory.useAt == '';
	283	+ },
	284	+
	285	+ },
	286	+ mounted() {
	287	+ // 초기 카테고리 조회 (optional)
	288	+ this.searchCategories();
122	289	}
123	290	};
124	291	</script>

Delete comment