💄 : #492 - FootPrintList 스크롤 위해 height 설정

New-Barams · Apr 23, 2024 · 37638f0 · 37638f0
1 parent e71a5be
commit 37638f0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx b/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx
@@ -38,7 +38,31 @@ const dummyFootPrintList: FootPrintItemType[] = [
   {
     id: 3,
     iconNumber: 1,
-    title: '발자취1',
+    title: '발자취3',
+    createdAt: '2024.04.22',
+    ajajas: 3,
+    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+  },
+  {
+    id: 4,
+    iconNumber: 0,
+    title: '발자취4',
+    createdAt: '2024.04.22',
+    ajajas: 1,
+    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+  },
+  {
+    id: 5,
+    iconNumber: 1,
+    title: '발자취5',
+    createdAt: '2024.04.22',
+    ajajas: 2,
+    tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
+  },
+  {
+    id: 6,
+    iconNumber: 1,
+    title: '발자취6',
     createdAt: '2024.04.22',
     ajajas: 3,
     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
@@ -51,24 +75,22 @@ export default function FootPrintList({ year, plan }: FootPrintListProps) {
   // - plan.planId === -2 => 해당 year에 해당하는 계획이 없는 것
 
   return (
-    <>
-      <ul className={classNames('footprint-list')}>
-        {dummyFootPrintList.map((item) => {
-          return (
-            <FootprintItem
-              key={item.id}
-              id={item.id}
-              iconNumber={item.iconNumber}
-              title={item.title}
-              createdAt={item.createdAt}
-              ajajas={item.ajajas}
-              tags={item.tags}
-            />
-          );
-        })}
-      </ul>
-      <div>{`${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력`}</div>
-    </>
+    <ul className={classNames('footprint-list')}>
+      {dummyFootPrintList.map((item) => {
+        return (
+          <FootprintItem
+            key={item.id}
+            id={item.id}
+            iconNumber={item.iconNumber}
+            title={item.title}
+            createdAt={item.createdAt}
+            ajajas={item.ajajas}
+            tags={item.tags}
+          />
+        );
+      })}
+      <div>{`${year}와 ${plan}에 해당하는 FootPrintList`}</div>
+    </ul>
     // TODO: `${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력`
   );
 }
diff --git a/src/app/footprints/_Components/MyFootPrints/index.scss b/src/app/footprints/_Components/MyFootPrints/index.scss
@@ -1,5 +1,5 @@
 .my-footprints {
-  margin-top: 0.5rem;
+  height: calc(100% - 2rem - 34px);
   display: flex;
   flex-direction: column;
   gap: 1rem;

diff --git a/src/app/footprints/index.scss b/src/app/footprints/index.scss
@@ -1,7 +1,7 @@
 .footprint-page {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 1rem);
 }