feat: 소식 탭 검색 결과 구현

.github/workflows/deploy.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - refactor/academics
+      - feat/search
 
 jobs:
   build:

apis/search.ts

@@ -10,7 +10,7 @@ import {
 
 import { getRequest } from './network/server';
 
-type SearchParam = { keyword: string; number: number };
+type SearchParam = { keyword: string; number: number; amount?: number };
 
 export const searchAbout = (params: SearchParam) =>
   getRequest('/about/search/top', params) as Promise<AboutSearchResult>;

app/[locale]/search/AboutRow.tsx

@@ -0,0 +1,55 @@
+import { Link } from '@/navigation';
+
+import RangeBolded from '@/components/common/RangeBolded';
+
+import { AboutPreview } from '@/types/search';
+
+import { getPath } from '@/utils/page';
+import {
+  contact,
+  directions,
+  facilities,
+  futureCareers,
+  greetings,
+  history,
+  overview,
+  studentClubs,
+} from '@/utils/segmentNode';
+
+import OrangeCircle from './OrangeCircle';
+
+export default function AboutRow({ preview }: { preview: AboutPreview }) {
+  const node = postTypeToNode(preview.aboutPostType);
+
+  return (
+    <Link className="group flex flex-col gap-1" href={getPath(node)}>
+      <div className="flex items-center gap-2">
+        <OrangeCircle />
+        <h3 className="text-base font-semibold">{node.name}</h3>
+      </div>
+      <RangeBolded {...preview} />
+      <p className="text-md text-main-orange group-hover:underline">{`소개 > ${node.name}`}</p>
+    </Link>
+  );
+}
+
+const postTypeToNode = (postType: AboutPreview['aboutPostType']) => {
+  switch (postType) {
+    case 'OVERVIEW':
+      return overview;
+    case 'GREETINGS':
+      return greetings;
+    case 'HISTORY':
+      return history;
+    case 'FUTURE_CAREERS':
+      return futureCareers;
+    case 'STUDENT_CLUBS':
+      return studentClubs;
+    case 'FACILITIES':
+      return facilities;
+    case 'CONTACT':
+      return contact;
+    case 'DIRECTIONS':
+      return directions;
+  }
+};

app/[locale]/search/NoticeRow.tsx

@@ -1,33 +1,27 @@
 import { Link } from '@/navigation';
 
+import RangeBolded from '@/components/common/RangeBolded';
+
 import { getPath } from '@/utils/page';
 import { notice } from '@/utils/segmentNode';
 
 interface NoticeRowProps {
   id: number;
   title: string;
-  description: {
-    content: string;
-    boldStartIndex: number;
-    boldEndIndex: number;
-  };
+  partialDescription: string;
+  boldStartIndex: number;
+  boldEndIndex: number;
   dateStr: string;
 }
 
 const noticePath = getPath(notice);
 
-export default function NoticeRow({ id, title, description, dateStr }: NoticeRowProps) {
+export default function NoticeRow({ id, title, dateStr, ...description }: NoticeRowProps) {
   const date = new Date(dateStr);
   return (
     <Link className="flex flex-col gap-[.69rem]" href={`${noticePath}/${id}`}>
       <h3 className=" text-md font-bold leading-none text-neutral-700">{title}</h3>
-      <p className="line-clamp-1 text-xs font-normal text-neutral-700">
-        {description.content.slice(0, description.boldStartIndex)}
-        <span className="font-bold">
-          {description.content.slice(description.boldStartIndex, description.boldEndIndex)}
-        </span>
-        {description.content.slice(description.boldEndIndex)}
-      </p>
+      <RangeBolded {...description} />
       <time className="text-xs font-bold leading-none text-main-orange">
         {date.getFullYear()}/{date.getMonth() + 1}/{date.getDate()}
       </time>

app/[locale]/search/OrangeCircle.tsx

@@ -0,0 +1,3 @@
+export default function OrangeCircle() {
+  return <div className="h-[.625rem] w-[.625rem] rounded-full border border-main-orange" />;
+}

app/[locale]/search/page.tsx

@@ -24,12 +24,16 @@ import PageTitle from '@/components/layout/pageLayout/PageTitle';
 import { getPath } from '@/utils/page';
 import { main, news, notice, seminar } from '@/utils/segmentNode';
 
+import AboutRow from './AboutRow';
+import OrangeCircle from './OrangeCircle';
 import SearchBoxWrapper from './SearchBoxWrapper';
 
 const newsPath = getPath(news);
 const noticePath = getPath(notice);
 const seminarPath = getPath(seminar);
 
+const DESCRIPTION_CHAR_CNT = 200;
+
 export default async function SearchPage({
   searchParams: { keyword },
 }: {
@@ -53,39 +57,38 @@ export default async function SearchPage({
 }
 
 const SearchResult = async ({ keyword }: { keyword: string }) => {
+  // TODO: 단위별 에러 처리(allSettled)
   const [about, notice, news, seminar, member, research, academics, admissions] = await Promise.all(
     [
-      searchAbout({ keyword, number: 5 }),
-      searchNotice({ keyword, number: 5 }),
-      searchNews({ keyword, number: 5 }),
+      searchAbout({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
+      searchNotice({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
+      searchNews({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
       getSeminarPosts({ keyword, pageNum: 1 }),
-      searchMember({ keyword, number: 5 }),
-      searchResearch({ keyword, number: 5 }),
-      searchAcademics({ keyword, number: 5 }),
-      searchAdmissions({ keyword, number: 5 }),
+      searchMember({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
+      searchResearch({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
+      searchAcademics({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
+      searchAdmissions({ keyword, number: 5, amount: DESCRIPTION_CHAR_CNT }),
     ],
   );
 
-  const total = notice.total + news.total + seminar.total;
-
   return (
     <>
       <Section title="소개" size={about.total}>
-        <Tmp>{about.results}</Tmp>
+        <div className="my-4 flex flex-col items-start gap-6">
+          {about.results.map((result) => (
+            <AboutRow key={result.id} preview={result} />
+          ))}
+        </div>
       </Section>
 
-      <Section title="소식" size={total}>
+      <Section title="소식" size={notice.total + news.total + seminar.total}>
         <SubSection title="공지사항" size={notice.total} href={`${noticePath}?keyword=${keyword}`}>
           {notice.results.slice(0, 2).map((notice) => (
             <NoticeRow
+              {...notice}
               key={notice.id}
               id={notice.id}
               title={notice.title}
-              description={{
-                content: notice.partialDescription,
-                boldStartIndex: notice.boldStartIndex,
-                boldEndIndex: notice.boldEndIndex,
-              }}
               dateStr={notice.createdAt}
             />
           ))}
@@ -174,7 +177,7 @@ const SubSection = ({
   return (
     <>
       <div className="mt-7 flex items-center gap-2">
-        <div className="h-[.625rem] w-[.625rem] rounded-full border border-main-orange" />
+        <OrangeCircle />
         <h3 className=" text-base font-bold leading-loose text-neutral-700">
           {t(title)}({size})
         </h3>

components/common/RangeBolded.tsx

@@ -0,0 +1,17 @@
+export default function RangeBolded({
+  partialDescription,
+  boldStartIndex,
+  boldEndIndex,
+}: {
+  partialDescription: string;
+  boldStartIndex: number;
+  boldEndIndex: number;
+}) {
+  return (
+    <p className="line-clamp-1 text-md font-normal text-neutral-700">
+      {partialDescription.slice(0, boldStartIndex)}
+      <span className="font-bold">{partialDescription.slice(boldStartIndex, boldEndIndex)}</span>
+      {partialDescription.slice(boldEndIndex)}
+    </p>
+  );
+}

types/search.ts

@@ -2,22 +2,24 @@
 
 export type AboutSearchResult = {
   total: number;
-  results: {
-    id: 0;
-    name: string;
-    aboutPostType:
-      | 'OVERVIEW'
-      | 'GREETINGS'
-      | 'HISTORY'
-      | 'FUTURE_CAREERS'
-      | 'CONTACT'
-      | 'STUDENT_CLUBS'
-      | 'FACILITIES'
-      | 'DIRECTIONS';
-    partialDescription: string;
-    boldStartIndex: number;
-    boldEndIndex: number;
-  }[];
+  results: AboutPreview[];
+};
+
+export type AboutPreview = {
+  id: 0;
+  name: string;
+  aboutPostType:
+    | 'OVERVIEW'
+    | 'GREETINGS'
+    | 'HISTORY'
+    | 'FUTURE_CAREERS'
+    | 'CONTACT'
+    | 'STUDENT_CLUBS'
+    | 'FACILITIES'
+    | 'DIRECTIONS';
+  partialDescription: string;
+  boldStartIndex: number;
+  boldEndIndex: number;
 };
 
 // 소식 탭