Shkim0819 (#104)

index.d.ts

@@ -1,4 +1,5 @@
 declare module "*.ttf";
 declare module "*.png"
 declare module "*.svg"
-declare module "react-moment"
+declare module "react-moment"
+declare module "file-saver"

package.json

@@ -15,12 +15,15 @@
     "@types/styled-components": "^5.1.26",
     "axios": "^1.3.4",
     "downloadjs": "^1.4.7",
+    "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
     "framer-motion": "^10.10.0",
     "html2canvas": "^1.4.1",
     "react": "^18.2.0",
     "react-calendar": "^4.2.1",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.5.2",
     "react-masonry-css": "^1.0.16",
     "react-moment": "^1.1.3",
     "react-router-dom": "^6.8.2",

src/assets/components/etc/popup.css

@@ -0,0 +1,108 @@
+.popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(49, 41, 41, 0.8);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+}
+
+.popup-inner {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    padding: 40px;
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2);
+    border-radius: 10px;
+}
+.popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40px;
+}
+.close-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background-color: #fff;
+    cursor: pointer;
+    outline: none;
+    font-weight: bold;
+}
+.popup-body{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.popup-body-inner{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: left;
+    flex-direction: column;
+}
+.popup-body-inner-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.popup-body-inner-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.popup-body-inner-body label {
+    font-size: 0.8rem;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+.popup-body-inner-body input, .popup-body-inner-body select {
+    width: 100%;
+    height: 40px;
+    border: 1px solid #E0E0E0;
+    border-radius: 5px;
+    padding: 10px;
+}
+.popup-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 20px;
+    margin-bottom: 55px;
+}
+.popup-footer-btn {
+    width: 100%;
+    height: 40px;
+    border: none;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s ease-in-out;
+}
+.popup-footer-btn:hover {
+    background-color: #E0E0E0;
+}

src/assets/components/etc/showNewQuestions.css

@@ -3,7 +3,7 @@
   top:0;
   left: 0;
   width:100%;
-  height: 100%;
+  min-height: 100vh;
   padding: 20px;
   background-color: #FAF9F6;
 }
@@ -27,12 +27,24 @@
 
 
 /* 검색영역 */
+.s-n-q-search-info {
+  width: 100%;
+  font-size: 0.9rem;
+}
+
 .s-n-q-search-area {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
+  padding-top: 20px;
+  margin-bottom: 20px;
   gap: 4px;
+  position: sticky;
+  top: 0;
+  background-color: #FAF9F6;
+  /* 아래에만 sticky 적용이 될 때 그림자 적용 */
+  box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2);
 }
 
 .s-n-q-search-area > select {
@@ -62,6 +74,11 @@
 }
 
 /* 목록영역 */
+.s-n-q-count {
+  font-size: 0.8rem;
+  margin-bottom: 1rem;
+}
+
 .s-n-q-list {
   width: 100%;
   display: flex;
@@ -70,6 +87,30 @@
 }
 
 .s-n-q-list-header {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  text-align: center;
+  font-size: 0.9rem;
+}
+.s-n-q-list-header tr {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+}
+
+.s-n-q-list-item-area {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.s-n-q-list-item {
+  font-size: 0.7rem;
   width: 100%;
   height: 40px;
   display: flex;
@@ -78,4 +119,19 @@
   gap: 2px;
   padding: 4px;
   text-align: center;
+  border: 1px solid #E0E0E0;
+  border-radius: 5px;
+}
+
+.s-n-q-list-item:hover {
+  font-weight: bold;
+}
+.snq-item-edit-btn {
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+}
+.snq-item-edit-btn:hover {
+  cursor: pointer;
+  text-decoration: underline; 
 }

src/components/ETCUpdatePopup.tsx

@@ -0,0 +1,92 @@
+import {useState} from 'react'
+import useETCQuestionStore, { ETC_QS_TYPE } from "store/modules/ETC_QuestionList"
+import 'assets/components/etc/popup.css'
+
+/**
+ * @desc 수정할 질문 내용을 입력하는 팝업창
+ * @param {Objcet} props
+ */
+const ETCUpdatePopup = ({updateActive, setUpdateActive}:PROPS ) => {
+  const {updateQuestion} = useETCQuestionStore()
+  const [q, setQ] = useState(updateActive.qquestion)
+  const [w, setW] = useState(updateActive.qwriter)
+  const [c, setC] = useState(updateActive.qcategory)
+
+  //CLOSE POPUP
+  const close = () => {
+    setUpdateActive({qno:0, qquestion:"", qwriter:"", qcategory:"", qcreatedAt:""})
+  }
+
+  const handleQ = (e:React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)
+  const handleW = (e:React.ChangeEvent<HTMLInputElement>) => setW(e.target.value)
+  const handleC = (e:React.ChangeEvent<HTMLSelectElement>) => setC(e.target.value)
+
+  //update question
+  const uq = async () => {
+    if (q === "" || w === "" || c === "") {
+      alert("모든 항목을 입력해주세요.")
+    } else {
+      if (updateActive.qcategory === c && updateActive.qquestion === q && updateActive.qwriter === w) {
+        console.log('변경사항이 없습니다.');
+        close()
+      } else {
+        const param = {
+          qno: updateActive.qno,
+          qquestion: q,
+          qwriter: w,
+          qcategory: c,
+          qcreatedAt: updateActive.qcreatedAt
+        }
+        await updateQuestion(param)
+        close()
+      }
+    }
+  }
+
+  return (
+    <div className="popup">
+      <div className="popup-inner">
+        <div className="popup-header">
+          <h2>질문 수정</h2>
+          <button className="close-btn" onClick={close}>X</button>
+        </div>
+        <div className="popup-body">
+          <div className="popup-body-inner">
+            <div className="popup-body-inner-left">
+              <div className="popup-body-inner-body">
+                <label htmlFor="q">질문</label>
+                <input type="text" name="q" id="q" value={q} onChange={handleQ} maxLength={69} />
+              </div>
+              <div className="popup-body-inner-body">
+                <label htmlFor="w">작성자</label>
+                <input type="text" name="w" id="w" value={w} onChange={handleW} maxLength={49} />
+              </div>
+              <div className="popup-body-inner-body">
+                <label htmlFor="c">카테고리</label>
+                <select name="c" id="c" value={c} onChange={handleC}>
+                  <option value="일상">일상</option>
+                  <option value="꿈">꿈</option>
+                  <option value="취향">취향</option>
+                  <option value="탐구">탐구</option>
+                  <option value="기억">기억</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="popup-footer">
+            <button className="popup-footer-btn" onClick={close}>취소</button>
+            <button className="popup-footer-btn" onClick={uq}>수정</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  )
+}
+
+type PROPS = {
+  updateActive: ETC_QS_TYPE
+  setUpdateActive: React.Dispatch<React.SetStateAction<ETC_QS_TYPE>>
+}
+
+export default ETCUpdatePopup

src/composables/ETC/index.ts

@@ -0,0 +1,67 @@
+import { saveAs } from 'file-saver';
+import Excel from 'exceljs';
+
+
+export const colums:Array<COLUMS> = [
+  {header: 'No', key: 'qno', width: 7, alignment: 'center'},
+  {header: '질문', key: 'qquestion', width: 125, alignment: 'left'},
+  {header: '작성자', key: 'qwriter', width: 25, alignment: 'center'},
+  {header: '카테고리', key: 'qcategory', width: 10, alignment: 'center'},
+  {header: '작성일자', key: 'qcreatedAt', width: 23, alignment: 'center'},
+]
+
+export const exportToExcel = async (search: string, list:Array<any>) => {
+  const workSheetName = '질문목록탭';
+  const workBookName = '추가한 질문 목록';
+  const workbook = new Excel.Workbook();
+  try {
+    console.log('exportExcel')
+    const fileName = search.length > 0 ? search : workBookName;
+    const worksheet = workbook.addWorksheet(workSheetName);
+
+    //@ts-ignore
+    worksheet.columns = colums;
+    worksheet.getRow(1).font = { bold: true };
+
+    worksheet.columns.forEach((column:any)=> {
+      column.width = column.width;
+      column.alignment = { horizontal: 'left' };
+      column.font = { name: '굴림', size: 10 };
+    });
+
+    //현재 sorting 되어져 있는 목록을 excel 에 출력
+    list.forEach(singleData => {
+      worksheet.addRow(singleData);
+    });
+
+    worksheet.eachRow({ includeEmpty: false }, row => {
+      //@ts-ignore
+      const currentCell = row._cells;
+      //@ts-ignore
+      currentCell.forEach(singleCell => {
+        const cellAddress = singleCell._address;
+        // apply border
+        worksheet.getCell(cellAddress).border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+      });
+    });
+
+    const buf = await workbook.xlsx.writeBuffer();
+    saveAs(new Blob([buf]), `${fileName}.xlsx`);
+
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+
+export type COLUMS = {
+  header: string,
+  key: string,
+  width?: number,
+  alignment?: string
+}