Merge pull request #242 from SWM-FIRE/FIRE-716-carousel-적용하기

Fire 716 carousel 적용하기

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-horizontal-scrolling-menu": "^3.1.0",
     "react-hot-toast": "^2.3.0",
+    "react-items-carousel": "^2.8.0",
     "react-notion": "^0.10.0",
     "react-query": "^3.39.1",
     "react-router-dom": "6",

src/components/main/CreateRoom.tsx

@@ -13,7 +13,7 @@ export default function CreateRoom({
       <Enter onClick={openCreateRoom} data-cy="create-room-modal-open">
         <Plus />
       </Enter>
-      <Title>모도코 방을 만들어 보세요!</Title>
+      <Title>새로운 방 만들기</Title>
     </Container>
   );
 }
@@ -59,14 +59,23 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   gap: 1rem;
+  ${media.xlarge} {
+    width: 29.4rem;
+  }
   ${media.medium} {
-    min-width: 29.8rem;
+    width: 29.4rem;
   }
   ${media.small} {
-    min-width: 18rem;
-    height: 20rem;
+    height: 18rem;
+    width: 17.4rem;
+    padding: 3rem 0.7rem;
   }
   ${media.xsmall} {
-    min-width: 12.8rem;
+    height: 13rem;
+    width: 12.3rem;
+    padding: 2rem 0.7rem;
+  }
+  ${media.xxsmall} {
+    width: 11rem;
   }
 `;

src/components/main/RoomCards.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import ItemsCarousel from 'react-items-carousel';
 import media from 'src/styles/media';
 import Block from './block/Block';
 import useRooms from '../../hooks/useRooms';
 import { filterData } from './filterData';
+import { ReactComponent as LeftArrow } from '../../assets/svg/Left.svg';
+import { ReactComponent as RightArrow } from '../../assets/svg/Right.svg';
 import searchInputStore from '../../stores/searchInputStore';
 import EmptyBlock from './block/EmptyBlock';
 import { filterMyData } from './filterMyData';
@@ -17,29 +20,83 @@ export default function RoomCards({
 }) {
   const { searchInput } = searchInputStore();
   const { isLoading, error, data } = useRooms();
+  const [activeItemIndex, setActiveItemIndex] = useState(0);
+  const [numOfCards, setNumOfCards] = useState(4);
+  const [gutter, setGutter] = useState(28);
+
+  const resize = () => {
+    const width = window.innerWidth;
+    if (width < 300) {
+      setNumOfCards(1);
+      setGutter(0);
+    } else if (width < 500) {
+      setNumOfCards(2);
+    } else if (width < 768) {
+      setGutter(14);
+    } else if (width < 1024) {
+      setNumOfCards(2);
+    } else if (width < 1300) {
+      setNumOfCards(3);
+    } else {
+      setNumOfCards(4);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+    return () => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
 
   if (error) return <div>An error has occurred: </div>;
 
   const newData = filterData(data, searchInput);
   const newMyData = filterMyData(data);
+  const TRUE = true;
 
   return (
     <Container>
       <Title>내가 만든 모도코</Title>
       <MyRoomContainer>
-        {isLoading
-          ? [...Array(3)].map((no, index) => (
-              <EmptyBlock key={Symbol(index).toString()} isMain={false} />
-            ))
-          : newMyData.map((data) => {
-              return (
-                <MyBlock
-                  key={data.itemId.toString().concat('my')}
-                  data={data}
-                />
-              );
-            })}
-        <CreateRoom openCreateRoom={openCreateRoom} />
+        <ItemsCarousel
+          infiniteLoop={false}
+          chevronWidth={50}
+          gutter={gutter}
+          disableSwipe={false}
+          alwaysShowChevrons={false}
+          numberOfCards={numOfCards}
+          slidesToScroll={numOfCards}
+          outsideChevron={TRUE}
+          showSlither={false}
+          firstAndLastGutter={false}
+          activeItemIndex={activeItemIndex}
+          requestToChangeActive={(value) => setActiveItemIndex(value)}
+          rightChevron={
+            <Button type="button">
+              <RightArrow />
+            </Button>
+          }
+          leftChevron={
+            <Button type="button">
+              <LeftArrow />
+            </Button>
+          }
+        >
+          {isLoading
+            ? [...Array(3)].map((no, index) => (
+                <EmptyBlock key={Symbol(index).toString()} isMain={false} />
+              ))
+            : newMyData.map((data) => {
+                return (
+                  <MyBlock
+                    key={data.itemId.toString().concat('my')}
+                    data={data}
+                  />
+                );
+              })}
+          <CreateRoom openCreateRoom={openCreateRoom} />
+        </ItemsCarousel>
       </MyRoomContainer>
       <Title>공개</Title>
       <BlockContainer>
@@ -89,20 +146,23 @@ const BlockContainer = styled.div`
 `;
 
 const MyRoomContainer = styled.div`
-  display: flex;
-  gap: 2.8rem;
+  /* display: flex; */
+  /* gap: 2.8rem; */
   width: 100%;
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
+
   ::-webkit-scrollbar {
     display: none;
   }
-
+  /* ${media.large} {
+    gap: 2rem;
+  }
   ${media.medium} {
     gap: 2.8rem;
   }
   ${media.small} {
     gap: 1.3rem;
-  }
+  } */
 `;
 
 const Title = styled.h2`
@@ -111,3 +171,22 @@ const Title = styled.h2`
   font-family: IBMPlexSansKRRegular, Arial;
   margin: 5rem 0 2rem 0;
 `;
+
+const Button = styled.button`
+  background-color: #23262f9b;
+  color: white;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    background-color: #23262f;
+  }
+  svg {
+    width: 70%;
+    height: 70%;
+  }
+`;

src/components/main/block/MyBlock.tsx

@@ -84,14 +84,24 @@ const Container = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 4.3rem 1rem;
+  box-sizing: border-box;
+  ${media.xlarge} {
+    width: 29.4rem;
+  }
   ${media.medium} {
-    min-width: 29.8rem;
+    width: 29.4rem;
   }
   ${media.small} {
-    min-width: 18rem;
-    height: 20rem;
+    height: 18rem;
+    width: 17.4rem;
+    padding: 3rem 0.7rem;
   }
   ${media.xsmall} {
-    min-width: 12.8rem;
+    height: 13rem;
+    width: 12.3rem;
+    padding: 2rem 0.7rem;
+  }
+  ${media.xxsmall} {
+    width: 11rem;
   }
 `;