feat: push notification 15min Modal and Alert

src/app/[lng]/(with-page-layout)/(with-sidebar-layout)/notice/[id]/SendPushNotificationAlert.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useCallback, useEffect, useState } from 'react';
+
+import { NoticeDetail } from '@/api/notice/notice';
+import { calculateRemainingTime } from '@/app/[lng]/write/calculateRemainingTime';
+import { PropsWithLng } from '@/app/i18next';
+import { useTranslation } from '@/app/i18next/client';
+
+interface SendPushNotificationAlertProps
+  extends Pick<NoticeDetail, 'author' | 'createdAt'> {}
+
+const SendPushNotificationAlert = ({
+  author,
+  createdAt,
+  lng,
+}: PropsWithLng<SendPushNotificationAlertProps>): JSX.Element | null => {
+  const { t } = useTranslation(lng);
+
+  const handleSendPushNotification = useCallback(() => {
+    // TODO: Implement push notification sending
+  }, []);
+
+  const { data: user } = useSession();
+  const isMyNotice = user?.user.uuid === author.uuid;
+
+  const [timeRemaining, setTimeRemaining] = useState(calculateRemainingTime(createdAt));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeRemaining(calculateRemainingTime(createdAt));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const isEditable = timeRemaining.minutes > 0 && timeRemaining.seconds > 0;
+
+  if (!(isMyNotice && isEditable)) return null;
+
+  return (
+    <div className="inline-flex w-full items-start justify-start gap-1.5 rounded-[15px] bg-[#fff4f0] px-5 py-[15px] font-normal text-primary">
+      <span>{t('zabo.sentPushNotificationAlert.title')} </span>
+      <span
+        className="cursor-pointer font-bold underline"
+        onClick={handleSendPushNotification}
+      >
+        {t('zabo.sentPushNotificationAlert.action')}
+      </span>
+    </div>
+  );
+};
+
+export default SendPushNotificationAlert;

src/app/[lng]/(with-page-layout)/(with-sidebar-layout)/notice/[id]/page.tsx

@@ -9,6 +9,7 @@ import AdditionalNotices from './AdditionalNotices';
 import Content from './Content';
 import ImageStack from './ImageStack';
 import NoticeInfo from './NoticeInfo';
+import SendPushNotificationAlert from './SendPushNotificationAlert';
 
 export const generateMetadata = async (
   {
@@ -71,6 +72,8 @@ const DetailedNoticePage = async ({
           </div>
 
           <div className="flex flex-col gap-[18px] md:w-[60%]">
+            <SendPushNotificationAlert {...notice} lng={lng} />
+
             <NoticeInfo
               {...notice}
               currentDeadline={notice.currentDeadline ?? null}

src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/mypage/MypageButton.tsx

@@ -69,13 +69,13 @@ const MypageButtons = ({ lng }: PropsWithLng) => {
       <div className="h-[1px] bg-greyLight dark:bg-dark_greyBorder" />
 
       <div className="flex justify-between gap-4">
-        <CSLink className="flex-1">
+        {/* <CSLink className="flex-1">
           <MypageButton
             align="right"
             icon={<FlagIcon className={ICON_CLASSNAME} />}
             buttonText={t('mypage.feedback')}
           />
-        </CSLink>
+        </CSLink> */}
       </div>
     </div>
   );

src/app/[lng]/write/NoticeEditor.tsx

@@ -183,6 +183,12 @@ const NoticeEditor = ({
   const handleSubmit = async () => {
     if (isLoading) return;
 
+    await Swal.fire({
+      text: t('write.alerts.pushWillDelayedNotice'),
+      icon: 'info',
+      confirmButtonText: t('alertResponse.confirm'),
+    });
+
     setIsLoading(true);
     const noticeId = await handleNoticeSubmit({
       title: state.korean.title,

src/app/components/layout/Footer/Footer.tsx

@@ -58,7 +58,8 @@ const Footer = async ({ lng }: PropsWithLng) => {
             <div className="flex flex-col gap-2">
               {links.map(({ link, name, key }: FooterLink) =>
                 key === 'bugReport' ? (
-                  <CSLink key={name}>{name}</CSLink>
+                  // <CSLink key={name}>{name}</CSLink>
+                  <></>
                 ) : (
                   <ExternalLink key={name} href={link}>
                     {name}

src/app/i18next/locales/en/translation.json

@@ -135,6 +135,11 @@
       "writeTitle": "Write a title of English notice here"
     },
 
+    "sentPushNotificationAlert": {
+      "title": "You can't edit once you send a notification.",
+      "action": "Send Push Notification"
+    },
+
     "authorActions": {
       "edit": "Edit / Add English Version",
       "remove": "Remove",
@@ -319,7 +324,8 @@
       "attachAdditionalNoticeFail": "Failed to post additional notice. Please try posting it again.",
       "copyAdditionalNotice": "Copy additional notice",
       "attachInternationalAdditionalNoticeFail": "Failed to post English additional notice. Please try posting it again.",
-      "copyInternationalAdditionalNotice": "Copy En. add. notice"
+      "copyInternationalAdditionalNotice": "Copy En. add. notice",
+      "pushWillDelayedNotice": "Users will receive a push notification after 15 minutes. If it's urgent, you can use Send Notification button in your notice page."
     }
   },
   "group": {

src/app/i18next/locales/ko/translation.json

@@ -126,6 +126,11 @@
       "writeTitle": "영어 공지 제목을 입력하세요"
     },
 
+    "sentPushNotificationAlert": {
+      "title": "알림을 보내면 수정이 불가능합니다.",
+      "action": "알림 보내기"
+    },
+
     "authorActions": {
       "edit": "수정 / 영어공지 작성",
       "remove": "삭제",
@@ -305,7 +310,8 @@
       "attachAdditionalNoticeFail": "추가 공지 작성에 실패했습니다",
       "copyAdditionalNotice": "추가 공지 복사",
       "attachInternationalAdditionalNoticeFail": "영어 추가 공지 작성에 실패했습니다",
-      "copyInternationalAdditionalNotice": "영어 추가 공지 복사"
+      "copyInternationalAdditionalNotice": "영어 추가 공지 복사",
+      "pushWillDelayedNotice": "15분 뒤에 사용자들에게 푸시알람이 전송됩니다. 긴급한 경우 내 공지 > 알림 보내기 기능을 사용하세요."
     }
   },
   "group": {