제품관리 작업진행중

assets/img/ico_paging_next.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M8 14L12.5 9.5L8 5" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico_paging_prev.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+<path d="M10 14L5.5 9.5L10 5" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/scss/default.scss

@@ -62,6 +62,53 @@
         padding:20px;
         margin-top:25px;
         background: #f8f8f8;
+        &.type2{
+          flex-direction: column;
+          align-items: flex-start;
+          position: relative;
+          .search--inner{
+            width: calc(100% - 120px);
+            gap: 10px;
+            display: flex;
+          }
+          .sch--btn{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            height: calc(100% - 40px);
+          }
+        }
+        
+        .month--selector{
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          border-radius: 10px;
+          margin-left: 10px;
+          background: #fff;    
+          border:1px solid #E2E2E2;
+          .v-btn{
+            color: #666;
+            font-size: 0.8rem;
+            height: 2.25rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 100%; /* 12px */
+            letter-spacing: -0.48px;
+            padding:0 1.2rem;
+            border-radius: 0px;
+            position: relative;
+
+            &.actv{
+              color:#fff;
+              background-color:#007aff;
+
+              &:after{
+                display: none;
+              }
+            }    
+          }
+        }
         .form--cont--filter{
           width:100%;
           max-width:10.5rem;
@@ -77,7 +124,6 @@
           max-width:80px;
         }
       }
-      
 
       .inner--headers{
         display: flex;
@@ -114,6 +160,110 @@
           }
         }
       }
+
+      .item--list--wrap{
+        .item--list{
+          display: flex;
+          gap: 20px;
+          .item{
+            position: relative;
+            cursor: pointer;
+            width: calc((100% - 80px) / 5);
+            border-radius: 20px;
+            border: 1px solid #cccccc;
+            padding: 1rem 1rem 2rem 1rem;
+            .item--img{
+              width: 100%;
+              height: 10rem;
+              background-repeat: no-repeat;
+              background-size: 100%;
+              background-position: center;
+              background-color: #eee;
+              border-radius: 20px;
+              margin-bottom: 1.2rem;
+            }
+            >h3{
+              color: #444444;
+              font-size: 1rem;
+              overflow: hidden;
+              line-height: 1.2;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2; 
+              -webkit-box-orient: vertical;
+              margin-bottom: 1rem;
+            }
+            >p{
+              color: #888;
+              line-height: 1.2;
+              font-size: 0.8rem;
+              margin-bottom: 0.8rem;
+            }
+            >span{
+              color: #999;
+              line-height: 1.2;
+              font-size: 0.8rem;
+            }
+            .sold--out{
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background-color: rgba(0,0,0,0.2);
+              border-radius: inherit;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              >span{
+                color: #ffffff;
+                text-align: center;
+                font-size: 1.2rem;
+                font-weight: 500;
+                display: inline-block;
+                padding: 0.8rem 3rem;
+                background-color: red;
+                border-radius: 50px;
+              }
+            }
+          }
+        }
+        .item--pagination{
+          display: flex;
+          justify-content: center;
+          margin-top: 80px;
+          gap: 30px;
+          .v-pagination{
+            width: 50%;
+            max-width: 800px;
+          }
+          .v-btn{
+            padding: 0;
+            width: 50px;
+            height: 50px;
+            border-radius: 100px;
+            min-width: 50px;
+            border: 1px solid #DDD;
+            background: #FFF;
+            .v-btn__content{
+              color: #909090;
+              font-size: 16px;
+              font-weight: 400;
+              line-height: 1;
+            }
+            &.prev--btn{
+              background-image: url(/assets/img/ico_paging_prev.svg);
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+            &.next--btn{
+              background-image: url(/assets/img/ico_paging_next.svg);
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+          }
+        }
+      }
       
     }
   }

assets/scss/style.scss

@@ -3003,7 +3003,7 @@ p.success-txt {
     }
 
     .dp__input {
-      width: calc(1vw * (191 / 19.2));
+      width: 10.5rem;
       padding: 0 2.56rem 0 0.94rem;
       height: 2.25rem;
       border: 0.06rem solid #E0E0E0 !important;

pages/view/item/evtAdd.vue → pages/view/item/add.vue

@@ -267,9 +267,9 @@
 </template>
 
 <script setup>
-  import VueDatePicker from "@vuepic/vue-datepicker";
-  import "@vuepic/vue-datepicker/dist/main.css";
-  import { reactive } from "vue";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { reactive } from "vue";
   /************************************************************************
 |    레이아웃
 ************************************************************************/
@@ -290,7 +290,7 @@
   /************************************************************************
 |    스토어
  ************************************************************************/
-  const useAuthStore = useAuthStore();
+  //const useAuthStore = useAuthStore();
   const useDtStore = useDetailStore();
   /************************************************************************
 |    전역

pages/view/item/index.vue

@@ -8,23 +8,55 @@
       </div>
     </div>
 
-    <div class="search--modules">
-      <div class="form--cont--filter">
-        <v-select
-          v-model="filter"
-          :items="filderArr"
-          variant="outlined"
-          class="custom-select"
-        >
-        </v-select>
+    <div class="search--modules type2">
+      <div class="search--inner">
+        <div class="form--cont--filter">
+          <v-select
+            v-model="filter"
+            :items="filderArr"
+            variant="outlined"
+            class="custom-select"
+          >
+          </v-select>
+        </div>
+        <div class="form--cont--text">
+          <v-text-field
+            v-model="searchModel"
+            class="custom-input mini"
+            style="width: 100%"
+            placeholder="검색어를 입력하세요"
+          ></v-text-field>
+        </div>
       </div>
-      <div class="form--cont--text">
-        <v-text-field
-          v-model="searchModel"
-          class="custom-input mini"
-          style="width: 100%"
-          placeholder="검색어를 입력하세요"
-        ></v-text-field>
+      <div class="search--inner">
+        <div class="calendar-wrap ml--0">
+          <div class="calendar">
+            <VueDatePicker
+              :format="datePickerFormat"
+              v-model="searchStartDate"
+              placeholder="날짜를 선택하세요"
+              :auto-apply="true"
+              week-start="0"
+            ></VueDatePicker>
+          </div>
+          <span class="text">~</span>
+          <div class="calendar">
+            <VueDatePicker
+              v-model="searchEndDate"
+              :format="datePickerFormat"
+              placeholder="날짜를 선택하세요"
+              :auto-apply="true"
+              week-start="0"
+            ></VueDatePicker>
+          </div>
+          <div class="month--selector">
+            <v-btn elevation="0">오늘</v-btn>
+            <v-btn class="actv" elevation="0">7일</v-btn>
+            <v-btn elevation="0">1개월</v-btn>
+            <v-btn elevation="0">3개월</v-btn>
+            <v-btn elevation="0">전체</v-btn>
+          </div>
+        </div>
       </div>
       <v-btn
         class="custom-btn btn-blue mini sch--btn"
@@ -40,39 +72,34 @@
         </div>
         <div class="right--sections">
           <v-btn class="custom-btn mini btn-reg" @click="addLocated()"
-            ><i class="ico"></i>신규 등록</v-btn
+            ><i class="ico"></i>제품 등록</v-btn
           >
         </div>
       </div>
-
-      <div class="tbl-wrapper">
-        <div class="tbl-wrap">
-          <!-- ag grid -->
-          <ag-grid-vue
-            style="width: 100%; height: calc(10 * 2.94rem)"
-            class="ag-theme-quartz"
-            :gridOptions="gridOptions"
-            :rowData="tblItems"
-            :paginationPageSize="pageObj.pageSize"
-            :suppressPaginationPanel="true"
-            @grid-ready="onGridReady"
-            @rowClicked="detailLocated"
-          >
-          </ag-grid-vue>
-
-          <!-- 페이징 -->
-          <div class="ag-grid-custom-pagenations">
-            <pagination @chg_page="chgPage" :pageObj="pageObj"></pagination>
+      <div class="item--list--wrap" v-if="itemList.length > 0">
+        <div class="item--list">
+          <div v-for="(items, index) in paginatedItems" :key="index" @click="toItemDetail(items.SEQ)" class="item">
+            <div class="item--img"></div>
+            <h3>{{ items.NAME }}</h3>
+            <p>공급가: {{ items.PRICE1 }}<br>판매가: {{ items.PRICE2 }}</p>
+            <span>등록일: {{ items.REGDATE.slice(0, 10) }}</span>
+            <div v-show="items.STATUS == 1" class="sold--out"><span>품절</span></div>
           </div>
         </div>
+        <div class="item--pagination">
+          <v-pagination
+            v-model="currentPage"
+            :length="Math.ceil(itemList.length / itemsPerPage)"
+          ></v-pagination>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { AgGridVue } from "ag-grid-vue3";
-import pagination from "../components/common/pagination.vue";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
   /************************************************************************
 |    레이아웃
 ************************************************************************/
@@ -96,6 +123,8 @@ import pagination from "../components/common/pagination.vue";
 |    전역
  ************************************************************************/
   const searchModel = ref("");
+  const searchStartDate = ref("");
+  const searchEndDate = ref("");
   const filter = ref("");
   const filderArr = ref([
     { title: "선택하세요", value: "" },
@@ -104,110 +133,32 @@ import pagination from "../components/common/pagination.vue";
   const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
   const router = useRouter();
   const pageId = ref("제품 관리");
-  let pageObj = ref({
-    page: 1, // 현재 페이지
-    pageMaxNumSize: 10, // 페이지 숫자 최대 표현 개수
-    pageSize: 10, // 테이블 조회 데이터 개수
-    totalCnt: 0, // 전체 페이지
-  });
-  const tblItems = ref([]); // stat 데이터
+  const datePickerFormat = "yyyy-MM-dd";
+  const itemList = ref([]);
+  const itemsPerPage = 5;
+  const currentPage = ref(1);
 
   /* eslint-disable */
   /* prettier-ignore */
 
-  pageObj.value.totalCnt = tblItems.value.length;
-
-  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
-  const rowHeightRem = 2.65; // 원하는 rem 값
-  const rowHeightPx = rowHeightRem * remToPx();
-  const gridApi = shallowRef();
-
-  // gridOption
-  const gridOptions = {
-    columnDefs: [
-      {
-        headerName: "No",
-        valueGetter: (params) => params.api.getDisplayedRowCount() - params.node.rowIndex,
-        sortable: false,
-        width: 70,
-      },
-      { headerName: "제목", field: "TITLE", sortable: false },
-      {
-        headerName: "기간",
-        field: "STARTDATE",
-        sortable: false,
-        cellRenderer: (params) => {
-          const formatDate = (str) => {
-            if (!str) return "";
-            const d = new Date(str);
-            const yyyy = d.getFullYear();
-            const mm = String(d.getMonth() + 1).padStart(2, "0");
-            const dd = String(d.getDate()).padStart(2, "0");
-            return `${yyyy}-${mm}-${dd}`;
-          };
-
-          const start = formatDate(params.data.STARTDATE);
-          const end = formatDate(params.data.ENDDATE);
-
-          return `${start} ~ ${end}`;
-        },
-      },
-      {
-        headerName: "상태",
-        field: "STATUS",
-        sortable: false,
-        width: 70,
-        cellRenderer: (params) => {
-          return params.value == 0 ? "대기중" : params.value == 1 ? "진행중" : "마감";
-        },
-      },
-      { headerName: "등록일", field: "REGDATE", sortable: false, width: 140 },
-      // {
-      //   headerName: "알림 메일 수신 여부",
-      //   field: "mail_recp_yn",
-      //   sortable: false,
-      //   width: 130,
-      // },
-    ],
-    rowData: tblItems.value, // 테이블 데이터
-    autoSizeStrategy: {
-      type: "fitGridWidth", // width맞춤
-    },
-    suppressMovableColumns: true,
-    headerHeight: rowHeightPx,
-    rowHeight: rowHeightPx,
-    pagination: true,
-    suppressPaginationPanel: true, // 하단 default 페이징 컨트롤 숨김
-    //rowSelection: {
-    // checkboxes: true,
-    // headerCheckbox: true,
-    // enableClickSelection: false,
-    // mode: "multiRow",
-    //},
-  };
-
   /************************************************************************
 |    함수(METHODS)
 ************************************************************************/
-  const onGridReady = (__PARAMS) => {
-    gridApi.value = __PARAMS.api;
-  };
 
-  const chgPage = (__PAGE) => {
-    pageObj.value.page = __PAGE;
-    gridApi.value.paginationGoToPage(__PAGE - 1);
-  };
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    return itemList.value.slice(start, start + itemsPerPage);
+  });
 
   const addLocated = () => {
     router.push({
-      path: "/view/event/evtAdd",
+      path: "/view/item/add",
     });
-    useDtStore.boardInfo.pageType = "I";
   };
 
   const detailLocated = (__EVENT) => {
     router.push({
-      path: "/view/event/evtAdd",
+      path: "/view/item/detail",
     });
     useDtStore.boardInfo.seq = __EVENT.data.SEQ;
     useDtStore.boardInfo.pageType = "U";
@@ -221,11 +172,10 @@ import pagination from "../components/common/pagination.vue";
     };
 
     await useAxios()
-      .post("/evt/list", _req)
+      .post("/item/list", _req)
       .then((res) => {
-        _req._size = res.data.length;
-        tblItems.value = res.data;
-        pageObj.value.totalCnt = tblItems.value.length;
+        itemList.value = res.data;
+        //pageTotal.value = res.data._total_cnt;
       });
   };