Merge pull request #104 from GPGT-Algorithm-Study/dev

fix: 민원 기능 수정사항 배포
GPGT-Algorithm-Study · Apr 26, 2024 · 617e81b · 617e81b
2 parents 6b1d910 + 6a8df9b
commit 617e81b
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 69 deletions.
diff --git a/src/pages/Admin/ComplaintManagement/ComplaintModal/index.jsx b/src/pages/Admin/ComplaintManagement/ComplaintModal/index.jsx
@@ -31,31 +31,46 @@ function ComplaintModal(props) {
     const processor = e.target[0].value;
     const processType = e.target[1].value;
     const reply = e.target[2].value;
-    if (isEmpty(processor)) toast.error('담당자를 지정해주세요.');
-    else if (processType === complaint.processType)
-      toast.error('민원의 처리 상태를 변경해주세요.');
-    else if (isEmpty(reply)) toast.error('코멘트를 작성해주세요.');
-    else {
-      const updatedComplaint = {
-        id: complaint.id,
-        processType: processType,
-        processor: processor,
-        reply: reply,
-      };
 
-      setSubmitLock(true);
-      updateComplaintType(updatedComplaint)
-        .then((res) => {
-          toast.success(`민원을 성공적으로 처리하였습니다.`);
-          props.closeModal();
-        })
-        .catch((err) => {
-          toast.error(`민원 처리에 실패하였습니다 : ${err.message}`);
-        })
-        .finally(() => {
-          setSubmitLock(false);
-        });
+    const updatedComplaint = {
+      id: complaint.id,
+      processType: processType,
+      processor: processor,
+      reply: reply,
+    };
+    if (complaint.processType === 'WAITING') {
+      if (isEmpty(updatedComplaint.processor)) {
+        toast.error('담당자를 선택해주세요.');
+        return;
+      } else if (updatedComplaint.processType === 'WAITING') {
+        toast.error('처리 상태를 변경해주세요.');
+        return;
+      } else if (isEmpty(updatedComplaint.reply)) {
+        toast.error('코멘트를 작성해주세요.');
+        return;
+      }
+    } else {
+      if (
+        updatedComplaint.processType === complaint.processType &&
+        updatedComplaint.processor === complaint.processor &&
+        updatedComplaint.reply === complaint.reply
+      ) {
+        toast.error('변경사항이 없습니다.');
+        return;
+      }
     }
+    setSubmitLock(true);
+    updateComplaintType(updatedComplaint)
+      .then((res) => {
+        toast.success(`민원을 성공적으로 처리하였습니다.`);
+        props.closeModal();
+      })
+      .catch((err) => {
+        toast.error(`민원 처리에 실패하였습니다 : ${err.message}`);
+      })
+      .finally(() => {
+        setSubmitLock(false);
+      });
   };
   const onDeleteClick = (e) => {
     const isAgree = confirm('해당 민원을 정!말! 삭제하시겠습니까?');
@@ -85,7 +100,7 @@ function ComplaintModal(props) {
       <p>담당자 : {complaint.processor ? complaint.processor : '-'}</p>
       <br />
       <p>내용</p>
-      <p>{complaint.content}</p>
+      <p style={{ whiteSpace: 'pre' }}>{complaint.content}</p>
       <br />
       <Button
         style={{
@@ -100,35 +115,33 @@ function ComplaintModal(props) {
       <p>민원 처리</p>
       <br />
       <form onSubmit={(e) => onSubmit(e)}>
-        <input
-          name="processor"
-          placeholder={'담당자'}
-          defaultValue={complaint.processor ? complaint.processor : undefined}
-        />
         <div>
-          <select name="type">
-            <option
-              value="WAITING"
-              selected={complaint.processType === 'WAITING'}
-            >
-              대기중
-            </option>
-            <option
-              value="PROCESSING"
-              selected={complaint.processType === 'PROCESSING'}
-            >
-              처리중
-            </option>
-            <option value="DONE" selected={complaint.processType === 'DONE'}>
-              처리 완료
+          <select
+            name="processor"
+            defaultValue={complaint.processor ? complaint.processor : ''}
+          >
+            <option value="" disabled hidden>
+              담당자 선택
             </option>
+            <option value="seyeon0207">양세연</option>
+            <option value="fin">김성민</option>
+            <option value="asdf016182">장희영</option>
+            <option value="emforhs0315">조성훈</option>
+          </select>
+        </div>
+        <div>
+          <select name="type" defaultValue={complaint.processType}>
+            <option value="WAITING">대기중</option>
+            <option value="PROCESSING">처리중</option>
+            <option value="DONE">처리 완료</option>
           </select>
         </div>
         <textarea
-          row="10"
           name="reply"
           id="reply"
           placeholder="코멘트 작성.."
+          defaultValue={complaint.reply}
+          style={{ width: '80%', height: '100px' }}
         ></textarea>
         <br />
         <input type="submit"></input>

diff --git a/src/pages/Admin/ComplaintManagement/index.jsx b/src/pages/Admin/ComplaintManagement/index.jsx
@@ -113,6 +113,7 @@ function ComplaintManagement() {
             const requester = userInfo.find(
               (user) => user.bojHandle === complaint.requester,
             );
+            const createdDate = new Date(complaint.createdDate);
             const type = complaint.processType;
             if (
               mode === -1 ||
@@ -129,7 +130,9 @@ function ComplaintManagement() {
                   <TextWrapper>
                     <Id>{complaint.id}</Id>
                     <Name>{requester.notionId}</Name>
-                    <DateWrapper>YYYY-MM-DD, HH:MM:SS</DateWrapper>
+                    <DateWrapper>{`${createdDate.toLocaleDateString()}  ${createdDate
+                      .toTimeString()
+                      .substring(0, 8)}`}</DateWrapper>
                     <DateWrapper>
                       [{getKrComplaintTypeName(complaint.complaintType)}]
                     </DateWrapper>

diff --git a/src/pages/Complaint/ComplaintInputForm/index.jsx b/src/pages/Complaint/ComplaintInputForm/index.jsx
@@ -154,7 +154,7 @@ function ComplaintInputForm() {
           <ContentArea
             rows="10"
             id="content"
-            placeholder="민원 내용을 작성해주세요"
+            placeholder="민원 내용 작성.."
             value={content}
             onChange={onChangeContent}
           ></ContentArea>

diff --git a/src/pages/MyPage/ComplaintCard/index.jsx b/src/pages/MyPage/ComplaintCard/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Card,
   ComplaintContent,
@@ -11,7 +11,10 @@ import {
 import useSWR from 'swr';
 import { getMyComplaint } from 'api/complaint';
 import { isEmpty } from 'lodash';
-import { COMPLAINT_REQUESTER_PREFIX_URL } from 'utils/constants';
+import {
+  COMPLAINT_REQUESTER_PREFIX_URL,
+  USER_PREFIX_URL,
+} from 'utils/constants';
 import fetcher from 'utils/fetcher';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
@@ -35,20 +38,28 @@ function ComplaintCard({ userInfo, isUser }) {
     `${COMPLAINT_REQUESTER_PREFIX_URL}/all`,
     fetcher,
   );
+  const { data: allUserInfo } = useSWR(`${USER_PREFIX_URL}/info/all`, fetcher);
   if (!isUser || !userInfo) return;
   const total = complaintList ? complaintList.length : 0;
   return (
     <Card>
       <Title>
-        💢 내 민원 목록{' '}
-        <span>{total} 개의 민원 · 민원을 클릭하여 수정할 수 있습니다.</span>
+        💢 내 민원 목록 <span>{total} 개의 민원</span>
+      </Title>
+      <Title>
+        <span>
+          마우스 커서를 올려 자세히 보거나, 클릭하여 수정할 수 있습니다.
+        </span>
       </Title>
       {/* TODO : API 연결 */}
       {isEmpty(complaintList) ? (
         <NoPosts>제출한 민원이 없습니다.</NoPosts>
       ) : (
         <ComplaintContent>
           {complaintList.map((complaint) => {
+            const processor = allUserInfo?.find(
+              (u) => u.bojHandle === complaint.processor,
+            )?.notionId;
             return (
               <ComplaintItem
                 key={complaint.id}
@@ -63,14 +74,24 @@ function ComplaintCard({ userInfo, isUser }) {
                 <ComplaintTitle style={{ fontWeight: 'bold' }}>
                   [{getKrComplaintTypeName(complaint.complaintType)}]
                 </ComplaintTitle>
-                <ComplaintTitle>{complaint.content}</ComplaintTitle>
+                <ComplaintTitle className="hover-to-detail">
+                  {complaint.content}
+                </ComplaintTitle>
                 <ComplaintInfo>
                   <div>
                     {dayjs(complaint.createdDate).format('YYYY. MM. DD')}
                   </div>
                   <div>·</div>
+                  <div>{processor ? processor : '-'}</div>
+                  <div>·</div>
                   <div>{getKrProcessTypeName(complaint.processType)}</div>
                 </ComplaintInfo>
+                {complaint.reply ? (
+                  <ComplaintTitle className="hover-to-detail">
+                    [REPLY] <br />
+                    <p style={{ fontStyle: 'italic' }}>{complaint.reply}</p>
+                  </ComplaintTitle>
+                ) : undefined}
               </ComplaintItem>
             );
           })}

diff --git a/src/pages/MyPage/ComplaintCard/style.jsx b/src/pages/MyPage/ComplaintCard/style.jsx
@@ -31,6 +31,25 @@ export const NoPosts = styled.div`
   font-size: 0.9rem;
 `;
 
+export const ComplaintItem = styled.div`
+  //display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 1rem 0;
+  row-gap: 0.8rem;
+  cursor: pointer;
+  &:hover .hover-to-detail {
+    display: block;
+  }
+`;
+
+export const ComplaintInfo = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--color-text-gray);
+  padding: 0.4rem 0;
+`;
 export const ComplaintContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -46,26 +65,9 @@ export const ComplaintContent = styled.div`
   }
 `;
 
-export const ComplaintItem = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 1.5rem 0;
-  row-gap: 0.8rem;
-  cursor: pointer;
-`;
-
-export const ComplaintInfo = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  font-size: 0.8rem;
-  color: var(--color-text-gray);
-`;
-
 export const ComplaintTitle = styled.div`
   color: var(--color-deep-gray);
   font-size: 0.9rem;
-  display: flex;
   align-items: center;
   gap: 0.5rem;
   & span {
@@ -76,4 +78,8 @@ export const ComplaintTitle = styled.div`
   text-overflow: ellipsis;
   white-space: pre;
   width: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  padding: 0.2rem 0;
 `;