enhance(frontend): イベントリストにMansoryレイアウトを導入

shrimpia · Mar 25, 2024 · f0f019c · f0f019c
1 parent bb836fa
commit f0f019c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -24,6 +24,7 @@
     "react-bootstrap": "^2.8.0",
     "react-datepicker": "^4.23.0",
     "react-dom": "^18.2.0",
+    "react-masonry-css": "^1.0.16",
     "react-query": "^3.39.3",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0",

diff --git a/packages/frontend/src/components/domains/events/EventCardView.scss b/packages/frontend/src/components/domains/events/EventCardView.scss
@@ -1,5 +1,4 @@
 .card {
-    max-width: 480px;
     &.official {
         border-left: 5px solid var(--bs-primary);
     }

diff --git a/packages/frontend/src/components/subpages/events/EventListView.tsx b/packages/frontend/src/components/subpages/events/EventListView.tsx
@@ -1,5 +1,5 @@
 import { useAtomValue } from 'jotai';
-import { Stack } from 'react-bootstrap';
+import Masonry from 'react-masonry-css';
 
 import { EventCardView } from '@/components/domains/events/EventCardView';
 import { allEventsAtom } from '@/states/events';
@@ -8,10 +8,14 @@ export const EventListView: React.FC = () => {
   const allEvents = useAtomValue(allEventsAtom);
 
   return (
-    <Stack gap={2}>
+    <Masonry breakpointCols={{
+      default: 3,
+      992: 2,
+      768: 1,
+    }} className="d-flex gap-3" columnClassName="d-flex flex-column gap-3">
       {allEvents.map((event) => (
-        <EventCardView event={event} key={event.id} />
+        <EventCardView key={event.id} event={event} />
       ))}
-    </Stack>
+    </Masonry>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml