design: 오고 있는 편지 모달에서 데이터가 없을 때 대체 텍스트 추가

Author: tifsy

src/pages/Home/components/ShowIncomingLettersModal.tsx

@@ -29,15 +29,19 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
               <p className="caption-r text-black">시간은 실제 시간을 기반으로 책정됩니다.</p>
             </div>
             <div className="mt-6 flex max-h-60 min-h-auto w-[251px] flex-col gap-[10px] overflow-y-scroll [&::-webkit-scrollbar]:hidden">
-              {data.map((letter) => (
-                <div
-                  className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
-                  key={letter.letterId}
-                >
-                  <p className="truncate">{letter.title}</p>
-                  <p>{letter.remainingTime}</p>
-                </div>
-              ))}
+              {data.length > 0 ? (
+                data.map((letter) => (
+                  <div
+                    className="text-gray-80 body-m flex h-10 w-full items-center justify-between gap-1 rounded-lg bg-white p-3"
+                    key={letter.letterId}
+                  >
+                    <p className="truncate">{letter.title}</p>
+                    <p>{letter.remainingTime}</p>
+                  </div>
+                ))
+              ) : (
+                <p className="caption-m text-center text-gray-50">오고 있는 편지가 없어요</p>
+              )}
             </div>
           </ModalBackgroundWrapper>
         </div>