✨ feat : Create a Card Component Layout

- Make duplicate code into components for easier reuse
- Add interface files to apply the required types to each component

Related issue: YJU-OKURA#59

src/app/components/card/Card.tsx

@@ -0,0 +1,52 @@
+'use client';
+import Image from 'next/image';
+import {CardProps} from '@/src/interfaces/group/cardProps';
+import icons from '@/public/svgs/group';
+
+const Card = ({
+  ImageSrc,
+  GroupName,
+  GroupContent,
+  FavoriteChecked,
+}: CardProps) => {
+  return (
+    <div className="border rounded-lg w-80 h-72 border-gray-300 mr-10 mb-10 hover:shadow-md active:bg-neutral-50 focus:ring focus:ring-gray-400 transform hover:scale-105 transition duration-200 ease-in-out">
+      <div className="flex justify-center items-center mt-2">
+        <div className="w-72 h-44 relative overflow-hidden">
+          <Image
+            src={ImageSrc}
+            alt={'Card Image'}
+            priority={true}
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+      </div>
+      <div className="flex place-content-between ms-4 mt-2">
+        <h3 className="font-bold text-lg">{GroupName}</h3>
+        {FavoriteChecked ? (
+          <Image
+            src={icons.favorite}
+            alt="favoriteChecked"
+            width={24}
+            height={24}
+            className="items-center me-2"
+          />
+        ) : (
+          <Image
+            src={icons.noneFavorite}
+            alt="noneFavoriteChecked"
+            width={24}
+            height={24}
+            className="items-center me-2"
+          />
+        )}
+      </div>
+      <p className="text-base ms-4 mt-2 me-2 overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {GroupContent}
+      </p>
+    </div>
+  );
+};
+
+export default Card;

src/app/components/card/Invitation.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Image from 'next/image';
+import {InvitationProps} from '@/src/interfaces/group/invitationProps';
+
+const Invitation = ({ImageSrc, GroupName, ManagerName}: InvitationProps) => {
+  return (
+    <div className="border rounded-lg w-80 h-72 overflow-hidden border-gray-300 mr-10 mb-10 hover:shadow-lg active:bg-neutral-50 focus:ring focus:ring-gray-400 transform hover:scale-105 transition duration-200 ease-in-out">
+      <div className="flex justify-center items-center">
+        <div className="w-72 h-44 relative overflow-hidden">
+          <Image
+            src={ImageSrc}
+            alt={'Card Image'}
+            priority={true}
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+      </div>
+      <div className="p-4">
+        <h3 className="font-semibold text-lg text-violet-500 mb-2">
+          {GroupName}
+        </h3>
+        <p className="text-base text-gray-700">
+          Invited by{' '}
+          <span className="font-semibold text-rose-500">{ManagerName}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Invitation;

src/app/components/card/index.ts

@@ -0,0 +1,4 @@
+import Card from './Card';
+import Invitation from './Invitation';
+
+export {Card, Invitation};

src/interfaces/group/cardProps.ts

@@ -0,0 +1,8 @@
+interface CardProps {
+  ImageSrc: string;
+  GroupName: string;
+  GroupContent: string;
+  FavoriteChecked: boolean;
+}
+
+export type {CardProps};

src/interfaces/group/invitationProps.ts

@@ -0,0 +1,7 @@
+interface InvitationProps {
+  ImageSrc: string;
+  GroupName: string;
+  ManagerName: string;
+}
+
+export type {InvitationProps};