프로젝트 store로 관리

src/components/projectlist/ProjectList.vue

@@ -7,11 +7,11 @@
 
     <!-- 프로젝트 목록 -->
     <div class="mt-4">
-        <div v-if="projectList.length === 0" class="text-center">
+        <div v-if="projectStore.projectList.length === 0" class="text-center">
             <p class="text-muted mt-4">등록된 프로젝트가 없습니다.</p>
         </div>
 
-        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">
+        <div v-for="post in projectStore.projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">
             <ProjectCard
                 :title="post.PROJCTNAM"
                 :description="post.PROJCTDES"
@@ -161,6 +161,7 @@ import ArrInput from '@c/input/ArrInput.vue';
 import commonApi from '@/common/commonApi';
 import { useToastStore } from '@s/toastStore';
 import { useUserInfoStore } from '@/stores/useUserInfoStore';
+import { useProjectStore } from '@/stores/useProjectStore';
 import $api from '@api';
 import SaveButton from '@c/button/SaveBtn.vue';
 import BackButton from '@c/button/BackBtn.vue'
@@ -169,10 +170,10 @@ const dayjs = inject('dayjs');
 const today = dayjs().format('YYYY-MM-DD');
 const toastStore = useToastStore();
 const userStore = useUserInfoStore();
+const projectStore = useProjectStore();
 
 // 상태 관리
 const user = ref(null);
-const projectList = ref([]);
 const selectedCategory = ref(null);
 const searchText = ref('');
 
@@ -212,17 +213,6 @@ const { yearCategory, colorList } = commonApi({
     loadYearCategory: true,
 });
 
-// 프로젝트 목록 조회
-const getProjectList = async () => {
-    const res = await $api.get('project/select', {
-        params: {
-            searchKeyword : searchText.value,
-            category : selectedYear.value,
-        },
-    });
-    projectList.value = res.data.data.projectList;
-};
-
 // 검색 처리
 const search = async (searchKeyword) => {
     searchText.value = searchKeyword.trim();
@@ -237,6 +227,10 @@ const selectedYear = computed(() => {
     return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
 });
 
+// 프로젝트 목록 조회
+const getProjectList = async () => {
+    await projectStore.getProjectList(searchText.value, selectedYear.value);
+};
 
 // 카테고리 변경 감지
 watch(selectedCategory, async () => {
@@ -250,6 +244,20 @@ const openCreateModal = () => {
 
 const closeCreateModal = () => {
     isCreateModalOpen.value = false;
+    resetCreateForm();
+};
+
+const resetCreateForm = () => {
+    name.value = '';
+    color.value = '';
+    address.value = '';
+    detailAddress.value = '';
+    postcode.value = '';
+    startDay.value = today;
+    endDay.value = '';
+    description.value = '';
+    nameAlert.value = false;
+    addressAlert.value = false;
 };
 
 // 등록 :: 주소 업데이트 핸들러
@@ -283,7 +291,7 @@ const handleCreate = async () => {
         if (res.status === 200) {
             toastStore.onToast('프로젝트가 등록되었습니다.', 's');
             closeCreateModal();
-            location.reload();
+            getProjectList();
         }
     });
 };
@@ -307,7 +315,7 @@ const allColors = computed(() => {
 
 // 변경된 내용 있는지 확인
 const hasChanges = computed(() => {
-    const original = projectList.value.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
+    const original = projectStore.projectList.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
     if (!original) return false;
 
     return (

src/stores/useProjectStore.js

@@ -0,0 +1,30 @@
+/*
+    작성자 : 박지윤
+    작성일 : 2025-02-25
+    수정자 :
+    수정일 :
+    설명   : 프로젝트 목록
+*/
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import $api from '@api';
+
+export const useProjectStore = defineStore('project', () => {
+    const projectList = ref([]);
+
+    const getProjectList = async (searchText, selectedYear) => {
+        try {
+            const res = await $api.get('project/select', {
+                params: {
+                    searchKeyword: searchText,
+                    category: selectedYear,
+                },
+            });
+            projectList.value = res.data.data.projectList;
+        } catch (error) {
+            console.error('프로젝트 목록 조회 실패:', error);
+        }
+    };
+
+    return { projectList, getProjectList };
+});