refactor: 2차 QA 반영 (#116)

* feat: 마이페이지에서 신고 횟수 조회 기능 구현

* design: button에 aria-label 추가하기

* design: 마이페이지 신고 횟수 조회 텍스트 수정

* perf: 오고 있는 편지가 존재하지 않을 때는 오고 있는 편지 모달 내에서 렌더링되지 않도록

* feat: 마이페이지에서 신고 횟수 클릭 시 신고 안내 모달이 뜨도록

* fix: 마이페이지에서 신고 횟수 조회 텍스트 오류 수정

Author: tifsy

src/pages/Home/components/ShowShareAccessModal.tsx

@@ -61,6 +61,7 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
                     className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
                     key={proposal.shareProposalId}
                     onClick={() => handleNavigation(proposal.shareProposalId)}
+                    aria-label="따숨님의 공유 요청"
                   >
                     <p>{proposal.requesterZipCode}님의 공유 요청</p>
                   </button>

src/pages/MyPage/index.tsx

@@ -8,14 +8,18 @@ import useMyPageStore from '@/stores/myPageStore';
 
 import { TEMPERATURE_RANGE } from './constants';
 import useToastStore from '@/stores/toastStore';
+import ModalOverlay from '@/components/ModalOverlay';
 
 const MyPage = () => {
   useEffect(() => {
     fetchMyPageInfo();
   }, []);
 
   const { data, fetchMyPageInfo } = useMyPageStore();
+
   const [isOpenModal, setIsOpenModal] = useState(false);
+  const [isOpenWarningModal, setIsOpenWarningModal] = useState(false);
+
   const logout = useAuthStore((state) => state.logout);
   const setToastActive = useToastStore((state) => state.setToastActive);
 
@@ -60,6 +64,19 @@ const MyPage = () => {
           }}
         />
       )}
+
+      {isOpenWarningModal && (
+        <ModalOverlay closeOnOutsideClick onClose={() => setIsOpenWarningModal(false)}>
+          <article className="bg-accent-1 relative w-77 overflow-hidden rounded-sm p-6">
+            <div className="absolute inset-0 h-full w-full bg-white/90 blur-[25px]" />
+            <div className="relative">
+              <h2 className="body-sb mb-1.5 text-gray-100">경고 규칙</h2>
+              <p className="caption-r text-black">3회 경고: 서비스 이용 불가능</p>
+            </div>
+          </article>
+        </ModalOverlay>
+      )}
+
       <main className="flex grow flex-col gap-12 px-5 pt-20 pb-6">
         <h1 className="h2-b mx-auto flex gap-1.5">
           {data.zipCode.split('').map((code, index) => (
@@ -109,11 +126,24 @@ const MyPage = () => {
                 <span>{data.email}</span>
               </p>
             </div>
+            <div
+              className="flex justify-between"
+              onClick={async () => {
+                setIsOpenWarningModal(true);
+              }}
+            >
+              <p className="body-sb text-gray-100">경고 횟수</p>
+              <p className="body-r text-gray-60">
+                <span>{data.warningCount}회</span>
+              </p>
+            </div>
+
             <button
               className="body-sb self-start text-gray-100"
               onClick={() => {
                 logout();
               }}
+              aria-label="로그아웃"
             >
               로그아웃
             </button>
@@ -125,6 +155,7 @@ const MyPage = () => {
           onClick={async () => {
             setIsOpenModal(true);
           }}
+          aria-label="탈퇴하기"
         >
           탈퇴하기
         </button>

src/pages/Share/index.tsx

@@ -71,6 +71,7 @@ const ShareApprovalPage = () => {
                 type="button"
                 className="body-m secondary-btn h-10 flex-1 basis-1/2"
                 onClick={() => handleProposalApproval('reject')}
+                aria-label="거부하기"
               >
                 거부하기
               </button>
@@ -79,6 +80,7 @@ const ShareApprovalPage = () => {
                 type="button"
                 className="primary-btn body-m h-10 flex-1 basis-1/2"
                 onClick={() => handleProposalApproval('approve')}
+                aria-label="승인하기"
               >
                 승인하기
               </button>

src/stores/incomingLettersStore.ts

@@ -51,7 +51,9 @@ export const useIncomingLettersStore = create<IncomingLettersStore>((set) => ({
         data: inProgressLetters,
       });
 
-      setInterval(() => {
+      if (inProgressLetters.length === 0) return;
+
+      const intervalId = setInterval(() => {
         set((state) => {
           const updatedLetters = state.data.map((letter: IncomingLetters) => {
             const remainingTime = calculatingRemainingTime(letter.deliveryCompletedAt);
@@ -62,6 +64,10 @@ export const useIncomingLettersStore = create<IncomingLettersStore>((set) => ({
             (letter) => letter.remainingTime !== '00:00:00',
           );
 
+          if (filteredLetters.length === 0) {
+            clearInterval(intervalId);
+          }
+
           return {
             data: filteredLetters,
           };

src/stores/myPageStore.ts

@@ -7,6 +7,7 @@ interface MyPageDataStore {
   temperature: string;
   social: string;
   email: string;
+  warningCount: number;
 }
 
 interface MyPageStore {
@@ -21,6 +22,7 @@ const useMyPageStore = create<MyPageStore>((set) => ({
     temperature: '',
     social: '',
     email: '',
+    warningCount: 0,
   },
   message: '',
   setMyPageData: (newData) => set({ data: newData }),