Merge pull request #94 from IT-Cotato/feat/#90-deposit

[Fix] 선생님만 입금 생성할 수 있게 변경
IT-Cotato · Feb 18, 2025 · 02828c7 · 02828c7
2 parents a9d42dc + 5c2e3a8
commit 02828c7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/components/Calendar/CalendarDeposit.tsx b/src/components/Calendar/CalendarDeposit.tsx
@@ -2,6 +2,9 @@ import { useNavigate } from 'react-router-dom';
 import money from '../../assets/images/money.png';
 import vector from '../../assets/images/vector.png';
 import { getClosestFutureDate } from '../../utils/getCloseDate';
+import { useState } from 'react';
+import Modal from '../Modal/Modal';
+import AccessFail from '../Modal/AccessFail';
 
 type DepositProps = {
   roomname: string[];
@@ -11,12 +14,16 @@ type DepositProps = {
 
 const CalendarDeposit = ({ roomname, nextDeopsit, isPermission }: DepositProps) => {
   const nav = useNavigate();
+  const [modalOpen, setModalOpen] = useState(false);
+  const userRole = localStorage.getItem('roleInfo');
 
   const handleClick = () => {
-    if (nextDeopsit == '0') nav('payment/create');
     // 입금일이 등록되지 않은 경우
-    else if (nextDeopsit && isPermission) nav('payment');
+    if (nextDeopsit == '0') {
+      userRole == 'TEACHER' ? nav('payment/create') : setModalOpen(true);
+    }
     // 입금일 등록됐을 경우
+    else if (nextDeopsit && isPermission) nav('payment');
   };
 
   return (
@@ -49,6 +56,11 @@ const CalendarDeposit = ({ roomname, nextDeopsit, isPermission }: DepositProps)
           </div>
         </div>
       ))}
+      {modalOpen && (
+        <Modal onClose={() => setModalOpen(false)}>
+          <AccessFail setModalOpen={setModalOpen} text="아직 입금일이 설정되지 않았어요!" />
+        </Modal>
+      )}
     </div>
   );
 };

diff --git a/src/components/DepositDetail.tsx b/src/components/DepositDetail.tsx
@@ -9,6 +9,7 @@ interface DepositDetailProps {
 
 const DepositDetail = ({ depositInfo }: DepositDetailProps) => {
   const nav = useNavigate();
+  const userRole = localStorage.getItem('roleInfo');
 
   const depositDate = getClosestFutureDate(depositInfo.depositAt.toString()).split('-'); // 19일 -> 2025-05-19로 변환 -> [2025, 05, 19]
   const month = depositDate[1].startsWith('0') ? depositDate[1].slice(1) : depositDate[1]; // 만약 0으로 시작한다면(05) 0 제거
@@ -27,7 +28,7 @@ const DepositDetail = ({ depositInfo }: DepositDetailProps) => {
         <div className="flex gap-1">
           <p className="px-1 bg-primary_100 text-primary_700 rounded-[4px]">입금</p>
           <p className="text-gray-900 flex-1">{depositInfo.bankName}</p>
-          <Edit onClick={goToEdit} />
+          {userRole ? <Edit onClick={goToEdit} /> : null}
         </div>
         <p className="text-gray-500 underline">{depositInfo.accountNumber}</p>
       </div>

diff --git a/src/components/Modal/AccessFail.tsx b/src/components/Modal/AccessFail.tsx
@@ -1,11 +1,12 @@
 interface AccessFailProps {
   setModalOpen: (value: boolean) => void;
+  text?: string;
 }
 
-const AccessFail = ({ setModalOpen }: AccessFailProps) => {
+const AccessFail = ({ setModalOpen, text }: AccessFailProps) => {
   return (
     <div className="w-[320px] p-4 flex flex-col rounded-2xl items-center justify-center gap-8 bg-white">
-      <p className="text-[18px] font-semibold">접근할 수 없는 파일입니다.</p>
+      <p className="text-[18px] font-semibold">{text ? text : '접근할 수 없는 파일입니다.'}</p>
       <div className="flex w-full text-[16px] font-semibold">
         <button
           className="flex-1 py-[14px] bg-primary_700 text-white rounded-[4px] box-border text-center"