Merge pull request #332 from gsainfoteam/331-bug-additional-content-w…

…ith-same-id-appears fix: show only additional announcements with selected language
gsainfoteam · May 30, 2024 · 0474898 · 0474898
2 parents 76e5c4a + 39c0931
commit 0474898
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 19 deletions.
diff --git a/src/app/[lng]/(common)/(needSidebar)/notice/[id]/AddAdditionalNotice.tsx b/src/app/[lng]/(common)/(needSidebar)/notice/[id]/AddAdditionalNotice.tsx
@@ -6,11 +6,12 @@ import 'react-datetime-picker/dist/DateTimePicker.css';
 
 import { Dayjs } from 'dayjs';
 import { RefObject, useState } from 'react';
+
 import { PropsWithLng } from '@/app/i18next';
 import { useTranslation } from '@/app/i18next/client';
 import AddIcon from '@/assets/icons/add.svg';
 
-interface AddAddtionalNoticesProps {
+interface AddAdditionalNoticesProps {
   noticeId: number;
   originallyHasDeadline: string | Dayjs | null;
   supportedLanguage: string[];
@@ -25,7 +26,7 @@ const AddAdditionalNotice = ({
   supportedLanguage,
   originallyHasDeadline,
   lng,
-}: AddAddtionalNoticesProps & PropsWithLng) => {
+}: AddAdditionalNoticesProps & PropsWithLng) => {
   const [content, setContent] = useState<string>('');
   const [englishContent, setEnglishContent] = useState<string>('');
 

diff --git a/src/app/[lng]/(common)/(needSidebar)/notice/[id]/AdditionalNotices.tsx b/src/app/[lng]/(common)/(needSidebar)/notice/[id]/AdditionalNotices.tsx
@@ -1,19 +1,19 @@
 import dayjs from 'dayjs';
 
 import { Content, NoticeDetail } from '@/api/notice/notice';
-import { PropsWithLng, T } from '@/app/i18next';
+import { createTranslation, PropsWithLng } from '@/app/i18next';
 
 interface AdditionalNoticesProps {
   notice: NoticeDetail;
   additionalContents: Content[];
-  t: T;
 }
 
 const AdditionalNotices = async ({
   notice,
   additionalContents,
-  t,
-}: AdditionalNoticesProps & PropsWithLng) => {
+  lng,
+}: PropsWithLng<AdditionalNoticesProps>) => {
+  const { t } = await createTranslation(lng);
   return (
     <div className={'flex flex-col gap-[18px]'}>
       {additionalContents.map((content, index) => {

diff --git a/src/app/[lng]/(common)/(needSidebar)/notice/[id]/ImageStack.tsx b/src/app/[lng]/(common)/(needSidebar)/notice/[id]/ImageStack.tsx
@@ -9,13 +9,13 @@ import ShowcaseModal from './ShowcaseModal';
 
 interface ImageStackProps {
   width?: number;
-  srcs: string[];
+  sources: string[];
   alt: string;
 }
 
 const ImageStack = ({
   width,
-  srcs,
+  sources,
   alt,
   lng,
 }: ImageStackProps & PropsWithLng) => {
@@ -32,7 +32,7 @@ const ImageStack = ({
   return (
     <>
       <div className="flex flex-col gap-[10px]">
-        {srcs.map((src, i) => (
+        {sources.map((src, i) => (
           <div key={src} className="relative cursor-pointer">
             <Image
               src={src}
@@ -49,7 +49,7 @@ const ImageStack = ({
       {isShowcaseOpen && (
         <div className="hidden md:block">
           <ShowcaseModal
-            srcs={srcs}
+            srcs={sources}
             alt={alt}
             lng={lng}
             onHide={() => setIsShowcaseOpen(false)}

diff --git a/src/app/[lng]/(common)/(needSidebar)/notice/[id]/page.tsx b/src/app/[lng]/(common)/(needSidebar)/notice/[id]/page.tsx
@@ -43,20 +43,31 @@ interface DetailedNoticePageProps {
 const DetailedNoticePage = async ({
   params: { id, lng },
 }: DetailedNoticePageProps) => {
-  const { t } = await createTranslation(lng, 'translation');
   const notice = await getNotice(Number.parseInt(id), lng).catch(() => null);
   if (!notice) return notFound();
 
   const title = notice.title;
 
+  const additionalContents = Object.values(
+    notice.additionalContents.reduce<
+      Record<number, (typeof notice.additionalContents)[number]>
+    >(
+      (prev, curr) => ({
+        ...prev,
+        [curr.id]: prev[curr.id]?.lang === lng ? prev[curr.id] : curr,
+      }),
+      {},
+    ),
+  );
+
   return (
     <div className="flex justify-center">
       <div className="content mt-8 md:mt-12 md:w-[900px] md:min-w-[600px]">
         <div className="flex gap-5">
-          {/* DESKTOP VIEW IMAGESTACK */}
+          {/* DESKTOP VIEW IMAGE STACK */}
           <div className="hidden md:block">
             {notice.imageUrls.length > 0 && (
-              <ImageStack srcs={notice.imageUrls} alt={title} lng={lng} />
+              <ImageStack sources={notice.imageUrls} alt={title} lng={lng} />
             )}
           </div>
 
@@ -67,12 +78,12 @@ const DetailedNoticePage = async ({
               lng={lng}
             />
 
-            {/* MOBILE VIEW IMAGESTACK */}
+            {/* MOBILE VIEW IMAGE STACK */}
             <div className="md:hidden">
               {notice.imageUrls.length > 0 && (
                 <ImageStack
                   width={900}
-                  srcs={notice.imageUrls}
+                  sources={notice.imageUrls}
                   alt={title}
                   lng={lng}
                 />
@@ -84,9 +95,8 @@ const DetailedNoticePage = async ({
             <Actions notice={notice} lng={lng} />
 
             <AdditionalNotices
-              additionalContents={notice.additionalContents}
+              additionalContents={additionalContents}
               notice={notice}
-              t={t}
               lng={lng}
             />
           </div>

diff --git a/.../[lng]/(write)/write/AttatchPhotoArea.tsx → ...p/[lng]/(write)/write/AttachPhotoArea.tsx b/.../[lng]/(write)/write/AttatchPhotoArea.tsx → ...p/[lng]/(write)/write/AttachPhotoArea.tsx
diff --git a/src/app/[lng]/(write)/write/NoticeEditor.tsx b/src/app/[lng]/(write)/write/NoticeEditor.tsx
@@ -34,7 +34,7 @@ import { NOTICE_LOCAL_STORAGE_KEY } from '@/utils/constants';
 import { WarningSwal } from '@/utils/swals';
 import { calculateRemainingTime } from '@/utils/utils';
 
-import AttachPhotoArea, { FileWithUrl } from './AttatchPhotoArea';
+import AttachPhotoArea, { FileWithUrl } from './AttachPhotoArea';
 import DeepLButton from './DeepLButton';
 import EditableTimer from './EditableTimer';
 import handleNoticeSubmit from './handle-notice-submit';
@@ -487,7 +487,7 @@ const NoticeEditor = ({
         <AddAdditionalNotice
           noticeId={notice.id}
           originallyHasDeadline={notice.deadline}
-          supportedLanguage={['ko', 'en']}
+          supportedLanguage={hasEnglishContent ? ['ko', 'en'] : ['ko']}
           koreanRef={additionalKoreanRef}
           englishRef={additionalEnglishRef}
           lng={lng}