✨ 학생회 소개 페이지 구현 (#309)

Author: lchanss

actions/council.ts

@@ -0,0 +1,19 @@
+'use server';
+
+import { revalidateTag } from 'next/cache';
+
+import { putCouncilIntro } from '@/apis/v2/council/intro';
+import { FETCH_TAG_INTRO } from '@/constants/network';
+import { councilIntro } from '@/constants/segmentNode';
+import { redirectKo } from '@/i18n/routing';
+import { getPath } from '@/utils/page';
+
+import { withErrorHandler } from './errorHandler';
+
+const introPath = getPath(councilIntro);
+
+export const putIntroAction = withErrorHandler(async (formData: FormData) => {
+  await putCouncilIntro(formData);
+  revalidateTag(FETCH_TAG_INTRO);
+  redirectKo(introPath);
+});

apis/v2/council/intro.ts

@@ -0,0 +1,11 @@
+import { putRequest } from '@/apis';
+import { getRequest } from '@/apis';
+import { FETCH_TAG_INTRO } from '@/constants/network';
+
+export const getCouncilIntro = () =>
+  getRequest<{ description: string; imageURL: string }>('/v2/council/intro', undefined, {
+    next: { tags: [FETCH_TAG_INTRO] },
+  });
+
+export const putCouncilIntro = (formData: FormData) =>
+  putRequest('/v2/council/intro', { body: formData, jsessionID: true });

app/[locale]/community/council/intro/edit/IntroEditor.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { FormProvider, useForm } from 'react-hook-form';
+
+import Fieldset from '@/components/form/Fieldset';
+import Form from '@/components/form/Form';
+import { useRouter } from '@/i18n/routing';
+import { EditorImage } from '@/types/form';
+import { contentToFormData } from '@/utils/formData';
+import { handleServerResponse } from '@/utils/serverActionError';
+
+export interface IntroFormData {
+  description: string;
+  image: EditorImage;
+}
+
+interface Props {
+  cancelPath: string;
+  defaultValues: IntroFormData;
+  onSubmit: (formData: FormData) => Promise<unknown>;
+}
+
+export default function IntroEditor({ cancelPath, defaultValues, onSubmit: _onSubmit }: Props) {
+  const router = useRouter();
+  const formMethods = useForm<IntroFormData>({ defaultValues });
+  const { handleSubmit } = formMethods;
+
+  const onCancel = () => router.push(cancelPath);
+
+  const onSubmit = handleSubmit(async ({ description, image }) => {
+    const requestObject = {
+      description,
+      sequence: 0,
+      name: 'name',
+      removeImage: defaultValues.image !== null && image === null,
+    };
+
+    const formData = contentToFormData('EDIT', { requestObject, image });
+    const resp = await _onSubmit(formData);
+    handleServerResponse(resp, { successMessage: '수정 완료되었습니다.' });
+  });
+
+  return (
+    <FormProvider {...formMethods}>
+      <Form>
+        <Fieldset.HTML>
+          <Form.HTML name="description" options={{ required: true }} />
+        </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>
+
+        <Form.Action onCancel={onCancel} onSubmit={onSubmit} />
+      </Form>
+    </FormProvider>
+  );
+}

app/[locale]/community/council/intro/edit/page.tsx

@@ -0,0 +1,25 @@
+import { putIntroAction } from '@/actions/council';
+import { getCouncilIntro } from '@/apis/v2/council/intro';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import { councilIntro } from '@/constants/segmentNode';
+import { getEditorImage } from '@/utils/formData';
+import { getPath } from '@/utils/page';
+
+import IntroEditor, { IntroFormData } from './IntroEditor';
+
+const path = getPath(councilIntro);
+
+export default async function IntroEditPage() {
+  const data = await getCouncilIntro();
+
+  const defaultValues: IntroFormData = {
+    description: data.description,
+    image: getEditorImage(data.imageURL),
+  };
+
+  return (
+    <PageLayout title="학생회 소개 편집" titleType="big" hideNavbar>
+      <IntroEditor cancelPath={path} defaultValues={defaultValues} onSubmit={putIntroAction} />
+    </PageLayout>
+  );
+}

app/[locale]/community/council/intro/page.tsx

@@ -0,0 +1,55 @@
+export const dynamic = 'force-dynamic';
+
+import { getCouncilIntro } from '@/apis/v2/council/intro';
+import { EditButton } from '@/components/common/Buttons';
+import Image from '@/components/common/Image';
+import LoginVisible from '@/components/common/LoginVisible';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import { councilIntro } from '@/constants/segmentNode';
+import { Language } from '@/types/language';
+import { getMetadata } from '@/utils/metadata';
+import { getPath } from '@/utils/page';
+
+export async function generateMetadata(props: { params: Promise<{ locale: Language }> }) {
+  const params = await props.params;
+
+  const { locale } = params;
+
+  const { imageURL } = await getCouncilIntro();
+
+  return await getMetadata({
+    locale,
+    node: councilIntro,
+    metadata: { openGraph: { images: imageURL ? [imageURL] : undefined } },
+  });
+}
+
+const councilPath = getPath(councilIntro);
+
+export default async function CouncilIntroPage() {
+  const { description, imageURL } = await getCouncilIntro();
+
+  return (
+    <PageLayout titleType="big" removePadding>
+      <div className="bg-neutral-100 px-5 pb-12 pt-7 sm:py-11 sm:pl-[6.25rem] sm:pr-[22.5rem]">
+        <LoginVisible staff>
+          <div className="mb-8 text-right">
+            <EditButton href={`${councilPath}/edit`} />
+          </div>
+        </LoginVisible>
+        <HTMLViewer htmlContent={description} />
+      </div>
+      <div className="px-5 pb-16 pt-10 sm:pl-[6.25rem] sm:pr-[22.5rem]">
+        <h2 className="mb-6 text-base font-semibold">조직도</h2>
+        <Image
+          src={imageURL}
+          alt="학생회_구성도"
+          width={580}
+          height={435}
+          className="w-full object-contain sm:w-[580px]"
+        />
+      </div>
+    </PageLayout>
+  );
+}

constants/network.ts

@@ -49,3 +49,5 @@ export const FETCH_TAG_EXCHANGE = 'exchange-visiting';
 export const FETCH_TAG_INTERNATIONAL_SCHOLARSHIPS = 'international-scholarships';
 export const FETCH_TAG_INTERNATIONAL_GRADUATE = 'international-graduate';
 export const FETCH_TAG_INTERNATIONAL_UNDERGRADUATE = 'international-undergraduate';
+
+export const FETCH_TAG_INTRO = 'intro';

constants/segmentNode.ts

@@ -126,6 +126,22 @@ export const facultyRecruitment: SegmentNode = {
   children: [],
 };
 
+export const council: SegmentNode = {
+  name: '학생회',
+  segment: 'council',
+  isPage: true,
+  parent: community,
+  children: [],
+};
+
+export const councilIntro: SegmentNode = {
+  name: '학생회 소개',
+  segment: 'intro',
+  isPage: true,
+  parent: council,
+  children: [],
+};
+
 export const people: SegmentNode = {
   name: '구성원',
   segment: 'people',
@@ -577,7 +593,8 @@ about.children = [
   contact,
   directions,
 ];
-community.children = [notice, news, seminar, facultyRecruitment];
+community.children = [notice, news, seminar, facultyRecruitment, council];
+council.children = [councilIntro];
 people.children = [faculty, emeritusFaculty, staff];
 research.children = [researchGroups, researchCenters, researchLabs, topConferenceList];
 admissions.children = [undergraduateAdmission, graduateAdmission, internationalAdmission];

messages/en.json

@@ -27,6 +27,8 @@
     "새 소식": "News",
     "세미나": "Seminars",
     "신임교수초빙": "Faculty Recruitment",
+    "학생회": "Student Council",
+    "학생회 소개": "Student Council Introduction",
 
     "교수진": "Faculty",
     "역대 교수진": "Emeritus Faculty",

messages/ko.json

@@ -27,6 +27,8 @@
     "새 소식": "새 소식",
     "세미나": "세미나",
     "신임교수초빙": "신임교수초빙",
+    "학생회": "학생회",
+    "학생회 소개": "학생회 소개",
 
     "교수진": "교수진",
     "역대 교수진": "역대 교수진",