✨ : #492 - FootPrintItem 컴포넌트 기본 로직 정의

src/app/footprints/_Components/FootPrintList/FootPrintList.tsx

@@ -12,6 +12,8 @@ export default function FootPrintList({ year, plan }: FootPrintListProps) {
   // - plan.planId === -2 => 해당 year에 해당하는 계획이 없는 것
 
   return (
-    <div>{`${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력`}</div>
+    <ul>{`${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력`}</ul>
+
+    // TODO: footPrintList.map((item)=>{return <FootPrintItem props={item. ~}/>})
   );
 }

src/app/footprints/_Components/FootprintItem/FootprintItem.tsx

@@ -0,0 +1,44 @@
+import { AjajaButton, Tag } from '@/components';
+import classNames from 'classnames';
+import Link from 'next/link';
+import React from 'react';
+import './index.scss';
+
+interface FootprintItemProps {
+  id: number;
+  iconNumber: number;
+  title: string;
+  createdAt: string;
+  ajajas: number;
+  tags: string[];
+}
+
+export default function FootprintItem({
+  id,
+  iconNumber,
+  title,
+  createdAt,
+  ajajas,
+  tags,
+}: FootprintItemProps) {
+  return (
+    <li key={id}>
+      <Link
+        href={`/발자취단건조회/${id}`}
+        className={classNames('footprint-item')}>
+        <div className={classNames('footprint-item__title')}>
+          {iconNumber + title}
+        </div>
+        <div className={classNames('footprint-item__createAt')}>
+          {`${createdAt} 작성`}
+        </div>
+        <AjajaButton ajajaCount={ajajas} isFilled={true} disabled />
+        <div className={classNames('footprint-item__tags')}>
+          {tags.map((tagString, idx) => {
+            return <Tag key={idx}>{tagString}</Tag>;
+          })}
+        </div>
+      </Link>
+    </li>
+  );
+}

src/app/footprints/_Components/FootprintItem/index.scss

@@ -0,0 +1,16 @@
+.footprint-item {
+  display: flex;
+  flex-direction: column;
+
+  &__title{
+
+  }
+
+  &__createdAt{
+
+  }
+
+  &__tags{
+
+  }
+}