feat: static my stays

components/MyPages/Blocks/Stays/StayList/index.tsx

@@ -0,0 +1,28 @@
+import Button from "@/components/TempDesignSystem/Button"
+import StayCard from "../StayCard"
+
+import styles from "./stayList.module.css"
+
+import { StayListProps } from "@/types/components/myPages/stays/stayList"
+
+export default function StayList({ lang, stays }: StayListProps) {
+  return (
+    <section>
+      <section className={styles.stays}>
+        {stays.map((stay) => (
+          <StayCard
+            key={stay.uid}
+            stay={stay}
+            lang={lang}
+            showDayCount={true}
+          />
+        ))}
+      </section>
+      <div className={styles.buttonContainer}>
+        <Button intent="primary" type="button">
+          Show more
+        </Button>
+      </div>
+    </section>
+  )
+}

components/MyPages/Blocks/Stays/StayList/stayList.module.css

@@ -0,0 +1,32 @@
+.stays {
+  display: grid;
+  row-gap: 1.5rem;
+  column-gap: 2.2rem;
+  grid-template-columns: auto;
+
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+  scrollbar-width: none;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.stays::-webkit-scrollbar {
+  display: none;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+@media screen and (min-width: 950px) {
+  .stays {
+    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+  }
+
+  .buttonContainer {
+    margin-top: 4rem;
+  }
+}