♻️ Form 구조를 useState에서 react-hook-form 기반으로 수정 (#282)

actions/about.ts

@@ -9,13 +9,12 @@ import { deleteFacility, putFacility } from '@/apis/v2/about/facilities/[id]';
 import { putFutureCareers } from '@/apis/v2/about/future-careers';
 import { postCareerCompany } from '@/apis/v2/about/future-careers/company';
 import { deleteCareerCompany, putCareerCompany } from '@/apis/v2/about/future-careers/company/[id]';
-import { postCareerStat, putCareerStat } from '@/apis/v2/about/future-careers/stats';
+import { CareerStat, postCareerStat, putCareerStat } from '@/apis/v2/about/future-careers/stats';
 import { putGreetings } from '@/apis/v2/about/greetings';
 import { putHistory } from '@/apis/v2/about/history';
 import { putOverview } from '@/apis/v2/about/overview';
 import { postClub, putClub } from '@/apis/v2/about/student-clubs';
 import { deleteClub } from '@/apis/v2/about/student-clubs/[id]';
-import { CareerStatEditorContent } from '@/components/editor/CareerStatEditor';
 import {
   FETCH_TAG_CAREER,
   FETCH_TAG_CLUB,
@@ -84,13 +83,13 @@ export const putCareerDescriptionAction = withErrorHandler(
   },
 );
 
-export const postCareerStatAction = withErrorHandler(async (data: CareerStatEditorContent) => {
+export const postCareerStatAction = withErrorHandler(async (data: CareerStat) => {
   await postCareerStat(data);
   revalidateTag(FETCH_TAG_CAREER);
   redirectKo(careerPath);
 });
 
-export const putCareerStatAction = withErrorHandler(async (data: CareerStatEditorContent) => {
+export const putCareerStatAction = withErrorHandler(async (data: CareerStat) => {
   await putCareerStat(data);
   revalidateTag(FETCH_TAG_CAREER);
   redirectKo(careerPath);

actions/academics.ts

@@ -2,13 +2,8 @@
 
 import { revalidateTag } from 'next/cache';
 
-import { postCourseChanges } from '@/apis/v1/academics/[type]/course-changes';
-import {
-  deleteCourseChanges,
-  putCourseChanges,
-} from '@/apis/v1/academics/[type]/course-changes/[year]';
-import { putAcademicsGuide } from '@/apis/v1/academics/[type]/guide';
-import { postCurriculum } from '@/apis/v1/academics/undergraduate/curriculum';
+import { deleteCourseChanges } from '@/apis/v1/academics/[studentType]/course-changes/[year]';
+import { putAcademicsGuide } from '@/apis/v1/academics/[studentType]/guide';
 import {
   deleteCurriculum,
   putCurriculum,
@@ -36,7 +31,6 @@ import {
 import { redirect } from '@/i18n/routing';
 import {
   Course,
-  CourseChange,
   Curriculum,
   GeneralStudiesRequirement,
   Scholarship,
@@ -74,11 +68,6 @@ export const deleteCourseAction = withErrorHandler(async (code: string) => {
 
 /** 전공 이수 표준 형태 */
 
-export const postCurriculumAction = withErrorHandler(async (data: Curriculum) => {
-  await postCurriculum(data);
-  revalidateTag(FETCH_TAG_CURRICULUM);
-});
-
 export const putCurriculumAction = withErrorHandler(async (data: Curriculum) => {
   await putCurriculum(data);
   revalidateTag(FETCH_TAG_CURRICULUM);
@@ -118,20 +107,6 @@ export const putDegreeRequirementsAction = withErrorHandler(async (formData: For
 
 /** 교과목 변경 내역 */
 
-export const postCourseChangesAction = withErrorHandler(
-  async (type: StudentType, data: CourseChange) => {
-    await postCourseChanges(type, data);
-    revalidateTag(FETCH_TAG_COURSE_CHANGES);
-  },
-);
-
-export const putCourseChangesAction = withErrorHandler(
-  async (type: StudentType, data: CourseChange) => {
-    await putCourseChanges(type, data);
-    revalidateTag(FETCH_TAG_COURSE_CHANGES);
-  },
-);
-
 export const deleteCourseChangesAction = withErrorHandler(
   async (type: StudentType, year: number) => {
     await deleteCourseChanges(type, year);

apis/index.ts

@@ -1,11 +1,10 @@
 import { cookies } from 'next/headers';
 
+import { BASE_URL } from '@/constants/network';
 import { objToQueryString } from '@/utils/convertParams';
 
 type CredentialRequestInit = RequestInit & { jsessionID?: boolean };
 
-export const BASE_URL = process.env.BASE_URL;
-
 export const getRequest = async <T = unknown>(
   url: string,
   params: object = {},

apis/v1/academics/[studentType]/[postType].ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { getRequest, postRequest, putRequest } from '@/apis';
+import { Attachment } from '@/components/common/Attachments';
+import { StudentType } from '@/types/academics';
+
+export interface AcademicsByPostType {
+  year: number;
+  description: string;
+  attachments: Attachment[];
+}
+
+export type PostType = 'course-changes' | 'curriculum' | 'general-studies-requirements';
+
+export const getAcademicsByPostType = (studentType: StudentType, postType: PostType) =>
+  getRequest<AcademicsByPostType>(`/v1/academics/${studentType}/${postType}`);
+
+export const postAcademicsByPostType = (
+  studentType: StudentType,
+  postType: PostType,
+  body: FormData,
+) => postRequest(`/v1/academics/${studentType}/${postType}`, { body, jsessionID: true });
+
+export const putAcademicsByPostType = (
+  studentType: StudentType,
+  postType: PostType,
+  body: FormData,
+) => putRequest(`/v1/academics/${studentType}/${postType}`, { body, jsessionID: true });

apis/v1/academics/[studentType]/course-changes/[year].ts

@@ -0,0 +1,10 @@
+import { deleteRequest, putRequest } from '@/apis';
+import { StudentType } from '@/types/academics';
+
+export const putCourseChanges = (type: StudentType, year: number, body: FormData) =>
+  putRequest(`/v1/academics/${type}/course-changes/${year}`, { body, jsessionID: true });
+
+export const deleteCourseChanges = async (type: StudentType, year: number) =>
+  deleteRequest(`/v1/academics/${type}/course-changes/${year}`, {
+    jsessionID: true,
+  });

apis/v1/academics/[type]/course-changes/index.ts → apis/v1/academics/[studentType]/course-changes/index.ts

@@ -1,13 +1,14 @@
 import { getRequest, postRequest } from '@/apis';
+import { AcademicsCommon } from '@/apis/v1/academics/types';
 import { FETCH_TAG_COURSE_CHANGES } from '@/constants/network';
-import { CourseChange, StudentType } from '@/types/academics';
+import { StudentType } from '@/types/academics';
 
 export const getCourseChanges = (type: StudentType) =>
-  getRequest<CourseChange[]>(`/v1/academics/${type}/course-changes`, undefined, {
+  getRequest<AcademicsCommon[]>(`/v1/academics/${type}/course-changes`, undefined, {
     next: { tags: [FETCH_TAG_COURSE_CHANGES] },
   });
 
-export const postCourseChanges = (type: StudentType, data: CourseChange) =>
+export const postCourseChanges = (type: StudentType, data: AcademicsCommon) =>
   postRequest(`/v1/academics/${type}/course-changes`, {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ ...data, name: '교과목 변경 내역' }),

apis/v1/academics/types.ts

@@ -0,0 +1,7 @@
+import { Attachment } from '@/components/common/Attachments';
+
+export interface AcademicsCommon {
+  year: number;
+  description: string;
+  attachments: Attachment[];
+}

apis/v2/about/future-careers/stats.ts

@@ -1,14 +1,19 @@
 import { postRequest, putRequest } from '@/apis';
-import { CareerStatEditorContent } from '@/components/editor/CareerStatEditor';
+import { Stat } from './types';
 
-export const postCareerStat = (data: CareerStatEditorContent) =>
+export interface CareerStat {
+  year: number;
+  statList: Stat[];
+}
+
+export const postCareerStat = (data: CareerStat) =>
   postRequest('/v2/about/future-careers/stats', {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data),
     jsessionID: true,
   });
 
-export const putCareerStat = (data: CareerStatEditorContent) =>
+export const putCareerStat = (data: CareerStat) =>
   putRequest('/v2/about/future-careers/stats', {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data),

apis/v2/about/future-careers/types.ts

@@ -0,0 +1,15 @@
+export const companyList = ['SAMSUNG', 'LG', 'LARGE', 'SMALL', 'GRADUATE', 'OTHER'] as const;
+export type Company = (typeof companyList)[number];
+export const degreeList = ['bachelor', 'master', 'doctor'] as const;
+export type Degree = (typeof degreeList)[number];
+
+export type Stat = { career: Company } & { [key in Degree]: number };
+
+export const COMPANY_MAP = {
+  SAMSUNG: '삼성',
+  LG: 'LG',
+  LARGE: '기타 대기업',
+  SMALL: '중소기업',
+  GRADUATE: '진학',
+  OTHER: '기타',
+} as const;

app/.internal/components/EditButton.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { GrayButton } from '@/components/common/Buttons';
+import { useRouter } from '@/i18n/routing';
+
+export default function EditButton() {
+  const router = useRouter();
+  return <GrayButton title="편집" onClick={() => router.push('/.internal/edit')} />;
+}

app/.internal/components/InternalEditor.tsx

@@ -0,0 +1,49 @@
+'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 { errorToStr } from '@/utils/error';
+import { handleServerAction } from '@/utils/serverActionError';
+import { errorToast } from '@/utils/toast';
+
+interface FormData {
+  description: string;
+}
+
+export default function InternalEditor({
+  description,
+  onSubmit: _onSubmit,
+}: {
+  description: string;
+  onSubmit: (description: string) => Promise<void>;
+}) {
+  const formMethods = useForm<FormData>({ defaultValues: { description } });
+  const { handleSubmit } = formMethods;
+
+  const router = useRouter();
+  const onCancel = () => router.push('.internal');
+
+  const onSubmit = async ({ description }: FormData) => {
+    try {
+      handleServerAction(await _onSubmit(description));
+    } catch (e) {
+      errorToast(errorToStr(e));
+    }
+  };
+
+  return (
+    <FormProvider {...formMethods}>
+      <div className="m-10 min-w-[720px]">
+        <Form>
+          <Fieldset.HTML>
+            <Form.HTML name="description" />
+          </Fieldset.HTML>
+          <Form.Action onCancel={onCancel} onSubmit={handleSubmit(onSubmit)} />
+        </Form>
+      </div>
+    </FormProvider>
+  );
+}

app/.internal/edit/page.tsx

@@ -0,0 +1,19 @@
+import { revalidateTag } from 'next/cache';
+
+import { getInternal, putInternal } from '@/apis/v1/internal';
+import InternalEditor from '@/app/.internal/components/InternalEditor';
+import { FETCH_TAG_INTERNAL } from '@/constants/network';
+import { redirectKo } from '@/i18n/routing';
+
+export default async function InternalPage() {
+  const { description } = await getInternal();
+
+  const onSubmit = async (description: string) => {
+    'use server';
+    await putInternal(description);
+    revalidateTag(FETCH_TAG_INTERNAL);
+    redirectKo('/.internal');
+  };
+
+  return <InternalEditor description={description} onSubmit={onSubmit} />;
+}

app/.internal/page.tsx

@@ -1,13 +1,17 @@
 import { getInternal } from '@/apis/v1/internal';
-
-import InternalContent from './InternalContent';
+import EditButton from '@/app/.internal/components/EditButton';
+import LoginVisible from '@/components/common/LoginVisible';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
 
 export default async function InternalPage() {
   const { description } = await getInternal();
 
   return (
     <div className="m-10 min-w-[720px]">
-      <InternalContent description={description} />
+      <LoginVisible staff>
+        <EditButton />
+      </LoginVisible>
+      <HTMLViewer htmlContent={description} />
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import HTMLViewer from '@/components/editor/HTMLViewer';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 import { getPath } from '@/utils/page';
 import { greetings } from '@/utils/segmentNode';

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

@@ -1,4 +1,4 @@
-import HTMLViewer from '@/components/editor/HTMLViewer';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 export default async function TenTenParticipants() {

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

@@ -1,4 +1,4 @@
-import HTMLViewer from '@/components/editor/HTMLViewer';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 export default async function TenTenProposal() {