✨ add search-groups-with-name api connection

.env

@@ -3,4 +3,4 @@ NEXT_PUBLIC_IDP_BASE_URL=https://idp.gistory.me/
 NEXT_PUBLIC_IDP_CLIENT_ID=ziggle2023
 NEXT_PUBLIC_IDP_REDIRECT_URI=http://localhost:3000/api/login
 NEXTAUTH_URL=http://localhost:3000
-NEXT_VAPOR_API_URL=https://api.stg.groups.gistory.me/
+NEXT_PUBLIC_GROUPS_API_URL=https://stg.groups.gistory.me/

src/api/group/search-groups-with-name.ts

@@ -0,0 +1,16 @@
+import { Locale } from '@/app/i18next/settings';
+
+import { ziggleApi } from '..';
+
+export interface GroupInfo {
+  uuid: string;
+  name: string;
+  verified: boolean;
+  profileImageUrl: string | null;
+}
+
+export const searchGroupWithName = async (groupName: string, lang: Locale) => {
+  return await ziggleApi
+    .get<{ list: GroupInfo[] }>(`/group/search?query=${encodeURIComponent(groupName)}&lang=${lang}`)
+    .then(({ data: { list } }) => list);
+};

src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx

@@ -1,12 +1,19 @@
+import Image from 'next/image';
+import Link from 'next/link';
 import { ComponentProps, Suspense } from 'react';
 
+import { searchGroupWithName } from '@/api/group/search-groups-with-name';
 import LogEvents from '@/api/log/log-events';
 import { getAllNotices } from '@/api/notice/notice-server';
 import Analytics from '@/app/components/shared/Analytics';
 import LoadingCatAnimation from '@/app/components/shared/LoadingCatAnimation';
 import Pagination from '@/app/components/shared/Pagination';
+import HighlightedText from '@/app/components/shared/Zabo/HighlightedText';
 import ResultZabo from '@/app/components/shared/Zabo/ResultZabo/ResultZabo';
 import { createTranslation, PropsWithLng } from '@/app/i18next';
+import RightArrowIcon from '@/assets/icons/arrow-right.svg';
+import VerifiedBadge from '@/assets/icons/badge-check.svg';
+import DefaultProfile from '@/assets/icons/default-profile.svg';
 import SearchNoResult from '@/assets/icons/search-no-result.svg';
 
 const Results = async ({
@@ -17,33 +24,77 @@ const Results = async ({
 }: ComponentProps<typeof SearchResults>) => {
   const pageAsNumber = Number.parseInt(page as string);
   const { t } = await createTranslation(lng);
-  const data = await getAllNotices({
+  const notices = await getAllNotices({
     ...props,
     lang: lng,
     offset: pageAsNumber * props.limit,
   }).catch(() => ({ list: [], total: 0 }));
 
+  const groups = props.search
+    ? await searchGroupWithName(props.search, lng).catch(() => [])
+    : [];
+
   return (
     <>
-      {data?.list.length !== 0 && (
-        <div className="flex flex-col flex-nowrap gap-[10px]">
-          <div className="h-8" />
-
-          {data.list.map((notice) => (
-            <Analytics
-              event={LogEvents.noticeClick}
-              properties={{
-                type: 'searchResult',
-                id: notice.id,
-              }}
-              key={notice.id}
+      <div className="flex flex-col flex-nowrap gap-[10px]">
+        <div className="h-8" />
+        {groups.length !== 0 &&
+          groups.map(({ uuid, name, verified, profileImageUrl }) => (
+            <Link
+              key={uuid}
+              className="min-w-fit"
+              href={`${process.env.NEXT_PUBLIC_GROUPS_API_URL}detail/${uuid}?tab=notice`}
             >
-              <ResultZabo {...notice} searchQuery={props.search} lng={lng} />
-            </Analytics>
+              <div className="flex w-full flex-col gap-2 overflow-hidden rounded-2xl bg-greyLight p-4 text-text dark:bg-dark_greyDark md:rounded-lg md:p-5">
+                <div className="flex items-center justify-between gap-4 md:justify-start">
+                  <div className="flex items-center justify-center gap-2">
+                    {profileImageUrl ? (
+                      <Image
+                        src={profileImageUrl}
+                        alt={`group ${name} profile image`}
+                        className="aspect-square md:h-24 md:w-24"
+                      />
+                    ) : (
+                      <DefaultProfile className="aspect-square h-14 w-14 md:h-24 md:w-24" />
+                    )}
+                  </div>
+                  <div className="w-full">
+                    <div className="text-sm font-normal text-greyDark dark:text-dark_greyDark">
+                      {t('zabo.group.group')}
+                    </div>
+                    <div className="flex items-center gap-1 break-words text-2xl font-semibold text-text">
+                      <HighlightedText query={props.search ?? ''}>
+                        {name}
+                      </HighlightedText>
+                      {verified && (
+                        <>
+                          <VerifiedBadge className="peer aspect-square h-6 w-6" />
+                          <div className="hidden text-sm font-normal text-greyDark opacity-0 transition-opacity peer-hover:opacity-100 dark:text-dark_greyDark md:flex">
+                            {t('zabo.group.verifiedDescription')}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                  <RightArrowIcon className="w-6 fill-none stroke-grey dark:stroke-dark_grey md:w-9" />
+                </div>
+              </div>
+            </Link>
           ))}
-        </div>
-      )}
-      {props.search && data.list.length === 0 && (
+        {notices.list.map((notice) => (
+          <Analytics
+            event={LogEvents.noticeClick}
+            properties={{
+              type: 'searchResult',
+              id: notice.id,
+            }}
+            key={notice.id}
+          >
+            <ResultZabo {...notice} searchQuery={props.search} lng={lng} />
+          </Analytics>
+        ))}
+      </div>
+      {props.search && notices.list.length === 0 && (
         <div className="flex w-full justify-center">
           <div className="align-center flex flex-col justify-center">
             <div className="h-[100px]" />

src/app/i18next/locales/en/translation.json

@@ -156,6 +156,10 @@
       "alreadyWroteEnglishNotice": "You've already written an English notice!",
       "writeAdditionalNotice": "Write Additional Notice",
       "writeAdditionalNoticeDescription": "Create an additional notice when you need to make a correction to an existing notice, or when you want to change a deadline."
+    }, 
+    "group": {
+      "group": "Group", 
+      "verifiedDescription": "Official account verified by ziggle team"
     }
   },
   "emptyNotices": "No content. =ㅅ=",

src/app/i18next/locales/ko/translation.json

@@ -148,6 +148,11 @@
       "alreadyWroteEnglishNotice": "영어 공지를 작성하셨습니다!",
       "writeAdditionalNotice": "추가 공지 작성하기",
       "writeAdditionalNoticeDescription": "기존 공지사항에서 정정해야 할 부분이 있거나, 마감 시간을 변경하고 싶을 때 추가 공지를 작성해보세요."
+    }, 
+
+    "group": {
+      "group": "그룹", 
+      "verifiedDescription": "지글팀이 확인한 공식 계정"
     }
   },
   "emptyNotices": "글이 없습니다. =ㅅ=",