♻️ AboutEditor에서 server action을 주입받게 수정 (#285)

actions/about.ts

@@ -25,9 +25,6 @@ import {
   FETCH_TAG_HISTORY,
   FETCH_TAG_OVERVIEW,
 } from '@/constants/network';
-import { redirectKo } from '@/i18n/routing';
-import { FutureCareers } from '@/types/about';
-import { getPath } from '@/utils/page';
 import {
   contact,
   directions,
@@ -37,7 +34,11 @@ import {
   history,
   overview,
   studentClubs,
-} from '@/utils/segmentNode';
+} from '@/constants/segmentNode';
+import { redirectKo } from '@/i18n/routing';
+import { FutureCareers } from '@/types/about';
+import { getPath } from '@/utils/page';
+import { decodeFormDataFileName } from '@/utils/string';
 
 import { withErrorHandler } from './errorHandler';
 
@@ -46,6 +47,7 @@ import { withErrorHandler } from './errorHandler';
 const overviewPath = getPath(overview);
 
 export const putOverviewAction = withErrorHandler(async (formData: FormData) => {
+  decodeFormDataFileName(formData, 'newAttachments');
   await putOverview(formData);
   revalidateTag(FETCH_TAG_OVERVIEW);
   redirectKo(overviewPath);

actions/academics.ts

@@ -38,7 +38,7 @@ import {
 } from '@/types/academics';
 import { WithLanguage } from '@/types/language';
 import { getPath } from '@/utils/page';
-import { graduateScholarship, undergraduateScholarship } from '@/utils/segmentNode';
+import { graduateScholarship, undergraduateScholarship } from '@/constants/segmentNode';
 import { decodeFormDataFileName } from '@/utils/string';
 
 import { withErrorHandler } from './errorHandler';

actions/news.ts

@@ -7,7 +7,7 @@ import { deleteNews, patchNews } from '@/apis/v1/news/[id]';
 import { FETCH_TAG_NEWS } from '@/constants/network';
 import { redirectKo } from '@/i18n/routing';
 import { getPath } from '@/utils/page';
-import { news } from '@/utils/segmentNode';
+import { news } from '@/constants/segmentNode';
 import { decodeFormDataFileName } from '@/utils/string';
 
 const newsPath = getPath(news);

actions/notice.ts

@@ -8,7 +8,7 @@ import { FETCH_TAG_NOTICE } from '@/constants/network';
 import { redirectKo } from '@/i18n/routing';
 import { errorToStr } from '@/utils/error';
 import { getPath } from '@/utils/page';
-import { notice } from '@/utils/segmentNode';
+import { notice } from '@/constants/segmentNode';
 import { decodeFormDataFileName } from '@/utils/string';
 
 const noticePath = getPath(notice);

actions/people.ts

@@ -11,7 +11,7 @@ import { redirect } from '@/i18n/routing';
 import { Language, WithLanguage } from '@/types/language';
 import { FacultyStatus } from '@/types/people';
 import { getPath } from '@/utils/page';
-import { emeritusFaculty, faculty, staff } from '@/utils/segmentNode';
+import { emeritusFaculty, faculty, staff } from '@/constants/segmentNode';
 
 import { withErrorHandler } from './errorHandler';
 

actions/recruitment.ts

@@ -6,7 +6,7 @@ import { putFacultyRecruitment } from '@/apis/v1/recruit';
 import { FETCH_TAG_RECRUITMENT } from '@/constants/network';
 import { redirect } from '@/i18n/routing';
 import { getPath } from '@/utils/page';
-import { facultyRecruitment } from '@/utils/segmentNode';
+import { facultyRecruitment } from '@/constants/segmentNode';
 
 import { withErrorHandler } from './errorHandler';
 

actions/research.ts

@@ -15,7 +15,7 @@ import { FETCH_TAG_CENTER, FETCH_TAG_GROUP, FETCH_TAG_LAB } from '@/constants/ne
 import { redirectKo } from '@/i18n/routing';
 import { WithLanguage } from '@/types/language';
 import { getPath } from '@/utils/page';
-import { researchCenters, researchGroups, researchLabs } from '@/utils/segmentNode';
+import { researchCenters, researchGroups, researchLabs } from '@/constants/segmentNode';
 import { decodeFormDataFileName } from '@/utils/string';
 
 import { withErrorHandler } from './errorHandler';

actions/seminar.ts

@@ -7,7 +7,7 @@ import { deleteSeminar, patchSeminar } from '@/apis/v1/seminar/[id]';
 import { FETCH_TAG_SEMINAR } from '@/constants/network';
 import { redirectKo } from '@/i18n/routing';
 import { getPath } from '@/utils/page';
-import { seminar } from '@/utils/segmentNode';
+import { seminar } from '@/constants/segmentNode';
 import { decodeFormDataFileName } from '@/utils/string';
 
 const seminarPath = getPath(seminar);

app/[locale]/10-10-project/manager/page.tsx

@@ -1,7 +1,7 @@
 import HTMLViewer from '@/components/form/html/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 import { getPath } from '@/utils/page';
-import { greetings } from '@/utils/segmentNode';
+import { greetings } from '@/constants/segmentNode';
 
 export default async function TenTenManager() {
   return (

app/[locale]/about/components/AboutEditor.tsx

@@ -3,115 +3,80 @@
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import {
-  putContactAction,
-  putGreetingsAction,
-  putHistoryAction,
-  putOverviewAction,
-} from '@/actions/about';
 import Fieldset from '@/components/form/Fieldset';
 import Form from '@/components/form/Form';
 import LanguagePicker from '@/components/form/LanguagePicker';
-import { PostEditorFile, PostEditorImage } from '@/components/form/types';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import { EditorFile, EditorImage } from '@/components/form/types';
 import { useRouter } from '@/i18n/routing';
-import { AboutContent } from '@/types/about';
-import { Language, WithLanguage } from '@/types/language';
-import { errorToStr } from '@/utils/error';
+import { Language } from '@/types/language';
 import { contentToFormData, getAttachmentDeleteIds } from '@/utils/formData';
-import { getPath } from '@/utils/page';
-import { contact, greetings, history, overview, SegmentNode } from '@/utils/segmentNode';
-import { handleServerAction } from '@/utils/serverActionError';
-import { errorToast, successToast } from '@/utils/toast';
+import { handleServerResponse } from '@/utils/serverActionError';
 
-interface Props {
-  data: WithLanguage<AboutContent>;
-  node: SegmentNode;
-  showAttachments?: boolean;
-}
-
-interface FormData {
+export interface AboutFormData {
   htmlKo: string;
   htmlEn: string;
-  image: PostEditorImage;
-  files: PostEditorFile[];
+  image: EditorImage;
+  files: EditorFile[];
 }
 
-export default function AboutEditor({ data, node, showAttachments = false }: Props) {
+interface Props {
+  cancelPath: string;
+  defaultValues: AboutFormData;
+  onSubmit: (formData: FormData) => Promise<unknown>;
+  showAttachments?: boolean;
+}
+
+export default function AboutEditor({
+  cancelPath,
+  defaultValues,
+  onSubmit: _onSubmit,
+  showAttachments = false,
+}: Props) {
   const router = useRouter();
-  const formMethods = useForm<FormData>({
-    defaultValues: {
-      htmlKo: data.ko.description,
-      htmlEn: data.en.description,
-      image: data.ko.imageURL ? { type: 'UPLOADED_IMAGE', url: data.ko.imageURL } : null,
-      files: data.ko.attachments.map((attachment) => ({ file: attachment, type: 'UPLOADED_FILE' })),
-    },
-  });
+  const formMethods = useForm<AboutFormData>({ defaultValues });
   const { handleSubmit } = formMethods;
-
   const [language, setLanguage] = useState<Language>('ko');
 
-  const onCancel = () => router.push(getPath(node));
+  const onCancel = () => router.push(cancelPath);
 
   const onSubmit = handleSubmit(async ({ htmlKo, htmlEn, image, files }) => {
-    try {
-      const submitAction = ABOUT_SUBMIT_ACTION[node.segment];
-
-      const requestObject = {
-        ko: {
-          description: htmlKo,
-          deleteIds: getAttachmentDeleteIds(files, data.ko.attachments),
-        },
-        en: {
-          description: htmlEn,
-          deleteIds: getAttachmentDeleteIds(files, data.en.attachments),
-        },
-        removeImage: data.ko.imageURL !== null && image === null,
-      };
-
-      const formData = contentToFormData('EDIT', { requestObject, image, attachments: files });
-
-      handleServerAction(submitAction(formData));
-      successToast(`${node.name}을(를) 수정했습니다.`);
-    } catch (e) {
-      errorToast(errorToStr(e));
-    }
+    console.log(files, defaultValues);
+    const requestObject = {
+      ko: { description: htmlKo, deleteIds: getAttachmentDeleteIds(files, defaultValues.files) },
+      en: { description: htmlEn, deleteIds: [] },
+      removeImage: defaultValues.image !== null && image === null,
+    };
+
+    const formData = contentToFormData('EDIT', { requestObject, image, attachments: files });
+    const resp = await _onSubmit(formData);
+    handleServerResponse(resp, { successMessage: '수정 완료되었습니다.' });
   });
 
   return (
-    <PageLayout title={`${node.name} 편집`} titleType="big" hideNavbar>
-      <FormProvider {...formMethods}>
-        <Form>
-          <LanguagePicker onChange={setLanguage} selected={language} />
-
-          <Fieldset.HTML>
-            {language === 'ko' && <Form.HTML name="htmlKo" options={{ required: true }} />}
-            {language === 'en' && <Form.HTML name="htmlEn" />}
-          </Fieldset.HTML>
-
-          <Fieldset.Image>
-            <label className="mb-3 whitespace-pre-wrap text-sm font-normal tracking-wide text-neutral-500">
-              글 우측 상단에 들어가는 이미지입니다.
-            </label>
-            <Form.Image name="image" />
-          </Fieldset.Image>
-
-          {showAttachments && (
-            <Fieldset.File>
-              <Form.File name="files" />
-            </Fieldset.File>
-          )}
-
-          <Form.Action onCancel={onCancel} onSubmit={onSubmit} />
-        </Form>
-      </FormProvider>
-    </PageLayout>
+    <FormProvider {...formMethods}>
+      <Form>
+        <LanguagePicker onChange={setLanguage} selected={language} />
+
+        <Fieldset.HTML>
+          {language === 'ko' && <Form.HTML name="htmlKo" options={{ required: true }} />}
+          {language === 'en' && <Form.HTML name="htmlEn" />}
+        </Fieldset.HTML>
+
+        <Fieldset.Image>
+          <label className="mb-3 whitespace-pre-wrap text-sm font-normal tracking-wide text-neutral-500">
+            글 우측 상단에 들어가는 이미지입니다.
+          </label>
+          <Form.Image name="image" />
+        </Fieldset.Image>
+
+        {showAttachments && (
+          <Fieldset.File>
+            <Form.File name="files" />
+          </Fieldset.File>
+        )}
+
+        <Form.Action onCancel={onCancel} onSubmit={onSubmit} />
+      </Form>
+    </FormProvider>
   );
 }
-
-const ABOUT_SUBMIT_ACTION = {
-  [overview.segment]: putOverviewAction,
-  [greetings.segment]: putGreetingsAction,
-  [history.segment]: putHistoryAction,
-  [contact.segment]: putContactAction,
-};

app/[locale]/about/contact/edit/page.tsx

@@ -1,10 +1,32 @@
+import { putContactAction } from '@/actions/about';
 import { getContact } from '@/apis/v1/about/contact';
-import { contact } from '@/utils/segmentNode';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import { contact } from '@/constants/segmentNode';
+import { getEditorFile, getEditorImage } from '@/utils/formData';
+import { getPath } from '@/utils/page';
 
-import AboutEditor from '../../components/AboutEditor';
+import AboutEditor, { AboutFormData } from '../../components/AboutEditor';
+
+const path = getPath(contact);
 
 export default async function ContactEditPage() {
   const [koData, enData] = await Promise.all([getContact('ko'), getContact('en')]);
 
-  return <AboutEditor data={{ ko: koData, en: enData }} node={contact} />;
+  const defaultValues: AboutFormData = {
+    htmlKo: koData.description,
+    htmlEn: enData.description,
+    image: getEditorImage(koData.imageURL),
+    files: getEditorFile(koData.attachments),
+  };
+
+  return (
+    <PageLayout title="연락처 편집" titleType="big" hideNavbar>
+      <AboutEditor
+        cancelPath={path}
+        defaultValues={defaultValues}
+        onSubmit={putContactAction}
+        showAttachments
+      />
+    </PageLayout>
+  );
 }

app/[locale]/about/contact/page.tsx

@@ -8,7 +8,7 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 import { Language } from '@/types/language';
 import { getMetadata } from '@/utils/metadata';
 import { getPath } from '@/utils/page';
-import { contact } from '@/utils/segmentNode';
+import { contact } from '@/constants/segmentNode';
 
 interface ContactPageProps {
   params: Promise<{ locale: Language }>;

app/[locale]/about/directions/DirectionsDetails.tsx

@@ -3,7 +3,7 @@ import LoginVisible from '@/components/common/LoginVisible';
 import HTMLViewer from '@/components/form/html/HTMLViewer';
 import { Direction } from '@/types/about';
 import { getPath } from '@/utils/page';
-import { directions } from '@/utils/segmentNode';
+import { directions } from '@/constants/segmentNode';
 import { replaceSpaceWithDash } from '@/utils/string';
 
 const directionsPath = getPath(directions);

app/[locale]/about/directions/LocationGuide.tsx

@@ -2,7 +2,7 @@ import { useTranslations } from 'next-intl';
 
 import { Link } from '@/i18n/routing';
 import { getPath } from '@/utils/page';
-import { staff } from '@/utils/segmentNode';
+import { staff } from '@/constants/segmentNode';
 
 const staffPath = getPath(staff);
 

app/[locale]/about/directions/edit/DirectionEditor.tsx

@@ -14,7 +14,7 @@ import { Direction } from '@/types/about';
 import { Language, WithLanguage } from '@/types/language';
 import { errorToStr } from '@/utils/error';
 import { getPath } from '@/utils/page';
-import { directions } from '@/utils/segmentNode';
+import { directions } from '@/constants/segmentNode';
 import { handleServerAction } from '@/utils/serverActionError';
 import { errorToast, successToast } from '@/utils/toast';
 

app/[locale]/about/directions/page.tsx

@@ -9,7 +9,7 @@ import { Language } from '@/types/language';
 import { findItemBySearchParam } from '@/utils/findSelectedItem';
 import { getMetadata } from '@/utils/metadata';
 import { getPath } from '@/utils/page';
-import { directions } from '@/utils/segmentNode';
+import { directions } from '@/constants/segmentNode';
 
 import DirectionsDetails from './DirectionsDetails';
 import LocationGuide from './LocationGuide';

app/[locale]/about/facilities/FacilitiesList.tsx

@@ -9,7 +9,7 @@ import Distance from '@/public/image/distance.svg';
 import { Facility } from '@/types/about';
 import { errorToStr } from '@/utils/error';
 import { getPath } from '@/utils/page';
-import { facilities } from '@/utils/segmentNode';
+import { facilities } from '@/constants/segmentNode';
 import { handleServerAction } from '@/utils/serverActionError';
 import { errorToast, successToast } from '@/utils/toast';
 

app/[locale]/about/facilities/create/page.tsx

@@ -6,7 +6,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { postFacilityAction, putFacilityAction } from '@/actions/about';
 import Fieldset from '@/components/form/Fieldset';
 import LanguagePicker from '@/components/form/LanguagePicker';
-import { PostEditorImage } from '@/components/form/types';
+import { EditorImage } from '@/components/form/types';
 import Form from '@/components/form/Form';
 import HTMLEditor from '@/components/form/html/HTMLEditor';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
@@ -16,14 +16,14 @@ import { Language, WithLanguage } from '@/types/language';
 import { errorToStr } from '@/utils/error';
 import { contentToFormData } from '@/utils/formData';
 import { getPath } from '@/utils/page';
-import { facilities } from '@/utils/segmentNode';
+import { facilities } from '@/constants/segmentNode';
 import { handleServerAction } from '@/utils/serverActionError';
 import { errorToast, successToast } from '@/utils/toast';
 
 const facilitiesPath = getPath(facilities);
 
 interface FormData extends WithLanguage<Facility> {
-  imageURL: PostEditorImage | null;
+  imageURL: EditorImage | null;
 }
 
 export default function FacilityCreator() {