Merge pull request #354 from gsainfoteam/353-feature-connect-group-apis

353 feature connect group apis

.env

@@ -2,4 +2,5 @@ NEXT_PUBLIC_API_BASE_URL=https://api.stg.ziggle.gistory.me/
 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
+NEXTAUTH_URL=http://localhost:3000
+NEXT_VAPOR_API_URL=https://api.stg.groups.gistory.me/

.vscode/settings.json

@@ -16,5 +16,6 @@
   "cSpell.words": [
     "Zabo",
     "Ziggle"
-  ]
+  ],
+  "svg.preview.background": "custom"
 }

src/api/group/group.ts

@@ -1,18 +1,38 @@
+import dayjs from 'dayjs';
+
 import { vaporApi } from '..';
 
-export interface groupInfo {
+export interface GroupInfo {
+  uuid: string;
   name: string;
   description: string;
-  createdAt: Date;
-  leaderName: string;
-  memberCount: number;
-  isAdmin: boolean;
+  createdAt: dayjs.Dayjs | string;
+  presidentUuid: string;
+  president: {
+    uuid: string;
+    name: string;
+    email: string;
+    createdAt: dayjs.Dayjs | string;
+  };
+  count: number;
+}
+
+export interface InviteCode {
+  code: string;
 }
 
-export const getGroupContainMe = async (
-  query: 'all' | 'included',
-): Promise<groupInfo[]> => {
+export const getGroupContainingMe = async (): Promise<GroupInfo[]> => {
+  return vaporApi
+    .get<{ list: GroupInfo[] }>('/group')
+    .then(({ data }) => data.list);
+};
+
+export const getGroup = async (uuid: string): Promise<GroupInfo> => {
+  return vaporApi.get<GroupInfo>(`/group/${uuid}`).then(({ data }) => data);
+};
+
+export const generateInviteCode = async (uuid: string): Promise<InviteCode> => {
   return vaporApi
-    .get('/group', { params: { type: query } })
+    .get<InviteCode>(`/group/${uuid}/invite`)
     .then(({ data }) => data);
 };

src/api/index.ts

@@ -18,7 +18,7 @@ ziggleApi.interceptors.request.use(async (config) => {
 vaporApi.interceptors.request.use(async (config) => {
   if (typeof window !== 'undefined') return config;
 
-  config.baseURL = process.env.VAPOR_URL!;
+  config.baseURL = process.env.NEXT_VAPOR_API_URL!;
   const session = await auth();
   if (!session) return config;
   config.headers.Authorization = `Bearer ${session.accessToken}`;

src/app/[lng]/(group)/group/GroupItem.tsx

@@ -0,0 +1,49 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { GroupInfo } from '@/api/group/group';
+import { createTranslation, PropsWithLng } from '@/app/i18next';
+import ArrowRight from '@/assets/icons/arrow-right.svg';
+import Crown from '@/assets/icons/crown.svg';
+import GroupProfileDefault from '@/assets/icons/group-profile-default.webp';
+
+const GroupItem = async ({
+  params: { lng },
+  groupParams,
+}: {
+  params: PropsWithLng;
+  groupParams: {
+    group: GroupInfo;
+  };
+}) => {
+  const group = groupParams.group;
+
+  return (
+    <div className="w-full rounded-[15px] bg-greyLight p-5">
+      <div className="flex items-center">
+        <Image
+          src={GroupProfileDefault}
+          alt="group-default-profile"
+          width={40}
+          height={40}
+        />
+
+        <p className="ml-[15px] mr-[5px] text-xl font-semibold text-text">
+          {group.name}
+        </p>
+
+        {group.president && (
+          <Crown className="ml-1 inline stroke-text" />
+        )}
+
+        <div className="flex-grow" />
+
+        <Link href={`/group/${group.uuid}`}>
+          <ArrowRight className="h-[30px] stroke-text" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GroupItem;

src/app/[lng]/(group)/group/NotInGroup.tsx

@@ -1,9 +1,9 @@
-import { PropsWithLng } from '@/app/i18next';
+import { createTranslation, PropsWithLng } from '@/app/i18next';
 import { useTranslation } from '@/app/i18next/client';
 import BonFire from '@/assets/logos/bonfire.svg';
 
-const NotInGroup = ({ params: { lng } }: { params: PropsWithLng }) => {
-  const { t } = useTranslation(lng);
+const NotInGroup = async ({ params: { lng } }: { params: PropsWithLng }) => {
+  const { t } = await createTranslation(lng);
 
   return (
     <div className="flex flex-col items-center ">

src/app/[lng]/(group)/group/page.tsx

@@ -2,16 +2,15 @@ import 'react-calendar/dist/Calendar.css';
 import 'react-clock/dist/Clock.css';
 import 'react-datetime-picker/dist/DateTimePicker.css';
 
-import * as process from 'node:process';
-
+import dayjs from 'dayjs';
 import { redirect } from 'next/navigation';
 
 import { auth } from '@/api/auth/auth';
-import { getGroupContainMe } from '@/api/group/group';
+import { getGroupContainingMe, GroupInfo } from '@/api/group/group';
 import Button from '@/app/components/atoms/Button';
 import { createTranslation, PropsWithLng } from '@/app/i18next';
 
-import GroupList from './GroupList';
+import GroupItem from './GroupItem';
 import NotInGroup from './NotInGroup';
 
 const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => {
@@ -20,41 +19,53 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => {
   const userData = await auth();
   if (!userData) redirect(`/${lng}/login`);
 
-  // const groupList = await getGroupContainMe('included');
+  const groupList = await getGroupContainingMe();
+
+  console.log(groupList);
 
-  const exampleData = [
+  const exampleData: GroupInfo[] = [
     {
+      uuid: '1',
       name: '테스트용 그룹',
       description: '그룹 설명',
-      createdAt: new Date(),
-      leaderName: 'XXX',
-      memberCount: 21,
-      isAdmin: true,
+      createdAt: dayjs(new Date()),
+      count: 10,
+      presidentUuid: '1',
+      president: {
+        uuid: '1',
+        name: '테스트용',
+        email: '',
+        createdAt: dayjs(new Date()),
+      },
     },
     {
+      uuid: '2',
       name: '다음 그룹',
       description: '다음 그룹 설명',
-      createdAt: new Date(),
-      leaderName: 'XXX',
-      memberCount: 33,
-      isAdmin: false,
+      createdAt: dayjs(new Date()),
+      count: 10,
+      presidentUuid: '2',
+      president: {
+        uuid: '2',
+        name: '다음',
+        email: '',
+        createdAt: dayjs(new Date()),
+      },
     },
   ];
 
-  const emptyExampleData = [];
-
   return (
     <main className="flex flex-col items-center py-10">
-      <div className="content flex max-w-[600px] flex-col items-center">
+      <div className="content flex max-w-[600px] flex-col items-center gap-[10px]">
         <div className="title mb-10 w-full text-4xl font-bold text-text">
           {t('group.mainTitle')}
         </div>
-        {exampleData.length === 0 ? (
+        {groupList.length === 0 ? (
           <NotInGroup params={{ lng }} />
         ) : (
-          exampleData.map((group) => {
+          groupList.map((group) => {
             return (
-              <GroupList
+              <GroupItem
                 params={{ lng }}
                 key={group.name}
                 groupParams={{ group }}

src/app/api/vapor-bff/[...ziggle]/route.ts

@@ -9,7 +9,7 @@ const router = async (
   },
 ) => {
   const url = new URL(request.url);
-  const base = process.env.VAPOR_URL;
+  const base = process.env.NEXT_VAPOR_API_URL;
   const path = context.params.ziggle.join('/');
   const search = url.searchParams;
   const session = await auth();

src/app/components/molecules/Pagination/Pagination.tsx

@@ -52,23 +52,23 @@ const Pagination = ({ items, itemsPerPage, page }: PaginationProps) => {
         {page !== 0 ? (
           <Button animated>
             <Link href={generateLink(page - 1)}>
-              <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-text md:w-7 dark:stroke-dark_white" />
+              <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-text dark:stroke-dark_white md:w-7" />
             </Link>
           </Button>
         ) : (
           <Button disabled>
-            <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-grey md:w-7 dark:stroke-dark_grey" />
+            <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-grey dark:stroke-dark_grey md:w-7" />
           </Button>
         )}
         {page + 1 !== pages ? (
           <Button animated>
             <Link href={generateLink(page + 1)}>
-              <ArrowRightIcon className="w-6 fill-none stroke-text md:w-7 dark:stroke-dark_white" />
+              <ArrowRightIcon className="w-6 fill-none stroke-text dark:stroke-dark_white md:w-7" />
             </Link>
           </Button>
         ) : (
           <Button disabled>
-            <ArrowRightIcon className="w-6 fill-none stroke-grey md:w-7 dark:stroke-dark_grey" />
+            <ArrowRightIcon className="w-6 stroke-grey dark:stroke-dark_grey md:w-7" />
           </Button>
         )}
       </div>