✨ 활동 보고 뷰어 구현 (#314)

Author: yeolyi

apis/types/council.ts

@@ -0,0 +1,12 @@
+export interface CouncilReport {
+  id: number;
+  title: string;
+  description: string;
+  sequence: number;
+  name: string;
+  createdAt: string;
+  prevId: number;
+  prevTitle: string;
+  nextId: number;
+  nextTitle: string;
+}

apis/v2/council/report/[id].ts

@@ -1,26 +1,14 @@
 import { deleteRequest, getRequest, putRequest } from '@/apis';
+import { CouncilReport } from '@/apis/types/council';
 import { FETCH_TAG_COUNCIL_REPORT } from '@/constants/network';
 
-interface GETReportByIDResponse {
-  id: number;
-  title: string;
-  description: string;
-  sequence: number;
-  name: string;
-  createdAt: string;
-  prevId: number;
-  prevTitle: string;
-  nextId: number;
-  nextTitle: string;
-}
-
 export const getCouncilReport = (id: number) =>
-  getRequest<GETReportByIDResponse>(`/v2/council/report/${id}`, undefined, {
+  getRequest<CouncilReport>(`/v2/council/report/${id}`, undefined, {
     next: { tags: [FETCH_TAG_COUNCIL_REPORT] },
   });
 
 export const putCouncilReport = (id: number, formData: FormData) =>
-  putRequest<GETReportByIDResponse>(`/v2/council/report/${id}`, {
+  putRequest<CouncilReport>(`/v2/council/report/${id}`, {
     body: formData,
     jsessionID: true,
   });

app/[locale]/community/components/PostFooter.tsx

@@ -1,5 +1,6 @@
 import { useTranslations } from 'next-intl';
 
+import { CouncilReport } from '@/apis/types/council';
 import { News } from '@/apis/types/news';
 import { Notice } from '@/apis/types/notice';
 import { Seminar } from '@/apis/types/seminar';
@@ -11,7 +12,7 @@ import PostDeleteButton from './PostDeleteButton';
 
 type PostFooterProps = {
   postType: PostType;
-  post: Notice | News | Seminar;
+  post: Notice | News | Seminar | CouncilReport;
   id?: string;
   margin?: string;
 };
@@ -21,7 +22,7 @@ type AdjPost = {
   title: string;
 };
 
-type PostType = 'notice' | 'seminar' | 'news';
+type PostType = 'notice' | 'seminar' | 'news' | 'council/report';
 type RowType = 'next' | 'prev';
 
 export default function PostFooter({ post, margin = '', postType, id }: PostFooterProps) {

app/[locale]/community/council/report/[id]/page.tsx

@@ -1,5 +1,77 @@
+import 'dayjs/locale/ko';
+
+import dayjs from 'dayjs';
+import { getTranslations } from 'next-intl/server';
+
+import { CouncilReport } from '@/apis/types/council';
+import PostFooter from '@/app/[locale]/community/components/PostFooter';
+import { StraightNode } from '@/components/common/Nodes';
+import HTMLViewer from '@/components/form/html/HTMLViewer';
+import { PAGE_PADDING_BOTTOM_TAILWIND } from '@/components/layout/pageLayout/paddings';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import { councilReportList } from '@/constants/segmentNode';
+import { getMetadata } from '@/utils/metadata';
+
+const council: CouncilReport = {
+  id: 2,
+  title: 'title',
+  description: 'description',
+  sequence: 1,
+  name: 'name',
+  createdAt: '2022-01-01T00:00:00.000Z',
+  prevId: 1,
+  prevTitle: 'prevTitle',
+  nextId: 3,
+  nextTitle: 'nextTitle',
+};
+
+interface Props {
+  params: Promise<{ id: number; locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props) {
+  const { locale } = await params;
+  // const { title } = await getCouncilReport(id);
+  const { title } = council;
+
+  return await getMetadata({
+    locale,
+    node: councilReportList,
+    metadata: { title },
+  });
+}
+
+export default async function CouncilReportPage({ params }: Props) {
+  const { id, locale } = await params;
+  const t = await getTranslations({ locale });
+
+  // const council = await getCouncilReport(id);
+
+  const { title, description, sequence, name, createdAt } = council;
+  const author = `제${sequence}대 학생회 ${name}`;
+  const dateStr = dayjs(createdAt).locale('ko').format('YYYY/MM/DD (ddd) A h:mm');
+
+  return (
+    <PageLayout titleType="big" removePadding>
+      <div className="flex flex-col gap-4 px-5 py-9 sm:pl-[100px] sm:pr-[340px]">
+        <h2 className="text-[1.25rem] font-semibold leading-[1.4]">{title}</h2>
+        <div className="flex gap-5 text-sm font-normal tracking-wide text-neutral-500">
+          <p>
+            {t('작성자')}: {author}
+          </p>
+          <p>
+            {t('작성 날짜')}: {dateStr}
+          </p>
+        </div>
+      </div>
 
-export default function CouncilReport({ params: { id } }: { params: { id: number } }) {
-  return <PageLayout titleType="big">CouncilReport {id}</PageLayout>;
+      <div
+        className={`bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px] ${PAGE_PADDING_BOTTOM_TAILWIND}`}
+      >
+        <HTMLViewer htmlContent={description} wrapperClassName="mb-10" />
+        <StraightNode />
+        <PostFooter post={council} postType="council/report" id={id.toString()} margin="mt-12" />
+      </div>
+    </PageLayout>
+  );
 }

lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   'src/**/*.{js,ts,jsx,tsx}': ['eslint --fix', 'prettier --write'],
   '!(src/**/*.{js,ts,jsx,tsx})': 'prettier --ignore-unknown --write',
-  '**/*.ts?(x)': () => 'tsc --noEmit',
+  '**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit',
 };